如何通过隐藏表单

时间:2016-03-06 22:15:50

标签: javascript html css forms

我需要一些帮助。我被困在javascript的某些部分。

我需要做的是制作表格并展示自定义贺卡。我们被允许使用图片作为卡片(将它们设置为输出的背景)。表单应该让用户输入一些自定义信息,如收件人的名字,颜色信息等。它还可以让他们添加一些着名卡通人物的贴纸。应该有一个按钮,当它们点击它时,隐藏表单(通过更改相应元素的CSS可见性或显示属性)并显示一张卡,其中包含他们输入的文本和其他配置详细信息。

我现在所困扰的是如何根据他们选择的贺卡和字符设置背景图片(使用“if else statements”或switch case)。另外,我需要在背景图片的某个位置设置文字和贴纸。

非常感谢您提供的时间和帮助。

提前谢谢。

以下是我的Java脚本,CSS和HTML代码:

 < script >
   function selectAll() {
     for (var i = 0; i < document.forms[0]['charac'].length - 1; i++)
       document.forms[0]['charac'][i].checked = document.forms[0]['charac'][5].checked;
   }
 document.forms[0]['charac'][5].addEventListener('click', selectAll);

 //    function showOutput() {
 //        var a = document.getElementById("txtName").value;
 //        var b = document.getElementById("txtName1").value;
 //        var c = document.getElementById("content-field").value;

 //        document.writeln(a + "<br><br> " + b + "<br><br> " + c);
 //        document.getElementById("formOutput").innerHTML = "This is how your card looks" + a + " " + b + " " + c;
 //         document.getElementById("formCard").style.backgroundImage="url('birthday-card.jpg')";
 //                            }

 function myCard() {
     var a = document.getElementById("txtName").value;
     var b = document.getElementById("txtName1").value;
     var c = document.getElementById("content-field").value;
     //        document.getElementById("formOutput").style.backgroundImage="url('birthday-card.jpg')";

     var selected;
     if (document.forms[0][9].checked == true) {
       document.body.style.backgroundImage = url('birthday-card.jpg');
       document.getElementById("formOutput").innerHTML = a + "<br><br> " + b + "<br><br> " + c;
     } else
     if (document.forms[0][10].checked == true) {
       document.body.style.backgroundImage = url('valentine-card.jpg');
       document.getElementById("formOutput").innerHTML = a + "<br><br> " + b + "<br><br> " + c;
     } else
     if (document.forms[0][11].checked == true) {
       document.body.style.backgroundImage = url('valentine-card.jpg');
       document.getElementById("formOutput").innerHTML = a + "<br><br> " + b + "<br><br> " + c;
     } else
     if (document.forms[0][12].checked == true) {
       document.body.style.backgroundImage = "url('valentine-card.jpg')";
       //                document.getElementById("formOutput").innerHTML ="name";
     } else
     if (selected == document.forms[0][13]) {
       document.body.style.backgroundImage = "url('valentine-card.jpg')";
       //                document.getElementById("formOutput").innerHTML ="name";
     } else
     if (selected == document.forms[0][14]) {
       document.body.style.backgroundImage = "url('valentine-card.jpg')";
       //                document.getElementById("formOutput").innerHTML ="name";
     } else
     if (selected == document.forms[0][15]) {
       document.body.style.backgroundImage = "url('valentine-card.jpg')";
       //                document.getElementById("formOutput").innerHTML ="name";
     }
   }
   //        document.forms[0][24].addEventListener('click', showOutput);
   < /script>
