javascript - How to add event listener to submit button -
i having many troubles html. trying add event listener submit button can change document display form information. problem is, when form filled, button listener nothing! (it works in jsfiddle , other things it, won't work stand alone files, leads me believe set files incorrectly somehow, possibly messed script tag). have tried many things, including moving script tag around, trying event listener submit of form, , input type button still nothing. can 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 contact information</th> <th>provide 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 login id" required/></label> </td> </tr> <tr> <td><label><span>middle name:</span> <input type="text" placeholder ="type 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 ="citylist"><span>city:</span> <input type = "text" id ="citylist" placeholder="select 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 ="statelist"><span>state:</span> <input type = "text" id ="state" placeholder="select 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 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="name@domain.com" 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 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 entire form not filled, if required fields filled console not show "something".
the reason don't see "something" in console when entire form filled , submit button pressed goes login page. refresh console , removes data in it. in other words works, it's loading new page removes in console. can check button listener working replacing call console.log alert. alert call happen , see popup whether or not form filled.
button.addeventlistener("click", function(){ alert("something"); return false; },false); here jsbin working example: http://jsbin.com/boxihukuni/1/edit?html,js,output
Comments
Post a Comment