jQuery plugin for submiting Forms

Question

I have a Form like this in asp Classic ..

<form method="post" name="AddItemForm" id="AddItemForm" action="/files/includes/CartControl.asp" style="display:inline;">

// bunch of Hidden Fields.

Then a SUBMIT button.

action of the form takes all the hidden fields and then after processing them redirects user to a CART page.

now what I want to do is....I want user to click on ADD TO CART button, however I want user to stay on the product page while form submits to a new window (not a javascript new window...something like lightbox/colorbox/fancybox DIV etc).

I looked into many jQuery plugins but could not get a satisfied answer...which plugin is BEST for my case? any simple example?

basicly I want to submit to a new overlay div and within that DIV redirect user to a new page to show Product Info.

Thanks

score 1 · Answer 1 · answered Feb 20 '13 at 08:46

It seems that you are looking for some functionality for asynchronous form submission. There is this jQuery AJAX Form plugin that provides AJAX functionality for forms. You will have something like:

$('#AddItemForm').submit( function() {
    // Submit asynchronously
    $( this ).ajaxSubmit( function() {
        // Form processing is done
        // Redirect to the shopping cart page
    });

    // Show a modal or a fancy "please wait" message

    // Prevent default submission
    return false;
});

score 0 · Answer 2 · answered Feb 20 '13 at 06:29

0

the simplest way (in my view) is to add target attribute to the form which will open new window while the current page won't chage...

answered Feb 20 '13 at 06:29

i100

4,529
1
22
20

i really want to stay away from javaScript POP UP windows. – highwingers Feb 20 '13 at 06:31
@highwingers why not to use modal dialog then? – Yang Feb 20 '13 at 06:33
i never used modal dialog...examples/samples please? – highwingers Feb 20 '13 at 06:36
This is called `Jquery UI Modal Dialog`. Google for this. – Yang Feb 20 '13 at 06:47
you cannot "... redirects user to a CART page." and " ... stay on the product page" if both ARE NOT the same page. You could either redirect OR stay. AND is a nonsense in this case, unless both are one and the same page – i100 Feb 20 '13 at 07:10

score 0 · Accepted Answer · edited May 23 '17 at 10:24

You can find some info in this answer, the code from one of the answers:

$('input#submitButton').click( function() {
    $.post( 'some-url', $('form#myForm').serialize(), function(data) {
         ... do something with response from server
       },
       'json' // I expect a JSON response
    );
});

In "do something with response" you can take the data or url and load it into an overlay div. If it's a URL, you can use jquery .load :

$('#result').load('ajax/test.html');

If it's html (or data which you wrap in html), just do

$('#result').html(theHTML)

jQuery plugin for submiting Forms

3 Answers3