Jump to content


Photo

Directly Post Info Of Option Selected


  • Please log in to reply
11 replies to this topic

#1 ChrisPHP

ChrisPHP

    Advanced Member

  • Members
  • PipPipPip
  • 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

#2 Xaotique

Xaotique

    Advanced Member

  • Members
  • PipPipPip
  • 558 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();
}

?>


#3 ChrisPHP

ChrisPHP

    Advanced Member

  • Members
  • PipPipPip
  • 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

#4 ChrisPHP

ChrisPHP

    Advanced Member

  • Members
  • PipPipPip
  • 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

#5 Xaotique

Xaotique

    Advanced Member

  • Members
  • PipPipPip
  • 558 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.

#6 ChrisPHP

ChrisPHP

    Advanced Member

  • Members
  • PipPipPip
  • 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

#7 ChrisPHP

ChrisPHP

    Advanced Member

  • Members
  • PipPipPip
  • 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

#8 Christian F.

Christian F.

    Advanced Member

  • Staff Alumni
  • 3,106 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.

#9 ChrisPHP

ChrisPHP

    Advanced Member

  • Members
  • PipPipPip
  • 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

#10 DavidAM

DavidAM

    Advanced Member

  • Gurus
  • 1,974 posts
  • LocationSpring, TX USA

Posted 04 January 2013 - 10:12 PM

Unless I am mistaken, a DIV does not have a value (.val()). I think you need to use .html().
-- I haven't lost my mind, it's backed up on tape ... somewhere!

#11 Xaotique

Xaotique

    Advanced Member

  • Members
  • PipPipPip
  • 558 posts
  • LocationPennsylvania, United States
  • Age:21

Posted 04 January 2013 - 11:35 PM

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

#12 ChrisPHP

ChrisPHP

    Advanced Member

  • Members
  • PipPipPip
  • 30 posts
  • LocationLebanon

Posted 05 January 2013 - 06:44 PM

Yea it was an honest mistake lol
Eventually i used the $('#address1').html... and my code worked fine :)
Thanks everyone
Best regards,
Chris




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com