How to do an AJAX request from generated HTML
Hi everyone,
I have a form:
-
<div id="toupdate">
<form id="ticketform" action="index.php" method="post">
<p><input type="text" name="first_name" id="first_name" class="forminput" /> Voornaam </p>
<p><input type="text" name="last_name" id="last_name" class="forminput" /> Achternaam </p>
<p><input type="text" name="email" id="email" class="forminput" /> E-mail </p>
<p><input type="text" name="telephone" id="telephone" class="forminput" /> Telefoon</p>
<p><textarea name="address" class="forminput" id="address"></textarea> Adres</p>
<p><input type="image" src="images/spacer.gif" alt="Verzenden" id="submitbutton" /></p>
</form>
</div>
When I submit this form, the div containing the form is updated with a confirmation message:
-
<div id="toupdate">
<h1>Confirmation Message</h1>
<p>Thanks for your submit, everything went well.</p>
<p><a href="index.php" id="resetform">New submit?</a></p>
</div>
So the form disappears and a message replaces it, this by means of an AJAX request:
-
$(document).ready(function() {
$("#tickets").submit( function() {
var inputs = [];
$(':input', this).each(function() {
inputs.push(this.name + '=' + escape(this.value));
});
jQuery.ajax({
data: inputs.join('&'),
url: 'submitform.php',
error: function() {
alert('Error!');
},
success: function(r) {
$("#toupdate").html(r);
}
});
return false;
});
});
In the message I have an href. Now, when I click the href I want to show the form again, also by means of an AJAX request. So what I thought was this but it doesn't work:
-
$(document).ready(function() {
$("#resetform").click(function(){
jQuery.ajax({
url: 'form.php',
error: function() {
alert('Error!');
},
success: function(r) {
$("#toupdate").html(r);
}
});
return false;
});
});
So, how can I do an AJAX request from HTML content that is generated by means of a first AJAX request? Thanks for your speedy response.