CODEWITHSUNDEEP
javascripthtmljqueryforms
user934820
user934820

Reputation: 1178

How to use a javascript function for multiple html forms

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>

Upvotes: 1

Views: 57

Answers (3)

brk
brk

Reputation: 50346

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>

Upvotes: 3

Rory McCrossan
Rory McCrossan

Reputation: 337743

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>

Upvotes: 2

Ashish Ranjan
Ashish Ranjan

Reputation: 12970

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

Upvotes: 2

Related Questions