Accessing HTML Elements From Javascript

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.

$('.GadgetName').val()?

Leeish
– Leeish

2013-01-17 23:31:36 +00:00
Commented Jan 17, 2013 at 23:31 — Leeish
– Leeish, Commented Jan 17, 2013 at 23:31

uKolka · Accepted Answer · 2013-01-18 00:59:22Z

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.

edited Jan 18, 2013 at 0:59

answered Jan 17, 2013 at 23:44

uKolka

39k4 gold badges36 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

uKolka Over a year ago

I corrected the code for multiple items. And it does't require additional markup like with insomiac's answer.

insomiac · Accepted Answer · 2013-01-18 00:03:44Z

0

You can do this in two ways:

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/

edited Jan 18, 2013 at 0:03

answered Jan 17, 2013 at 23:49

insomiac

5,6848 gold badges47 silver badges73 bronze badges

3 Comments

Andrew Over a year ago

Hi Unfortunetly, it Did not work, What the First solution Did is the when applied to multiple Products; the Text changes when the respective button is pressed, but the name and description still displays the content of the first item. The Second solution also only displays the first Item's Description and Name

insomiac Over a year ago

can you post your complete html so that i can help you ?

insomiac Over a year ago

check my updated answer and check the jsfiddle url. I think i fixed your issue.

Collectives™ on Stack Overflow

Accessing HTML Elements From Javascript

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related