CODEWITHSUNDEEP
javascripthtmljsp
Andrew
Andrew

Reputation: 83

Accessing HTML Elements From Javascript

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.

Upvotes: 0

Views: 1269

Answers (2)

uKolka
uKolka

Reputation: 38710

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.

Upvotes: 1

insomiac
insomiac

Reputation: 5664

You can do this in two ways:

  1. From using input name..

    $(document).ready(function () {

$(document).on("click", ".CommentButton", function () {   
    text    =   $("textarea", $(this).parent()).val();
    var name = $("input[name='Name']").val();
    var description = $("input[name='Description']").val();
   });
});

OR

2 By using class name :

    $(document).ready(function () {

    $(document).on("click", ".CommentButton", function () {   
        text    =   $("textarea", $(this).parent()).val();
        var name = $(".GadgetName").val();
        var description = $(".GadgetDescription").val();
       });
    });

JsFiddle : http://jsfiddle.net/KZ9hx/1/

Upvotes: 0

Related Questions