如何通過隱藏表單在同一頁面中顯示表單輸出
[英]How to display form output in the same page by hiding the form
問題描述
我在這里需要一些幫助。 我被困在javascript的某些部分上。
我需要做的是制作表格並顯示自定義賀卡。 允許將圖片用作卡（將它們設置為輸出的背景）。 該表單應允許用戶輸入一些自定義信息，例如收件人的姓名，顏色信息等。還可以讓他們添加一些著名卡通人物的貼紙。 應該有一個按鈕，當他們點擊它時，它會隱藏表單（通過更改CSS可見性或相應元素的display屬性），並顯示一張包含他們輸入的文本和其他配置詳細信息的卡片。
我現在堅持的是如何根據對賀卡和字符的選擇來設置背景圖片（使用“ if else語句”或切換用例）。 另外，我需要在背景圖片的特定位置設置文本和貼紙。
非常感謝您提供的時間和幫助。
先感謝您。
以下是我的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 & Clubhouse</label> <br> <label> <input type="checkbox" name="charac" value="scoobyDoo" />Scooby Doo</label> <br> <label> <input type="checkbox" name="charac" value="tomJerry" />Tom & 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> </td> <td> <br> <br> <input type="button" onclick="myCard(); return false" value="SEND" /> <input type="reset" value="CLEAR" /> </td> <td> </td> </tr> </table> </fieldset> </form> </div> </body> </html>
1 個解決方案
解決方案1
0 已采納 2016-03-07 23:01:03
好的，首先：不要對目標元素進行索引編號。 如果將另一種形式添加到頁面上，或將某些輸入添加到表單中，則意味着麻煩，必須重做所有數字。 使用ID，類名等，這也使內容更易讀且更易於調試。 對於var也是如此：i，x非常適合小循環，但是有意義的var名稱更易於調試。 好吧，老師模式結束了哈哈。 我了解到我應該使用我的香草js :)
小費！ 我沒有使用它，但是您可以使用querySelector輕松地使用CSS路徑將js中的元素作為目標！
無論如何，我更改了腳本中的某些內容，使用圖像數組而不是開關，並創建了一個獲取BG圖像的循環。 只需調整img名稱和路徑（注釋行35）。 不知道您想要什么文本（和貼紙？），所以我所做的只是清理並修復了一些錯誤。 看一看：
//
如何在同一窗口中顯示表單輸出並隱藏表單
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.