gpt4 book ai didi

javascript - 在弹出窗口中提交表单

转载 作者:行者123 更新时间:2023-11-28 05:16:14 25 4
gpt4 key购买 nike

我知道这看起来像是重复的,但我似乎无法弄清楚这一点。我想将 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>

最佳答案

您是否阻止了默认的提交功能?

尝试:

function display(e) {
//To stop the submit
e.preventDefault();
...
Do your Stuff
...
//Continue the submit
FORM.submit();
}

关于javascript - 在弹出窗口中提交表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40968437/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com