【问题标题】:How to get only one value from multiple input text field with same name?如何从具有相同名称的多个输入文本字段中仅获取一个值?
【发布时间】:2016-12-07 10:28:47
【问题描述】:

我想知道如何从特定的输入文本字段中获取值。有许多具有相同名称和具有不同值的相同类的文本字段,每个输入有 1 个按钮。如何通过单击每个特定按钮从每个字段中获取值。与 Javascript 或 Jquery 一起使用?请指导我。

<input type="hidden" name="myvalue" class="form-control input_text" value="aaa"/>
    <input type="button" class="clickme" value="Get Value" />

    <input type="hidden" name="myvalue" class="form-control input_text" value="bbb"/>
    <input type="button" class="clickme" value="Get Value" />

    <input type="hidden" name="myvalue" class="form-control input_text" value="ccc"/>
    <input type="button" class="clickme" value="Get Value" />


    <input type="hidden" name="myvalue" class="form-control input_text" value="ddd"/>
    <input type="button" class="clickme" value="Get Value" />

    <input type="hidden" name="myvalue" class="form-control input_text" value="eee"/>
    <input type="button" class="clickme" value="Get Value" />

【问题讨论】:

    标签: javascript jquery html


    【解决方案1】:

    $('.clickme').click(function() {
    
      alert($(this).prev().val())
    })
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input type="hidden" name="myvalue" class="form-control input_text" value="aaa" />
    <input type="button" class="clickme" value="Get Value" />
    
    <input type="hidden" name="myvalue" class="form-control input_text" value="bbb" />
    <input type="button" class="clickme" value="Get Value" />
    
    <input type="hidden" name="myvalue" class="form-control input_text" value="ccc" />
    <input type="button" class="clickme" value="Get Value" />
    
    
    <input type="hidden" name="myvalue" class="form-control input_text" value="ddd" />
    <input type="button" class="clickme" value="Get Value" />
    
    <input type="hidden" name="myvalue" class="form-control input_text" value="eee" />
    <input type="button" class="clickme" value="Get Value" />
    1. 点击按钮时,使用this 上下文来获得点击按钮。
    2. 使用.prev() 获取作为输入的前一个元素。
    3. 使用.val() 获取值。

    【讨论】:

    • previous sibling element
    • 这是工作,但我很抱歉。我忘了在代码中输入
      。输入文本字段和按钮不在同一个
      兄弟中。在这种情况下,我该怎么做兄弟?帮帮我..对不起我的错误。
    • 你能更新 html 结构,以便我可以看到它的样子,然后我可以给出一个解决方案@KyawZinWai
    【解决方案2】:
    1. 尝试用 div 封装按钮和输入
    2. 从按钮事件中得到这个(按钮)
    3. 使用 $(this).closest('div') 到达父级并从那里获取下一个输入。

    $(document).ready(function() {
      $('.clickme').click(function() {
        var div = $(this).closest('div');
        alert(div.find('input').val());
      });
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div>
    <input type="hidden" name="myvalue" class="form-control input_text" value="aaa"/>
    <input type="button" class="clickme" value="Get Value" />
    </div>
    <div>
    <input type="hidden" name="myvalue" class="form-control input_text" value="bbb"/>
    <input type="button" class="clickme" value="Get Value" />
    </div>
    <div>
    <input type="hidden" name="myvalue" class="form-control input_text" value="ccc"/>
    <input type="button" class="clickme" value="Get Value" />
    </div>
    <div>
    <input type="hidden" name="myvalue" class="form-control input_text" value="ddd"/>
    <input type="button" class="clickme" value="Get Value" />
    </div>
    <div>
    <input type="hidden" name="myvalue" class="form-control input_text" value="eee"/>
    <input type="button" class="clickme" value="Get Value" />
    </div>

    【讨论】:

    • 一杯水能游泳,为什么还要下海。
    • 我喜欢广阔的海洋空间 :) - prev() 也是一种出色的方法,但比我喜欢的更依赖于 dom 结构......不过只是我的看法......
    • 我明白了。非常感谢。这符合你的逻辑。我将隐藏的输入字段放入按钮 div 中,就可以了。
    • 如何将这些值放入数组中。例如:我单击第二个按钮,该值将放入数组中,然后再次单击最后一个按钮,我将该值放入该现有数组中,但第一个数组不应该删除它,它看起来像合并或其他东西。我该怎么做兄弟:?
    • 为此使用全局变量:window.myArray.push(div.find('input').val());
    【解决方案3】:

    试试这个

    $(document).ready(function () {
     $("input.clickme").click(function () {
       alert($(this).prev('input[name=myvalue]').val());
     });
    });
    

    【讨论】:

      【解决方案4】:

      this 将被当前点击buttonprev('input') 将选择上面的输入元素。见下面的代码。

      $(document).ready(function () {
             $(".clickme").on('click',function(){
               alert($(this).prev('input').val());
             });
          });
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <input type="hidden" name="myvalue" class="form-control input_text" value="aaa"/>
          <input type="button" class="clickme" value="Get Value" />
      
          <input type="hidden" name="myvalue" class="form-control input_text" value="bbb"/>
          <input type="button" class="clickme" value="Get Value" />
      
          <input type="hidden" name="myvalue" class="form-control input_text" value="ccc"/>
          <input type="button" class="clickme" value="Get Value" />
      
      
          <input type="hidden" name="myvalue" class="form-control input_text" value="ddd"/>
          <input type="button" class="clickme" value="Get Value" />
      
          <input type="hidden" name="myvalue" class="form-control input_text" value="eee"/>
          <input type="button" class="clickme" value="Get Value" />

      【讨论】:

      • 我明白了兄弟。非常感谢。
      猜你喜欢
      相关资源
      最近更新 更多
      热门标签