jQuery/javascript 到 find/get 字段集中使用 ID 的表单元素的值

Question

如何获取字段集中表单元素的值？

<fieldset id='myFieldset'>
  <label for='Resp'>Responsibilities</label><input id='input' type='text' size='55'>
  <button type='button' class='btn-sm' style='width:50px;margin:2px' id='addItem'>Add</button>
  <button type='button' class='btn-sm' style='width:50px;margin:2px' id='clear'>Clear</button>
  <button type='button' class='btn-sm' style='width:50px;margin:2px' id='edit'>Edit</button>
  <ul id='output' style='display:none'></ul>
  <br class='clear' /> 
  <textarea disabled name='Resp' id='Resp' cols='75' rows='5' required></textarea>
</fieldset>

我在一个页面中还有一些与此类似的字段。所以我需要从输入表单和特定字段集中获取值。我怎样才能在 jQuery 中做到这一点？

Answer 1

试试这个：

var inputVal = $('#myFieldset #input').val();
var textAreaVal = $('#myFieldset #Resp').val();

Answer 2

给你解决方案https://jsfiddle.net/f3xwzap9/

var data = {};

$('#addItem').click(function(){
  $('fieldset#myFieldset > input, textarea').each(function(){
    data[$(this).attr('id')] = $(this).val();
  });

 console.log(data);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id='myFieldset'>
  <label for='Resp'>Responsibilities</label><input id='input' type='text' size='55'>
  <button type='button' class='btn-sm' style='width:50px;margin:2px' id='addItem'>Add</button>
  <button type='button' class='btn-sm' style='width:50px;margin:2px' id='clear'>Clear</button>
  <button type='button' class='btn-sm' style='width:50px;margin:2px' id='edit'>Edit</button>
  <ul id='output' style='display:none'></ul>
  <br class='clear' /> 
  <textarea name='Resp' id='Resp' cols='75' rows='5' required></textarea>
</fieldset>

I have attached an event in Add button. I'm looping through all the input & textarea inside the fieldset & collecting the data.

Data is in JSON format id as key and value is value.

Since I'm looping through all the input & textarea, it will help you to collect all the child (input & textarea) data, rather than collecting the data specifically.

Answer 3

如果您使用的是 id 属性：

<input type="text" id="txtData" name="txtData" />

JQuery: $("#myFieldset #txtData").val();

如果您正在使用 class 属性。

<input type="text" class="txtEmail" />

Jquery $("#myFieldset .txtEmail").val();

您可以从字段集中获取所有 ids 值，如下所示：

Html

<fieldset id='myFieldset'>
      <input type="text" id="txtData" name="txtData" />
      <input type="text" class="txtEmail" />
      <input type="button" class="btntest" />
  </fieldset>

jQuery

$(".btntest").click(function () {
            $("#myFieldset input[type != button]").each(function(key,value){
                alert($(this).val());
            });
        });

所以这个东西会给你所有的输入，而不是然后输入=按钮值。

Answer 4

$('#myFieldset').find('input').val()

jQuery/javascript 到 find/get 字段集中使用 ID 的表单元素的值

jQuery/javascript to find/get values of form elements inside fieldset using ID

html

javascript

forms

jquery

fieldset