JavaScript form validation is not submitting, page just reload

Question

I have a small form that i want to validate and disable submit button to prevent multiple entries being added to the database.

I just check that Firstname and Lastname are at leat 2 characters and Second disable the button on form submit.

The only problem now is that it doesn't submit the form it just reload the page.

my code is:

function disableButton() {
  /*disable button after form submit*/

  var imgFirstname = document.getElementById('imgFname');
  var imgLastname = document.getElementById('imgLname');

  var firstname = document.forms['form']['txtFname'];
  var lastname = document.forms['form']['txtLname'];
  var errors = 0;

  if (firstname.value.length < 2) {
    firstname.style.border = "1px solid #f50303";
    imgFirstname.src = "images/error.png";
    errors++;
  } else {
    firstname.style.border = "1px solid #06be15";
    imgFirstname.src = "images/success.png";
  }

  if (lastname.value.length < 2) {
    lastname.style.border = "1px solid #f50303";
    imgLastname.src = "images/error.png";
    errors++;
  } else {
    lastname.style.border = "1px solid #06be15";
    imgLastname.src = "images/success.png";
  }

  firstname.addEventListener('blur', fNameVerify, true);
  lastname.addEventListener('blur', lNameVerify, true);

  function fNameVerify() {
    if (firstname.value.length > 1) {
      firstname.style.border = "1px solid #06be15";
      imgFirstname.src = "images/success.png";
    } else {
      firstname.style.border = "1px solid #f50303";
      imgFirstname.src = "images/error.png";
    }
  }

  function lNameVerify() {
    if (lastname.value.length > 1) {
      lastname.style.border = "1px solid #06be15";
      imgLastname.src = "images/success.png";
    } else {
      lastname.style.border = "1px solid #f50303";
      imgLastname.src = "images/error.png";
    }
  }

  if (errors == 0) {
    // document.getElementById("idBtnAdd").disabled = true;
    document.forms["form"].submit();
    return true;
  } else {
    return false;
  }
}

<form name='form' onsubmit='return disableButton();' method='post'>
  <label for='idFirstname'>First Name:*</label>
  <input id='idFirstname' type='text' name='txtFname'>
  <img id='imgFname' src='images/transparent.png'>

  <label for='idLastname'>Last Name:*</label>
  <input id='idLastname' type='text' name='txtLname'>
  <img id='imgLname' src='images/transparent.png'>

  <label for='idPhone'>Phone (Optional):</label>
  <input id='idPhone' type='text' name='telPhone'>
  <img id='imgPhone-error' src='images/transparent.png'>
  <button id='idBtnAdd' type='submit' name='btnAdd'>Add Client!</button>
</form>

There's no need to call `document.forms["form"].submit()`, since returning `true` will submit the form. — Barmar, Feb 27 '17 at 20:44
i added in the hope of making it work but without document.forms["form"].submit() is STILL does not work. page just reload if validation rerturn true — wilson382, Feb 27 '17 at 20:49
You don't have an `action` attribute in the form, so submitting the form sends to the same URL as the original page, which will just reload it if there's no script there. — Barmar, Feb 27 '17 at 20:51
You've not specified `action` parameter. Do you intend to submit it to the page itself? if so, whats wrong with it? — behkod, Feb 27 '17 at 20:51
Yes, correct i'm posting to the same page. and then will take care of the data with php if (isset($_POST['btnAdd'])){ and so on — wilson382, Feb 27 '17 at 20:54
`$_POST['btnAdd']` won't be set if you call `.submit()`. Buttons are only included in the post when during normal form submission from clicking that button. — Barmar, Feb 27 '17 at 20:56
What does `var_dump($_POST)` show when the form gets submitted? — Barmar, Feb 27 '17 at 20:56
Thank you @Barmar. back to discussion. Why dont you change `'#btnAdd'` type to `input`? Then it will simply be sent regardless of your submission model. — behkod, Feb 27 '17 at 21:05
@barmar it display "array(3) { ["txtFname"]=> string(4) "test" ["txtLname"]=> string(4) "test" ["telPhone"]=> string(0) "" }" — wilson382, Feb 27 '17 at 21:08
i see btnAdd is not submitted along the $_POST array, i wonder why — wilson382, Feb 27 '17 at 21:09
@wilson382 Did you get rid of `document.forms["form"].submit()`? I explained why that prevent sending `btnAdd`. — Barmar, Feb 27 '17 at 21:14
I just tested the code you've provided in question, and I get this by var_dump($_POST); `array(4) { ["txtFname"]=> string(4) "asdf" ["txtLname"]=> string(5) "sasdf" ["telPhone"]=> string(0) "" ["btnAdd"]=> string(0) "" }` — behkod, Feb 27 '17 at 21:21
@wilson382 Sorry I'm asking, but sometimes it even occurs to myself. So dont take it personally, Are you considering case-sensitivity in PHP ? — behkod, Feb 27 '17 at 21:23
@BehradKhodayar Yes, indeed this is my php condition `if (isset($_POST['btnAdd'])){ //server side validation and rest of code }` — wilson382, Feb 27 '17 at 21:28
There is nothing wrong with my code, i separeted my code in this question from my whole application and it works. — wilson382, Feb 27 '17 at 21:36
never mind i accicently comment the line thet disable the button. back to the same problem — wilson382, Feb 27 '17 at 21:39
if this line is commented `document.getElementById("idBtnAdd").disabled = true;` it works, if i un-comment it then button does not get submit it to $_POST() — wilson382, Feb 27 '17 at 21:41
Its by design. Hidden elements of a form, will not be posted. Check this out: — behkod, Feb 27 '17 at 22:06
@wilson as a workaround on this, you can add a hidden input/button to your form, & check forms submission by help of that element. e.g. `if(isset($_POST['newElem'})` — behkod, Feb 27 '17 at 22:13
ohh it makes. The button doesnt get submitted because is being disabled before the form submit. — wilson382, Feb 27 '17 at 22:21
Glad to hear that. Keep going. I'll update the answers as a record here to stay. — behkod, Feb 27 '17 at 22:45

score 2 · Accepted Answer · edited May 23 '17 at 12:00

There is no action attribute specified for form. So nothing is wrong with result you get.

UPDATE

Because you say its intentionally that the page is form's target(action) itself, so not including the action attribute is not the problem.

The bug that #btnAdd doesn't get posted, arises because Disabled elements are not posted by browsers & its by design. Check this out for more info: values of disabled inputs will not be submited?

There are 2 workarounds for this:

Create a hidden element with the same name/value and disable the visible element only(You can achieve this with the help of jquery's $(":visible") or not(":hidden") selectors). This way the hidden active element will be posted as desired.
Add a hidden input/button to your form, & check forms submission by help of that element. e.g. if(isset($_POST['newElem'}){...}

He said in a comment that he's submitting to the same page, and the PHP script checks the input. So this isn't the problem. — Barmar, Feb 27 '17 at 21:01

JavaScript form validation is not submitting, page just reload

1 Answers1

UPDATE