javascript - I want to create a dynamic table that features data entered by a user when the user hits submit/save (novice programmer) -
i new coding in general, , thought best way learn make app of kind, , went simple one. premise if employee has lost work pass/badge, , need temporary 1 day, receptionist/security can input employees information along assigned badge number form. form, automatically inputted table. within table, there'll checkbox validate return of pass @ end of day.
i have 2 problems: first cannot data except employees name , date of birth (so contact numbers/addresses etc. aren't showing), show when hit save. second must have hit wrong key somewhere none of data (name , dob included) showing when hit save. have looked on code several times, however, said new (this being first project), , i'm not sure i'm supposed looking for.
if guys offer guidance, i'd extremely grateful.
ps. colours can see i'm changing when playing css - final version better (i hope!). apologies again poor standard of coding: i'm sure it's riddled obvious signs of absolute beginner...
this html file:
<html> <head> <title> document </title> <link rel="stylesheet" type="text/css" href="style.css" /> <script src="default.js"></script> <link rel="stylesheet" href="style.css"> </head> <body onload="doshowall()"> <h1>pass manager</h1> <div id="form" name="input" title="input form"> <form > name: <input type="text" name="name" /> </br> date of birth: <input type="date" name="dob" /> house number: <input type="number" name="house_number" /> postcode: <input type="text" name="postcode" /> contact number: <input type="number" name="contact_number" /> email: <input type="email" name="email" /> </br> pass number: <input type="number" name="pass_number" /> </form> </div> <form name=information> <div id="playarea"> <table> <tr> <td><b>name:</b> <input type="text" name="name"></td> <td><b>date of birth:</b> <input type="text" name="dob"></td> <td><b>house number:</b> <input type="text" name="housenumber"></td> <td><b>postcode:</b> <input type="text" name="postcode"></td> <td><b>contact number:</b> <input type="number" name="contactnumber"></td> <td><b>email:</b> <input type="email" name="email" /></td> <td><b>pass number:</b> <input type="number" name="passnumber"></td> </tr> <tr> <td> <input type=button value="save" onclick="saveitem()"> <input type=button value="modify" onclick="modifyitem()"> <input type=button value="remove" onclick="removeitem()"> </td> </tr> </table> </div> <div id="items_table"> <h2>loaned badges</h2> <table id=list></table> <p> <label><input type=button value="clear" onclick="clearall()"> <i>* removes items</i></label> </p> </div> </form> </body> </html> and javascript file:
function saveitem() { var name = document.forms.information.name.value; var data = document.forms.information.data.value; localstorage.setitem(name, data); doshowall(); } function modifyitem() { var name = document.forms.information.name.value; document.forms.information.data.value = localstorage.getitem(name); doshowall(); } function removeitem() { var name = document.forms.information.name.value; document.forms.information.data.value = localstorage.removeitem(name); doshowall(); } function clearall() { localstorage.clear(); doshowall(); } function checkbrowser() { if ('localstorage' in window && window['localstorage'] !== null) { return true; } else { return false; } } function doshowall() { if (checkbrowser()) { var key = ""; var list = "<tr><th>name</th><th>date of birth</th><th>house number</th><th>postcode</th><th>contact number</th><th>email</th><th>pass number</th></tr>\n"; var = 0; (i = 0; <= localstorage.length - 1; i++) { key = localstorage.key(i); list += "<tr><td>" + key + "</td>\n<td>" + localstorage.getitem(key) + "</td></tr>\n"; } if (list == "<tr><th>name</th><th>date of birth</th><th>house number</th><th>postcode</th><th>contact number</th><th>email</th><th>pass number</th></tr>\n") { list += "<tr><td><i>empty</i></td>\n<td><i>empty</i></td></tr>\n"; } document.getelementbyid('list').innerhtml = list; } else { alert('cannot store user preferences browser not support local storage'); } } (i = 0; <= localstorage.length - 1; i++) { key = localstorage.key(i); list += "<tr><td>" + key + "</td>\n<td>" + localstorage.getitem(key) + "</td></tr>\n"; } function checkbrowser() { if ('localstorage' in window && window['localstorage'] !== null) { return true; } else { return false; } }
you have 2 forms on page. 2 forms similar (not sure why). first 1 doesn't have name, code won't able access it.
i recommend @ kind of templating system (like angular).
what doing uses plain old javascript, isn't wrong, way dynamically creating javascript deprecated technique because there many better ways now. might learn techniques in modern framework, because need them sooner or later.
Comments
Post a Comment