Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm using the following to make ajax calls:

wp_enqueue_script( 'my-ajax-request', TAF_PLUGIN_URL . 'js/ajaxcf.js', array( 'jquery' ) ); 
wp_localize_script( 'my-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ), 'postid' => get_the_ID(),  ) );\

And in my javascript file i have a fairly simple code snippet:

jQuery(document).ready(function($) {
    jQuery('.submit').click(function(){
        var str = $("#ajaxForms").serialize();
        var data = {
            action: 'myajax-submit',
            serialize: str,
        };

        jQuery.post(MyAjax.ajaxurl, data,  function(response) {
            alert(response);
        });
        return false;   
    });
});

And for my html i have:

<form id="ajaxForms">
    <label for="fname">First Name:</label>
    <input id="postID" name="postID" value="First Name" type="text"  />
    <input id="submit_button" class="submit" value="Send" type="button" />
</form>

Everything seems to be working smoothly however i would like to process multiple forms on the same page, say for example the homepage has five posts, each of these posts will have my form (html code above).

I'm getting conflicts when more than one form is displayed, this is due to the jquery, for example the click function has a class of .submit or the .serialize() has the same ID as the rest.

How would i use the jQuery with unique identifiers for each form so conflicts won't happen?

I hope i made this clear.

Kind Regards

share|improve this question
add comment

1 Answer

This isn't specific to WordPress, but I'll answer it anyway :)

Don't target the form by id, instead target it by its relationship to the button that was clicked. change:

var str = $("#ajaxForms").serialize();

to:

var str = $(this).parent().serialize();
share|improve this answer
    
Thanks for the response :) i actually found a decent tutorial by 9lessons that helped me solved my issue. 9lessons.info/2009/06/submit-multiple-forms-jquery-ajax.html –  Shoebox Jan 20 '12 at 3:50
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.