Thursday, 5 September 2013

load form with ajax and submit with juery

load form with ajax and submit with juery

I have struggled for quite some time now with this but can figure out
whats wrong.
I have an index file where I'm loading the contend with ajax (in this case
a form stored in add_admin.php). I have a form which loads just perfectly
in a div after clicking a menu item(calling the ajax function - this part
works). But if I want to submit that form with jQuery afterwords using the
$(".loginform").submit(function(e) {});
it doesn't get called. I'm suspecting the reason is that the form was not
present on the page at the time it was loaded. If I move the form directly
to the index page, the function works perfectly.
$(".loginform").submit(function(e) {
data = $("#loginform").serialize();
password = document.getElementById("user_pass").value;
passtosubmit=hex_sha512(password);
data += "&pass=" + encodeURIComponent(passtosubmit);
password="";
//$.post("modules/process/process_add_admin.php", data);
//alert(data);return false;
$.ajax({
type: "POST",
url: "/modules/process/process_add_admin.php",
data: data,
success: function() {
$('#main_panel_container').html("<div id='message'></div>");
$('#message').html("<h2>Contact Form Submitted!</h2>")
.append("<p>We will be in touch soon.</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='checkmark'
src='images/check.png' />");
});
}
});
return false;
});
The form to submit
add_admin.php
<div id="contact_form">
<form name="loginform" class="loginform" id="loginform" action="#"
method="post">
<label><strong>Username</strong></label><input type="text"
name="username" id="user_login" size="28" class="input" />
<br />
<label><strong>Password</strong></label><input type="password"
name="p" id="user_pass" size="28" class="input"/>
<br />
<label><strong>E-mail</strong></label><input type="text"
name="email" id="user_email" size="28" class="email" />
<br />
<label><strong>First Name</strong></label><input type="text"
name="fname" id="user_fname" size="28" class="input" />
<br />
<label><strong>Last Name</strong></label><input type="text"
name="lname" id="user_lname" size="28" class="input" />
<br />
<input id="save" class="addbutton" type="submit" value="Add"
onclick=""/>
</form>
</div>
can anyone please advise?
Thanks

No comments:

Post a Comment