Question

I have the following HTML code

<input type="text" readonly name="Name" class="GadgetName" placeholder="Please Enter the Gadget Name" value="Potatoe Masher" />
<input type="text" readonly name="Description" class="GadgetDescription" placeholder="Please Enter the Gadget Description" value="You'll Never Stop Mashing !" />
<form action="SubmitComment" method="POST">
    <div class="Comment">
        <textarea rows="4" cols="200" name="Comment" class="GadgetComment" id="Comment2" placeholder="Write Comments Here"></textarea>
        <input type="button" value="Submit Comment" class="CommentButton" onclick="AddComment()" />
    </div><br />
</form>

I need to access the text in the read only textbox Name and the text in the Comment textarea.

Note, that these lines are in a for loop hence there are multiple components with the same class name.

I managed to get the value in the Comment textarea using this code

$(document).ready(function(){
    $(document).on("click", ".CommentButton", function(){
        text = $("textarea", $(this).parent()).val();
    });
});

What I need now is to access the text in the Name textbox.

Answer 1

Here is how you do it.

$(document).ready(function () {
  $('.CommentButton').click(function () {
    console.log($(this).closest('form').parent().find('[name="Name"]').val());
    console.log($(this).parent().find('[name="Comment"]').val());
  });
});

You can try it out in action as well.