pass jquery value to php variable

@sodaAug 10.2011

I have a drop down menu. Once i select the value i wanna pass that value to a php variable.

here’s my code.

[code=html] <select id=”account” name=”account”> <option value=”0559″>Bank A/C 001</option> <option value=”0553″>Bank A/C 002</option> </select>[/code]

[code=html] <script>

function displayVals() { var singleValues = $(“#account”).val();

$(“p”).html(“<b>Single:</b> ” + singleValues); } </script>[/code]

I wanna get the value of “account”.

[code=php]$account = $_get[‘account’];

echo $account;[/code]

to post a comment

PHP

18 Comments(s) _↴

@aj_nscAug 10.2011 — #http://api.jquery.com/jQuery.ajax/

@dangerousprinceAug 10.2011 — #The jQuery to change the value of a hidden input. Then use the hidden input value via PHP ?

@sodaauthorAug 11.2011 — #Please give me an example.

@ScottyBoyAug 12.2011 — #You could send your field value through Ajax to your PHP script with something like this. You'll just need to call the function.

[CODE]
 function displayVals() {
 var singleValues = $("#account").val();
 
   $.ajax({
   url: "script.php",
   type: "GET",
   data: {account: singleValues},
   async: false,
   });
 
   $("p").html("<b>Single:</b> " + singleValues);
 }
 [/CODE]

Also, in your PHP script. I'm pretty sure the super global GET must be capitalized "$_GET".

[code=php]
 if (!empty($_GET['account']))
 $account = $_GET['account'];
 else
 $account = null;
 
 echo $account;
 [/code]

@sodaauthorAug 12.2011 — #I tried this but didn't work ;(

[code=html]<select id="account">
 <option value="1">A</option>
 <option value="2">B</option>
 <option value="3">C</option>
 <option value="4">D</option>
 </select>
 
 <script type='text/javascript'>
 
 function displayVals() {
 var singleValues = $("#account").val();
 
   $.ajax({
   type: "GET",
   url: "testing.php",
   data: {account: singleValues},
   async: false,
   });
 }
 
 </script>[/code]

[code=php]<?php
 
 if (!empty($_GET['account'])){
 $account = $_GET['account'];
 }else{
 $account = "empty";
 }
 echo $account; 
 
 ?>[/code]

@ScottyBoyAug 12.2011 — #Did you call the function in some way?

[code=html]
 <select id="account" onchange="displayVals();">
 <option value="1">A</option>
 <option value="2">B</option>
 <option value="3">C</option>
 <option value="4">D</option>
 </select>
 
 <script type='text/javascript'>
 
 function displayVals() {
 var singleValues = $("#account").val();
 
   $.ajax({
   type: "GET",
   url: "testing.php",
   data: {account: singleValues},
   async: false,
   });
 }
 
 </script>
 [/code]

@sodaauthorAug 12.2011 — #Thanks for your support. I used onchange="displayVals(); also

still didn't work

@ScottyBoyAug 12.2011 — #Also, you won't see your PHP echo because it's taking place in the background. If you want your JavaScript to receive info from PHP, you'll either have to get the response text, or format a JSON array. With this, anything you echo should be added to the "response" variable.

[code=html]
 <select id="account" onchange="displayVals();">
 <option value="1">A</option>
 <option value="2">B</option>
 <option value="3">C</option>
 <option value="4">D</option>
 </select>
 
 <script type='text/javascript'>
 
 function displayVals() {
 var singleValues = $("#account").val();
 var connected = false;
 
   var response = $.ajax({
  type: "GET",
   url: "testing.php",
   data: {account: singleValues},
   async: false,
   success: function()
   {
   connected = true;
   }
   }.responseText);
 
   if (connected == true)
   {
   alert(response);
   }
 }
 
 </script>
 [/code]

@sodaauthorAug 12.2011 — #Sorry again. Still didn't work.

What I want is to get the dropdown value and pass it a php variable without reloading the page.

Please help. I'm gonna crazy now ?

@dangerousprinceAug 12.2011 — #Did no one take note as to what I said? There's not point in using ajax functions, they're not needed at all.

Here's a perfectly working example using a hidden input:

[code=html]
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Untitled Document</title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 $("#account").change(function() {
 $("#changeme").val($(this).val());
 });
 });
 </script>
 </head>
 
 <body>
 <select id="account">
 <option value="-1">Please select...</option>
 <option value="1">A</option>
 <option value="2">B</option>
 <option value="3">C</option>
 <option value="4">D</option>
 </select>
 <input type="hidden" id="changeme" name="value" />
 </body>
 </html>
 [/code]

