Question

I’m currently having some trouble with getting certain input fields passed along when a dynamic form is submitted.

The city/school fields are enabled if a certain field in the state is selected (because we only need to collect info from students from a particular state and not others).

HTML code:

<form name="email" method="post" action="...email.php">
. 
. 
. 
<div id="cityDiv" class="row">
<h5 id="c1" class="mandatory">City:</h5>
<select id="c2" class="inputColumn" onchange="fillSchoolDropdown();" name="extra_city">
  --select options ---  
 </div>
 <div id="schoolDiv" class="row">
 <h5 id="sch1" class="mandatory">School:</h5>
 <input id="extra_school" class="inputColumn" type="text" name="extra_school">
 </div>

Javascript :

   if(verify(document.email)){ 
     .
     .
     .
   var school = document.getElementById("extra_school").value;
   var citySelect=document.getElementById("extra_city");
   var city=citySelect.options[citySelect.selectedIndex].text;

I’ve been either getting null CitySelect or the form successfully validates but somehow…the end result for the two are still ” ” despite what is entered in the form.

What could I be doing wrong here?

Answer 1

var citySelect=document.getElementById("extra_city");

Should be:

var citySelect=document.getElementById("c2");

Because that’s the id. You are trying to select the name attr.

Or you could change the id of the select element:

<select id="extra_city" class="inputColumn" onchange="fillSchoolDropdown();" name="extra_city">