HTML form dropdown and corresponding input-CodePudding

I do not know how to properly ask this question. How do I make an input change based on selected dropdown?

I am new to coding. I am trying to create a form with a drop down that preselects some information for a donate page. The only fields that can be accepted from my form are: TRACKING_CODE, AFUND1, and AGIFT_AMOUNT1. (AFUND1 through AFUND30 and AGIFT_AMOUNT1- AGIFT_AMOUNT30)

I created a drop down with the options, but how do I make it so that the input changes to the corresponding AFUND# and AGIFT_AMOUNT# (AFUND1 through AFUND4 and AGIFT_AMOUNT1- AGIFT_AMOUNT4)?

<form id="donation-form" action="PaymentTransfer.aspx"  method="post">
  <input name="TRACKING_CODE" type="hidden" value="23385966">
  <div>
    <select id="funds-list" >
      <option value="" disabled="disabled" selected="selected">Choose a fund</option>
      <option value="1140742/College of Business Scholarship Fund">College of Business Scholarship Fund
      </option>
      <option value="114177/College of Business Faculty Excellence Fund">College of Business Faculty Excellence Fund</option>
      <option value="113119/College of Business Innovation Fund">College of Business Innovation Fund
      </option>
      <option value="113119/College of Business Annual Fund">College of Business Annual Fund
      </option>
      <option value="113014/College of Business Emergency Scholarship Fund">College of Business Emergency Scholarship Fund</option>
    </select>
  </div>
  <div >
    <span  role="presentation">
                $
            </span>
    <input type="hidden" name="AFUND1" value="1140742/College of Business Scholarship Fund">
    <input  id="fund-1140742" type="number" min="5" name="AGIFT_AMOUNT1" label="gift dollar amount for College of Business Scholarship Fund">
  </div>
  <input type="submit" value="Continue">
</form>

CodePudding user response：

So when you change the dropdown you get the selectedIndex which is used to rename your 2 inputs to the desired(?) name.

var list = document.querySelector("#funds-list");

list.addEventListener("change", function(ev) {

  var index = list.selectedIndex
  var fund = document.querySelector("[data-fund=true]");
  var amount = document.querySelector("[data-amount=true]");
  
  fund.setAttribute('name', 'AFUND'   index)
  amount.setAttribute('name', 'AGIFT_AMOUNT'   index)
  
  console.log(`renamed to AFUND${index} and AGIFT_AMOUNT${index}`)
})

<form id="donation-form" action="PaymentTransfer.aspx"  method="post">
  <input name="TRACKING_CODE" type="hidden" value="23385966">
  <div>
    <select id="funds-list" >
      <option value="" disabled="disabled" selected="selected">Choose a fund</option>
      <option value="1140742/College of Business Scholarship Fund">College of Business Scholarship Fund
      </option>
      <option value="114177/College of Business Faculty Excellence Fund">College of Business Faculty Excellence Fund</option>
      <option value="113119/College of Business Innovation Fund">College of Business Innovation Fund
      </option>
      <option value="113119/College of Business Annual Fund">College of Business Annual Fund
      </option>
      <option value="113014/College of Business Emergency Scholarship Fund">College of Business Emergency Scholarship Fund</option>
    </select>
  </div>
  <div >
    <span  role="presentation">$</span>
    <input data-fund="true" type="hidden" name="AFUND1" value="1140742/College of Business Scholarship Fund">
    <input data-amount="true"  id="fund-1140742" type="number" min="5" name="AGIFT_AMOUNT1" label="gift dollar amount for College of Business Scholarship Fund">
  </div>
  <input type="submit" value="Continue">
</form>

CodePudding user response：

You can take use of the custom data attributes on your Options, see below: data-AFUND and data-AGIFT

<form id="donation-form" action="PaymentTransfer.aspx"  method="post">
  <input name="TRACKING_CODE" type="hidden" value="23385966">
  <div>
    <select id="funds-list" >
      <option value="" disabled="disabled" selected="selected">Choose a fund</option>
      <option value="1140742/College of Business Scholarship Fund" data-AFUND="AFUND1" data-AGIFT="AGIFT_AMOUNT1">College of Business Scholarship Fund
      </option>
      <option value="114177/College of Business Faculty Excellence Fund" data-AFUND="AFUND2" data-AGIFT="AGIFT_AMOUNT2">College of Business Faculty Excellence Fund</option>
      <option value="113119/College of Business Innovation Fund" data-AFUND="AFUND3" data-AGIFT="AGIFT_AMOUNT3">College of Business Innovation Fund
      </option>
      <option value="113119/College of Business Annual Fund" data-AFUND="AFUND4" data-AGIFT="AGIFT_AMOUNT4">College of Business Annual Fund
      </option>
      <option value="113014/College of Business Emergency Scholarship Fund" data-AFUND="AFUND5" data-AGIFT="AGIFT_AMOUNT5">College of Business Emergency Scholarship Fund</option>
    </select>
  </div>
  <div >
    <span  role="presentation">
                $
            </span>
    <input id="hidden-fund-input" type="hidden" name="AFUND1" value="1140742/College of Business Scholarship Fund">
    <input  id="fund-1140742" type="number" min="5" name="AGIFT_AMOUNT1" label="gift dollar amount for College of Business Scholarship Fund">
  </div>
  <input type="submit" value="Continue">
</form>

Then we can use javascript to change the input values whenever a new option is selected.

const fundList = document.getElementById('funds-list');
const hiddenFundInput = document.getElementById('hidden-fund-input');
const givingFundInput = document.getElementById('fund-1140742');

 // when a new option is selected
 fundList.onchange = function(e) {
    // get the option that is currently selected
    let selectedOption = fundList.options[fundList.selectedIndex];
    
    // get the data- attributes that was set in the HTML and 
    // assign to the inputs
    hiddenFundInput.name = selectedOption.getAttribute('data-AFUND');
    hiddenFundInput.value = selectedOption.value;
    givingFundInput.name = selectedOption.getAttribute('data-AGIFT');
    
 }

Jsfiddle Demo