我知道这似乎是重复的，但我似乎无法弄清楚这一点。我想以HTML格式将表单提交到弹出窗口。当我点击提交按钮时，它返回一个空白页面。我希望弹出窗口显示填写表单的所有输入。我想用JavaScript做。这是我的代码。我希望它从个人信息字段集和个人选择字段集输出表单中输入的所有信息。我希望它显示为无序列表。
这是我迄今为止的Javascript：
<head>
<title>My Form</title>
<script type="text/javascript">
function display() {
dispWin = window.open('','NewWin',
'toolbar=no,status=no,width=300,height=200')
message = "<ul><li>First Name:" +
document.mdForm.first_name.value;
message += "<li>Last Name:" +
document.mdForm.the_lastname.value;
message += "<li>Address:" +
document.mdForm.the_address.value;
message += "</ul>";
dispWin.document.write(message);
}
</script>
继承人HTML：
<body>
<h1>My Form</h1>
<form name="mdForm" method="post" action="">
<fieldset>
<legend>Personal Information</legend>
<p><label class="question" for="first_name">What is your First name?
</label>
<input type="text" id="first_name" name="first_name"
placeholder="Enter your First name."
size="50" required autofocus /></p>
<p><label class="question" for="the_lastname">What is your Last name?
</label>
<input type="text" id="the_lastname" name="the_lastname"
placeholder="Enter your Last name."
size="50" required /></p>
<p><label class="question" for="the_address">What is you address?
</label>
<input type="text" id="the_address" name="the_address"
placeholder="Enter your address."
size="50" required /></p>
<p><label class="question" for="the_email">What is your e-mail address?
</label>
<input type="email" id="the_email" name="the_email"
placeholder="Please use a real one!"
size="50" required /></p>
</fieldset>
<fieldset>
<legend>Personal Choices</legend>
<p><span class="question">Please check all your favorite foods:</span>
</br>
<input type="checkbox" id="food_one" name="some_statements[]"
value="Buffalo Wings" />
<label for="food_one">Buffalo Wings</label><br/>
<input type="checkbox" id="food_two" name="some_statements[]"
value="Enchiladas" />
<label for="food_two">Enchiladas</label><br/>
<input type="checkbox" id="food_three" name="some_statements[]"
value="Hamburgers" />
<label for="food_three">Hamburgers</label><br/>
<input type="checkbox" id="food_four" name="some_statements[]"
value="Spaghetti" />
<label for="food_four">Spaghetti</label></p>
<p><span class="question">Select your favorite online store:</span><br/>
<input type="radio" id="the_amazon" name="online_store"
value="amazon" />
<label for="the_amazon"><a href="http://www.amazon.com" target="_blank">Amazon</label><br/></a>
<input type="radio" id="bestbuy_electronics" name="online_store"
value="bestbuy" />
<label for="bestbuy_electronics"><a href="http:www.bestbuy.com" target="_blank">BestBuy</label><br/></a>
<input type="radio" id="frys_electronics" name="online_store"
value="frys" />
<label for="frys_electronics"><a href="http:www.frys.com" target="_blank">Frys Electronics</label><br/></a>
</p>
<p><label for="my_band"><span class="question">Who's your favorite band/ artist?</span></label><br/>
<select id="my_band" name="my_band" size="4" multiple>
<option value="The Chi-Lites">The Chi-Lites</option>
<option value="Michael Buble">Michael Buble</option>
<option value="Frank Ocean">Frank Ocean</option>
<option value="Labrinth">Labrinth</option>
</select>
</p>
</fieldset>
<div id="buttons">
<input type="submit" value="Click Here to Submit" onclick="display();" />
or
<input type="reset" value="Erase and Start Over" />
</div>
</form>
</body>
答案 0 :(得分：0)
希望这就是你要找的东西，它使用输入元素的名称作为问题，使用值作为anwser！
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS and HTML test1</title>
<meta name="description" content="Test1">
<meta name="author" content="DubstepGaming">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<script type="text/javascript">
function display() {
dispWin = window.open('','NewWin',
'toolbar=no,status=no,width=300,height=200')
var thangs = document.getElementsByTagName("input")
for(i = 0; i < thangs.length; i++){
var val = thangs[i].value
var name = thangs[i].name
dispWin.document.write("<p>Question: " +name+ "| You said: "+val+"</p>")
}
}
</script>
<h1>My Form</h1>
<form name="mdForm" method="post" action="">
<fieldset>
<legend>Personal Information</legend>
<p><label class="question" for="first_name">What is your First name?
</label>
<input type="text" id="first_name" name="first_name"
placeholder="Enter your First name."
size="50" required autofocus /></p>
<p><label class="question" for="the_lastname">What is your Last name?
</label>
<input type="text" id="the_lastname" name="the_lastname"
placeholder="Enter your Last name."
size="50" required /></p>
<p><label class="question" for="the_address">What is you address?
</label>
<input type="text" id="the_address" name="the_address"
placeholder="Enter your address."
size="50" required /></p>
<p><label class="question" for="the_email">What is your e-mail address?
</label>
<input type="email" id="the_email" name="the_email"
placeholder="Please use a real one!"
size="50" required /></p>
</fieldset>
<fieldset>
<legend>Personal Choices</legend>
<p><span class="question">Please check all your favorite foods:</span>
</br>
<input type="checkbox" id="food_one" name="some_statements[]"
value="Buffalo Wings" />
<label for="food_one">Buffalo Wings</label><br/>
<input type="checkbox" id="food_two" name="some_statements[]"
value="Enchiladas" />
<label for="food_two">Enchiladas</label><br/>
<input type="checkbox" id="food_three" name="some_statements[]"
value="Hamburgers" />
<label for="food_three">Hamburgers</label><br/>
<input type="checkbox" id="food_four" name="some_statements[]"
value="Spaghetti" />
<label for="food_four">Spaghetti</label></p>
<p><span class="question">Select your favorite online store:</span><br/>
<input type="radio" id="the_amazon" name="online_store"
value="amazon" />
<label for="the_amazon"><a href="http://www.amazon.com" target="_blank">Amazon</label><br/></a>
<input type="radio" id="bestbuy_electronics" name="online_store"
value="bestbuy" />
<label for="bestbuy_electronics"><a href="http:www.bestbuy.com" target="_blank">BestBuy</label><br/></a>
<input type="radio" id="frys_electronics" name="online_store"
value="frys" />
<label for="frys_electronics"><a href="http:www.frys.com" target="_blank">Frys Electronics</label><br/></a>
</p>
<p><label for="my_band"><span class="question">Who's your favorite band/ artist?</span></label><br/>
<select id="my_band" name="my_band" size="4" multiple>
<option value="The Chi-Lites">The Chi-Lites</option>
<option value="Michael Buble">Michael Buble</option>
<option value="Frank Ocean">Frank Ocean</option>
<option value="Labrinth">Labrinth</option>
</select>
</p>
</fieldset>
<div id="buttons">
<input type="submit" value="Click Here to Submit" onclick="display();" />
<input type="reset" value="Erase and Start Over" />
</div>
</form>
</body>
`