0

I have a form on a webpage that is dynamic (changes when certain fields are updated). I am able to update the value of the dropdown but it does not cause the form to change or update based on this selection as it would if manually selected. For instance if I select 'Payment Plans Activity' a date field might show up that wasn't there before and so on. As you can see below, it updates the class 'styledSelect' to the new value but the selected values don't change. Below is what I have tried so far and the HTML as well.

JavaScript

var rep = document.getElementById("report_select");
rep.value = 'payment_plan_activity_v2'


// What solutions I tried to find that didn't work
document.getElementById("report-form").reset() //Didn't do anything
parent.document.getElementById("report-form").reload() //Didn't work

HTML

<form id="report-form" data-url="/reports" class="report-form" action="/reports" accept-charset="UTF-8" method="post">
    <input name="utf8" type="hidden" value="✓">
        <input type="hidden" name="authenticity_token" value="N90zoc0xgUnv8cx37YQBsvRkefoK7BLysTgqOpXkVAiEa5ehEUYg4jGl7yHCDVzNZGxGa4ONLQkIzP8pXi5frA==">
            <div class="filters float-left">
                <label for="report_select-combobox">Report</label>
                <div class="select simpleeSelect report-select select-reports-list">
                    <input role="combobox" type="text" class="selectAutoCompleteInput" id="report_select-combobox" style="width: 170px; height: 29px;">
                        <select name="report" id="report_select" autocomplete="false" class="simpleeSelect report-select select-reports-list" tabindex="-1">
                            <option value="account_balances" selected="selected">Account Balances</option>
                            <option value="ach_transfers">Ach Transfers</option>
                            <option value="suspicious_accounts">Blocked Accounts</option>
                            <option value="communication_v2">Communication</option>
                            <option value="declined_payments">Declined Payments</option>
                            <option value="devices">Devices</option>
                            <option value="subscription_log">Email Subscription Updates</option>
                            <option value="ivr_calls">IVR</option>
                            <option value="manual_payments">Manual Payments</option>
                            <option value="email_activity_log">New Emails</option>
                            <option value="payments_summary">Operational</option>
                            <option value="osg_ncoa">Paper Statements Forwarded</option>
                            <option value="paper_statements_summary">Paper Statements Summary</option>
                            <option value="nixie">Paper Statements Undeliverable</option>
                            <option value="paperless_activation">Paperless</option>
                            <option value="payment_plan_activity_v2">Payment Plans Activity</option>
                            <option value="payment_plan_inventory_v2">Payment Plans Inventory</option>
                            <option value="payments_summary_by_user">Payments By User</option>
                            <option value="payments_detailed">Payments Detailed</option>
                            <option value="payments_summary_by_sub_department_and_provider">Payments Summary by Sub Department &amp; Facility</option>
                            <option value="pre_service_appointments">Pre-Service Appointments</option>
                            <option value="reconciliation">Reconciliation</option>
                            <option value="echeck_bounce">Returned Checks</option>
                            <option value="scheduled_payments">Scheduled Payments</option>
                            <option value="billing">Simplee Billing</option>
                            <option value="sms_subscription_log">Text Messaging Subscription</option>
                            <option value="voided_payments">Voided Payments</option>
                        </select>
                        <div class="styledSelect">
                            <span>Payment Plans Activity</span>
                            <div class="styledSelect-caret-container">
                                <i class="caret styledSelect-caret"/>
                            </div>
                        </div>
                        <ul class="options" style="display: none;">
                            <li rel="account_balances" class="selected">Account Balances</li>
                            <li rel="ach_transfers" class="">Ach Transfers</li>
                            <li rel="suspicious_accounts">Blocked Accounts</li>
                            <li rel="communication_v2">Communication</li>
                            <li rel="declined_payments" class="">Declined Payments</li>
                            <li rel="devices" class="">Devices</li>
                            <li rel="subscription_log">Email Subscription Updates</li>
                            <li rel="ivr_calls">IVR</li>
                            <li rel="manual_payments">Manual Payments</li>
                            <li rel="email_activity_log">New Emails</li>
                            <li rel="payments_summary">Operational</li>
                            <li rel="osg_ncoa">Paper Statements Forwarded</li>
                            <li rel="paper_statements_summary">Paper Statements Summary</li>
                            <li rel="nixie" class="">Paper Statements Undeliverable</li>
                            <li rel="paperless_activation" class="">Paperless</li>
                            <li rel="payment_plan_activity_v2" class="">Payment Plans Activity</li>
                            <li rel="payment_plan_inventory_v2" class="">Payment Plans Inventory</li>
                            <li rel="payments_summary_by_user" class="">Payments By User</li>
                            <li rel="payments_detailed">Payments Detailed</li>
                            <li rel="payments_summary_by_sub_department_and_provider">Payments Summary by Sub Department &amp; Facility</li>
                            <li rel="pre_service_appointments">Pre-Service Appointments</li>
                            <li rel="reconciliation">Reconciliation</li>
                            <li rel="echeck_bounce">Returned Checks</li>
                            <li rel="scheduled_payments">Scheduled Payments</li>
                            <li rel="billing">Simplee Billing</li>
                            <li rel="sms_subscription_log">Text Messaging Subscription</li>
                            <li rel="voided_payments">Voided Payments</li>
                        </ul>
                    </div>