<style> #formOutput {
  background-image: url("blank-card1.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
}
table {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
table td {
  height: 15px;
  text-align: left;
}
</style>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Generate a Greeting Card</title>
</head>

<body>
  <div id='formOutput'>
    <h3>Fill out the following information and select a card to view how it looks.</h3>

    <form id="formCard" action="">
      <fieldset>
        <legend>Personal information:</legend>
        <table>
          <tr>
            <td>
              <label for="txtName">Your Name<span style="color:red">*</span>
              </label>
            </td>
            <td>
              <input type="text" id="txtName" name="name" value="name" required/>
            </td>
          </tr>
          <tr>
            <td>
              <label for="txtName1">Your Family Member's
                <br>OR Friend's Name<span style="color:red">*</span>
              </label>
            </td>
            <td>
              <input type="text" id="txtName1" name="name1" value="Family/Friend Name" required/>
            </td>
          </tr>
          <tr>
            <td>
              <label for="txtAddress">Address</label>
            </td>
            <td>
              <input type="text" id="txtAddress" name="address" value=" ">
            </td>
          </tr>
          <tr>
            <td>
              <label for="postalCode">Postal Code<span style="color:red">*</span>
              </label>
            </td>
            <td>
              <input type="text" id="postalCode" name="postalcode" value=" " required/>
            </td>
          </tr>
          <tr>
            <td>Province<span style="color:red">*</span>
            </td>
            <td>
              <select id="selProvince" name="province" required>
                <option value="" selected>Please select...</option>
                <option value="AB">Alberta</option>
                <option value="BC">British Columbia</option>
                <option value="MB">Manitoba</option>
                <option value="NB">New Brunswick</option>
                <option value="NFL">Newfoundland and Labrador</option>
                <option value="NW">Northwest Territories</option>
                <option value="NS">Nova Scotia</option>
                <option value="NU">Nunavut</option>
                <option value="ON">Ontario</option>
                <option value="PEI">Prince Edward Island</option>
                <option value="QC">Quebec</option>
                <option value="SK">Saskatchewan</option>
                <option value="YK">Yukon</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>
              <label for="txtPhone">Phone<span style="color:red">*</span>
              </label>
            </td>
            <td>
              <input type="text" id="txtPhone" name="phone" value=" " required/>
            </td>
          </tr>
          <tr>
            <td>
              <label for="txtEmail">Email<span style="color:red">*</span>
              </label>
            </td>
            <td>
              <input type="text" id="txtEmail" name="email" required/>
            </td>
          </tr>
          <tr>
            <td>Would you like to send it
              <br>via email or mail<span style="color:red" required>*</span>
            </td>
            <td>
              <label>
                <input type="radio" name="route" value="m" />Mail</label>
              <label>
                <input type="radio" name="route" value="e" />Email</label>
            </td>
          </tr>
          <tr>
            <td>Type of Greeting Card:<span style="color:red">*</span>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
              <br>
            </td>
            <td>
              <br>
              <label>
                <input type="radio" name="card" id="birthday" value="bd" />Birthday</label>
              <br>
              <label>
                <input type="radio" name="card" id="valentine" value="vd" />Valentines Day</label>
              <br>
              <label>
                <input type="radio" name="card" id="friendship" value="frd" />Friendship Day</label>
              <br>
              <label>
                <input type="radio" name="card" id="mother" value="md" />Mother's Day</label>
              <br>
              <label>
                <input type="radio" name="card" id="father" value="fad" />Father's Day</label>
              <br>
              <label>
                <input type="radio" name="card" id="newYear" value="nyd" />New Year's Day</label>
              <br>
              <label>
                <input type="radio" name="card" id="christmas" value="cd" />Christmas Day</label>
              <br>
              <br>
            </td>
          </tr>
          <tr>
            <td>Choose the person's
              <br>Favourite cartoon charcters:<span style="color:red">*</span>
              <br>
              <br>
              <br>
              <br>
              <br>
            </td>
            <td>
              <label>
                <input type="checkbox" name="charac" value="mickeyMouse" checked/>Mickey Mouse &amp; Clubhouse</label>
              <br>
              <label>
                <input type="checkbox" name="charac" value="scoobyDoo" />Scooby Doo</label>
              <br>
              <label>
                <input type="checkbox" name="charac" value="tomJerry" />Tom &amp; Jerry</label>
              <br>
              <label>
                <input type="checkbox" name="charac" value="tweetiePie" />Tweetie Pie</label>
              <br>
              <label>
                <input type="checkbox" name="charac" value="donaldDuck" />Donald Duck</label>
              <br>
              <label>
                <input type="checkbox" name="charac" value="selectAll" />Select All</label>
            </td>
          </tr>
          <tr>
            <td>Choose a colour for the
              <br>text on the card:</td>
            <!--color code from w3schools.org-->
            <td>
              <input type="color" id="html5colorpicker" onchange="clickColor(0, -1, -1, 5)" value="#ff0000" style="width:85%;">
            </td>
          </tr>
          <tr>
            <td>
              <label>Content</label>
            </td>
            <td>
              <textarea id="content-field" cols="20" rows="2" value="" placeholder="Write them a personal message..."></textarea>
            </td>
          </tr>
          <tr>
            <td>Choose an image to put on
              <br>the card to make it special.</td>
            <td>
              <label>
                <input type="file" name="pic" accept="image/*">
              </label>
            </td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>
              <br>
              <br>
              <input type="button" onclick="myCard(); return false" value="SEND" />&nbsp;
              <input type="reset" value="CLEAR" />
            </td>
            <td>&nbsp;</td>
          </tr>
        </table>
      </fieldset>
    </form>
  </div>
</body>

</html>

1 个答案:

答案 0 :(得分:0)

好的,首先关闭:不要对目标元素进行索引编号。如果另一个表单被添加到页面,或者某些输入添加到表单,则意味着麻烦,必须重做所有数字。使用ID,类名等,这也使事情更易读,更容易调试。同样的vars:i,x非常适合小循环,但有意义的var名称更容易调试。好吧,老师模式hahaa结束了。我知道我应该在我的香草js上工作:)

TIP!我没有使用它,但您可以使用querySelector轻松地使用css路径定位js中的元素!

无论如何,我改变了你脚本中的一些东西,使用了一个数组代替一个开关,并创建了一个获取BG图像的循环。只需调整img名称和路径(取消注释第35行)。不知道你想要的文字(和贴纸???)所以我所做的只是清理并修复了一些错误。看看:

//

http://jsfiddle.net/ovhq5v25