HTML和Javascript:使用if语句使隐藏的表单字段可见

时间:2016-05-30 19:31:34

标签: javascript html forms

我正在为我的网站编写一些html和javascript代码,我想要的是一个带有两个答案的下拉,是和否。当选择yes时,我想要一个隐藏的表单字段(以及它旁边的按钮)变得可见和可用。我的问题是,如果我隐藏了一个可见的表单而不是相反的方式(我想要它的方式),代码可以工作。

这是我正在使用的代码,我认为它的工作方式。在函数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 个答案:

答案 0 :(得分:0)

好的,现在我明白我想要它!基本上你所做的部分工作就是我想要的,新的问题是当页面加载表单可见时所以我所做的就是添加一行额外的代码,在加载页面时将表单设置为隐藏!这正是我想要的!谢谢你的帮助!

这里是新代码的样子:

&#13;
&#13;
<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>
&#13;
&#13;
&#13;