Question

I have this HTML form saved as file-001.php :

<form action="file-001.php" method="post" id="select-block" class="general-form">
<input class="clearme" name="Title" value="Title" />
<input type="submit" class="submit-btn" value="SAVE" />
</form>

this form process submitted variables on the same file. but this file file-001.php actually called by jQuery load and located as tab box :

$('a.manage-content-link').click(function (e) {
    var self = $(this),
        file = self.siblings('input[name="block-type"]').val();
    file = file.substring(file.length - 3);
    self.next(".manage-content-wrap").find(".manage-content").load("file-001.php");
    e.preventDefault();
});

but, when I click ‘submit’ button, this form redirects me to single page that is http://example.com/file-001.php

how to make the ‘action’ result on still INSIDE the same tab box. not redirected out from the box?

Answer 1

You can submit the form via ajax

Since the form doesn’t exist in page when your initial page load code runs, use on() method to account for future form.

$(document).on('submit', '#select-block', function() {

    var data = $(this).serialize();
    var actionUrl = $(this).attr('action');

    $.post(actionUrl, data, function(response) {
        /* do something when form submittal completed*/            
    })

    return false; /* prevent browser default submit and redirect*/
});

API References:

http://api.jquery.com/jQuery.post/

http://api.jquery.com/on/