Multiple forms handing with ajax - submit button ID

Question

I have two forms in a page, that submit using AJAX. So i created a single function (JAVASCRIPT/JQUERY) to handle both forms. But it doesn't work with the second form, only with the first. Here is the code:

<div class="block-content" id="form-container">
    <div class="alert alert-success d-none" role="alert">
        SUCCESS
    </div>
    <div class="alert alert-danger d-none" role="alert">
        ERROR
    </div>
    <form action="POST">
        FORM1
        <button type="button" class="btn btn-alt-success" id="submitForm">SUBMIT</button>
    </form>
</div>

<div class="block-content" id="form-container">
    <div class="alert alert-success d-none" role="alert">
        SUCCESS
    </div>
    <div class="alert alert-danger d-none" role="alert">
        ERROR
    </div>
    <form action="POST">
        FORM2
        <button type="button" class="btn btn-alt-success" id="submitForm">SUBMIT</button>
    </form>
</div>

And the Javascript:

<script type="text/javascript">
jQuery('#submitForm').click(function(e){
    e.preventDefault();
    var form = $(this).closest('form');
    var successMessage = $(this).closest('#form-container').find('.alert-success');
    var errorMessage = $(this).closest('#form-container').find('.alert-danger');
    successMessage.removeClass('d-none');
    .ajax({
        /* HANDLE AJAX */
    });
});
</script>

What am I doing wrong here? Using this code it was supposed to show the SUCCESS message in the second form, but it doesn't show up. I think the problem is in the closest() method, but I'm not quite sure.

Thank you in advance.

Answer 1

In your case try to change the click() function to on() and check on document click like this;

 jQuery(document).on("click", "#submitForm", function(e) { e.preventDefault(); var form = $(this).closest('form'); var successMessage = $(this).closest('#form-container').find('.alert-success'); var errorMessage = $(this).closest('#form-container').find('.alert-danger'); successMessage.removeClass('d-none'); }) 

 .d-none { color: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="block-content" id="form-container"> <div class="alert alert-success d-none" role="alert"> SUCCESS </div> <div class="alert alert-danger d-none" role="alert"> ERROR </div> <form action="POST"> FORM1 <button type="button" class="btn btn-alt-success" id="submitForm">SUBMIT</button> </form> </div> <div class="block-content" id="form-container"> <div class="alert alert-success d-none" role="alert"> SUCCESS </div> <div class="alert alert-danger d-none" role="alert"> ERROR </div> <form action="POST"> FORM2 <button type="button" class="btn btn-alt-success" id="submitForm">SUBMIT</button> </form> </div> 

This will make it work for you

Answer 2

Ill explain a bit more, following with this.

 $('#clicker').click(function() { console.log('You clicked by ID'); }) $('.clicker').click(function() { console.log('You clicked by class'); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type='button' value='ok' id='clicker' class='clicker'> <input type='button' value='ok' id='clicker' class='clicker'> <input type='button' value='ok' id='clicker' class='clicker'> 

See, they all have id clicker, but only first one registers. They all have classes clicker, all of them work. because javascript expects id to be one per unique. You cant blame it: id - identification; Or like I mentioned you could use onclick old HTML events. How ever using it by a class is fine itself.