Hiding/showing HTML forms (on button press) using javascript -
my name michael toscano. working on 3 tier project school, stuck on seems trivial step. right now, trying make individual html forms hidden clicking 1 button, , shown clicking another. there 2 forms on html page. have works if try hide second form, if try hide first form, hides entire page, aside 2 buttons @ top of page (both forms). thought maybe accidentally placed second form within first form (if possible), after looking on code looks (to me @ least) terminated first form . anyway, entire html file follows:
<!doctype html> <html><head> <button type=button id=f1 onclick="func(1)">order form</button> <button type=button id=f2 onclick="func(2)">retrieval form</button> <script type="text/javascript"> function func(a) { if(a==1) { document.getelementbyid("order").style.display="none"; } if(a==2) { document.getelementbyid("order").style.display="block"; } } </script> <script type="text/javascript"> function showvalue(newvalue) { document.getelementbyid("range").innerhtml=newvalue; } </script> </head> <body> <form id=order action=form.php > <p><center>name: <input type=text name="name" placeholder="enter name" required autocomplete="on"></center><br> <center>email: <input type=text name="email" placeholder="enter email" required autocomplete="off"></center><br> <center>password: <input type=text name="password" placeholder="15 characters or less" required autocomplete="off"></center><br> <center>address: <input type=text name="address" placeholder="enter address" required autocomplete="off"></center><br> <center>laptops: <input type=range name=laptop value=0 min=0 max=10 onchange="showvalue(this.value)"> <center>monitors: <input type=range name=monitor value=0 min=0 max=10 onchange="showvalue(this.value)"> <center>mouses: <input type=range name=mouse value=0 min=0 max=10 onchange="showvalue(this.value)"> <center>keyboards: <input type=range name=keyboard value=0 min=0 max=10 onchange="showvalue(this.value)"> <br> <br> <center>shipping carrier: <select name="delivery"> <option value="fedex">fedex</option> <option value="ups">ups</option> </select></center> <br> <center>would email receipt?<br> <center>yes <input type="radio" name="group1" value=1> no <input type="radio" name="group1" value=0 checked></center><br> <br> <center><input type=submit value="submit order"></center></p> </form> <form id=retrieve action=form2.php> first name: <input type=text name=first><br> last name: <input type=text name=last><br> password: <input type=password name=p1><br> retype password: <input type=password name=p2><br> <input type=submit> </form> </body> </html> i point out new html , javascript, appreciate if brief explanation accompany anybody's response. thank all, in advance.
there several issues:
- you don't need separate script tag each javascript function. put javascript in 1 script tag.
- i advise use css center elements instead of
<center>tag. have many unclosed<center>tags, boot. personally, think left-justified looks lot better centered. - if html full document, need tags
<head>, ,<body>. use w3c markup validation service sure have valid html code. - attribute values in html should in quotes, example
<form id=order><form id="order">. possiblerequiredneedsrequired="required". it considered best practice "wire up" javascript events using javascript instead of putting inline event handlers. example:
document.getelementbyid('f1').onclick = function () { func(1); };i think better put data attribute on buttons has id of form show/hide , in onclick event (which needs single version of function no if statement) pull expando data value. example
<button data-for="order">.- in code showing/hiding, working 1 form. references other? also, toggle effect looking for, you'll need detect if form hidden or not , change display style appropriately.
- you should research difference in javascript between
==,===. - there no need vertical space between html elements. breaking long lines, more most, when markup spread out becomes hard scan. can put
<br>@ end of lines. - many javascript programmers prefer putting opening curly braces @ end of prior line. it's minor consideration, helps save white space. see in code example followed convention. choice you.
- your
<select>tag should lower case. - "15 characters or less" incorrect grammar. should "15 characters or fewer" or perhaps "15 or fewer characters" or better, "up 15 characters"
please see this js fiddle version of cleaned-up html document working.
Comments
Post a Comment