OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

jQuery ajax issue with multiple forms on same page - always picks first form

  • Thread starter Thread starter David G
  • Start date Start date
D

David G

Guest
I've been struggling with this (most likely simple) issue for a few days. Any help would be appreciated.

I have a page with multiple form buttons on it for people to sign up for events. The list of form buttons is dynamically created and I'm differentiating the form buttons with the event_id value.

The jQuery code seems to always grab the topmost event_id value on the page, rather than the event_id passed within the form.

This is within a WordPress theme using jQuery and Bootstrap. Every time I submit any button it shows me in the console that the event_id = 2528.

Any help is really appreciated as I've tried everything I think.

HTML

Code:
<div class="join_race">
    <form method="post" class="join_race_form" id="join_race_form_2528">
        <input type="hidden" name="event_id" id="event_id_2528" value="2528">
        <button type="button" class="btn join btn-secondary btn-sm remove_race_btn" id="remove_race_btn_2528">Sign Up</button>
    </form>
</div>

<div class="join_race">
    <form method="post" class="join_race_form" id="join_race_form_2526">
        <input type="hidden" name="event_id" id="event_id_2526" value="2526">
        <button type="button" class="btn join btn-secondary btn-sm remove_race_btn" id="remove_race_btn_2526">Sign Up</button>
    </form>
</div>

<div class="join_race">
    <form method="post" class="join_race_form" id="join_race_form_2523">
        <input type="hidden" name="event_id" id="event_id_2523" value="2523">
        <button type="button" class="btn join btn-secondary btn-sm remove_race_btn" id="remove_race_btn_2523">Sign Up</button>
    </form>
</div>

jQuery

Code:
    jQuery(".join_race_form").validate ({
        submitHandler: function(form) {
            var event_id = jQuery('input[name="event_id"]').val();
            var data = {
                'action': 'join_race',
                'event_id': event_id
            };


            jQuery.post(ajax.url, data, function(res) {
                var response = JSON.parse(res);
                var status = response.error;
                var join = response.join;
                var message = response.message;
                var btn_type = response.btn_type;
                if(status === false){
                    jQuery('#join_race_btn_'+ event_id ).text(join);
                    console.log(event_id);
                }
            });

            return false;
        }
    });

<p>I've been struggling with this (most likely simple) issue for a few days. Any help would be appreciated.</p>
<p>I have a page with multiple form buttons on it for people to sign up for events. The list of form buttons is dynamically created and I'm differentiating the form buttons with the event_id value.</p>
<p>The jQuery code seems to always grab the topmost event_id value on the page, rather than the event_id passed within the form.</p>
<p>This is within a WordPress theme using jQuery and Bootstrap. Every time I submit any button it shows me in the console that the event_id = 2528.</p>
<p>Any help is really appreciated as I've tried everything I think.</p>
<p><strong>HTML</strong></p>
<pre><code><div class="join_race">
<form method="post" class="join_race_form" id="join_race_form_2528">
<input type="hidden" name="event_id" id="event_id_2528" value="2528">
<button type="button" class="btn join btn-secondary btn-sm remove_race_btn" id="remove_race_btn_2528">Sign Up</button>
</form>
</div>

<div class="join_race">
<form method="post" class="join_race_form" id="join_race_form_2526">
<input type="hidden" name="event_id" id="event_id_2526" value="2526">
<button type="button" class="btn join btn-secondary btn-sm remove_race_btn" id="remove_race_btn_2526">Sign Up</button>
</form>
</div>

<div class="join_race">
<form method="post" class="join_race_form" id="join_race_form_2523">
<input type="hidden" name="event_id" id="event_id_2523" value="2523">
<button type="button" class="btn join btn-secondary btn-sm remove_race_btn" id="remove_race_btn_2523">Sign Up</button>
</form>
</div>
</code></pre>
<p><strong>jQuery</strong></p>
<pre><code> jQuery(".join_race_form").validate ({
submitHandler: function(form) {
var event_id = jQuery('input[name="event_id"]').val();
var data = {
'action': 'join_race',
'event_id': event_id
};


jQuery.post(ajax.url, data, function(res) {
var response = JSON.parse(res);
var status = response.error;
var join = response.join;
var message = response.message;
var btn_type = response.btn_type;
if(status === false){
jQuery('#join_race_btn_'+ event_id ).text(join);
console.log(event_id);
}
});

return false;
}
});

</code></pre>
 
Top