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, Sep 08 '13 at 06: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, Sep 08 '13 at 06:18
@Sergio the question doesn't have a `jquery` tag. use `return false` — itachi, Sep 08 '13 at 06:19
Any solution? Client side just validates the length of fields and such, I just wanted to test out the server side and then I realized this problem. I can use input type submit, but then my validateFields() will not stop the form from executing, it'll execute either way (error or no errors) — , Sep 08 '13 at 06:19
post your __JAVASCRIPT__ code, server side codes are irrelevant here. — itachi, Sep 08 '13 at 06:21
@itachi preventDefault is not jQuery - https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault — Sergio, Sep 08 '13 at 06:22

Amal Murali · Answer 1 · 2013-09-08T06:30:59.453

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 08 '13 at 06:30

answered Sep 08 '13 at 06:19

Amal Murali

75,622
18
128
150

Ah beat me to it. Your answer would be better by mentioning `preventDefault()` and `return;` – m59 Sep 08 '13 at 06:21

score 1 · Answer 2 · edited May 23 '17 at 11:45

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.

input type submit vs input type button

3 Answers3

Linked

Related