[英]load form with ajax and submit with jQuery
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). 我有一个索引文件,我正在其中使用ajax加载竞争文件(在这种情况下,表单存储在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).
我有一个窗体,它在单击菜单项(调用ajax函数-此部分有效)后恰好在div中加载。 But if I want to submit that form with jQuery afterwords using the
但是,如果我想使用jQuery后文字提交该表单
$(".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.
如果我将表单直接移动到索引页面,则该功能将正常运行。
$(document).ready(function () {
$(".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 提交表格
<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 谢谢
Here's what I normally do, add a onSubmit event in the form tag 这是我通常的工作,在表单标签中添加onSubmit事件
<form name="loginform" class="loginform" id="loginform" action="#" method="post" onSubmit="return addContent('loginform');">
and then with javascript 然后用javascript
function addContent(frm) {
//anything you wanna do before you post
$.post(
url,
$('#' + frm).serialize(),
function (data) {
result = data;
}
)
.success(function() {
//add your success proccesses
})
.complete(function() {
})
.error(function() {
alert('An error has occurred.');
});
return false;// this stops the form from actually posting
}
Use this code: 使用此代码:
<div id="contact_form">
<form name="loginform" class="loginform" id="loginform" action="javascript:add_admin();" 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"/>
</form>
</div>
You have to define a function on javascript use this javascript code 您必须使用此javascript代码在javascript上定义一个函数
function add_admin(){
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;
}
Thanks! 谢谢!
I was having the same issue when I ran across this thread. 遇到此线程时,我遇到了同样的问题。 This solution did not quite work for what I needed to do, but what I wound up doing is just calling my page initiate function again after I loaded the AJAX form.
该解决方案不能完全满足我的需要,但是我最后要做的只是在加载AJAX表单后再次调用页面启动函数。 This added the new AJAX form to the event calls and it worked perfectly.
这将新的AJAX表单添加到事件调用中,并且运行良好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.