How to pass parameter as POST data on selection of an Select Box value, which will reload the same page?

Question

I had two chained Select Boxes "pr_cat" and "sl_num" . The second select box values depend on the value selected in the first select box.

<tr>
    <td width="257">Select Product Category:</td>
    <td width="197">
        <select name="pr_cat" id="Validprcat" onChange="reload(this.form)"><option value="">< Select one ></option>
        <?php while($prd=mysql_fetch_object($select_query1)) { 
        if ($prd->cat_id==$pcat) { ?>
    <option selected value="<?php echo $prd->cat_id?>"><?php echo $prd->category_name?> </option>
    <?php } else { ?>
       <option value="<?php echo $prd->cat_id?>"><?php echo $prd->category_name?></option>
      <?php }}?>
    </select>
    </td>
  </tr>
 <tr>
    <td>Select Serial Number:</td>
    <td>

    <select name="sl_num"  id="Validslnum" onChange="reload2(this.form)"><option value="">< Select one ></option>
        <?php while($slnum=mysql_fetch_object($quer)) { 
              if ($slnum->serialno==$pcat2) { ?>
    <option selected value="<?php echo $slnum->serialno?>"><?php echo $slnum->serialno?> </option>
    <?php } else {
     ?>

        <option  value="<?php echo $slnum->serialno?>"><?php echo $slnum->serialno?></option>
        <?php }} ?>
    </select>
    </td>
  </tr>
<tr>

I used the form reload javascript to reload the page with the value selected in the Select Box. I used GET method.

<script language=JavaScript>
function reload(form)
{
var val=form.pr_cat.options[form.pr_cat.options.selectedIndex].value; 
self.location='delivery.php?pcat=' + val ;
}

function reload2(form)
{
var val=form.pr_cat.options[form.pr_cat.options.selectedIndex].value; 
var val2=form.sl_num.options[form.sl_num.options.selectedIndex].value; 
self.location='delivery.php?pcat=' + val + '&pcat2=' + val2 ;
}
</script>

But I want to do it using POST method how to do this ?

Deepika Janiyani · Answer 1 · 2013-11-20T11:09:29.293

1

If you don't want to use ajax, and do it via POST method, so instead of

 onChange="reload(this.form)"

call

 onChange="formSubmit();"


<script>
function formSubmit()
{
  document.getElementById("frm1").submit(); //frm1 is form id
      //OR you can use
  //document.frm1.submit(); //frm1 is form name
}
</script>

Note :- if you have any submit button in this form, don't keep it's name as submit, else you will have issues in your code.

edited Nov 20 '13 at 11:09

answered Nov 19 '13 at 09:34

Deepika Janiyani

1,487
9
17

While you code is correct, But Note part is confusing, How submit button name will generate problems :) – kuldeep.kamboj Nov 19 '13 at 09:49
only if you name the submit button as name='submit', you can get issues, it has happened with me twice, and after renaming the button, it works fine. – Deepika Janiyani Nov 20 '13 at 05:00
This should not happen as submit button name will not reflect any problem. I myself have habit for using submit as submit button name and never encountered any problem. – kuldeep.kamboj Nov 20 '13 at 07:34

score 0 · Answer 2 · edited May 23 '17 at 12:34

0

I think what you're asking is pretty much this: JavaScript post request like a form submit

However, why do you want to reload the page at all instead of doing an AJAX call?

edited May 23 '17 at 12:34

Community

1
1

answered Nov 19 '13 at 09:19

Jake

660
1
7
18

i want to do it AJAX also but could not figure it out. – Jayanta Kumar Nath Nov 19 '13 at 11:15

score 0 · Answer 3 · edited May 23 '17 at 10:24

I give you the most simple and fastest way to do what you wanted,

AJAX:

cover both select box with '' tag,

<div id='first_select'>
   <select id='first' onchange='populate_second_select(this.value)'>
   <option>Select</option>
   </select>
</div>

<div id='second_select'>
   <select>
   <option>Select</option>
   </select>
</div>

call populate_second_select() function upon change done in first select box. No in ajax,

function populate_second_select(value)
            { 

                $.ajax({
                                method:'POST',
                                url:'ajax.php',
                                data: {value:value},
                                success:function(result)
                                {
                                    document.getElementById("second_select").innerHTML=result;
                                    showLightBox();
                                }
                            });
            }

This is how your javascript function should look like,

on your ajax.php file, process the DB based on chosen value and 'echo' the whole select tag (second tag). That's it.

Here are few links would help you to get this done.

Link_1 Link_2

How to pass parameter as POST data on selection of an Select Box value, which will reload the same page?

3 Answers3