Ajax后无法读取隐藏属性的值 [英] Can't read value of hidden property after ajax

问题描述

我的网络应用程序具有

我有一个ajax脚本，该脚本根据提交表单具有的输入标签将表单数据提交到其他div.效果很好，除非ajax脚本需要读取返回的ajax数据.

My web app has

I have an ajax script that submits form data to a different div based on an input tag that the submitting form has. Works well, except when the ajax script needs to read the returned ajax data.

脚本:

                        <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文件

and the file.php file

<?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发布不起作用！

So, basically, when i click on the submit button for form2, the response div gets updated. But when i click on the loaded contents from file.php, the jquery script doesn't work. The browser posts the entire screen to file.php. The ajax posting doesn't work!

打败我！！！！！

推荐答案

PHP文件中的新表单是动态添加的，因此不起作用，您需要将代码更改为如下所示.

The new form from PHP file doesn't work because it is dynamically added, you'll need to change your code to be like the following.

更改

$("form").submit(function() {

收件人

$(document).on('submit', 'form', function() {

这篇关于Ajax后无法读取隐藏属性的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！