input type submit vs input type button

Question

I have been trying to solve an annoying behavior with PHP (I think..). Maybe some of you have encountered the same and have some ideas. I have an html form and I use an element with the onClick event that calls a javascript function. Once the script's content has been processed, I execute the form.submit() directive. It basically checks common things like length of fields, etc.

Now my problem is, when I use input type button, I set its name to submit1, and just to run a small test, I set the <form id="register" action="<?php echo($PHP_SELF) ?>" method="post">

I then put:

        <?php

if (isset($_POST["submit1"])) {
    echo "Submit button was pressed";
    die();

}

?>

However, I never see the message even though my input button's name is submit1. I then changed the input type to submit, and I click submit, I'll see the message but the only problem is that even if my javascript function finds any errors in the form, after clicking okay on the alert box, the form continues regardless. It only does this on submit type=submit.

If anyone is interested,

my buttons: 1st try:

<input type="button" name="submit1" class="submit" value="Register"      
onclick="validateFields()"  />

2nd try:

<input type="submit" name="submit1" class="submit" value="Create Account!"     
onclick="validateFields()"  />

Do you have a .preventDefault inside the function validateFields() ? — Sergio
– Sergio, Commented Sep 8, 2013 at 6:18
but the only problem is that even if my javascript function finds any errors in the form, after clicking okay on the alert box, the form continues regardless. that is javascript problem, not server side. — itachi
– itachi, Commented Sep 8, 2013 at 6:18
@Sergio the question doesn't have a jquery tag. use return false — itachi
– itachi, Commented Sep 8, 2013 at 6:19

Community · Accepted Answer · 2017-05-23 11:45:20Z

1

For the java script problem may be you haven't put return false that's why form is submitting in any way.

if(a.value == ""){
alert("Name is empty");
return false; // this will prevent your form to be submit if condition fails
}

Whereas the difference between button and submit is that the submit is submitting the form(posting form) so PHP is eligible to get via $_POST but in button case the form isn't submitting so you cant get the values on other page rather than using Ajax.

Comments

Amal · Accepted Answer · 2013-09-08 06:30:59Z

1

To submit your form, the input field must be of the type submit, not button.

<input type="submit" name="submit1" class="submit" value="Create Account!"     
onclick="validateFields()"  />

You can also do:

<button type="submit" name="submit1" class="submit" onclick="validateFields()">
Create Account! </button>

And, to avoid your form from being submitted if there are errors, you can return false:

function validateFields() {
    //do validation
    if(failed) {
        return false;
    }
}

edited Sep 8, 2013 at 6:30

answered Sep 8, 2013 at 6:19

Amal

76.8k18 gold badges133 silver badges154 bronze badges

1 Comment

m59 Over a year ago

Ah beat me to it. Your answer would be better by mentioning preventDefault() and return;

user2738336 · Accepted Answer · 2013-09-08 06:37:29Z

0

Thank you everyone, I fixed it :).

I changed the input type into button, and changed my onclick="function(); return false"

And in my original JS code, I added: document.getElementById('myFormId').submit();

Now my JS code runs and it doesn't submit it until all the errors are fixed. Thank you. Silly mistake on my part.

answered Sep 8, 2013 at 6:37

user2738336

Collectives™ on Stack Overflow

input type submit vs input type button

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related