Hi all,
I’m trying to figure out how to refresh the page DIV after a successful form insert into my MySQL database. I’m
using jquery along with the ajaxForm plugin (<script src=“http://malsup.github.com/jquery.form.js”></script>).
I’m unsure where I should be inserting this part of the code into my submit function and whether there any problems
with it. I’m a novice so this concept is rather overwhelming. If you could please help it would be much appreciated.
Other similar example;
http://stackoverflow.com/questions/868890/ajax-how-refresh-div-after-submit
Submit Form
<form method="post" name="form" id="formSearch">
<label>First Name:</label><input id="First_Name" name="First_Name" type="text" />
<br />
<label>Last Name:</label><input id="Last_Name" name="Last_Name" type="text" />
<br />
<label>Email Address:</label><input id="Email_Address" name="Email_Address" type="text" />
<br />
<label>Telephone Number:</label><input id="Telephone_Number" name="Telephone_Number" type="text"
/>
<br />
<label>Postal Address:</label><input id="Postal_Address" name="Postal_Address" type="text" />
<select id="Contact_Group" name="Contact_Group">
<option value="">Select Group</option>
<option value="Ungrouped">Ungrouped</option>
<option value="Friends">Friends</option>
<option value="Family">Family</option>
<option value="Colleagues">Colleagues</option>
</select>
Current code as it stands now
//Sumbit form
$(function() {
$(".contact").click(function() {
var First_Name = $("#First_Name").val();
var Last_Name = $("#Last_Name").val();
var Email_Address = $("#Email_Address").val();
var Telephone_Number = $("#Telephone_Number").val();
var Postal_Address = $("#Postal_Address").val();
var Contact_Group = $("#Contact_Group").val();
var dataString = 'First_Name='+ First_Name + '&Last_Name=' + Last_Name + '&Email_Address=' +
Email_Address + '&Telephone_Number=' + Telephone_Number + '&Postal_Address=' + Postal_Address +
'&Contact_Group=' + Contact_Group;
if(First_Name=='' || Last_Name=='' || Email_Address=='' || Telephone_Number=='' || Postal_Address=='' ||
Contact_Group=='')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "php/new_contact.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
//Newly added
$('#First_Name').val('');
$('#Last_Name').val('');
$('#Email_Address').val('');
$('#Telephone_Number').val('');
$('#Postal_Address').val('');
$('#Contact_Group').val('');
}
});
}
return false;
});
});
Code to be inserted
$(document).ready(function() {
$("#formSearch").submit(function() {
var options = {
/* target:"#divResult", */
success: function(html) {
$("#txtSummary").replaceWith($('#txtSummary', $(html)));
},
url: "http://localhost/example/comp333assn1/php/group_list.php?
q=all_contacts"
}
$(this).ajax(options);
return false;
});
});