CODEWITHSUNDEEP
phpjavascriptforms
Nick
Nick

Reputation: 477

How do you take data from form element <select> with <option> into php on form submit?

I have a form which looks like this.

<form name="myform" action="selectPlayer.php">
    <select name="forward" onchange="javascript:submitform(top);">
        <option value="-">-------</option>
        <option id="forwardAdd" value="add">Add</option>
        <option id="forwardChange" value="change">Change</option>
    </select>
    <select name="center" onchange="javascript:submitform(mid);">
        <option value="-">-------</option>
        <option id="centerAdd" value="add">Add</option>
        <option id="centerChange" value="change">Change</option>
    </select>
</form>

I am submitting the form to selectPlayer.php. On this page I need to know if the person wanted to add a player or change the player in the position designated by each select element. In other words, if a player wants to add Kobe Bryant to the center position of their lineup, I need variables for this in selectPlayer.php.

It is a simple document submit function using Javascript like so:

<script type="text/javascript">
function submitform(var position)
{
    if(document.myform.onsubmit &&
    !document.myform.onsubmit())
    {
        return;
    }
document.myform.submit()
}
</script>

What should I put in the script to pass these variable to the next php page?

Upvotes: 0

Views: 498

Answers (1)

Mercurial
Mercurial

Reputation: 3885

Get your choices under $_POST variable on your php page, Also add method = "post" in your form.

eg. $_POST['forward'] will give the option selected on forward select in this form on this page!

Update:

your form

<form name="myform" action="selectPlayer.php" method = "post">
    <select name="forward" id="forward">
        <option value="-">-------</option>
        <option id="forwardAdd" value="add">Add</option>
        <option id="forwardChange" value="change">Change</option>
    </select>
    <input type="submit" name="submit" value="Submit">
</form>

selectPlayer.php

<?php
 if(isset($_POST['forward'])){
  echo "OK";
 }

?>

UPDATE 2 :

Important thing is to attach the jquery file to your form.php

form.php

<html>
<head>
<script src="jquery-1.9.0.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() { 
$(document).on('change', '#name', function() { 
    //var element = $(this); //USE THESE IN CASE OF MULTIPLE IDENTICAL FORMS AFTER MANIPULATING
    //var id = element.attr("id");
    var option = $("#name").val(); //obtaining the selected value
    var dataString = 'name='+ option; //preparing the datastring to send to get.php

        $.ajax({                        //using ajax
                type: "POST",           //request type post, you can use get here
                url: "get.php",         //page you're sending request
                data: dataString,       //datastring you are passing
                dataType:'html',        //responsetype you are wanting
                cache: false,       
                success: function(data){    //in case of successful response from get.php, response is in dataType format inside variable "data"
                     $("#output").append(data); //doing stuff on this page from response received from get.php
          }
         });
    return false;
});
});
</script>

<form>
    <select id="name">
        <option >---</option>
        <option value="1">ONE</option>
        <option value="2">TWO</option>
        <option value="3">THREE</option>
    </select>
</form>

<div id="output">THINGS WILL COME HERE, DELETE THIS TEXT IN ACTUAL USE<br/></div>
</body>
</html>

get.php

<?php

if(isset($_POST['name'])){
    switch($_POST['name']){
        case '1':   echo "YOU HAVE SELECTED ONE<br/>";
                    break;
        case '2':   echo "\nYOU HAVE SELECTED TWO<br/>";
                    break;
        case '3':   echo "\nYOU HAVE SELECTED THREE<br/>";
                    break;
        default :   break;
    }
}
?>

Upvotes: 3

Related Questions