Directly Post Info Of Option Selected

ChrisPHP · December 30, 2012

With the use of Jquery, I need that when choosing an option from Select, it displays directly the information about the option selected from database. The code is a little something like this.

Main page:



<Table>
<form action="content/Driver-Remove.php" method="post" enctype="multipart/form-data">
<TR>
<TD>
<?php
include("Conx.php");
$sql="SELECT nom FROM client"; 
$result=mysql_query($sql); 

$options=""; 

while ($row=mysql_fetch_array($result)) 
{ 
$id=$row["nom"]; 
$options.="<OPTION VALUE=\"$id\">".$id;
} 
?>

<SELECT id="Driver">
<option value="0" id="nav2">Choose a driver...</option> 
<?=$options?> 
</SELECT>
</TD>
</TR>
<TR>
<TD>
<center>
<input type="submit" value="Remove">
</center>
</TD>
</TR>
<TR>
<TD>
<div name="content2">
<script src="JQuery.js"></script>
<script src="js/general2.js"></script>
</div>
</form>
</Table>
[/Code]

general2.js:

[Code]

$(document).ready(function(){
var $dd = $('#Driver');
var $options = $('option', $dd);
$options.click(function() {
$('#content2').load(Driver.php);
return false;
});
[/Code]

Driver.php will load in <div id=content2> displaying inside the information...

Any help?

codefossa · December 30, 2012

$.load() uses a string. You don't seem to close your option tags. Lastly, you didn't tell us what the problem is, or what errors you may be getting if you even have error reporting on.

Also, what's the point of the options when you're using $.load() without any GET parameters? You're probably better off with $.post() for this since you probably don't want people just linking to the actions.

Here's an example that you may be able to go off of.

Demo Page: http://xaotique.no-ip.org/tmp/36/

HTML

<select id="driver">
<?php

for ($i = 1; $i < 6; $i++)
	echo '<option value="' . $i . '">' . $i . '</option>' . "\n";

?>
</select>

<div id="content2"></div>

Javascript / jQuery

$(document).ready(function()
{
$("#driver").change(function()
{
	$.post('', { opt: $(this).val() }, function(data)
	{
		$("#content2").html(data);
	});
});
});

PHP

<?php

if ($_SERVER['REQUEST_METHOD'] == "POST")
{
echo "<pre>", print_r($_POST), "</pre>";
die();
}

?>

ChrisPHP · December 30, 2012

Thanks for your quick reply

The idea is that I want a part of the page load without refreshing. I can do this with buttons but not with options.

Let's say that I have a driver named X existing in mysql.. When I click X from the options I need to show the infos from mysql about this driver without refreshing the page in a div.

The problem i'm having that I tried the method that I used with the buttons but it didn't work. When I click the driver X nothing changes in the page (Driver.php wont load in content2)

ChrisPHP · December 30, 2012

If there's a way without using a new page to load the infos i'd really appreciate it:)

I love the code that you posted.. but how can I use it with mysql?

I'm sorry if I'm a noob with this..

codefossa · December 30, 2012

Driver.php needs to be a string in the load function. But what I was saying is that you ain't passing the value, so you may as well make it a button or link. What I posted doesn't refresh to load, but you have to use another page to get the data. JS can't interact with your database, it can only call on a PHP script to make it execute and it can show the results.

ChrisPHP · December 31, 2012

I think I get what you mean.. Ill try to figure out my code after work!

Thanks a million

ChrisPHP · December 31, 2012

Ok I figured out what to do but I still can't get the results from mysql.. When I click on the selected option nothing happens

The code now is something like this:

main.php


<html>

<head>

   <script type="text/javascript" src="../JQuery.js"></script>

   <script type="text/javascript">
   jQuery(document).ready(function(){
       jQuery('#Client_ID').live('change', function(event) {
           $.ajax({
               url     : 'getData.php',
               type    : 'POST',
               dataType: 'json',
               data    : $('#myform').serialize(),
               success: function( data ) {
                      for(var id in data) {        
                             $(id).val( data[id] );
                      }
               }
           });
       });
   });
   </script>

</head>

<body>

   <form id='myform'>
    <select name='Client_ID' id='Client_ID'>
      <option value=''>Select</option>
      <option value='1'>Roy</option>
      <option value='2'>Ralph</option>
    </select>

    <div name='address1' id='address1'>
    <div name='address2' id='address2'>
   </form>

</body>


</html>
[/Code]

 
 
 
getData.php:
 
[code=php:0]

<?php

include('../content/Conx.php');

$clientId = $_POST['Client_ID']; // Selected Client Id

$query  = "SELECT nom, prenom FROM client where nom = $clientId";
$result = mysql_query($query) or die(mysql_error());
$row = mysql_fetch_array($result,projet);

$add1 = $row[nom];
$add2 = $row[prenom];

$arr = array( 'div#address1' => $add1, 'div#address2' => $add2);
echo json_encode( $arr );

?>

I need help

Christian F. · December 31, 2012

First and foremost you should enable error reporting, and turn on all errors, in PHP. That would have allowed you to spot the problem right away.

I can give you a hint:

$row = mysql_fetch_array($result,projet);

ChrisPHP · January 4, 2013

Lol yea I did figured out whats my problem and learned about debugging but I can't still manage to make it work !!

Now I'm using firebug to debug my code... getData.php response with the correct values but can't display it in div yet!!

my code is now for home.php


<html>

<head>
<?php
ini_set('display_errors', 1 );
error_reporting(E_ALL);
?>

   <script type="text/javascript" src="JQuery.js"></script>

   <script type="text/javascript">
   jQuery(document).ready(function(){
               jQuery('#Client_ID').change('change', function(event) {
                       $.ajax({
                               url      : 'getData.php',
                               type    : 'POST',
                               dataType: 'json',
                               data    : $('#myform').serialize(),
                               success: function( data ) {
                                          $("#address1").val( data["address1"] );
                                          $("#address2").val( data["address2"] );
                               }
                       });
               });
       });
   </script>

</head>

<body>

   <form id='myform' action='getData.php' method='post'>
    <select name='Client_ID' id='Client_ID'>
      <option value='Roy'>Roy</option>
      <option value='Ralph'>Ralph</option>
    </select>

<div name='address1' id='address1'></div>
    <div name='address2' id='address2'></div>
   </form>

</body>


</html>

and for getData.php


<?php
ini_set('display_errors', 1);
error_reporting(E_ALL);


include('Conx.php');

$clientId = $_POST['Client_ID'];
$db = "projet";

$query  = "SELECT nom, prenom FROM client WHERE nom = '$clientId' ";
$result = mysql_query($query);
$row = mysql_fetch_array($result);

$add1 = $row["nom"];
$add2 = $row["prenom"];

$arr = array( 'address1' => $add1, 'address2' => $add2);
echo json_encode( $arr );

?>

I'm really getting frustrated by this issue !!

DavidAM · January 5, 2013

Unless I am mistaken, a DIV does not have a value (.val()). I think you need to use .html().

codefossa · January 5, 2013

Unless I am mistaken, a DIV does not have a value (.val()). I think you need to use .html().

I assume he wanted text inputs. I don't know what else would make sense there ..

ChrisPHP · January 5, 2013

Yea it was an honest mistake lol

Eventually i used the $('#address1').html... and my code worked fine

Thanks everyone

Sign In

Directly Post Info Of Option Selected

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived

Important Information