Show input fields based on selection option showing up as empty after submit . JavaScript, JQuery & PHP

FireWD
March 10, 2023
189 views
0 votes
2 Answers

The problem : I implemented a simple display:none | display:block code which on selection is showing up relevant fields depending on the option selected. When I try to submit the information after the selection using a form and JQuery(as a handler), the values sent to the handler are empty.

My implementation:



<form id="InfoForm" method="POST">

<!-- Here there are other few fields but these are being sent correctly. -->

<select id="country" class="form-control" onchange="change()">

<option value="NL">Netherlands (NL)</option>
<option value="NZ">New Zealand (NZ)</option>
<option value="MK">North Macedonia (MK)</option>
<option value="US">United States Of America (US)</option>
<!-- ....other countries -->
 </select>


 <script>
function change() {
    d = document.getElementById("country").value;
   if(d == 'MK' || d == 'NL' || d == 'MZ') {
      document.getElementById("specific-formgroup3").style.display = "block";
      document.getElementById("specific-formgroup2").style.display = "none";
      document.getElementById("specific-formgroup4").style.display = "none";
      document.getElementById("specific-formgroup5").style.display = "none";
      document.getElementById("specific-formgroup6").style.display = "none";
//and so on .... 

    } else if (d == 'US') {
      $('#specific-formgroup2').show();
      $('#specific-formgroup3').hide();
      $('#specific-formgroup4').hide();
      $('#specific-formgroup5').hide();
      $('#specific-formgroup6').hide();
   //and so on .... 

// Here I tried to solve the problem using this JQuery implementation, it still is not working.
// Of course the if else list continues but I don't think I need to paste it here since it is too 
//  big. Otherwise I checked the syntax and everything is fine with the code following the one above.

    } 
}
</script>


<div id="specific-formgroup3" style="display: none;">
<div class="form-group">
<label>Specific Number</label>
<input type="text" class="form-control" id="som_num"   />
</div>
<div class="form-group">
<label>Account number</label>
<input type="text" class="form-control" id="som2_num"  />
</div>
</div>


<div id="specific-formgroup4" style="display: none;">
<div class="form-group">
<label>Other Number</label>
<input type="text" class="form-control" id="som_num" />
</div>
<div class="form-group">
<label>Account Number</label>
<input type="text" class="form-control" id="som2_num" />
</div>
</div>

<div id="specific-formgroup5" style="display: none;">
<div class="form-group">
<label>Institution number</label>
<input type="text" class="form-control" id="som_num" />
</div>
<div class="form-group">
<label>Account Number</label>
<input type="text" class="form-control" id="som2_num" />
</div>
</div>

<div id="specific-formgroup6" style="display: none;">
<div class="form-group">
<label>Code Number</label>
<input type="text" class="form-control" id="som_num" />
</div>
<div class="form-group">
<label>Account Number</label>
<input type="text" class="form-control" id="som2_num" />
</div>
</div>

 <div id="specific-formgroup2" style="display: none;">
<div class="form-group">
<label>Transit number</label>
<input type="text" class="form-control" id="som_num" />
</div>
<div class="form-group">
<label>Account Number</label>
<input type="text" class="form-control" id="som2_num" />
</div>
</div>

</form>

After submiting the form with the fields above to the a JQuery handler, the request is sending empty values for no reason. I used different brwosers and even change the style.display = "none" to visibility = "hidden"; but still the handler is receiving empty values.

Important: When I remove the specific-formgroups and their inner content, leaving only one left, the form is working fine.

I tried to solve the problem using this JQuery implementation, it still is not working. (seen above)
The handler code is all working good , so there is no error coming from the handler itself. The values are just sent empty.

Answers

You can use below code to show one element and hide all other elements. here i used ids of form group elements same as country names. this will add some dynamic handling.

Remove the "display: none" styling for the first element to show that element in initial loading.

