访问HTML元素通过JavaScript

Question

我有以下的HTML代码

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

我需要访问的只读文本框Name文本，并在Comment textarea的文本。

请注意，这些行位于for循环中，因此有多个组件具有相同的类名称。

我设法使用此代码

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

我现在需要的是访问在Name文本框中的文本来获得在Comment textarea的价值。

Answer 1

下面是你是如何做到的。

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

您也可以在action中试用。

Answer 2

您可以通过两种方式来实现：

1. 从使用输入的名字..

   $(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使用的类名：

$(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/