Form submits although button clicked is not a submit button

Question

I use jQuery to advance through a 2-step form. First you enter a URL, then your Email, then you submit the form.

Once submitted, the form should reset. So the submit button get's replaced with the 'Next' button (from the first step) and the email input field gets replaced with the URL input field.

All works fine, except when you submit the form and click on the Next button, the form tries to submit which results in an error message.

Process: 1. Enter URL 2. Click 'Next Button' 3. URL input field fades out, email input field fades in 4. Enter email 5. Click submit 6. Form submits correctly 7. Input fields and button reset correctly 8. Enter URL 9. Click 'Next' 10. ERROR - the form tries to submit

Why does the form try to submit although you don't click on a type='submit' button ?

jQuery(document).ready(function($){

$("#next").on( "click", function(e) {

 $( this ).replaceWith("<button class='btn btn-conf btn-green' id='submitbutton' name='submit' type='submit'>Submit</button>");

 $('input[name=link]').hide();
 $('input[name=email]').show();

 });


$('#request').submit(function(e){

    //check if email is correct
    if(!IsEmail($('input[name=email]').val())){

    $('input[name=email]').before('<label class="control-label warning" for="inputWarning2">Invalid email address</label>');

    e.preventDefault();

    } else {            

        // get input fields
        var link = $('#request input[name=link]').val();
        var email = $('#request input[name=email]').val();
        var nonce = $('#request input[name=my_nonce]').val();

            if(link != '' && email != ''){
            var $btn = $('#submitbutton').button('loading');

                $.post('/addrequest/', { link:link,email:email,nonce:nonce}, function( data ) {

                    $('#request input[name=link]').val('');
                    $('#request input[name=email]').val('');
            $btn.button('reset');                   

  $('#submitbutton').replaceWith("<button id='next' class='btn btn-conf btn-green'>NEXT</button>");

        $("input[name=email]").hide();  
        $("input[name=link]").show();
        $('#success').fadeIn();         
                });
            return false; // ?Ensure that the form does not submit twice    
            }               

} // end else
        });
});

EDIT:

I included type='button'. However, now the 'Next' button doesn't work, once you submitted the form once and try again.

JSFiddle: https://jsfiddle.net/52VtD/12343/

in the url you have posted its throwing An invalid form control with name='email' is not focusable. when followed step you mentioned — Akki619, Aug 25 '15 at 10:49
As @Zeratops already mentioned, add relevant HTML or create a JS fiddle for reproducing your case. Don't refer us to some external link we don't know what the content is. — Igwe Kalu, Aug 25 '15 at 10:50
possible duplicate of [How to prevent buttons from submitting forms](http://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms) — Medet Tleukabiluly, Aug 25 '15 at 10:55

Robin Carlo Catacutan · Accepted Answer · 2015-08-25T11:51:38.543

3

Add type='button' in your buttons which you don't want to trigger the submit.

Replace this:

$('#submitbutton').replaceWith("<button id='next' class='btn btn-conf btn-green'>NEXT</button>");

With:

$('#submitbutton').replaceWith("<button id='next' type='button' class='btn btn-conf btn-green'>NEXT</button>");

Update

Since the next button is being added back to the DOM instead of doing:

$("#next").on("click", function (e) {

});

do it like this: For the new "next button"

$(document).on("click", "#next", function (e) {
  // code here
});

Fiddle

But it's always safe to have a new id so it won't trigger the function at first and only triggers when it's being added back.

edited Aug 25 '15 at 11:51

answered Aug 25 '15 at 10:59

Robin Carlo Catacutan

13,249
11
52
85

thank you! Could you help me understand why my approach was incorrect? – yumba Aug 25 '15 at 11:52
2

@SPi `$(document).on` works with static & dynamic content, whereas `$("element").on` only works on static content. – rybo111 Aug 25 '15 at 11:55

score 1 · Answer 2 · answered Aug 25 '15 at 11:24

Since any button (without a specific type other than submit) in a form tag is always treated as a submit button, AND triggers the submit event, you need to specify the type of the button as button to prevent this behavior.

$('#submitbutton').replaceWith("<button type='button' id='next' class='btn btn-conf btn-green'>NEXT</button>");

Form submits although button clicked is not a submit button

2 Answers2