Using jQuery pass a variable to .php

Question

I'm attempting to make a selection and pass the variable to a .php page. I can do it with the jQuery examples on a date selector ... but can't figure it out on the menu selector. When I use this control in conjunction with the datepicker, it allows me to pass both variables, but when I just use it by itself, it doesn't hand it off.

<meta name="viewport" content="width=device-width">
  <meta charset="utf-8">
  <title>DailyRecords</title>
  <link rel="stylesheet" href="jquery/jquery-ui.css">
  <script src="jquery/js/jquery-1.10.2.js"></script>
    <script src="jquery/jquery-ui.js"></script>

  <html>
  <head>
  <html> 
    <head> 

        <script>
        function showUser(str) {
            if (str == "") {
          document.getElementById("txtHint").innerHTML = "";
    return;
} else { 
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","roster.php?q="+str,true);
    xmlhttp.send();
}
  }
  </script>

  </head>

  <body>
  <script>
  $(function() {
$( "#restaurant" ).selectmenu({

});
    });
</script>

  <table>
  <form>
  <td>
  <select name="restaurant" id="restaurant" onchange="showUser(this.value)">
    <option value="">selection</optoin>
    <option value="101">DA</option>
    <option value="102">FV</option>
    <option value="103">CS</option>
    <option value="104">TO</option>
    </select>
  </td>  
  </form>

  </table>

  <div id="txtHint"><b>Select restaurant</b></div>


  </body>
  </html>

Vetrivel · Accepted Answer · 2015-03-20 19:11:12Z

3

Use my code it will work. But make sure your jquery files jquery/js/jquery-1.10.2.js available in the right path or not?

<html>
<head> 
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<title>DailyRecords</title>
<link rel="stylesheet" href="jquery/jquery-ui.css">
<script src="jquery/js/jquery-1.10.2.js"></script>
<script src="jquery/jquery-ui.js"></script>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
}
else
{
$.ajax({

url: "roster.php",
data : "q="+str, //if you want to pass one variable 
//data : "name="+name+"&natives="+natives, //if you want to pass more than 1 variable
type : "POST", // if you want to pass get method put "GET"
success :function(text){
alert(text);
document.getElementById('txtHint').innerHTML=text;
}
});
}
}
</script>
</head>
<body>   
<table>
<form>
<td>
<select name="restaurant" id="restaurant" onchange="showUser(this.value)">
<option value="">selection</optoin>
<option value="101">DA</option>
<option value="102">FV</option>
<option value="103">CS</option>
<option value="104">TO</option>
</select>
</td>  
</form>
</table>
<b>Select restaurant</b> <div id="txtHint"></div>
</body>
</html>

roster.php file

<?php
echo $_POST['q'];
?>

answered Mar 20, 2015 at 19:11

Vetrivel

1,1591 gold badge7 silver badges16 bronze badges

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

2 Comments

kloodge Over a year ago

Thanks for the help. I even figured out how to turn off the alert myself :) Really appreciate it.

kloodge Over a year ago

Only question I have ... my jquery style is now gone. The one I was using was really what I was looking for ... I believe it's called by the "selectmenu" ... that would keep it looking like a drop down instead of using the ios native control. any idea how I get that back in? ... I believe this was it: $(function() { $( "#restaurant" ).selectmenu({ }); });

Vishal Wadhawan · Accepted Answer · 2015-03-20 18:24:43Z

0

since you using jquery you can do it like bellow :

<script>
function showUser(str) 
{
 var datastring ;
 datastring = "q="+str;
 $.post("roster.php",datastring,function(){
     //your result here
 });
}
 </script>

edited Mar 20, 2015 at 18:24

answered Mar 20, 2015 at 17:50

Vishal Wadhawan

1,0851 gold badge9 silver badges11 bronze badges

3 Comments

kloodge Over a year ago

i'm a complete n00b on this stuff ... sorry for having to ask, but where do I put that in my code?

Vishal Wadhawan Over a year ago

just replace your showUser function with my answer and put it in <script></script> tag...

kloodge Over a year ago

just tried that with no affect. the old script, when I used it with the DatePicker it would give me the result at the bottom of the page. I was looking for the same thing to happen here ... maybe I didn't describe it well. Sorry, I'm a complete novice.

Vijay · Accepted Answer · 2015-03-26 05:58:35Z

Use this following code

<html>
<head> 
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<title>DailyRecords</title>
<link rel="stylesheet" href="jquery/jquery-ui.css">
<script src="jquery/js/jquery-1.10.2.js"></script>
<script src="jquery/jquery-ui.js"></script>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
}
else
{
  $.ajax({
     url: "roster.php",
     data: {"q":str}, //if you want to pass one variable 
     type : "POST", // if you want to pass get method put "GET"
     success :function(data){
            console.log(data);
            document.getElementById('txtHint').innerHTML=data;
      }
  });
}
}
</script>
</head>
<body>   
<table>
<form>
<td>
<select name="restaurant" id="restaurant" onchange="showUser(this.value)">
<option value="">selection</optoin>
<option value="101">DA</option>
<option value="102">FV</option>
<option value="103">CS</option>
<option value="104">TO</option>
</select>
</td>  
</form>
</table>
<b>Select restaurant</b> <div id="txtHint"></div>
</body>
</html>

get post value in poster.php

<?php
 if(isset($_POST['q'])){
     echo $_POST['q'];
 }
?>

Collectives™ on Stack Overflow

Using jQuery pass a variable to .php

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related