我的网络应用程序具有
我有一个ajax脚本,该脚本根据提交表单具有的输入标签将表单数据提交到其他div。效果很好,除非ajax脚本需要读取返回的ajax数据。
脚本:
<script type="text/javascript">
$(document).ready(function() {
$("form").submit(function() {
// Getting the form ID
var formID = $(this).attr('id');
//var hv = $('input[name=target]').val(); //this only worked for the 1st div, and hadn't worked for the 2nd div
//alert(hv);
//alert( $("#form2 input[name=target]").val() ); //works
alert ("formID at start is " + formID);
if (formID =="form1") {
var hv = "div2";
alert ("form id at 1st if is " + formID);
}
if (formID =="form2") {
var hv = "response";
}
if (formID =="contact3") {
var hv = "div1";
}
//alert (hv);
var formDetails = $('#'+formID);
$.ajax({
type: "POST",
url: 'file.php',
data: formDetails.serialize(),
success: function (data) {
// Inserting html into the result div
$('#'+hv).html(data);
},
error: function(jqXHR, text, error){
// Displaying if there are any errors
$('#'+hv).html(error);
}
});
return false;
});
});
</script>
HTML代码:
<div id="div1" style="background-color:lightblue">
<form name="contact1" action="contact.php" method="POST" id="form1">
<div>Name: <input type="text" name="name" id="name" required /></div>
<div>Email: <input type="email" name="email" id="email" required /></div>
<input type="hidden" name="target" value="form2">
<div><input type="submit" name="submit" value="Submit" /></div>
</form>
<p>This is Div FORM1</p>
</div>
<hr>
<div id="div2" style="background-color:yellow">
<form name="contact2" action="contact.php" method="POST" id="form2">
<div>Name: <input type="text" name="name" required /></div>
<div>Message: <input type="text" name="message" required /></div>
<input type="hidden" name="target" value="response">
<div><input type="submit" name="submit" value="Submit" /></div>
</form>
<p>This is DIV form 2</p>
</div>
<div id="response" style="background-color:brown"><p>This is DIV Response. </p><p>This is DIV Response. </p><p>This is DIV Response. </p><p>This is DIV Response. </p><p>This is DIV Response. </p><p>This is DIV Response. </p></div>
和file.php文件
<?php
if(isset($_POST['email'])){
echo "Contact Form 1 Submitted Successfully";
}
elseif (isset($_POST['message'])){
echo "Contact Form 2 Submitted Successfully";
}
elseif (isset($_POST['message'])){
echo "Contact Form 3 in RESPONSE Submitted Successfully";
}
?>
<form name="contact3" action="contact.php" method="POST" id="contact3">
<div>new content: <input type="text" name="contact3" required /></div>
<div>New content <input type="text" name="message3" required /></div>
<input type="hidden" name="target" value="form1">
<div><input type="submit" name="submit" value="Submit" /></div>
</form>
因此,基本上,当我单击Form2的“提交”按钮时,响应div得到更新。但是,当我单击file.php中加载的内容时,jQuery脚本不起作用。浏览器将整个屏幕发布到file.php。 Ajax发布不起作用!
打我!!!!!
答案 0 :(得分:0)
PHP文件中的新表格无法正常运行,因为它是动态添加的,您需要将代码更改为如下所示。
更改
$("form").submit(function() {
收件人
$(document).on('submit', 'form', function() {