Value from selected dropdown option cannot be retrieved using $_POST

Question

I can't seem to get the selected option value from the select.php into the value_selected.php file.The console.log(data) displayed nothing. Why is that?

select.php

<!DOCTYPE html>  
<html>  
<head></head>
<body>
<script src="js/jquery-3.2.0.min.js"></script>

<form method="POST" action="">
<label for "sel_opt">Select value: </label>
<select name="sel_opt" id="sel_opt">
    <option value="1">1</option>
    <option value="2">2</option>
</select>
<input name="submit" type="submit" id="submit" value="Submit">
</form>

<div id="result"></div>

<script>
$(document).ready(function(){  
           $("#submit").click(function(){ 
             $.ajax({  
                          url:"http://localhost/value_selected.php",  
                          type:"POST",  
                          success:function(data)  
                          {  
                            console.log(data);
                            $('#result').html(data);  
                          }  
                     });  
                });  
           }); 
</script>
</body>
</html>

value_selected.php

<?php
$output = "";
if(isset($_POST["submit"])) {
 if(isset($_POST["sel_opt"])) {
$val = $_POST["sel_opt"];
 if ($val == 1) {  
      $output = "<p>Value 1 selected</p>";
 }   else {
    $output = "<p>Value 2 selected</p>";
 }
 echo $output;
}
 ?>

You didnt send data with the AJAX request. So you never enter the if(isset($_POST["submit"])) { and never output anything. Add an else to that and you'll see you never enter. — chris85
– chris85, Commented Apr 7, 2017 at 15:45
You need to pass a data: { name: "John", location: "Boston" } field to the request. See api.jquery.com/jquery.ajax in the example the fields in the PHP would be $_POST['name'] and $_POST['location'] the values would be john and boston. — chris85
– chris85, Commented Apr 7, 2017 at 15:50
@chris85 That link is really helpful. I removed the if(isset($_POST["submit"])) and passed data: {sel_opt: $("#sel_opt").val()} and it runs smoothly. Thank you — cathy305
– cathy305, Commented Apr 7, 2017 at 16:15

pbogut · Accepted Answer · 2017-04-07 15:51:47Z

1

Add data: to your ajax config object with form values.

<script>
$(document).ready(function(){
    $("#submit").click(function(){
        $.ajax({
            url:"http://localhost/value_selected.php",
            type:"POST",
            data: $('form').serialize(),
            success:function(data)
            {
                console.log(data);
                $('#result').html(data);
            }
        });
    });
});
</script>

answered Apr 7, 2017 at 15:51

pbogut

8761 gold badge9 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cathy305 Over a year ago

I edited my previous comment. I tried this and remove the if(isset($_POST["submit"])) from the value_selected.php and it works!

Collectives™ on Stack Overflow

Value from selected dropdown option cannot be retrieved using $_POST

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related