Blake Daniel
  • 45
  • 6
  • `it does not cause the form to change or update based on this selection`...is there some other JS code which does that, then? e.g. an event listener listening to the "change" event on the select, perhaps? – ADyson Jun 08 '22 at 21:19
  • https://jsfiddle.net/4mf1evLn/ - reset() seems to work ok for me. Please provide a [mre] of your issue. The main thing I can could find online relating to that problem says "If a form control (such as a reset button) has a name or id of reset it will mask the form's reset method." - maybe that's the case for you, but we can't tell as the code you've posted is out of context. There's also some other less likely reasons here: https://bobbyhadz.com/blog/javascript-typeerror-form-reset-is-not-a-function#solve---formreset-not-a-function-error – ADyson Jun 08 '22 at 21:25
  • 1
    Change `rep.value = 'Option 2';` to `rep.value = 'suspicious_accounts';` OR `rep.selectedIndex = 2;`. – bloodyKnuckles Jun 08 '22 at 22:08
  • Not sure why this was flagged as duplicate... Where it says this was answered is not what I am asking. I know how to update a value and that's not what I'm asking. It's after the value is updated the form needs to be refreshed as the field is dynamic and updates the form when certain dropdown choices are made. And when I do it in JavaScript it doesn't refresh. – Blake Daniel Jun 09 '22 at 12:29
  • I agree that's probably the wrong duplicate - I've re-opened the question for now. But nevertheless the question is still unclear and could easily be closed for that reason instead. Have you reviewed my earlier comments and done any investigation? Do you have any updates for us, such as a [mre] of your issue, and/or any debugging info? – ADyson Jun 09 '22 at 12:43
  • @ADyson Thanks, I went ahead and added more of the HTML to make it clearer. – Blake Daniel Jun 09 '22 at 13:30
  • Thanks. But if you look carefully at what I was saying earlier, it's primarily the JS code which is lacking - it's out of context and there may be parts missing. – ADyson Jun 09 '22 at 13:39
  • @ADyson I did update it a little, I'm not sure what part of the JS is out of context. The first two lines are what you normally do to update a value with JS. The second part is just me attempting to find a solution to do some sort of refresh on the form which may or may not be the way to go about it. – Blake Daniel Jun 09 '22 at 13:47
  • Yeah but read my first two comments again. You seem to be expecting something extra to happen when the value changes and its unclear why. And the resetting command does work if it's used properly, as I demoed. The fact it doesn't work for you may be symptomatic of something else, but we can't tell because you have just shown isolated bits of code instead of a [mre] of your issue - I.e. enough relevant code and data which actually would show the problem if we ran it. That's what I mean by context. Right now we can't do anything meaningful with those snippets, we don't know how you call them. – ADyson Jun 09 '22 at 16:00

0 Answers0