如何在嵌套表的div中获取输入文本的值?

时间:2014-10-09 04:44:25

标签: javascript jquery html ajax

我在下面嵌套了div元素和输入。我想在单击按钮时捕获并获取其中一个输入类型文本的值。显然现在,使用下面的jquery代码无法获得一个带有class =" name"的输入文本。但第一个输入和textarea能够捕获。那么使用class =" name"来捕获我的第二个输入文本的值的确切代码是什么?单击按钮时。谢谢,请点击以下详细信息:

JQuery代码:

 $(function () {
           $('.postrep').click(function () {
               //  e.preventDefault();
               var inputs = $(this).closest('div').find('input'); //finding the inputs inside the div
               var textin = $(this).closest('div').find('textarea'); //finding the textarea inside the div

               var dataObject = {

                   Id: inputs.first().val(), // getting the first input value in the div

                   name: inputs.first('input').next('.name').val(), // How do I get this second input value?

                   reply: textin.first().val() //getting the value of the first textarea in the div
               };
             });
          });

HTML:

<table id="mytable">  

    <tr >
        <td class="tdstyle" >

  <div style="font-weight:bold;">  @Html.DisplayFor(modelItem => item.name) </div> 

   <p>  @Html.DisplayFor(modelItem => item.comment) </p>
  <p > <input type="button" id="like" name="like" value="Like" /> <input type="button" class ="Reply" name="Reply" value="Replie(s)" /></p>                                                                                                                                                                                         
   <div id="divReply" class ="divrep" >
           <table>

                 <tr >

                     <td >
                         <div style="font-weight:bold;"> @Html.DisplayFor(modelItem => item2.name) </div> 

                     <p> @Html.DisplayFor(modelItem => item2.reply)  </p>

                   </td>
                 </tr>

            </table>      

     <div> 
       <div class="editor-field" style="display:none; margin-bottom:5px;margin-top:5px">  
          <input type="text" id="comidvalue" name="id" class="id" value="@Html.DisplayFor(modelItem => item.Id)" />
       </div>

       <br />
       <input type="text" id="namerep" name="name" class="name" />  <!-- I want to get the value of this -->

      <br />
      <textarea id="reply" name="reply" class="reply" ></textarea>  

         <br />

       <input type="button" class="postrep" value="Post Reply" name="butname" style="cursor:pointer" /> 

     </div>
            <br />

  </div>
        </td>       
    </tr>


</table>

2 个答案:

答案 0 :(得分:2)

您可以使用id选择器获取输入框的值

$('#namerep').val();

但请确保您没有多个输入与id相同,如果您有多个id,则删除ID并仅使用class="name"获取输入值。< / p>

您可以使用jQuery属性选择器使用class="name"获取输入值,请参阅下面的代码 -

$(function () {
           $('.postrep').click(function () {
               //  e.preventDefault();
               //store parent div in a variable and use it at multiple places
               var $parentDiv = $(this).closest('div');
               var inputs = $parentDiv.find('input'); //finding the inputs inside the div
               var textin = $parentDiv.find('textarea'); //finding the textarea inside the div

               var dataObject = {

                   Id: inputs.first().val(), // getting the first input value in the div

                   name: $parentDiv.find('input[class="name"]').val(), //get closest div and find input with class="name"

                   reply: textin.first().val() //getting the value of the first textarea in the div
               };
             });
          });

答案 1 :(得分:0)

你可以得到

var name= $('#namerep').val();