Populate input with database data on select change

Question

I'm an absolute beginner in the HTML/Php/JavaScript world. I'm trying to make this page:

dropdown list with titles of documents
when something is selected, populate input fields below with data from PostgreSQL to allow for update
submit button to update database with corrected values from user.

1 and 3 are ok (already tried this with an insert-only form).
My code looks like this (simplified, without dbconn):

echo "<select name='listedoc' size=1>";
while ($ligne = pg_fetch_array($result, null, PGSQL_ASSOC))
{
echo '<option value="'.$ligne['id_doc'].'">'.$ligne['doc_titre']. '</option>';
} 
echo "</select>";

The input fields (simplified, there are 4 fields actually):

<p><form name="saisiedoc" method="post" action="docupdins.php"></p>
<table border=0>
<tr><td>Texte</td>
<?php
echo '<td> <textarea name="content" cols="100" rows="30"></textarea> </td>';
?>
</tr><tr>
<td colspan=2>
<input type=submit value="Valider la saisie" name="maj"> </td>
</tr>
</table>
</form>'

Then JQuery script :

<script>
$(document).ready(function(){
$("select#listedoc").change(function () {
var id = $("select#listedoc option:selected").attr('value');
$.post("docsel.php", {id:id},function(data) {
});
});

</script>

The php to select fields (docsel.php):

<?php 
include('../scripts/pgconnect.php');
$iddoc = $_POST['id'];
$sql="SELECT * FROM document where id_doc = $iddoc";
$result = pg_query($db, $sql);
if (!$result) {
  echo "ERREUR<br>\n";
exit;}
$row = pg_fetch_row($result);
$doctyp = $row[1];
$doctitre = $row[2]; 
$docauteur = $row[3];
$doccontent =$row[4];
pg_free_result($result);
pg_close($db);
}
?>

Whatever I do, I can't get back values. I tried value="'.$doctitre'" in the input, echo $doctitre, to no avail . Is my code logic correct ? Thank you for your help

mindandmedia · Accepted Answer · 2012-02-19 22:43:30Z

1

you are close. the script docsel.php needs to return the data to the html-page. you have it already setup to receive the data in the callback function

$.post("docsel.php", {id:id},function(data) { 
  $('textarea[name="content"]').text(data.content);
});

in order to have something in data.content, the php script sends json data:

$result = [];
$result['content'] = $doccontent;
echo json_encode($result);

maybe you need to read the docs on $.post and json_encode... good luck.

answered Feb 19, 2012 at 22:43

mindandmedia

6,8551 gold badge26 silver badges33 bronze badges

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

4 Comments

Alex Leguevaques Over a year ago

Thanks for helping. It didn't work for me, docsel.php is not run. There must be something wrong here :

<script> 						$(document).ready(function() { 							$("select#listedoc").change(function() { 								var id = $("select#listedoc option:selected").attr('value'); 								$.post("docsel.php", { 									id : id 								}, function(data) { 									$('textarea[name="content"]').text(data.content) 								}); 							}); 						});  					</script>

I reread a hundred times and could not find any mistake.

mindandmedia Over a year ago

i suggest you open your browsers developer console and put the line with the ajax-call directly in there: $.post("docsel.php", { id : '4' }, function(data){ console.log(data); }); Then you should see, what data is coming back from the docsel.php. post the output here.

Alex Leguevaques Over a year ago

Thanks to your help and christophmccann's help, I was able to make my docsel.php work ! Now I've got a Json-encoded array I need to use to modify value of input fields (last step!) . Here is what I tried :

$.post("docsel.php", {id : id}, showResult , "text"); 							 function showResult(res) {   var obj = JSON.parse(res); $('#content').val(obj.content[0];); $('#titre').val(obj.titre[0];);    }

What am I doing wrong ?

mindandmedia Over a year ago

i would have to see the json... also, if you read the documentation on $.post, you can pass a parameter dataType:json, or something alike, sou you don't need to parse the result.

christophmccann · Accepted Answer · 2012-02-19 22:48:33Z

There are a couple of things you need to change here.

Firstly, and most importantly your docsel.php script has a gaping security hole. You should never ever ever place unsanitised input e.g. directly from a user, straight into a SQL query because it allows for SQL injection. Essentially, SQL injection allows a malicious user to end the programmers query and submit their own. To get round this you must sanitise any user input - so in this case pass the user input through the function pg_escape_literal() before putting it into your query.

Secondly, your docsel.php script must put out some kind of output for the AJAX request. You can do this by using echo and I would recommend you encode it into JSON. Code example:

$return_vals = array("doctype" =>  $doctyp, "doctitle" => $doctitre, "docauthor" => $docauteur, "doccontent" => $doccontent);
echo json_encode(array("document" => $return_vals));

Lastly, in your jQuery script, you aren't actually doing anything with the data that is returned from your AJAX post request. Inside the callback function, you need to then add the returned fields to your select dropdown. Code example:

<script>
     $(document).ready(function(){
     $("select#listedoc").change(function () {
          var id = $("select#listedoc option:selected").attr('value');
          $.post("docsel.php", {id:id},function(data) {
               //FILL THE DROPDOWN HERE
               $(data).each(function(elem) {
                    $("#dropdown-id").append("<option value='" + elem.doctitle + "'>" + elem.doctitle + "</option>");
               }); 
          }, "json");
     });

</script>

A mute and pedantic point, but when making requests for content then you should be using GET instead of POST.

Thank you for your help. It works now (without the security hole !).

Collectives™ on Stack Overflow

Populate input with database data on select change

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related