在触发onchange事件时更改表单操作 <select>在页面上有2种形式

Question

I ran into an issue where I have two forms on a page -

1. A desktop version of the form
2. A mobile version.

Both forms don't show to the user as it depends on their viewport or device. When the user selects "Student Loan" from the agency drop-down selection (in either form), we want the form submission's action to be /quote/quotes-sl.php instead of the form default of /quote/quotes.php .

The good news is that on the mobile-friendly form (the first form in the code below), the solution works. However, for the desktop form, it does not even though it has the same form id/name. I tried renaming the desktop form to have a different form id/name. I tried renaming the desktop form to have a different form ID/name` and then add another script for that form, but that doesn't work.

Any direction or advice is greatly appreciated.

  (function() { var theForm = document.getElementById('tdhcustom-pre-1-form'); var theSelector = document.getElementById('agency'); theSelector.onchange = function() { theForm.action = theSelector[theSelector.selectedIndex].getAttribute('data-action'); } })(); 

  <form id="tdhcustom-pre-1-form" accept-charset="UTF-8" action="/quote/quotes.php" method="post" name="tdhcustom-pre-1-form"> <div> <input id="edit-lead-source-description" name="lead_source_description" type="hidden" value="1.test" /> <div id="edit-owed-wrapper" class="form-item"> <label class="edit-owed" for="edit-owed"> Tax Debt Owed: <span class="form-required" title="This field is required.">*</span></label> <select id="edit-owed" class="form-select required" name="owed"> <option selected="selected" value="">Select...</option> <option value="$30,000 to $39,999">$30,000 to $39,999</option> <option value="$40,000 to $59,999">$40,000 to $59,999</option> <option value="$60,000 to $79,999">$60,000 to $79,999</option> <option value="$80,000 to $99,999">$80,000 to $99,999</option> <option value="$100,000+">$100,000 +</option> </select> </div> <div id="edit-agency-wrapper" class="form-item"> <label class="edit-agency" for="edit-agency"> Tax Agency: <span class="form-required" title="This field is required.">*</span></label> <select id="agency" class="form-select required" name="agency"> <option selected="selected" value="">Select Agency...</option> <option value="Student Loan" data-action="/quote/quotes-sl.php">Student Loan</option> <option value="Federal" data-action="/quote/quotes.php">Federal</option> <option value="STATE" data-action="/quote/quotes.php">State</option> <option value="FEDERAL_AND_STATE" data-action="/quote/quotes.php">Federal and State</option> </select> </div> <input id="edit-submit" class="form-submit" height="31" name="submit" src="http://www.test.com/wp-content/uploads/2009/07/form-submit-6-17-small.png" type="image" value="Submit" width="214" /> <input id="form-5ezy7kqpVIYFiVUgKIyxbp4n6MQ7ZqHuo33GJbq0QZE" name="form_build_id" type="hidden" value="form-5ezy7kqpVIYFiVUgKIyxbp4n6MQ7ZqHuo33GJbq0QZE" /> <input id="edit-tdhcustom-pre-1-form" name="form_id" type="hidden" value="tdhcustom_pre_1_form" /> </div> </form> <div class="mycustombanner desk-view"> <img class="wp-image-12546 size-full alignnone" src="http://www.test.com/wp-content/uploads/2009/12/top-form-irs-hardship-status.png" alt="irs hardship status" width="618" height="194" /> <form id="tdhcustom-pre-1-form" accept-charset="UTF-8" action="/quote/quotes.php" method="post" name="tdhcustom-pre-2-form"> <div> <input id="edit-lead-source-description" name="lead_source_description" type="hidden" value="1.test-desktop" /> <div id="edit-owed-wrapper" class="form-item"> <label for="edit-owed"> Tax Debt Owed: <span class="form-required" title="This field is required.">*</span></label> <select id="edit-owed" class="form-select required" name="owed"> <option selected="selected" value="">Select...</option> <option value="$30,000 to $39,999">$30,000 to $39,999</option> <option value="$40,000 to $59,999">$40,000 to $59,999</option> <option value="$60,000 to $79,999">$60,000 to $79,999</option> <option value="$80,000 to $99,999">$80,000 to $99,999</option> <option value="$100,000+">$100,000 +</option> </select> </div> <div id="edit-agency-wrapper" class="form-item"> <label for="edit-agency"> Tax Agency: <span class="form-required" title="This field is required.">*</span></label> <select id="agency" class="form-select required" name="agency"> <option selected="selected" value="">Select Agency...</option> <option value="Student Loan" data-action="/quote/quotes-sl.php">Student Loan</option> <option value="Federal" data-action="/quote/quotes.php">Federal</option> <option value="STATE" data-action="/quote/quotes.php">State</option> <option value="FEDERAL_AND_STATE" data-action="/quote/quotes.php">Federal and State</option> </select> </div> <input id="edit-submit" class="form-submit" height="37" name="submit" src="http://www.test.com/wp-content/uploads/2010/04/form-submit-6-17-1.png" type="image" value="Submit" width="207" /> <input id="form-5ezy7kqpVIYFiVUgKIyxbp4n6MQ7ZqHuo33GJbq0QZE" name="form_build_id" type="hidden" value="form-5ezy7kqpVIYFiVUgKIyxbp4n6MQ7ZqHuo33GJbq0QZE" /> <input id="edit-tdhcustom-pre-1-form" name="form_id" type="hidden" value="tdhcustom_pre_1_form" /> </form> </div> 

Answer 1

It is invalid HTML to have more than one element with the same ID in one document - that's why the selector is failing.

Try giving both forms different IDs, as well as for the select element, for example:

<form id="tdhcustom-pre-1-form1"...
<select id="agency1"...

...
...

<form id="tdhcustom-pre-1-form2"...
<select id="agency2"...

Then you could do:

 [ ['tdhcustom-pre-1-form1', 'agency1'], ['tdhcustom-pre-1-form2', 'agency2'], ].forEach(([formSelector, agencySelector]) => { const form = document.getElementById(formSelector); const agency = document.getElementById(agencySelector); agency.addEventListener('change', () => { form.action = agency[agency.selectedIndex].getAttribute('data-action'); }); }); 

Answer 2

Now that I've looked at your code more, I'm going to say more confidently that sharing the same id between your forms is the problem you're having. This line:

var theForm = document.getElementById('tdhcustom-pre-1-form');

...isn't going to care which form is hidden, and which form is shown. It's always going to return you the same form. Your browser must be favoring the mobile form over the desktop form.