POST value from dynamic dropdown

Question

I have 2 dropdown the main and sub. I'm trying to POST a value of two dropdownlist but everytime I submit I get this in url dyna.php?main=2&sub=2&submit=Submit and nothing appears when I echo the post values. I want to post the value of two dropdown in same page because I'm going to make a query for the that values.

Here's my fullcode

dyna.php

<body>
    <form id="form1" name="form1" action="<?php $_SERVER['PHP_SELF']?>">
 Drop1
 <?php
    $mysqli = new mysqli("localhost", "root", "", "lists");
    $result = $mysqli->query("SELECT * FROM main_list GROUP BY id ORDER BY id");
    $option = '';
    while($row = $result->fetch_assoc())
    {
       $option .= '<option value = "'.$row['id_no'].'">'.$row['value'].'</option>';
    }
    ?>

     <select id="main" name="main">
     <option selected=selected>Choose</option>
       <?php echo $option; ?>
     </select>
    <div id="sublist"></div>

   <input type="submit" name="submit" value="Submit" />
</form> 
<script type="text/javascript">
$('#main').change(function(){
$.ajax({
url : 'secondlist.php',
data :{mainlist_id : $(this).val()},
dataType:'html',
type:'POST',
success:function(data){
$('#sublist').html(data);
}
});
});
</script>
</body>

Secondlist.php

<?php
$out = $_POST['mainlist_id'];

    $mysqli = new mysqli("localhost", "root", "", "lists");
    $result1 = $mysqli->query("
    select 
        a.id, a.value, a.id_no, b.id, b.category, b.value
    from
    (select *
    from main_list) a 
    left outer join
    (select *
    from sub_list) b 
    on a.id_no=b.category
    WHERE a.id_no='$out'
    ");
    $option1 = '';

    while($row = $result1->fetch_assoc())
    {
        $option1 .= '<option value = "'.$row['category'].'">'.$row['value'].'</option>';
    }

    $output = 'Drop2 ';
    $output .= '<select name="sub" id="sub"  onchange="run()">';
    $output .= '<option value=" " disabled="disabled" selected="selected">Choose one</option>';
    $output .= $option1;
    $output .= '</select> ';
echo $output;
exit;
?>

1st of all in ur action u r not echoing php_self, and as a note u can use empty string in action to point to same page action="" — , Dec 27 '13 at 08:37
Try: print_r($_POST) and print_r($_GET) in Secondlist.php. Maybe you're not using POST but GET... — DaFunkyAlex, Dec 27 '13 at 08:47
data: $('form1').serialize(); // try commenting the POST and just alert the serialized value — Catalin Sterian, Dec 27 '13 at 08:53
ond if you want to use like that use data :{mainlist_id : $(this).find(':selected').val()}, \n instead of data :{mainlist_id : $(this).val()}, — Catalin Sterian, Dec 27 '13 at 08:55

score 0 · Answer 1 · answered Dec 27 '13 at 08:51

0

Put your script in .ready of jquery

<script type="text/javascript">
$(document).ready(function(){
    $('#main').change(function(){
        $.ajax({
            url : 'secondlist.php',
            data :{mainlist_id : $(this).val()},
            dataType:'html',
            type:'POST',
            success:function(data){
                $('#sublist').html(data);
            }
        });
    });
});
</script>

answered Dec 27 '13 at 08:51

$(this).val() it`s a select not an imput box [textarea/input[type=text/password] so it`s normal do display no data – Catalin Sterian Dec 27 '13 at 09:08
@CatalinSterian what do u mean, i don't undertsatnd? and inside $('#main').change which is select, this.val will give the value of selected item of select(dropdown) – Dec 27 '13 at 09:25
i suggested to use $(this).find(':selected').val(); just to be sure he gets the seected value ... – Catalin Sterian Dec 27 '13 at 09:30

Michel Feldheim · Answer 2 · 2013-12-27T09:01:11.620

When submitting the form using the button, you are using the default GET method when nothing is specified. GET appends the formdata as url encoded query string to your action URL.

To submit the data using HTTP POST, use the form attribute method="post"

If you want to add a file form field, add the parameter enctype="multipart/form-data" as well

<form id="form1" name="form1" action="<?php $_SERVER['PHP_SELF']?>" method="post" enctype="multipart/formdata">
</form>

http://www.w3.org/TR/html401/interact/forms.html#h-17.3

score 0 · Answer 3 · answered Dec 27 '13 at 09:04

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(
function(){
$('#form1').submit(
function(a){
alert($('#form1').serialize());
a.preventDefault();
})
})

</script>


<div>
    <form id="form1" name="form1">
    <select name="opton1">

    <option value="1"> option 11 </option>
    <option value="2"> option 12 </option>
    <option value="3"> option 13 </option>
    <option value="4"> option 14 </option>
    </select>   

    <select name="opton2">
    <option value="21"> option 21 </option>
    <option value="22"> option 22 </option>
    <option value="23"> option 23 </option>
    <option value="24"> option 24 </option>
    </select>

    <input type="submit">
    </form>

</div>

just a simple example

score 0 · Accepted Answer · edited May 23 '17 at 12:19

dyna.php
first add method in form.

<form id="form1" name="form1" action="<?php $_SERVER['PHP_SELF']?>" method="post">

then <div id="sublist"></div> replace this with following:

<select name="sub" id="sub"  onchange="run()">
 <option value="">Select</option>
</select>

and in secondlist.php

<?php
    $out = $_POST['mainlist_id'];
    $mysqli = new mysqli("localhost", "root", "", "lists");
    $result1 = $mysqli->query("
    select 
        a.id, a.value, a.id_no, b.id, b.category, b.value
    from
    (select *
    from main_list) a 
    left outer join
    (select *
    from sub_list) b 
    on a.id_no=b.category
    WHERE a.id_no='$out'
    ");
    while($row = $result1->fetch_assoc())
    {
    ?>
        <option value = "<?php echo $row['category'];?>"><?php echo $row['value'];?></option>';
    <?php 
    }
?>

and in dyna.php change this jquery line $('#sublist').html(data); to $('#sub').html(data);

and be aware of SQL injection.See this

Happy New Year :), where should I echo the post values? – user3097736 Jan 02 '14 at 00:03 — user3097736, Jan 02 '14 at 00:03
Thanks and same to you.which post value? – DS9 Jan 02 '14 at 05:42 — DS9, Jan 02 '14 at 05:42
I got it, I get the Post values of two dropdown. – user3097736 Jan 02 '14 at 05:50 — user3097736, Jan 02 '14 at 05:50

POST value from dynamic dropdown

4 Answers4