Question

如果看到下面的jquery代码，则hv和commentid都返回undefined。对于“ hv”，我尝试了“兄弟姐妹”，对于“ commentid”，我尝试了下一个:-(（注释ID为2div / 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(); 将返回类名='target'的所有同级兄弟，您应该遵循以下警告选择器（有效）： var hcv = $(this).siblings("input[name=target]").val();

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

来自

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

到

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

或更好

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

兄弟姐妹总是返回未定义

1 个答案: