Question

How to get OptionGroupID and optionName from ul when you click on the Add button?

For example:

<ul id="formAddOption_4" class="formStyle">
   <li> 
     <input id="OptionGroupID" type="hidden" value="4"> 
     <div style="font-size:10px;"> Option Name: </div> 
     <input id="optionName" type="text">
  </li>
  <li>
   <input type="button" class="buttonAddOption" value="Add Option"> 
  </li>
</ul>
<ul id="formAddOption_5" class="formStyle">
   <li> 
     <input id="OptionGroupID" type="hidden" value="5"> 
     <div style="font-size:10px;"> Option Name: </div> 
     <input id="optionName" type="text">
  </li>
  <li>
   <input type="button" class="buttonAddOption" value="Add Option"> 
  </li>
</ul>

I have tried this but it dont work:

$(".buttonAddOption").click(function() {
  var OptionForm = $(this).closest("ul");
  //Get Group ID
  alert( OptionForm.$("#OptionGroupID").val() );
});

Answer 1

$(".buttonAddOption").click(function() {
    var OptionForm = $(this).closest("ul");
    alert( OptionForm.find("#OptionGroupID").val() );
});

Notice that I’ve used OptionForm.find (looks for descendants). FYI: IDs are unique, so you should probably give each input a class instead and find it like so: OptionForm.find(".OptionGroupID").