Siblings returns undefined always

Question

If you see the jquery code below, both hv and commentid return undefined. For "hv" i tried "siblings" and for "commentid", i tried next :-( (comment ID is in the 2nd div/2nd form)

What am i doing wrong, please?

I could always do some Ifs to detect the form that is being submitted and then post to the div contents that I need. However, this can get messy as there will be cross posts back and forth

And, I would really prefer to use the "hidden" fields so that I can have posts working well in Ajax.

Any help is very much appreciated

The jquery code:

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

The html code:

<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

You are using the .siblings() function incorrectly, in your code: var hv = $(this).siblings('.target').val(); will return all siblings of the form with classname = 'target', you should follow your alert selector (that works) like below: var hcv = $(this).siblings("input[name=target]").val();

also, modify your event handler as it is also incorrect

from

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

to

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

or better yet

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