Populating province/state dropdown list after submission

Hello All,

I have a user registration page which has little bit of php, javascript, and html…

Problem after page submission if a user incorrectly enters his/her information.
I have two dropdown list menus one for country and the other one for province/state and both at initial page load, work. The province/state dropdwon list is populated; triggered by javascript, based on the country user selects.

if the user submits the form with incorrect information the page is of course reloads but the province/state menu list disappears or lost as its not reloaded or triggered by country dropdown list.
How do i go about reloading the province/state and have it default to the user selection after a page reload. java script is a bit of a weak spot for me so any help you can provide would be greatly appreciated.

thanks

the java script which triggers the province/state menu list

function getProvince(val) {
    $.ajax({
        type: "POST",
        url: "provsta.php",
        data:'countryID='+val,
        success: function(data){
            $("#Iprovince").html(data);
        }
    });
}




<div  class="form-group">
    <label class="control-label" for="Icountry">Select country (required field)</label>
         <select class="form-control" id="Icountry" name="sel_Icountry" onChange="getProvince(this.value);" >
           // sorry guys, i had to take the script that loads the country out as it wasnt appearing in the post. 
                       </select>
   </div>                                  
      <div class="form-group">
        <label class="control-label" for="Iprovince">Select province/State (required field)</label>
             <select class="form-control" id="Iprovince" name="sel_Iprovince">
                <?php if(empty($_POST['sel_Iprovince'])) {echo '<option disabled selected >Select a province/state</option>';}  ?>
                    </select>
       </div>

First of all, modify your getProvince() function to make it possible to select some province right after loading the list:

function getProvince(val, provinceId) { //second argument added
    $.ajax({
        type: "POST",
        url: "provsta.php",
        data:'countryID='+val,
        success: function(data){
            $("#Iprovince").html(data);
            //if provinceId is passed
            if (typeof(provinceId) !== 'undefined'){                                        
                //select corresponding option in the list:
                $('#Iprovince').val(provinceId);
            }
        }
    });
}

Then add this to your form generation code:

<?php if (!empty($_POST['sel_Iprovince']){ ?>
    <script>getProvince('<?php echo $_POST['sel_Icountry']; ?>', '<?php echo $_POST['sel_Iprovince']; ?>');
<?php } ?>

That will run getProvince() function with country and province IDs passed in to load the list and select correct value (if form has been submitted)

Hi megazoid,

Thanks for the reply, greatly appreciated.

I tried implementing the code you provided but its always testing undefined even if the provine/state is selected. I added the following line alert('test after if typeof=: ‘+val+’ '+ provinceId); right after the if statement and the val variable returns a value but not the provinceID variable, it always returns undefined. any chance you could look at this code again?

thanks,
R

Hi

Make sure that you pass second argument to the function.
Do you see it generated HTML? Like

<script>getProvince('52', '65')</script>

Hi Megazoid,

Not sure if the function is even called.

i have the following script between the

Reproduce the situation (submit form with errors), open HTML source of page (Ctrl+U in browser) and check if that script-tag is added where it supposed to be

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.