jQuery UI - form submitting in tab

Question

I want to submit a form that resides inside a jQuery UI tab - and I want the action page to render IN THE TAB... I was able to 'intercept' "a" tags inside the tabs to call those links into the tab (thanks to the help here...)

using this

$('#tabs-community').on('click', '.ui-tabs-panel a', function(){
    var $panel=$(this).closest('.ui-tabs-panel');
    $panel.load(this.href);
    return false;
});

I presume there is something similar for the submit event... I tried THIS

$('#formID').on('submit', function(e){
    e.preventDefault();
    var formSrc = $(this).attr('action');
    var formMethod = $(this).attr('method');
    var formData = $(this).serialize();
    $.ajax({
      url: formSrc,
      type: formMethod,
      data: formData,
      success: function(data){
        //work with returned data from requested file
        alert(data);
      }
    });
  });

(taken from form submitting in jquery tab - but this ISN'T what I'm after)

and it "works" for what it's supposed to do - but it makes an AJAX call, and returns the action page in an alert... not what I want.

Not to mention it appears as though jQuery is stripping out the submit button variable...for instance I check for the existence of one or another submit button - HTML specs say if a submit button is clicked - IT gets passed as a value, but my firebug console shows the ajax form submit - with the 'POST' showing NO SIGN of the button variable (this is a side issue, which i think goes away if I can get the form to submit 'normally' into the tab)... any suggestions?

Hope that makes sense.

score 0 · Answer 1 · edited May 23 '17 at 12:29

0

The obvious idea is to put your result into an <iframe>. You could submit your form like this:

var $form = $('form#foobar');
//replace form by iframe
$form.hide();
$form.parent().append('<iframe id="submit-target" name="submit-target"></iframe>');
//submit form to new iframe (set target to name attribute of iframe)
$form.attr('target', 'submit-target');
$form.submit();

Submitting a form to an iframe is explained in great detail in an answer to another question.

edited May 23 '17 at 12:29

Community

1
1

answered Jun 19 '12 at 07:46

Stefan Majewsky

5,177
2
23
49

Thx Stefan - I'm not a big fan if iframes and avoid them if possible. but if I can't find an answer to my question, I may consider this. – j-p Jun 19 '12 at 13:48

score 0 · Answer 2 · answered May 02 '13 at 16:23

I'm using on jqueryui tabs and needed to make a simple code to all forms to be submited on current page.

Here is my working code based on your code:

        $('form').submit(function(e) {
            e.preventDefault();

            var currentTab = tabs.tabs('option', 'selected'),
                tabId = $("li.ui-tabs-active").attr("id"),
                formSrc = $(this).attr('action'),
                formMethod = $(this).attr('method'),
                formData = $(this).serialize();

            $('#tabs-'+tabId).html("Loading...");

            $.ajax({
                url: formSrc,
                type: formMethod,
                data: formData,
                success: function(data){
                    $('#tabs-'+tabId).html(data);
                }
            });
        });

my current jqueryui version is 1.10.2 and jquery 1.9.1.

jQuery UI - form submitting in tab

2 Answers2