Lane George Lane George - 1 month ago 6
Ajax Question

WordPress - A submission confirmation on modal pop up

I am trying to get a popup submit button working but I haven't quite found the solution I'm looking for.

I am using the jquery modal plugin to show the client the content of their changes before they submit them. However, when I try submitting, nothing happens. The submit button exists on the pop up, whereas the .modify button is the button that opens it. I am having no issues with the pop up itself.

My console test is printing so I know there's nothing wrong with my event listener. Maybe it has something to do with event.preventDefault()?

Thanks in advance.

Here is my code

Back end

jQuery(".modify").click(function() {
event.preventDefault();
var submit = confirm('Are you sure?');
<?php
$post_ids = array();
while($author_entry_posts->have_posts()) : $author_entry_posts->the_post();

array_push($post_ids, get_the_ID());

endwhile;
?>

if (submit == true) {
var data = {
'action': 'modalcall',
'postid': <?php echo json_encode($post_ids)?>,
'userid': <?php echo get_current_user_id() ?>
};
jQuery.post(ajaxurl, data, function(response) {
jQuery(response).appendTo('body').modal();

//Script which handles the submit button on the modal pop-up
jQuery(".modal_submit").click(function() {
console.log("test");
jQuery().submit();
});
});

} else {
return false;
}
});


Front end

<input type="submit" name="submit" value="Submit" class="button modal_submit">

Answer

In your handler for click on modal submit you are not defining which form needs to be submitted.

jQuery(".modal_submit").click(function() {
   console.log("test");
   jQuery().submit(); // you are not defining which form to submit.
});

Instead the <input type="submit" name="submit" value="Submit" class="button modal_submit"> needs to be inside a form which needs to be submitted by calling jquery submit on it.

jQuery(".modal_submit").click(function() {
   console.log("test");
   $(this).closest('form').submit(); // asking to submit the form which contains this button
});