ajax后无法读取隐藏属性的值

Posted 2023-05-09

【中文标题】ajax后无法读取隐藏属性的值

【英文标题】：Can't read value of hidden property after ajax

【发布时间】：2019-09-10 14:11:30

【问题描述】：

我的网络应用有

我有一个 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 发布不起作用！

打败我！！！！！！

【问题讨论】：

Jquery .on() submit event的可能重复

【参考方案1】：

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

改变

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

收件人

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