兄弟姐妹总是返回未定义

Question

如果你看到下面的 jquery 代码，hv 和 commentid 都返回 undefined。对于“hv”，我尝试了“siblings”，对于“commentid”，我尝试了下一个:-(（评论 ID 是 2nd div/2nd 形式）

请问我做错了什么？

我总是可以做一些 Ifs 来检测正在提交的表单，然后发布到我需要的 div 内容。但是，这可能会变得混乱，因为会有来回的交叉帖子

而且，我真的更喜欢使用“隐藏”字段，这样我就可以让帖子在 Ajax 中运行良好。

非常感谢任何帮助

jquery 代码：

<script type="text/javascript">
                        $(document).ready(function() {
                        // $("form").submit(function() { //https://stackoverflow.com/questions/55776526/cant-read-value-of-hidden-property-after-ajax/55776754#55776754
                        $(document).on('submit', 'form', 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);
var hv = $(this).siblings('.target').val();

alert ("siblings is " + hv);
    var commentid = $(this).parent().next('.commentId').val();
    alert("comment id is " + commentid);

                         var formDetails = $('#'+formID);
                         $.ajax({
                         type: "POST",
                         url: 'ajax/',
                         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代码：

<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>


<div id="div_left" 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="div_right">
 <div><input type="submit" name="submit1" id="submit1" value="Submit" /></div> 
</form>

    <p>This is Div FORM1</p>
</div>

<hr>


<form name="contact2" id="form2">  
    <div id="div_right" style="background-color:yellow">

 <br>Name: <input type="text" name="name"  required />
 <br>Message: <input type="text" name="message"  required />
 <input type="hidden" class="target" name="target" value="div_bottom">
  <input type="submit" name="submit2" id="submit2" value="Submit" /> 
    <p>This is DIV form 2</p>
</div> 
    <input type="hidden" name="commentid" value="commentid_is_7">
</form>




<div id="div_bottom" 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>

Answer 1

您在代码中错误地使用了 .siblings() 函数： var hv = $(this).siblings('.target').val(); 将返回带有 classname = 'target' 的表单的所有兄弟姐妹，您应该按照如下所示的警报选择器（有效）： var hcv = $(this).siblings("input[name=target]").val();

另外，修改您的事件处理程序，因为它也不正确

来自

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

到

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

或者更好

$('form').submit(function() {...})