stackoom
  简体   繁体   中英

HTML and Javascript: Make hidden form field visible with an if statment

 原文  2016-05-30 19:31:34  0   1    javascript/ html/ forms

Question

Im writing some html and javascript code for my website, what I want is a drop down with two answers, yes and no. When yes is selected I want a hidden form field (and the button next to it) to become visible and useable. My problem is that the code works if I make a visible form hidden but not the other way around (the way i want it).

Here is the code I'm using, the way that I thought it would work. You shouldn't have to worry about anything after function outputname()

 <html> <body> Are you a Patron? <br> <select id="patronAnswer"> <option value="no">No</option> <option value="yes">Yes</option> </select> <button name="name" type="button" onclick="patron()" id="patronSubmit">Submit</button> <br> <form id="form1"> <input name="name" type="text" size ="20" style="display:none" placeholder="Email used for patreon"> <button id="feildButton"type="button" onclick="outputname()"style="display:none">Submit</button> </form> <script> function patron() { var patronUser = document.getElementById("patronAnswer"); x=patronUser.options.selectedIndex console.log (x) if (x === 1) { document.getElementById("form1").style.display="block"; } } function outputname() { var email=document.getElementById("form1"); y=email.elements["name"].value; if (y==="testemail1@gmail.com"|| y==="testemail2@gmail.com"|| y==="bob"|| y==="billy"){ var down1 = confirm("You will be given the most current build"); if (down1){ var url = "https://drive.google.com/uc?export=download&id=0B8KkXdbkXf67WlJhQUg0QWJMUFU" var a = document.createElement('a'), ev = document.createEvent("MouseEvents"); a.href = url; a.download = url.slice(url.lastIndexOf('/')+1); ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0, false, false, false, false, 0, null); a.dispatchEvent(ev); } else if (down1===false) { confirm ("download canceled") } } else { var down2=confirm("You have not earned the level 2 reward, you will be given the public build."); if (down2){ var url = "https://drive.google.com/uc?export=download&id=0B8KkXdbkXf67T3dUQUlOTmhYQXc" var a = document.createElement('a'), ev = document.createEvent("MouseEvents"); a.href = url; a.download = url.slice(url.lastIndexOf('/')+1); ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0, false, false, false, false, 0, null); a.dispatchEvent(ev); } else if (down2===false){ confirm ("download canceled") } } } </script> <p id="demo"></p> </body> </html>

Here is an example of one that works but not in the way that i want. again shouldn't have to worry about anything after outputname()

 <html> <body> Are you a Patron? <br> <select id="patronAnswer"> <option value="no">No</option> <option value="yes">Yes</option> </select> <button name="name" type="button" onclick="patron()" id="patronSubmit">Submit</button> <br> <form id="form1"> <input name="name" type="text" size ="20" style="display:block" placeholder="Email used for patreon"> <button id="feildButton"type="button" onclick="outputname()"style="display:none">Submit</button> </form> <script> function patron() { var patronUser = document.getElementById("patronAnswer"); x=patronUser.options.selectedIndex console.log (x) if (x === 1) { document.getElementById("form1").style.display="none"; } } function outputname() { var email=document.getElementById("form1"); y=email.elements["name"].value; if (y==="testemail1@gmail.com"|| y==="testemail2@gmail.com"|| y==="bob"|| y==="billy"){ var down1 = confirm("You will be given the most current build"); if (down1){ var url = "https://drive.google.com/uc?export=download&id=0B8KkXdbkXf67WlJhQUg0QWJMUFU" var a = document.createElement('a'), ev = document.createEvent("MouseEvents"); a.href = url; a.download = url.slice(url.lastIndexOf('/')+1); ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0, false, false, false, false, 0, null); a.dispatchEvent(ev); } else if (down1===false) { confirm ("download canceled") } } else { var down2=confirm("You have not earned the level 2 reward, you will be given the public build."); if (down2){ var url = "https://drive.google.com/uc?export=download&id=0B8KkXdbkXf67T3dUQUlOTmhYQXc" var a = document.createElement('a'), ev = document.createEvent("MouseEvents"); a.href = url; a.download = url.slice(url.lastIndexOf('/')+1); ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0, false, false, false, false, 0, null); a.dispatchEvent(ev); } else if (down2===false){ confirm ("download canceled") } } } </script> <p id="demo"></p> </body> </html>

1 answers

solution1
 0 ACCPTED  2016-06-01 15:52:20

Ok, now I got it to how I want it! Basicly what you did worked partially for what I wanted, the new issue was that when page loads the form visible so all I did was add an extra line of code that sets the form to hidden when you load the page! This is exactly how I wanted it! Thank you for your help!

Here's what the new code looks like: 

 <html> <body> Are you a Patron? <br> <select id="patronAnswer"> <option value="no">No</option> <option value="yes">Yes</option> </select> <button name="name" type="button" onclick="patron()" id="patronSubmit">Submit</button> <br> <form id="form1"> <input name="name" type="text" size ="20" style="display:block" placeholder="Email used for patreon"> <button id="feildButton"type="button" onclick="outputname()"style="display:block">Submit</button> </form> <script> document.getElementById("form1").style.visibility="hidden" function patron() { var patronUser = document.getElementById("patronAnswer"); x=patronUser.options.selectedIndex console.log (x) if (x === 1) { document.getElementById("form1").style.visibility="visible"; } else{ document.getElementById("form1").style.visibility="hidden"; var down2=confirm("You have not earned the level 2 reward, you will be given the public build."); if (down2){ var url = "https://drive.google.com/uc?export=download&id=0B8KkXdbkXf67T3dUQUlOTmhYQXc" var a = document.createElement('a'), ev = document.createEvent("MouseEvents"); a.href = url; a.download = url.slice(url.lastIndexOf('/')+1); ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0, false, false, false, false, 0, null); a.dispatchEvent(ev); } else if (down2===false){ confirm ("download canceled") } } } function outputname() { var email=document.getElementById("form1"); y=email.elements["name"].value; if (y==="testemail1@gmail.com"|| y==="testemail2@gmail.com"|| y==="bob"|| y==="billy"){ var down1 = confirm("You will be given the most current build"); if (down1){ var url = "https://drive.google.com/uc?export=download&id=0B8KkXdbkXf67WlJhQUg0QWJMUFU" var a = document.createElement('a'), ev = document.createEvent("MouseEvents"); a.href = url; a.download = url.slice(url.lastIndexOf('/')+1); ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0, false, false, false, false, 0, null); a.dispatchEvent(ev); } else if (down1===false) { confirm ("download canceled") } } else { var down2=confirm("You have not earned the level 2 reward, you will be given the public build."); if (down2){ var url = "https://drive.google.com/uc?export=download&id=0B8KkXdbkXf67T3dUQUlOTmhYQXc" var a = document.createElement('a'), ev = document.createEvent("MouseEvents"); a.href = url; a.download = url.slice(url.lastIndexOf('/')+1); ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0, false, false, false, false, 0, null); a.dispatchEvent(ev); } else if (down2===false){ confirm ("download canceled") } } } </script> <p id="demo"></p> </body> </html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Make hidden input field visible HTML Javascript Filling a hidden field in a html form through javascript Make HTML hidden input visible How to inject UTC timestamp into a hidden HTML form field from Javascript JavaScript: Make first hidden element visible Make visible in javascript an element which is hidden is css Make a hidden div visible when javascript disabled javascript from HTML How to make hidden image visible within function call? hidden html form in php with javascript JavaScript If/Else statment for range slider user input of HTML Form
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM