So here's the situation: I've managed to insert and delete records from a form using jQuery and PHP scripts to interact with a MYSQL database. However, I'm facing a challenge when it comes to updating data that has been retrieved from the database. Let me explain the file structure:
In index.php, there are jQuery functions that display a form for adding new data to MYSQL using save.php. Additionally, all records are displayed without refreshing the page by calling load-list.php from index.php, which works smoothly. The delete function in index.php also successfully deletes a record from the MySQL database by calling delete.php.
The issue arises with the update function called from index.php to update data using update-form.php after retrieving a specific record from the MySQL table. While the update process works fine up to this point, there seems to be a problem when trying to transfer data from update-form.php to update.php, where the actual update query for MySQL is written.
The main problem lies in transferring data from update-form.php to update.php (where the update query is executed in MySQL).
I've attempted various approaches, and upon investigation, I discovered that the data isn't being transferred from update-form.php to update.php. There appears to be an issue with the jQuery AJAX function as it fails to send data to the update.php page. Something crucial is missing in the way update.php is being called; it never gets accessed.
If you'd like to review the files related to this, please use the link below to download a ZIP file containing all the necessary documents (virus-checked):
Download mysmallform files in ZIP format, including MySQL queries
<pre>
<body>
<div class="container">
<form id="submit" method="post">
<fieldset>
<legend>Enter Information</legend>
<label for="Name">Name : </label>
<input id="name" class="text" name="name" size="20" type="text">
<label for="gender">Gender : </label>
<input id="gender" class="text" name="gender" size="20" type="text">
<label for="dob">DoB : </label>
<input id="dob" class="date" name="dob" size="20" type="text"> <button> Add </button>
</fieldset>
</form>
<div class="name_list"></div>
<div class="update_form"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
function loadList(){
$.ajax({
url: "load-list.php",
cache: false,
success : function(html){
$(".name_list").html(html);
}
});
}
loadList();
$("form#submit").submit(function() {
// we want to store the values from the form input box, then send via ajax below
var x=window.confirm("Are you sure you want to delete this item?")
var name = $('#name').attr('value');
var gender = $('#gender').attr('value');
var dob = $('#dob').attr('value');
if (x==true){
$.ajax({
type: "POST",
url: "save.php",
data: "name="+ name +"& gender="+ gender +"& dob="+ dob,
success: function(){
loadList();
}
});
}
return false;
});
$(".delete_button").live("click", function(){
//this deletes the row clicked on with an alert and then reloads the list
var id = $(this).attr("id");
var x=window.confirm("Are you sure you want to delete this item?")
if (x==true){
$.ajax({
type: "POST",
url: "delete.php",
data: "id="+ id,
success: function(){
loadList();
}
});
}
return false;
});
$(".update_button").live("click", function(){
//this loads the update form
var id = $(this).attr("id");
$.ajax({
url: "update-form.php",
data: "id="+ id,
cache: false,
success: function(html){
$(".update_form").html(html);
}
});
return false;
});
$("#updateform").ajaxform("submit",function(){
//$("form#update").live("submit",(function() {
// we want to send via ajax and empty the html from the update_form element
var name = $('#name_update').attr('value');
var gender = $('#gender_update').attr('value');
var dob = $('#dob_update').attr('value');
var id = $('#id').attr('value');
alert (name);
$.ajax({
url: "update.php",
type: "POST",
data: "name="+ name +"& gender="+ gender +"& dob="+ dob,
error: function(){
alert('Error loading document');
},
success: function(){
alert (" i am in success below load list ");
$(".update_form").empty();
loadList();
}
});
return false;
});
});
</script> </body>
</pre>