How to use a javascript function for multiple html forms

Question

I am trying to use a java script function for multiple html forms with no luck. Following is my code. Please help me out. Thanks

html forms

<form id="my_form_id">
    Your Email Address: <input type="text" id="email" /><br>
    <input type="submit" />
    <div id='loader' style='display:none'>
        <img src='images/loader.gif'/>
    </div>
</form>
<form id="my_form_id">
    Your Email Address: <input type="text" id="email" /><br>
    <input type="submit" />
    <div id='loader' style='display:none'>
        <img src='images/loader.gif'/>
    </div>
</form>

Javascript

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
        <script>
            $(document).ready(function(){
                $('#my_form_id').on('submit', function(e){
                     $('#loader').show();
                    //Stop the form from submitting itself to the server.
                    e.preventDefault();
                    var email = $('#email').val();
                    $.ajax({
                        type: "POST",
                        url: 'xml.php',
                        data: {email: email},
                        success: function(data){
                            alert(data);
                            $('#loader').hide();
                        }
                    });
                });
            });
        </script>

Element Ids should be unique.

Ashish Ranjan
– Ashish Ranjan

2020-05-05 10:41:39 +00:00
Commented May 5, 2020 at 10:41 — Ashish Ranjan
– Ashish Ranjan, Commented May 5, 2020 at 10:41
Use unique ids or use a class selector.

Alok Mali
– Alok Mali

2020-05-05 10:46:45 +00:00
Commented May 5, 2020 at 10:46 — Alok Mali
– Alok Mali, Commented May 5, 2020 at 10:46

brk · Accepted Answer · 2020-05-05 10:48:24Z

You can use jquery multiple-selector like

$('#my_form_id,#my_form_id2').on('submit', function(e){

Id need to be unique for each html element

Also there is duplicate email id. But you will like to get the email specific to that form. In That case you can use class and then use find

$(document).ready(function() {
  $('#my_form_id,#my_form_id2').on('submit', function(e) {
    $('#loader').show();
    //Stop the form from submitting itself to the server.
    e.preventDefault();
    var email = $(this).find('.email').val(); // children
    console.log(email)
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my_form_id">
  Your Email Address: <input type="text" class="email" /><br>
  <input type="submit" />
  <div id='loader' style='display:none'>
    <img src='images/loader.gif' />
  </div>
</form>
<form id="my_form_id2">
  Your Email Address: <input type="text" class="email" /><br>
  <input type="submit" />
  <div id='loader' style='display:none'>
    <img src='images/loader.gif' />
  </div>
</form>

Rory McCrossan · Accepted Answer · 2020-05-05 10:47:59Z

The main issue is because id attributes need to be unique. As you're repeating them throughout the HTML on both the form and the email inputs only the first instances of each will be found.

To fix this issue change them to class attributes. From there you can use DOM traversal to find the elements related to the form which was submit in order to retrieve the required data. Try this:

jQuery(function($) {
  $('.my_form').on('submit', function(e) {
    e.preventDefault();
    var $form = $(this);
    var email = $form.find('input[name="email"]').val();
    
    $form.find('.loader').show();
    
    $.ajax({
      type: "POST",
      url: 'xml.php',
      data: { email: email },
      success: function(data) {
        console.log(data);
        $form.find('.loader').hide();
      }
    });
  });
});

.loader { 
  display: none;
}

<form class="my_form">
  Your Email Address: <input type="text" name="email" /><br>
  <button type="submit">Submit</button>
  <div class="loader">
    <img src="images/loader.gif" />
  </div>
</form>
<form class="my_form">
  Your Email Address: <input type="text" name="email" /><br>
  <button type="submit">Submit</button>
  <div class="loader">
    <img src="images/loader.gif" />
  </div>
</form>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

Ashish Ranjan · Accepted Answer · 2020-05-05 10:46:13Z

2

The ids in a document should be unique, convert the ids to a class,

<form class="my_form_class">

And attach the listener on selecting the class.

$('.my_form_class').on('submit', function(e){// rest of the code})

answered May 5, 2020 at 10:46

Ashish Ranjan

13k5 gold badges32 silver badges53 bronze badges

Collectives™ on Stack Overflow

How to use a javascript function for multiple html forms

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related