CODEWITHSUNDEEP
javascripthtmlformsaddeventlistener
nublit
nublit

Reputation: 61

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 problem is, when the form is filled, the button listener does nothing! (It works in jsfiddle and other things like it, but won't work as stand alone files, which leads me to believe I set my files up incorrectly somehow, possibly messed up with the script tag). I have tried many things, including moving the script tag around, trying to get event listener submit of form, and input type button but still nothing. Can anyone help here?

My HTML: 

<!DOCTYPE html>
<html>
<head>
  <title>Form Project</title>
  <style type="text/css" rel="stylesheet">
    #but{text-align:center;}
    td{text-align:right;}
    span{padding=0; margin=0;float:left;}
  </style>
</head>
<body>
 <form id="formId">
  <table border = "1">

    <tr>
      <th>Provide your contact information</th>
      <th>Provide your login access information</th>
    </tr>


    <tr>
      <td><label><span>First Name:</span> <input type = "text" placeholder = "Enter First Name" required/></label></td>
      <td><label><span>Login ID:</span> <input type = "text" placeholder = "type a login ID" required/></label>  </td>
    </tr>


    <tr>
      <td><label><span>Middle Name:</span> <input type="text" placeholder ="type your middle name"/></label></td>
      <td><label><span>Password:</span> <input type="password" placeholder ="password" required/></label></td>  
    </tr>


    <tr>
      <td><label><span>Last Name:</span> <input type="text" placeholder="Last Name" required/></label></td>
      <td id="but"><label><button type="submit" id="displayButton">Display Info</button></label></td>
    </tr> 


    <tr>
      <td><label><span>Street Address:</span> <input type="text" placeholder="address" required/></label></td>
    </tr>


    <tr>
      <td><label for ="Citylist"><span>City:</span>
        <input type = "text" id ="citylist"
        placeholder="Select a city" list = "cities" required/>
        <datalist id= "cities">
          <option value = "Bronx"/>
          <option value = "Brooklyn"/>
          <option value = "Queens"/>
          <option value = "Manahttan"/>
          <option value = "Staten Island"/>
        </datalist>
        </label>
        </td>
    </tr>

    <tr>
    <td><label for ="StateList"><span>State:</span>
        <input type = "text" id ="State"
        placeholder="Select a city" list = "states" required/>
        <datalist id= "states">
          <option value = "New York"/>
          <option value = "New Jersey"/>
          <option value = "California"/>
          <option value = "Virginia"/>
          <option value = "Maine"/>
        </datalist>
        </td>
    </tr>


    <tr>
      <td><label><span>Zip code:</span> <input type="text" placeholder="Type your zipcode" maxlength="5" required/></label></td>
      </tr>

    <tr>
      <td>
        <label><span>Phone</span>
          <input type ="tel" placeholder="(123)456-789"
          pattern="\(\{3}) +\d{3}-\d{4}" required/>
        </label>
      </td>
    </tr>

    <tr>
      <td>
        <label><span>Email:</span>
          <input type="email" placeholder="[email protected]" required/> 
        </label>
      </td>
    </tr>

    <tr>
      <td>
        <label><span>Birth Date:</span>
          <input type="date" required/>
        </label>
      </td>
    </tr>
  </table>
 </form>
 <script type="text/javascript" src="form.js"></script>

</body>
</html>

My JS, simplified just for eventlistener: 

var button = document.getElementById("displayButton");
//var form = document.getElementById("formId");
//form.addEventListener("submit",function(){console.log("something1"); return false;},false);
button.addEventListener("click", function(){console.log("something"); return false;},false);

function formDisplay(){
    console.log("check");
}

It works when there the entire form IS NOT filled, but if all the required fields are filled then the console does not show up with "something".

Upvotes: 2

Views: 26682

Answers (3)

Intervalia
Intervalia

Reputation: 10945

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;
}
<form id="formId">
<table border="1">
  <tr>
    <th>Provide your contact information</th>
    <th>Provide your login access information</th>
  </tr>
  <tr>
    <td>
      <label><span>First Name:</span> <input type = "text" placeholder = "Enter First Name" required/></label>
    </td>
    <td>
      <label><span>Login ID:</span> <input type = "text" placeholder = "type a login ID" required/></label>
    </td>
  </tr>
  <tr>
    <td><label><span>Middle Name:</span> <input type="text" placeholder ="type your middle name"/></label></td>
    <td><label><span>Password:</span> <input type="password" placeholder ="password" required/></label></td>  
  </tr>
  <tr>
    <td><label><span>Last Name:</span> <input type="text" placeholder="Last Name" required/></label></td>
    <td id="but"><label><button type="submit" id="displayButton">Display Info</button></label></td>
  </tr> 
  <tr>
    <td><label><span>Street Address:</span> <input type="text" placeholder="address" required/></label></td>
  </tr>
  <tr>
    <td><label for ="Citylist"><span>City:</span>
      <input type = "text" id ="citylist"
      placeholder="Select a city" list = "cities" required/>
      <datalist id= "cities">
        <option value = "Bronx"/>
        <option value = "Brooklyn"/>
        <option value = "Queens"/>
        <option value = "Manahttan"/>
        <option value = "Staten Island"/>
      </datalist>
      </label>
      </td>
  </tr>
  <tr>
  <td><label for ="StateList"><span>State:</span>
      <input type = "text" id ="State"
      placeholder="Select a city" list = "states" required/>
      <datalist id= "states">
        <option value = "New York"/>
        <option value = "New Jersey"/>
        <option value = "California"/>
        <option value = "Virginia"/>
        <option value = "Maine"/>
      </datalist>
      </td>
  </tr>
  <tr>
    <td><label><span>Zip code:</span> <input type="text" placeholder="Type your zipcode" maxlength="5" required/></label></td>
    </tr>
  <tr>
    <td>
      <label><span>Phone</span>
        <input type ="tel" placeholder="(123)456-789"
        pattern="\(\{3}) +\d{3}-\d{4}" required/>
      </label>
    </td>
  </tr>
  <tr>
    <td>
      <label><span>Email:</span>
        <input type="email" placeholder="[email protected]" required/> 
      </label>
    </td>
  </tr>
  <tr>
    <td>
      <label><span>Birth Date:</span>
        <input type="date" required/>
      </label>
    </td>
  </tr>
</table>
</form>

Upvotes: 2

Aaron Hammond
Aaron Hammond

Reputation: 617

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"); 
        return false;
    }
,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).

Upvotes: 1

mand
mand

Reputation: 432

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"); return false; },false);

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

Upvotes: 1

Related Questions