JQUERY get values from multiple selects on page with multiple forms

Question

I have a page that has several forms created using a while loop and each form has four selects. I am trying to work out how I can check each of the selects belonging to the current form (the one containing the button clicked) to confirm if any been selected. All of the forms are wrapped in a single div called #audit_content.

The intention is to check that if the variable grade isn't a certain value then the script checks if any of the selects have been selected.

(The value $i is created during the while loop, used to uniquely identify each form)

the html

    <form id="audit_form<? echo $i; ?>">
      <select name="grade" class="grade<? echo $i; ?>">
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
      <select>    
      <select name="patient" class="reason_select">
         <option value="">Select</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
      </select>
      <select name="exposure" class="reason_select">
         <option value="">Select</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
      </select>
      <select name="equipment" class="reason_select">
         <option value="">Select</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
      </select>
      <select name="positioning" class="reason_select">
         <option value="">Select</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
      </select>
    <input type="button" name="audit_submit" class="audit_submit audit_submit_btn ie7_submit" value="" />
    <input type="hidden" class="form_id" value="<? echo $i; ?>" >
 </form>

The JQuery

<script>
  $(document).ready(function(){
    $('#audit_content').on("click", ".audit_submit", function(){
      var form_id = $(this).prev('.form_id').val();
      var grade = $('.grade'+form_id).val();
             if(grade != 1){
      $('select.reason_select').each(function(){
          alert($(this).text())
             }
        });
</script>

The script as it is displays the values of every select with the class reason_select on the page which I realise is because I haven't told it to check a specific form, thats the bit I'm stuck at.

$('.grade'+form_id) - I can't see the target of this selector in the HTML. — kol
– kol, Commented Oct 26, 2013 at 22:38
I only showed the php so you would kow where the value $i came into it — tatty27
– tatty27, Commented Oct 26, 2013 at 22:40
the javascript works fine on my system, perhaps you tried before I'd finsihed adding the extra stuff — tatty27
– tatty27, Commented Oct 26, 2013 at 22:44

charlietfl · Accepted Answer · 2013-10-26 22:51:33Z

1

button shown is outside the form, not inside as mentioned.

To isolate any repeating type widget look for the parent of that widget, then search only within it: Moving the button inside the form would make it very easy by doing:

$('#audit_content').on("click", ".audit_submit", function () {
    var form=$(this).closest('form')
    var selects=form.find('select');
// do somthing with selects

})

answered Oct 26, 2013 at 22:51

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

tatty27 Over a year ago

hi, the button is within the form, the button was added after I'd posted the question because someone else want to see the code for the button

charlietfl Over a year ago

regardless...where the button is isn't critical....the main concept is to isolate the parent of the module and search within. This is a common pattern when working with any repeating type widgets in a page be they forms, rows, custom modules or whatever

tatty27 Over a year ago

thanks, but how would I check if any of the selects have a value?

Gabriele Petrioli · Accepted Answer · 2013-10-26 22:47:31Z

1

I would change the script to

<script>
  $(document).ready(function () {
      $('#audit_content').on("click", ".audit_submit", function () {
          var form = $(this).prev('form');
          var grade = $('select[name="grade"]', form).val();
          if (grade != '1') {
              $('select.reason_select', form ).each(function () {
                  alert($(this).text());
              });
          }
      });
  });
</script>

In the script you have posted there are several missing ) and } so it should create syntax errors..

You mention

current form (the one containing the button clicked)

but your button is not contained in the form, that is why i changed the code to form = $(this).prev('form')

answered Oct 26, 2013 at 22:47

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

1 Comment

tatty27 Over a year ago

the button is within the form, I was asked to add the code for the button after I'd posted and forgot to put it within the form tag

Collectives™ on Stack Overflow

JQUERY get values from multiple selects on page with multiple forms

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related