Tsubasa Yamaguchi
Tsubasa Yamaguchi

Reputation: 175

How to stop getting back to "blank" in the form after alert?

Alert pop up if there is a blank in forms. The error check in Javascript is working,
but after alert is closed, the text in the form will be blank.

I want that the text I filled in will stay after alert is closed.
Because I want to fill up the only blank after alert.

Could you let me know how to keep the value even after alert?

function check_form() {
  let name = document.form1.name.value;
  let mail = document.form1.mail.value;
  let subject = document.form1.subject.value;
  let message = document.form1.message.value;

  let error_message = '';

  if (name == '') {
    error_message += 'Name is blank\n';
  }
  if (mail == '') {
    error_message += 'Mail is blank\n';
  }
  if (subject == '') {
    error_message += 'Subject is blank\n';
  }
  if (message == '') {
    error_message += 'Message is blank\n';
  }

  if (error_message != '') {
    alert(error_message);
    return false;
  } else {
    return true;
  }
}
<form method="post" name="form1" onsubmit="check_form()">
  <label for="name">Name</label>
  <input type="text" id="name" name="name">

  <label for="mail">Mail</label>
  <input type="text" id="mail" name="mail">

  <label for="subject">Subject</label>
  <input type="text" id="subject" name="subject">

  <label for="message">Message</label>
  <textarea id="message" name="message"></textarea>

  <input type="submit" value="Send message" id="submit-btn">
</form>

Upvotes: 0

Views: 81

Answers (1)

Sabbin
Sabbin

Reputation: 2445

The problem is that your form is submitted when the alert pops up, the return false is not enough to stop the form submit. You should use the preventDefault in order to stop the submit in the error case

function check_form(e) {
  let name = document.form1.name.value;
  let mail = document.form1.mail.value;
  let subject = document.form1.subject.value;
  let message = document.form1.message.value;

  let error_message = '';

  if (name == '') {
    error_message += 'Name is blank\n';
  }
  if (mail == '') {
    error_message += 'Mail is blank\n';
  }
  if (subject == '') {
    error_message += 'Subject is blank\n';
  }
  if (message == '') {
    error_message += 'Message is blank\n';
  }

  if (error_message != '') {
    alert(error_message);
    e.preventDefault();
    return false;
  } else {
    return true;
  }
}
<form method="post" name="form1" onsubmit="check_form(event)">
  <label for="name">Name</label>
  <input type="text" id="name" name="name">

  <label for="mail">Mail</label>
  <input type="text" id="mail" name="mail">

  <label for="subject">Subject</label>
  <input type="text" id="subject" name="subject">

  <label for="message">Message</label>
  <textarea id="message" name="message"></textarea>

  <input type="submit" value="Send message" id="submit-btn">
</form>

Upvotes: 2

Related Questions