Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

Directly Post Info Of Option Selected

Started by ChrisPHP, Dec 30 2012 09:20 AM

Please log in to reply

11 replies to this topic

#1 ChrisPHP

Advanced Member

Members
30 posts

LocationLebanon

Posted 30 December 2012 - 09:20 AM

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>

general2.js:


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

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

Any help?

Best regards,
Chris

Back to top

#2 Xaotique

Advanced Member

Members
510 posts

LocationPennsylvania, United States
Age:21

Posted 30 December 2012 - 09:43 AM

$.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();
}

?>

Back to top

#3 ChrisPHP

Advanced Member

Members
30 posts

LocationLebanon

Posted 30 December 2012 - 10:02 AM

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)

Best regards,
Chris

Back to top

#4 ChrisPHP

Advanced Member

Members
30 posts

LocationLebanon

Posted 30 December 2012 - 10:03 AM

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..

Edited by ChrisPHP, 30 December 2012 - 10:07 AM.

Best regards,
Chris

Back to top

#5 Xaotique

Advanced Member

Members
510 posts

LocationPennsylvania, United States
Age:21

Posted 30 December 2012 - 11:43 AM

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.

Back to top

#6 ChrisPHP

Advanced Member

Members
30 posts

LocationLebanon

Posted 30 December 2012 - 07:14 PM

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

Edited by ChrisPHP, 30 December 2012 - 07:14 PM.

Best regards,
Chris

Back to top

#7 ChrisPHP

Advanced Member

Members
30 posts

LocationLebanon

Posted 31 December 2012 - 06:52 AM

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>

getData.php:


<?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

Best regards,
Chris

Back to top

#8 Christian F.

Advanced Member

Gurus
3,055 posts

LocationNorway

Posted 31 December 2012 - 02:29 PM

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);

Keeping it simple.

Back to top

#9 ChrisPHP

Advanced Member

Members
30 posts

LocationLebanon

Posted 04 January 2013 - 04:52 PM

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 !!

Best regards,
Chris