Submitting form data through ajax not working

Question

sorry for the dumb question but I can't seem to get this going and I figured I best give you more info than not enough -

I have a form that I am running inside a loop in php like this:

<form name="primaryTagForm'.$post->ID.'" id="primaryTagForm'.$post->ID.'" method="POST" enctype="multipart/form-data" >
  <fieldset class="tags">
      <label for="post_tags'.$post->ID.'">Tags:</label>
      <input type="text" value="" tabindex="35" name="postTags'.$post->ID.'" id="postTags'.$post->ID.'" />
  </fieldset>

  <fieldset>
      <input type="hidden" name="submitted" id="submitted" value="true" />
      '.wp_nonce_field( 'post_nonce', 'post_nonce_field' ).'
      <button class="button" type="submit">Tag</button>
  </fieldset>
</form>

I have tried adding my ajax under that form (Still within the loop so I can grab the post_id) and in my console it my tag-ajax.php file is posted just fine. Here is my weak attempt at that based on this: Save data through ajax jQuery post with form submit and other like questions.

<script>
jQuery(document).ready(function($) {
    $(".button").click(function(e) {
        e.preventDefault();
    $.ajax({
        type: "POST",
        url: "'.get_stylesheet_directory_uri().'/tags-ajax.php",
        data: "primaryTagForm'.$post->ID.'",
        success:  function(data){
            //alert("---"+data);
            alert("Tags have been updated successfully.");
        }
    });
    });
});
</script>

And lastly here is what is in my tags-ajax.php file -

if(isset($_POST['submitted']) && isset($_POST['post_nonce_field']) && wp_verify_nonce($_POST['post_nonce_field'], 'post_nonce')) {

        wp_set_object_terms( $post->ID, explode( ',', $_POST['postTags'.$post->ID] ), 'product_tag', true );

        echo'Success!';
}

So when I try running this a couple of things happen by looking in the console, if I hit submit on one of the forms then all them forms on that page post to tags-ajax.php (Im sure it is because I am doing this in a loop but not sure how else to do it and bring in post->ID on tags-ajax.php)

The second, most important thing is that nothing actually saves, I click the "Tag" but (submit) and I get those success alerts (for each post unfortunately) but when I click through those the tags are not actually saved.

My question: How do I get the data to actually save with the ajax/php and how can I have that post refresh without reloading the page so the user sees they actually were added?

Latest Update: After making the serialize edits mentioned below I submit my form and check the console and see the post method is getting a 500 internal server error.. Im thinking if my problem is coming from because I have the form and an inline script with the ajax running in a loop? So there are technically 20 posts/forms/inline scripts on a page and when you submit one, all of them submit which may be causing the 500 internal error?

Answer 1

Ajax中的data：选项应为

data: $("#primaryTagForm'.$post->ID.'").serialize(),

Answer 2

Use serialize

You have to change

data: "primaryTagForm'.$post->ID.'",

to

data: $("#primaryTagForm'.$post->ID.'").serialize(),

Answer 3

Simplify your markup. You dont have to use id attributes everywhere. Just include a hidenn tag in your form with the value of $post->id . Also echo the ajax url at the form's acton attribute.

So the html should be similar to this:

<form method="POST" action="' . get_stylesheet_directory_uri() .'/tags-ajax.php" >
  <input type='hidden" name="id" value="'.$post->ID.'">
  <fieldset class="tags">
      <label>Tags:</label>
      <input type="text" value="" tabindex="35" name="tags" />
  </fieldset>

  <fieldset>
      <input type="hidden" name="submitted" id="submitted" value="true" />
      '.wp_nonce_field( 'post_nonce', 'post_nonce_field' ).'
      <button class="button" type="submit">Tag</button>
  </fieldset>
</form>

Then you can use a script like this:

jQuery(document).ready(function($) {
    $(".button").click(function(e) {
        e.preventDefault();
        var $target = $(e.target),
            $form = $target.closest('form');
    $.ajax({
        type: "POST",
        url: $form.prop('action'),
        data: $form.serialize(),
        success:  function(data){
            //alert("---"+data);
            alert("Tags have been updated successfully.");
        }
    });
    });
});