0

Country drop down list will be displayed from database table using PHP & MySQL.

Based on selected country, state drop down list will be auto filled.

On JS page, I tried to alert country and state where selected country is displayed fine but it always displays first state from the list no matter whatever state is selected on form page.

HTML form page

<form name="frm_edit"  id="frm_edit" novalidate>
    <div class="control-group form-group">
        <div class="controls">
            <label>Country:</label>
            <select name="cbo_country"  id="cbo_country" onChange="selectstate();">
                # all countries will be displayed here from DB <OPTIONS> using PHP and MySQL.                           
            </select>   
        </div>
    </div>
    <div class="control-group form-group">
        <div class="controls">
            <label>State:</label>
            <select name="cbo_state" id="cbo_state">
                <option value="">-- Select State --</option>
            </select>
        </div>
    </div>
</form>

.JS page

submitSuccess: function($form, event) {
    event.preventDefault(); // prevent default submit behaviour

    var cbo_country = $("select#cbo_country").val();
    var cbo_state = $("select#cbo_state").val();

    //alert($("select#cbo_country").val());
    //alert($("select#cbo_state").val());
}

If I submit form using standard POST and action method without Ajax / JQuery then selected country and state data are inserted into database table on PHP process page. In this case states list is auto filled based on selected country and state is selected from the state list.

<form name="frm_edit" action="./add_p.php" method="post">

If I submit form using JQuery / Ajax method and make state drop down list separate from country and then select any state from list then the correct selected state value is passed on JS page.

May onChange event be issue? or something else?

selectstate function

States Array: 1,13,'Alabama',1,14,'Alaska',1,15,'Arizona',1,16,'Arkansas',1,5,'California',1,17,'Colorado',1,18,'Connecticut',1,19,'Delaware',1,20,'Florida',1,21,'Georgia',1,22,'Hawaii',1,23,'Idaho',1,24,'Illinois',1,25,'Indiana',1,26,'Iowa',1,27,'Kansas',1,28,'Kentucky',1,29,'Louisiana',1,30,'Maine',1,31,'Maryland',1,32,'Massachusetts',1,33,'Michigan',1,34,'Minnesota',1,35,'Mississippi',1,36,'Missouri',1,37,'Montana',1,38,'Nebraska',1,39,'Nevada',1,40,'New Hampshire',1,4,'New Jersey',1,41,'New Mexico',1,1,'New York',1,42,'North Carolina',1,43,'North Dakota',1,44,'Ohio',1,45,'Oklahoma',1,46,'Oregon',1,8,'Orlando',1,47,'Pennsylvania',1,48,'Rhode Island',1,49,'South Carolina',1,50,'South Dakota',1,51,'Tennessee',1,52,'Texas',35,59,'Toronto',1,53,'Utah',1,54,'Vermont',1,55,'Virginia',1,10,'Washington',1,56,'West Virginia',1,57,'Wisconsin',1,58,'Wyoming' 

<script language="javascript" type="text/javascript">
    statearray=new Array(<?php print($str_statevalues) ?>)
    function selectstate(arg)
    {

            var_pkid=document.frm_edit.cbo_country.options[document.frm_edit.cbo_country.selectedIndex].value;
            document.frm_edit.cbo_state.options.length=0;

            payee_state_pkid=0;
            <?php if($previously_selected_payeestatepkid_from_db > 0) { ?>
                payee_state_pkid=<?php print($previously_selected_payeestatepkid_from_db) ?>;
            <?php } ?>  
            for(cnt=0;cnt<statearray.length;cnt=cnt+3)
            {   if(statearray[cnt]==var_pkid)
                {   state_pkid=statearray[cnt+1];
                    state_name=statearray[cnt+2];
                    document.frm_edit.cbo_state.options.length=document.frm_edit.cbo_state.options.length+1;
                    document.frm_edit.cbo_state.options[document.frm_edit.cbo_state.options.length-1].value=state_pkid;
                    document.frm_edit.cbo_state.options[document.frm_edit.cbo_state.options.length-1].text=state_name;
                    if(state_pkid==payee_state_pkid) {  document.frm_edit.cbo_state.options[document.frm_edit.cbo_state.options.length-1].selected=true; }
                }
            }       
            if(document.frm_edit.cbo_state.options.length==0)
            { 
                document.frm_edit.cbo_state.options.length=document.frm_edit.cbo_state.options.length+1;
                document.frm_edit.cbo_state.options[document.frm_edit.cbo_state.options.length-1].value=0;
                document.frm_edit.cbo_state.options[document.frm_edit.cbo_state.options.length-1].text="No States Available";
            }

    }
    function PreLoadStates() { selectstate('payee') }
</script>

<body onLoad="PreLoadStates();">
RekKA
  • 150
  • 9

0 Answers0