Append a PHP code with AJAX

Question

I want to insert a new field in a div when the user clicks on the button (+).

The code of textfield is that:

<?php
$sql = "SELECT nome, codigo FROM ref_bibliograficas";
$result = mysql_query($sql) or die (mysql_error());
echo ("<select class='autocomplete big' name='ref_bib_0' style='width:690px;' required>");
echo ("<option select='selected' value=''/>"); 
while($row = mysql_fetch_assoc($result)){
echo ("<option value=" . $row["codigo"] . ">" . $row["nome"] . "</option>");
echo ("</select>");
mysql_free_result($result);
?>

So, i don't know how I insert the field with AJAX.

I maked the function onclick with jQuery! Can anyone help me please?

Thanks!

Answer 1

What you're looking for is the jQuery .load() function. http://api.jquery.com/load/

Have your php page output the desired HTML that you want to add to your div, then your JavaScript code should look something like this:

$('#addButton').click(function(){ // Click event handler for the + button. Replace #addButton wit the actual id of your + button
 $('#myDiv').load('yourphppage.php'); // This loads the output of your php page into your div. Replace #myDiv with the actual id of your div
});

If you want to append a new field to your div, then you should do the following:

$('#addButton').click(function(){ 
 $.post('yourphppage.php', function(data) {
 $('#myDiv').append(data);
 });
});

Answer 2

Ajax Approach

$(document).ready(function(e)
{
 $('#plus-button').click(function(e)
 {
 $.ajax(
 {
 url: "PHP-PAGE-PATH.php", // path to your PHP file
 dataType:"html",
 success: function(data)
 {
 // If you want to add the data at the bottom of the <div> use .append()
 $('#load-into-div').append(data); // load-into-div is the ID of the DIV where you load the <select>
 // Or if you want to add the data at the top of the div
 $('#load-into-div').prepend(data); // Prepend will add the new data at the top of the selector
 } // success
 }); // ajax
 }
});