Then when you've come to adding the:
[code=html]<form action="" method="post"></form>[/code]

You can then test this using something like:
[code=html]<?=$_POST['value'];?>[/code]

@sodaauthorAug 12.2011 — #Hmmmmm.

Last code also didn't work. I wanted to get values without reloading the page. You have used <form>. I don't want to submit values by pressing a button.

have I missed anything ????

@dangerousprinceAug 12.2011 — #You'll find that code does work correctly, change the hidden input to a text input and you'll see it changes.

You didn't explain that at the beginning, this script passes the jQuery variable to an input ready for PHP without reloading the page so you will have to use ajax.

Same thing, just instead of:

[code=html]<script type="text/javascript">
 $(document).ready(function() {
 $("#account").change(function() {
 $("#changeme").val($(this).val());
 });
 });
 </script>[/code]

It will have to use another page, so you can decide what you want to do with it. Generally, everyone has an ajax.php file to play with all their variables and add them to databases (or whatever you want to do with it).

So the ajax.php page would consider of something like:

[code=html]
 <?php
 $action = $_POST['action'];
 if($action=="test"):
 $variables = $_POST['other_variables_you_want_to_call'];
 // Play with variables, add to mysql database, etc.
 endif;
 ?>
 [/code]

And the jQuery would change slightly:

[code=html]
 <script type="text/javascript">
 $(document).ready(function() {
 $("#account").change(function() {
 var var_name = $(this).val();
 $.post("ajax.php", { name: var_name, others: "meh" },
 function(data) {
 if(data!="error") {
 alert("Data loaded successfully: " + data);
 }
 });
 });
 });
 </script>
 [/code]

@sodaauthorAug 15.2011 — #God this drives me crazy. didn't work. Plsssss help sombody ???

@dangerousprinceAug 15.2011 — #Rather than us guess everything, if you can't work out the code we've written (it isn't just a case of copy and paste) - post up all the code your using, maybe the whole site as a .zip, then we might be able to help you out.

1. account no (dropdown)

2. check no

3. voucher no

4. amount

once i select account 01, check and voucher no should be filled with required no from the db. likewise check and voucher no changes with the account no.

hope this make any sense to you guys.

Thanks a lot for your support.

@dangerousprinceAug 17.2011 — #Try this, all tested and it works as you want it

HTML

[code=html]<!DOCTYPE HTML>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>Untitled Document</title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 $("select[name='account']").change(function() {
 var acc_no = $(this).val();
 if(acc_no == -1) {
 $("input[name$='cheque']").val("");
 $("input[name$='voucher']").val("");
 } else {
 $.post("ajax.php", { action: "fetchDetails", account: acc_no },
 function(data) {
 if(data == "error") {
 //errorHandling();
 alert("Error");
 } else {
 var exploded = data.split(',');
 $("input[name$='cheque']").val(exploded[0]);
 $("input[name$='voucher']").val(exploded[1]);
 }
 });
 }
 });
 });
 </script>
 </head>
 
 <body>
 <form action="" method="post">
 <select name="account">
 <option value="-1">Please select</option>
 <option value="1">Account 1</option>
 <option value="2">Account 2</option>
 </select>
 <input type="text" name="cheque" />
 <input type="text" name="voucher" />
 <input type="text" name="amount" />
 </form>
 </body>
 </html>[/code]

PHP

[code=html]<?php
 $action = $_POST['action'];
 if($action == "fetchDetails"):
 $account = $_POST['account'];
 // SET THE REST UP WITH MYSQL
 if($account == 1):
 // SEND VIA COMMA VARIABLE DATA
 echo "575000,675000";
 exit;
 endif;
 if($account == 2):
 echo "874324,980543";
 exit;
 endif;
 echo "error";
 endif;
 ?>[/code]

@sodaauthorAug 18.2011 — #hey thanks a lot dangerousprince. It works properly. I modified it and connect with the db.

You are a genius.?????. Thanks 4 saving me again. ??:

@dangerousprinceAug 18.2011 — #No problem.

Also in #PHP _↴

Start Batch file and exe files from php and html Which timzone is Florida?ftp code error

Success!

Help @soda spread the word by sharing this article on Twitter...

Tweet This

pass jquery value to php variable

18 Comments(s) _↴

Also in #PHP _↴

Success!

Social

Version

pass jquery value to php variable

18 Comments(s) ↴

Also in #PHP ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

18 Comments(s) _↴

Also in #PHP _↴