If you want multiple Countries to show same form group, you can maintain common value for those country options and give that value as id for the respective form group, like what i did for Netherlands and New Zealand.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <script>
        function change(selection) {
            $('#form-groups').children().hide();

            $('#' + selection.value).show();
        };
    </script>

    <form id="InfoForm" method="POST">
        <select id="country" class="form-control" onchange="change(this)">
            <option value="NL">Netherlands (NL)</option>
            <option value="NL">New Zealand (NZ)</option>
            <option value="MK">North Macedonia (MK)</option>
            <option value="US">United States Of America (US)</option>
            <!-- ....other countries -->
        </select>
    </form>

    <div id="form-groups">
        <div id="NL">
            <div class="form-group">
                <label>NL</label>
                <input type="text" class="form-control" id="som_num" />
            </div>
            <div class="form-group">
                <label>Account number</label>
                <input type="text" class="form-control" id="som2_num" />
            </div>
        </div>

        <div id="NZ" style="display: none;">
            <div class="form-group">
                <label>NZ</label>
                <input type="text" class="form-control" id="som_num" />
            </div>
            <div class="form-group">
                <label>Account number</label>
                <input type="text" class="form-control" id="som2_num" />
            </div>
        </div>

        <div id="MK" style="display: none;">
            <div class="form-group">
                <label>MK</label>
                <input type="text" class="form-control" id="som_num" />
            </div>
            <div class="form-group">
                <label>Account number</label>
                <input type="text" class="form-control" id="som2_num" />
            </div>
        </div>

        <div id="US" style="display: none;">
            <div class="form-group">
                <label>US</label>
                <input type="text" class="form-control" id="som_num" />
            </div>
            <div class="form-group">
                <label>Account Number</label>
                <input type="text" class="form-control" id="som2_num" />
            </div>
        </div>
    </div>
    </body>
</html>

Why not use the build-in functionality in the form itself? Instead of using div elements to show and hide parts of the form you can use the Field Set element. It has an attribute called disabled. It will not hide the element, but you can style it not to show. The primary advantage is that the data entered in the input elements inside the disabled fieldset will not be part of the submitted form. Try select NL, enter date, switch to US, enter data and then press submit.

And then, please do not use id’s all over the place. Use the name attribute. First of all it does not have to be unique, second it is easy to traverse the elements inside the form.

document.forms.InfoForm.country.addEventListener('change', e => {
  let form = e.target.form;
  [...form.querySelectorAll('fieldset')].forEach(set => set.disabled = true);
  switch (e.target.value) {
    case 'MK':
    case 'NL':
    case 'MZ':
      form['specific-formgroup3'].disabled = false;
      break;
    case 'US':
      form['specific-formgroup2'].disabled = false;
      break;
    default:
      form['specific-formgroup6'].disabled = false;
      break;
  }
});

document.forms.InfoForm.addEventListener('submit', e => {
  e.preventDefault();
  let data = new FormData(e.target);
  console.log([...data.entries()].map(ent => ent[0]+':'+ent[1]).join(';'));
});

form fieldset {
  border: none;
}

form fieldset:disabled {
  display: none;
}

<form name="InfoForm" method="POST">

  <!-- Here there are other few fields but these are being sent correctly. -->

  <select name="country" class="form-control">
    <option>Select a country</option>
    <option value="NL">Netherlands (NL)</option>
    <option value="NZ">New Zealand (NZ)</option>
    <option value="MK">North Macedonia (MK)</option>
    <option value="US">United States Of America (US)</option>
    <option value="US">Some other country (QQ)</option>
    <!-- ....other countries -->
  </select>

  <fieldset name="specific-formgroup3" disabled>
    <div class="form-group">
      <label>Specific Number</label>
      <input type="text" class="form-control" name="som_num" />
    </div>
    <div class="form-group">
      <label>Account number</label>
      <input type="text" class="form-control" name="som2_num" />
    </div>
  </fieldset>

  <fieldset name="specific-formgroup4" disabled>
    <div class="form-group">
      <label>Other Number</label>
      <input type="text" class="form-control" name="som_num" />
    </div>
    <div class="form-group">
      <label>Account Number</label>
      <input type="text" class="form-control" name="som2_num" />
    </div>
  </fieldset>
  
  <fieldset name="specific-formgroup5" disabled>
    <div class="form-group">
      <label>Institution number</label>
      <input type="text" class="form-control" name="som_num" />
    </div>
    <div class="form-group">
      <label>Account Number</label>
      <input type="text" class="form-control" name="som2_num" />
    </div>
  </fieldset>
  
  <fieldset name="specific-formgroup6" disabled>
    <div class="form-group">
      <label>Code Number</label>
      <input type="text" class="form-control" name="som_num" />
    </div>
    <div class="form-group">
      <label>Account Number</label>
      <input type="text" class="form-control" name="som2_num" />
    </div>
  </fieldset>
  
  <fieldset name="specific-formgroup2" disabled>
    <div class="form-group">
      <label>Transit number</label>
      <input type="text" class="form-control" name="som_num" />
    </div>
    <div class="form-group">
      <label>Account Number</label>
      <input type="text" class="form-control" name="som2_num" />
    </div>
  </fieldset>
  <input type="submit" />
</form>

Please signup or login to give your own answer.

Click here to cancel reply.