Welcome to my question.

I am trying to make a sign up form that checks for some things. I want to make an event listener on the submit button, to catch some things First of all I have to prevent the default behavior of submission of the form.

That is where I am stuck a while now. For some reason it does not seem to work.

This is how my form is made:

                <form id="myform" class="signup-form" onsubmit = "signup()" method="POST">

                    <!-- form header -->
                    <div class="form-header">
                        <h1>Become a Member</h1>
                    </div>
                
                    <!-- form body -->
                    <div class="form-body">
                        <!-- Firstname and Lastname -->
                        <div class="horizontal-group">
                            <div class="form-group left">
                                <label for="username" class="label-title">Username *</label>
                                <input type="text" id="username" class="form-input" placeholder="enter your username" required="required" />
                            </div>
                            <div class="form-group right">
                                <label for="lastname" class="label-title">Confirm Username *</label>
                                <input type="text" id="confirm-username" class="form-input" placeholder="confirm your username" required="required" />
                            </div>
                        </div>
            
                        <!-- Email -->
                        <div class="form-group">
                            <label for="email" class="label-title">Email*</label>
                            <input type="email" id="email" class="form-input" placeholder="enter your email" required="required">
                        </div>
            
                        <!-- Password and confirm password -->
                        <div class="horizontal-group">
                    
                          <div class="form-group left">
                            <label for="password" class="label-title">Password *</label>
                            <input type="password" id="password" class="form-input" placeholder="enter your password" required="required">
                          </div>
                    
                          <div class="form-group right">
                            <label for="confirm-password" class="label-title">Confirm Password *</label>
                            <input type="password" class="form-input" id="confirm-password" placeholder="enter your password again" required="required">
                          </div>
                    
                        </div>
            
                    </div>
                    
                    <!-- form footer -->
                    <div class="form-footer">
                        <span><a href="login.html">Are you already a member? Click here to login!</a></span>
                        <button id= "submit-button"type="submit" class="btn">Create</button>
                    </div>
                
                </form>
            </div>

And this is how my sign up function on my js file is created:

// sign up
function signup(){
    const fUsername = document.getElementById("username").value;
    const sUsername = document.getElementById("confirm-username").value;
    
    const email = document.getElementById("email").value;
    
    const fPassword = document.getElementById("password").value;
    const sPassword = document.getElementById("confirm-password").value;


    const form = document.getElementById("myform");
    form.addEventListener("submit", (e) => {
        e.preventDefault();
        console.log("I am in eventListener");
        
    });

}

Please tell me what I am doing wrong! Also I have to mention that I have figured out that if I make my form like this

<form id="myform" class="signup-form" onsubmit = "signup(); return false;" method="POST">

it will not submit automatically, but I wanted to do it with the eventListener. Thank you in advance

CodePudding user response：

Call signup when the page loads instead of when the submit event is fired:

// sign up
function signup() {
  const fUsername = document.getElementById("username").value;
  const sUsername = document.getElementById("confirm-username").value;

  const email = document.getElementById("email").value;

  const fPassword = document.getElementById("password").value;
  const sPassword = document.getElementById("confirm-password").value;


  const form = document.getElementById("myform");
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    console.log("I am in eventListener");

  });

}

signup()

<form id="myform" class="signup-form" method="POST">

  <!-- form header -->
  <div class="form-header">
    <h1>Become a Member</h1>
  </div>

  <!-- form body -->
  <div class="form-body">
    <!-- Firstname and Lastname -->
    <div class="horizontal-group">
      <div class="form-group left">
        <label for="username" class="label-title">Username *</label>
        <input type="text" id="username" class="form-input" placeholder="enter your username" required="required" />
      </div>
      <div class="form-group right">
        <label for="lastname" class="label-title">Confirm Username *</label>
        <input type="text" id="confirm-username" class="form-input" placeholder="confirm your username" required="required" />
      </div>
    </div>

    <!-- Email -->
    <div class="form-group">
      <label for="email" class="label-title">Email*</label>
      <input type="email" id="email" class="form-input" placeholder="enter your email" required="required">
    </div>

    <!-- Password and confirm password -->
    <div class="horizontal-group">

      <div class="form-group left">
        <label for="password" class="label-title">Password *</label>
        <input type="password" id="password" class="form-input" placeholder="enter your password" required="required">
      </div>

      <div class="form-group right">
        <label for="confirm-password" class="label-title">Confirm Password *</label>
        <input type="password" class="form-input" id="confirm-password" placeholder="enter your password again" required="required">
      </div>

    </div>

  </div>

  <!-- form footer -->
  <div class="form-footer">
    <span><a href="login.html">Are you already a member? Click here to login!</a></span>
    <button id="submit-button" type="submit" class="btn">Create</button>
  </div>

</form>