兄弟姐妹总是返回undefined

Question

如果你看到下面的jquery代码，hv和commentid都返回undefined。对于“hv”我试过“兄弟姐妹”和“纪念”，我试过下一个:-(（评论ID在第二个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() {...})