Two Submit button either In New Tab or at Self using JQuery Library

Question

I have a FORM with two submit button. What I wanted to happen is when the first button is clicked, it will submit on the tab itself. If the second button is clicked, it will proceed to a new tab.

HTML :

<form id="frm" action="" method="post" target="_blank">
<input type="text" value="data" name="data">
    <input type="submit" name="first" id="first" value="Self"/>
    <input type="submit" name="second" id="second" value="Tab"/>
</form>

Javascript :

$('form#frm').submit(function(){
    var open_new_tab = false;

    if($('#second').click){
        open_new_tab = true;
    }

    if ( open_new_tab ) {
        alert('opening to new tab');
        $('form#frm').attr('target', '_blank');
    }
    else{
        alert('opening to self_page');
        $('form#frm').attr('target', '_self');
    }
});

Please check this fiddle: Two Submit button in One Form

Note: I wanted to pass on some data inside the FORM into the new tab or in the tab itself.

Made you shouldn't be using submit buttons but elements then there is no need for any JavaScript as this element has all the features you want inbuilt. — , Mar 07 '14 at 01:19
Or use buttons instead of submits, each with its own on click — ElefantPhace, Mar 07 '14 at 01:21
@jeff - Don't wanna use because I need to pass on some data which I can't pass on. It's more complex. — Grand Marshal Braev, Mar 07 '14 at 01:26
@ElefantPhace - Button don't submit a form. See reference http://stackoverflow.com/questions/290215/difference-between-input-type-button-and-input-type-submit — Grand Marshal Braev, Mar 07 '14 at 01:26
I know what buttons do. You would have to make it submit yourself. Smart one — ElefantPhace, Mar 07 '14 at 01:27

scrowler · Accepted Answer · 2014-03-07T01:55:13.083

You're nearly there, first you need to make open_new_tab available in the global scope by defining it outside your event handlers, then redefine the variable on the click event of either button. Then you can check for the value during your submit handler:

var open_new_tab = false; // variable now available in global scope

$('#second').click(function(){
    open_new_tab = true;
});

$('#first').click(function() {
    open_new_tab = false;
});

$('form#frm').submit(function(){    
    if (open_new_tab) {
        alert('opening to new tab');
        $(this).attr('target', '_blank');
    } else{
        alert('opening to self_page');
        $(this).attr('target', '_self');
    }
});

Fiddle

Thank you! You saved my day. Will marked your answer right. – Grand Marshal Braev Mar 07 '14 at 02:04 — Grand Marshal Braev, Mar 07 '14 at 02:04

Two Submit button either In New Tab or at Self using JQuery Library

1 Answers1