HTML 和 Javascript：使用 if 語句使隱藏的表單字段可見
[英]HTML and Javascript: Make hidden form field visible with an if statment
問題描述
我正在為我的網站編寫一些 html 和 javascript 代碼，我想要的是一個下拉菜單，有兩個答案，是和否。 選擇“是”時，我希望隱藏的表單字段（以及它旁邊的按鈕）變為可見和可用的。 我的問題是，如果我隱藏了一個可見的表單，而不是相反（我想要的方式），代碼就可以工作。
這是我正在使用的代碼，我認為它會起作用的方式。 在函數 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>
這是一個有效但不是我想要的方式的例子。 再次不必擔心 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 個解決方案
解決方案1
0 已采納 2016-06-01 15:52:20
好的，現在我得到了我想要的！ 基本上你所做的部分工作是為了我想要的，新問題是當頁面加載表單時可見，所以我所做的只是添加一行額外的代碼，當你加載頁面時將表單設置為隱藏！ 這正是我想要的！ 感謝您的幫助！
新代碼如下所示：
<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>
如何將 UTC 時間戳注入來自 Javascript 的隱藏 HTML 表單字段
[英]How to inject UTC timestamp into a hidden HTML form field from Javascript
HTML中的javascript如何使隱藏的圖像在函數調用中可見？
[英]javascript from HTML How to make hidden image visible within function call?
HTML表單的范圍滑塊用戶輸入的JavaScript If / Else語句
[英]JavaScript If/Else statment for range slider user input of HTML Form
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.