CODEWITHSUNDEEP
javascripthtml
Zernst
Zernst

Reputation: 325

Form onsubmit not working despite returning false

I cannot figure out why my form onsubmit function isn't working at all. I am trying to create a form that validates a confirmation password, but I cannot get the onsubmit to call the function I created, although it seems to be written correctly.

<div class="container">
                <h2 class="py-2 page_title">Change Password for <%= user.username %>:</h2>
                <form onsubmit="return confirm_password();" class="form_content" action="/users/edit_password/<%= user._id %>?_method=PUT" method="POST">

                    <div class="row">
                        <div class="form-group col-lg-12">
                            <input class="form-control" name="user[old_password]" placeholder="Old Password" type="password">
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-lg-12">
                            <input id="password" class="form-control" name="user[new_password]" placeholder="New Password" type="password">
                        </div>  
                    </div>
                    <div class="row">       
                        <div class="form-group col-lg-12">
                            <input id="confirm_password" class="form-control" name="user[confirm_password]" placeholder="Confirm Password" type="password">
                        </div>              
                    </div>

                    <button id="button" class="button zoom" type="submit">Submit</button>
                </form>
            </div>

The Function

function confirm_password(){
    console.log("working");  //This doesn't happen, so I know it isn't even being called
    if (document.getElementById("password") != document.getElementById("confirm_password")){
        alert("Passwords Do Not Match");
        return false;
    }
    return true;
}

I have added an alert("working"); into the file to confirm that it is connected, and I am getting the alert. However, after clicking submit, the console is telling me that "confirm_password" is not a function. I have also tried adding a click listener to the button itself, and this too does not work either. Is there something obvious I am just missing? I have tried adding the script tag in the header and footer and this does not seem to change anything.

Thanks.

Upvotes: 0

Views: 166

Answers (2)

Karl L
Karl L

Reputation: 1725

It conflicts with one of your IDs here:

<input id="confirm_password"

Change the function name to something else like:

onsubmit="return confirmPassword(event);"

then:

function confirmPassword(e) {
  e.preventDefault();
  // your codes here
}

Upvotes: 1

Sven.hig
Sven.hig

Reputation: 4519

you have to get your button as an element and add to it an event listener and then put your function in the scope of the event listner's callback 

 <div class="container">
<h2 class="py-2 page_title">Change Password for <%= user.username %>:</h2>
      <form onsubmit="return confirm_password();" class="form_content" action="/users/edit_password/<%= user._id %>?_method=PUT" method="POST">

          <div class="row">
              <div class="form-group col-lg-12">
                  <input class="form-control" name="user[old_password]" placeholder="Old Password" type="password">
              </div>
          </div>
          <div class="row">
              <div class="form-group col-lg-12">
                  <input id="password" class="form-control" name="user[new_password]" placeholder="New Password" type="password">
              </div>  
          </div>
          <div class="row">       
              <div class="form-group col-lg-12">
                  <input id="Confirm_password" class="form-control" name="user[confirm_password]" placeholder="Confirm Password" type="password">
              </div>              
          </div>

          <button id="button" class="button zoom">Submit</button>
      </form>
  </div>

<script>
  const submitbutton =document.getElementsByClassName("button zoom")[0]
 submitbutton.addEventListener('click',(e)=>{

  confirm_password(e)

})

function confirm_password(e){
const passoword=document.getElementById("password").value 
 const password2=document.getElementById("Confirm_password").value
    if (passoword!=password2){
      e.preventDefault()
        alert("Passwords Do Not Match");
        return false;
    }
    return true;
  }
</script>

Upvotes: 1

Related Questions