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
– Barmar, Commented Feb 27, 2017 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
– wilson382, Commented Feb 27, 2017 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
– Barmar, Commented Feb 27, 2017 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? — Behrad Khodayar
– Behrad Khodayar, Commented Feb 27, 2017 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
– wilson382, Commented Feb 27, 2017 at 20:54

Community · Accepted Answer · 2017-05-23 12:00:14Z

2

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'}){...}

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Feb 27, 2017 at 20:52

Behrad Khodayar

2,8372 gold badges21 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Barmar Over a year ago

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.

Collectives™ on Stack Overflow

JavaScript form validation is not submitting, page just reload

1 Answer 1

UPDATE

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

UPDATE

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related