CODEWITHSUNDEEP
javascripthtml
Vincent Uy
Vincent Uy

Reputation: 11

Display window confirm and submit form if button is clicked

I have input password field and two buttons inside the form. First button is for password confirm and second is for submit form. What I want to do is if I clicked the password confirm button and then clicked submit button window.confirm() will display and it will submit the form.

I tried it using if/else statement in javascript, but when I clicked the confirm button and then submit, the window.confirm() is not displaying.

function confirmPassword() {
  var cp = document.getElementById("user_pass");
  if (cp.value == "") {
    alert("Password please");
    return false;
  } else {
    document.getElementById("replace").innerHTML = "Hello World";
  }
}

function submitForm() {
  var cb = document.getElementById("confirm_btn").click;
  if (cb != true) {
    alert("Confirm password first!");
    return false;
  } else if (confirm("Are you sure?")) {
    alert("Done!");
    return false;
  }
}
<form onsubmit="return submitForm()">
  <table>
    <td id="replace">
      <input type="password" id="user_pass">
      <button type="button" id="confirm_btn" onclick="confirmPassword()">Confirm</button><br>
    </td>
  </table>
  <button type="submit">Submit</button>
</form>

Upvotes: 1

Views: 865

Answers (3)

Oriol_IL
Oriol_IL

Reputation: 120

you should use the required attribute on the input password instead of relying on Javascript just to check if it's not empty, thus you will not need the if/else from below.

To fix the condition you just need to save in a variable that the password was confirm and check the if/else against that variable.

Upvotes: 1

Kshitij Dhakal
Kshitij Dhakal

Reputation: 844

Problem was that after you confirmed password var cb = document.getElementById("confirm_btn").click; becomes undefined. Instead you should use some persistent variable to see if password has been confirmed or not, as shown below.

var confirmed = false;

function confirmPassword() {
  var cp = document.getElementById("user_pass");
  if (cp.value == "") {
    alert("Password please");
    return false;
  } else {
    document.getElementById("replace").innerHTML = "Hello World";
    confirmed = true;
  }
}

function submitForm() {
  if (!confirmed) {
    alert("Confirm password first!");
    return false;
  } else if (confirm("Are you sure?")) {
    alert("Done!");
    return false;

  }
}
<form onsubmit="return submitForm()">
  <table>
    <td id="replace">
      <input type="password" id="user_pass">
      <button type="button" id="confirm_btn" onclick="confirmPassword()">Confirm</button><br>
    </td>
  </table>
  <button type="submit">Submit</button>
</form>

Upvotes: 2

Narayanan Ramanathan
Narayanan Ramanathan

Reputation: 1400

You can use a variable to save the status of password confirmed.

var isPwdConfirmed = false;
function confirmPassword() {
  var cp = document.getElementById("user_pass");
  if (cp.value == "") {
    alert("Password please");
    return false;
  } else {
    isPwdConfirmed = true;
    document.getElementById("replace").innerHTML = "Hello World";
  }
}

function submitForm() {
  var cb = isPwdConfirmed;
  if (cb != true) {
    alert("Confirm password first!");
    return false;
  } else if (confirm("Are you sure?")) {
    alert("Done!");
    return false;
  }
}
<form onsubmit="return submitForm()">
  <table>
    <td id="replace">
      <input type="password" id="user_pass">
      <button type="button" id="confirm_btn" onclick="confirmPassword()">Confirm</button><br>
    </td>
  </table>
  <button type="submit">Submit</button>
</form>

Upvotes: 0

Related Questions