jQuery form name selector

Select fields inside a form using form name

by Anjana Silva

HTML

<h2>Form "your_form_name"</h2>
<form name="your_form_name">
  <input type="text" name="one_a" id="one_a" value="AAAAAAAA"/>
  <input type="text" name="one_b" id="one_b" value="BBBBBBBB"/>
  <input type="text" name="one_c" id="one_c" value="CCCCCCCC"/>
  <select name="one_d">
    <option value="111111">111111</option>
    <option value="222222">222222</option>
    <option value="333333">333333</option>
  </select>
</form>
<hr/>
<h2>Form "your_other_form_name"</h2>
<form name="your_other_form_name">
  <input type="text" name="two_a" id="two_a" value="DDDDDDDD"/>
  <input type="text" name="two_b" id="two_b" value="EEEEEEEE"/>
  <input type="text" name="two_c" id="two_c" value="FFFFFFFF"/>
  <input type="text" name="two_d" id="two_d" value="GGGGGGGG"/>
  <input type="text" name="two_e" id="two_f" value="HHHHHHHH"/>
  <input type="text" name="two_f" id="two_e" value="IIIIIIII"/>
  <select name="two_g">
    <option value="444444">444444</option>
    <option value="555555">555555</option>
    <option value="666666">666666</option>
  </select>
</form>
<h2>Result</h2>
<div id="result">
  <h2>Click on a field..</h2>
</div>

JavaScript

$('form[name="your_form_name"] input, select').click(function(){
    $("#result").html($(this).val());
});