How can we get values of form elements inside fieldset?

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

I have some more fields similar to this in a page. So I need to get values from input form and also from specific fieldset. How can I do it in jQuery?

How can we get values of form elements inside fieldset?

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

I have some more fields similar to this in a page. So I need to get values from input form and also from specific fieldset. How can I do it in jQuery?

• javascript
• jquery
• html
• forms
• fieldset

• Use $('#myFieldset #input').val() – Hassan Imam Commented Jul 17, 2017 at 9:50
• api.jquery./val – Rory McCrossan Commented Jul 17, 2017 at 9:50
• You can use jquery selector to select input from specific fieldset id or direct select the input id like: like: $('#input').val() – HuyTran Commented Jul 17, 2017 at 9:50
• Theres nothing to do with fieldset. You can access values using jquerys val() – zennith Commented Jul 17, 2017 at 9:53
• I have many such fieldset with different IDs in a page. I want to use javascript function to detect on which fieldset click event has occurred and get the input val(). – ashkus Commented Jul 17, 2017 at 10:10

4 Answers 4

If you are using id attributes:

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

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

If you are using class attributes.

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

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

You are able to get all ids value from fieldset as below:

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());
            });
        });

So this thing will give you all inputs not then type = button value.

Here you go with the solution https://jsfiddle/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./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.

Try this:

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

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