How To Add Event Listener To Submit Button

I am having many troubles with this html. I am trying to add an event listener to a submit button so that I can eventually change the document to display the form information. The

Solution 1:

The reason that you don't see "something" in the console is that when the entire form is filled and the submit button is pressed it goes to the login page. This refresh the console and removes any data that was in it. In other words everything works, it's just that loading a new page removes everything that was in the console. You can check the button listener is working by replacing the call to console.log with alert. The alert call will happen AND you will see the popup whether or not the form is filled.

button.addEventListener("click", function(){ alert("something"); returnfalse; },false);

Here is a jsbin with a working example: http://jsbin.com/boxihukuni/1/edit?html,js,output

Solution 2:

So I believe the issue that you're relating is caused by the fact that, when all required fields are filled, that the form submits.

If you structure the event listener instead as follows:

button.addEventListener("click", 
    function(e){
        e.preventDefault(); 
        console.log("something"); 
        returnfalse;
    }
,false);

The form won't submit, and you should be able to do whatever you need to in the event handler (the e.preventDefault() stops the form submit).

Solution 3:

I would suggest using the submit event to handle situations where the user can submit the form without clicking on the submit button.

As others have stated you need to use evt.preventDefault() to stop the form from submitting.

The example below will check to see that everything is valid before it allows the form to be submitted.

var form = document.getElementById("formId");
form.addEventListener("submit", function(evt) {
  for(var i = 0; i < form.elements.length; i++) {
    var el = form.elements[i];
    if (!el.checkValidity()) {
      evt.preventDefault();
      console.log('Fix the form!');
      return;
    }
  }
});

#but {
  text-align:center;
}

td {
  text-align:right;
}

span {
  float:left;
  margin=0;
  padding=0;
}

<formid="formId"><tableborder="1"><tr><th>Provide your contact information</th><th>Provide your login access information</th></tr><tr><td><label><span>First Name:</span><inputtype = "text"placeholder = "Enter First Name"required/></label></td><td><label><span>Login ID:</span><inputtype = "text"placeholder = "type a login ID"required/></label></td></tr><tr><td><label><span>Middle Name:</span><inputtype="text"placeholder ="type your middle name"/></label></td><td><label><span>Password:</span><inputtype="password"placeholder ="password"required/></label></td></tr><tr><td><label><span>Last Name:</span><inputtype="text"placeholder="Last Name"required/></label></td><tdid="but"><label><buttontype="submit"id="displayButton">Display Info</button></label></td></tr><tr><td><label><span>Street Address:</span><inputtype="text"placeholder="address"required/></label></td></tr><tr><td><labelfor ="Citylist"><span>City:</span><inputtype = "text"id ="citylist"placeholder="Select a city"list = "cities"required/><datalistid= "cities"><optionvalue = "Bronx"/><optionvalue = "Brooklyn"/><optionvalue = "Queens"/><optionvalue = "Manahttan"/><optionvalue = "Staten Island"/></datalist></label></td></tr><tr><td><labelfor ="StateList"><span>State:</span><inputtype = "text"id ="State"placeholder="Select a city"list = "states"required/><datalistid= "states"><optionvalue = "New York"/><optionvalue = "New Jersey"/><optionvalue = "California"/><optionvalue = "Virginia"/><optionvalue = "Maine"/></datalist></td></tr><tr><td><label><span>Zip code:</span><inputtype="text"placeholder="Type your zipcode"maxlength="5"required/></label></td></tr><tr><td><label><span>Phone</span><inputtype ="tel"placeholder="(123)456-789"pattern="\(\{3}) +\d{3}-\d{4}"required/></label></td></tr><tr><td><label><span>Email:</span><inputtype="email"placeholder="name@domain.com"required/></label></td></tr><tr><td><label><span>Birth Date:</span><inputtype="date"required/></label></td></tr></table></form>