表单数据未发布到$ .ajax url

Question

When posting my form from a custom CSS modal the data is being posted to the current URL and not the set url.

$("form.delete_photo_form").submit(function(e) 
{
    e.preventDefault();

    $(".delete_photo_message").text("");


    $.ajax({
        url: 'assets/php/delete_photo.php',
        type: 'post',
        data:  $(this).serialize(),
        success: function(data, status) 
        {
            if (data == 1)
            {
                $(".delete_photo_message").text("Unable to delete photo");
            }                           
            else if (data == 2)
            {
                $(".delete_photo_message").text("Photo deleted");
                // checkGroup();
            }                           
            else
            {
                $(".delete_photo_message").text(data);  
            }
      },
      error: function(xhr, desc, err) {
        console.log(xhr);
        console.log("Details: " + desc + "
Error:" + err);
      }
    }); 

This form is being posted from a modal opened by another modal.

Original modal:

<div id="photo_buttons">

<a id="edit_photo_modal" class="button" href="#edit_photos_modal">

    Edit Photos

</a>
<div id="edit_photos_modal" class="modal_photos">
    <div>
        <a id="close_edit_photo" title="Close" href="#close"></a>


                                Edit Photos:


        <br></br>
        <br></br>
        <div class="edit_photos_div">
            <div class="photo_line">
                <img src="images/thumbnails/group/11/bb0878d2390cdcfb.jpg"></img>
                <br></br>
                <a id="edit_photo" class="open_modal" href="#modal_edit_photo_39">

                    Edit

                </a>


                                      /  


                <a id="delete_photo" href="#modal_delete_photo_39">

                    Delete

                </a>
                <br></br>
                <br></br>
            </div>                
        </div>
        <a id="finish_edit" class="button" title="Finish" href="#finish">

            Finish

        </a>
    </div>
</div>
<script src="assets/js/edit_photo.js"></script>

Second Modal (this one is where the ajax post is called):

    <div id="edit_modals">
    <div id="modal_edit_photo_39" class="modal">
        <div>
            <a id="close_39" title="Close" href="#close">

                Close

            </a>
            <form id="edit_photo_form_39" class="edit_photo_form" method="post" action="">
                <h4>

                    Edit Photo

                </h4>
                <br></br>
                <h3 id="edit_photo_message" class="edit_photo_message"></h3>



                                            Title:

                <input id="edit_title" type="text" value="Test photo" name="edit_title"></input>



                                            Description:

                <textarea id="edit_desc" name="edit_desc" rows="3">

                    Test for resize

                </textarea>
                <br></br>
                <input type="hidden" value="11" name="group_id"></input>
                <input type="hidden" value="39" name="photo_id"></input>
                <input id="edit_photo_yes_39" class="edit_yes" type="submit" title="Edit" value="Edit" name="edit_yes"></input>
                <a id="cancel_edit" class="button" title="Cancel" href="#cancel_edit">

                    Cancel

                </a>
            </form>
        </div>
    </div>
    <div id="modal_delete_photo_39" class="modal">
        <div>
            <a id="close_39" title="Close" href="#close">

                Close

            </a>
            <form id="delete_photo_form_39" class="delete_photo_form" method="post" action="">
                <h4>

                    Are you sure you want to delete this photo?

                </h4>
                <br></br>
                <h3 id="delete_photo_message" class="delete_photo_message"></h3>
                <input type="hidden" value="11" name="group_id"></input>
                <input type="hidden" value="39" name="photo_id"></input>
                <input id="delete_photo_yes_39" class="delete_yes" type="submit" title="Yes" value="Yes" name="delete_yes"></input>
                <a id="del_no" class="button" title="No" href="#no">

                    No

                </a>
            </form>
        </div>
    </div>        
</div>

If anybody has any ideas please let me know.

Side note:

The form submit function works fine if the second modal is called on its own and not from the first.

Answer 1

It's possible that you're either dynamically creating the form after the $("form.delete_photo_form") selector has run, or the modal script could be moving the form's location in the DOM (i.e., some modal scripts move the modal content to the very end of the <body> tag).

In either case, this would cause your submit logic not to run. Try replacing:

$("form.delete_photo_form").submit(<handler>);

...with:

$(document).on("submit", "form.delete_photo_form", <handler>);

If you're not familiar with the above syntax, it's jQuery's syntax for event delegation, which allows you to bind the event handler to something permanent (like the document object), and then selectively run handler logic if the event meets certain criteria (in this case, the event has to be of type "submit" and must have originated from within an element matching the "form.delete_photo_form" selector). This has the advantage of letting you set up the event listener even if the relevant DOM nodes haven't been created yet.