如何通过隐藏表单在同一页面中显示表单输出
How to display form output in the same page by hiding the form
请在这里需要一些帮助。我被困在javascript的某些部分。
我需要做的是制作表单并显示自定义贺卡。我们被允许使用图片作为卡片(将它们设置为输出的背景)。表单应允许用户输入一些自定义信息,例如收件人姓名、颜色信息等。它还允许他们添加一些著名卡通人物的贴纸。应该有一个按钮,当他们点击它时,隐藏表单(通过更改相应元素的 CSS 可见性或显示属性)并显示一张包含他们输入的文本和其他配置详细信息的卡片。
我现在坚持的是如何根据他们选择的贺卡和字符设置背景图片(使用"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>
好的,首先:不要对目标元素进行索引编号。如果另一个表单被添加到页面,或者一些输入被添加到表单中,这意味着麻烦,必须重做所有数字。使用 ID、类名等,这也使内容更具可读性且更易于调试。对于变量也是如此:i,x 非常适合小循环,但有意义的 var 名称更容易调试。好了,老师模式结束了哈哈。我了解到我应该在我的香草js:)
提示!我没有使用它,但是您可以使用querySelector轻松地使用css路径定位js中的元素!
无论如何,我更改了脚本中的一些内容,对图像使用数组而不是开关,并创建了一个用于获取BG图像的循环。只需调整 img 名称和路径(取消注释第 35 行)。不知道你想要什么文本(和贴纸???所以我所做的只是清理并修复了一些错误。看一看:
//
http://jsfiddle.net/ovhq5v25
相关文章:
- 如何创建一个“;表单弹出框“;在chrome中右键单击时位于突出显示的单词上方
- jQuery动态表单显示在select选项上
- 当选择值x时,Javascript需要在正确的位置显示文本区域,从而循环通过具有选择选项的表单
- 将表单张贴到MailChimp,但显示动态成功页面
- HTML5在提交并显示所需标签后显示隐藏的表单元素
- HTML多页表单显示隐藏部分,保留表单数据
- 使用JavaScript将数据从一个表单显示到另一个页面
- Php 搜索表单显示结果时无需按搜索按钮,而它应该等到按下按钮才能显示它们
- HTML:如何使一个表单显示在另一个表单之上
- 值通过表单提交,然后即使在提交并显示值之后,也会以表单显示已提交的值
- 提交时的 Jquery 表单显示成功消息
- 是否有可接受的跨平台方法在基于触摸的设备上以标准 Web 表单显示数字键盘
- 如何将表单显示从=更改为:
- 表单显示问题+数组下的结果
- 自动完成使用Alpaca表单显示密钥和值
- Google appscript表单显示供用户选择的数组值
- 引导提交表单显示从javascript计时器
- 表单显示PHP HTML
- 基于PHP ajax的表单显示空白页面
- ASP.NET表单显示另一个字段中基于节的表单字段