我的表单有一点问题。我不知道如何在填写并提交表单后重定向到“thankyou.html”页面。现在它不断返回到“form.html”页面。任何帮助将不胜感激!
<body class="application">
<!-- content -->
<section class="main-body">
<div class="container-fluid">
<div class="row-fluid" id="content">
<!-- breadcrumbs -->
<div>
<div class="bootstrap-widget-content" id="yw3"><p class="help">
</p><p class="note">The form</p><form class="well form-horizontal" id="yw0" action="form.html" method="post"><div style="visibility:hidden"><input type="hidden" value="1" name="yform_35d652cf" id="yform_35d652cf" /></div>
<div class="control-group "><label class="control-label required" for="Applicant_firstname">Name <span class="required">*</span></label><div class="controls"><input class="span6" name="Applicant[firstname]" id="Applicant_firstname" type="text" /><span class="help-inline error" id="Applicant_firstname_em_" style="display: none"></span></div></div>
<div class="control-group "><label class="control-label required" for="Applicant_lastname">Last name <span class="required">*</span></label><div class="controls"><input class="span6" name="Applicant[lastname]" id="Applicant_lastname" type="text" /><span class="help-inline error" id="Applicant_lastname_em_" style="display: none"></span></div></div>
<div class="control-group "><label class="control-label required" for="Applicant_email">E-mail <span class="required">*</span></label><div class="controls"><input class="span6" name="Applicant[email]" id="Applicant_email" type="text" /><span class="help-inline error" id="Applicant_email_em_" style="display: none"></span></div></div>
<div class="control-group "><label class="control-label" for="Applicant_phone">Phone</label><div class="controls"><input class="span2" name="Applicant[phone]" id="Applicant_phone" type="text" /><span class="help-inline error" id="Applicant_phone_em_" style="display: none"></span></div></div>
<div class="control-group "><label class="control-label" for="Applicant_address">Adress</label><div class="controls"><input class="span6" name="Applicant[address]" id="Applicant_address" type="text" /><span class="help-inline error" id="Applicant_address_em_" style="display: none"></span></div></div>
<div class="control-group "><label class="control-label" for="Applicant_postcode">Number</label><div class="controls"><input class="span6 postSelect2" name="Applicant[postcode]" id="Applicant_postcode" type="text" /><span class="help-inline error" id="Applicant_postcode_em_" style="display: none"></span></div></div>
<div class="control-group "><label class="control-label" for="Applicant_postoffice">City</label><div class="controls"><input class="span6 postSelect2" name="Applicant[postoffice]" id="Applicant_postoffice" type="text" /><span class="help-inline error" id="Applicant_postoffice_em_" style="display: none"></span></div></div>
<div class="control-group "><label class="control-label" for="Applicant_extrainfo">Message</label><div class="controls"><textarea class="span6" name="Applicant[extrainfo]" id="Applicant_extrainfo"></textarea><span class="help-inline error" id="Applicant_extrainfo_em_" style="display: none"></span></div></div>
<div class="control-group "><label class="control-label" for="Applicant_invoice_preference">Toivottu laskutustapa</label><div class="controls"><select placeholder="Valitse toivottu laskutustapa" class="span4" name="Applicant[invoice_preference]" id="Applicant_invoice_preference">
<option value="">Question</option>
<option value="1" selected="selected">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
</select><span class="help-inline error" id="Applicant_invoice_preference_em_" style="display: none"></span></div></div>
<div class="form-actions">
<button name="submit" class="btn btn-primary" id="yw1" type="submit">Tallenna</button> <button name="reset" class="btn" id="yw2" type="reset">Palauta oletusarvot</button> </div>
</form></div></div>
</div>
</div><!-- content -->
</div>
</section>
<script type="text/javascript" src="/js/select2.min.js"></script>
<script type="text/javascript" src="/jquery.joyride-2.1.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
$('.toggle-hidden').click(function() {
$('.hidden-area').toggle();
return false;
});
$('.toggle-hidden-2').click(function(event) {
$('.hidden-area').hide();
$('.' + $(event.target).data('target')).toggle();
return false;
});
jQuery(function($) {
jQuery('body').popover({'selector':'[rel=popover]'});
jQuery('body').tooltip({'selector':'[rel=tooltip]'});
jQuery('#yw0').yiiactiveform({'attributes':[{'id':'Applicant_firstname','inputID':'Applicant_firstname','errorID':'Applicant_firstname_em_','model':'Applicant','name':'Applicant[firstname]','enableAjaxValidation':true,'inputContainer':'div.control-group'},{'id':'Applicant_lastname','inputID':'Applicant_lastname','errorID':'Applicant_lastname_em_','model':'Applicant','name':'Applicant[lastname]','enableAjaxValidation':true,'inputContainer':'div.control-group'},{'id':'Applicant_email','inputID':'Applicant_email','errorID':'Applicant_email_em_','model':'Applicant','name':'Applicant[email]','enableAjaxValidation':true,'inputContainer':'div.control-group'},{'id':'Applicant_phone','inputID':'Applicant_phone','errorID':'Applicant_phone_em_','model':'Applicant','name':'Applicant[phone]','enableAjaxValidation':true,'inputContainer':'div.control-group'},{'id':'Applicant_address','inputID':'Applicant_address','errorID':'Applicant_address_em_','model':'Applicant','name':'Applicant[address]','enableAjaxValidation':true,'inputContainer':'div.control-group'},{'id':'Applicant_postcode','inputID':'Applicant_postcode','errorID':'Applicant_postcode_em_','model':'Applicant','name':'Applicant[postcode]','enableAjaxValidation':true,'inputContainer':'div.control-group'},{'id':'Applicant_postoffice','inputID':'Applicant_postoffice','errorID':'Applicant_postoffice_em_','model':'Applicant','name':'Applicant[postoffice]','enableAjaxValidation':true,'inputContainer':'div.control-group'},{'id':'Applicant_extrainfo','inputID':'Applicant_extrainfo','errorID':'Applicant_extrainfo_em_','model':'Applicant','name':'Applicant[extrainfo]','enableAjaxValidation':true,'inputContainer':'div.control-group'},{'id':'Applicant_invoice_preference','inputID':'Applicant_invoice_preference','errorID':'Applicant_invoice_preference_em_','model':'Applicant','name':'Applicant[invoice_preference]','enableAjaxValidation':true,'inputContainer':'div.control-group'}],'errorCss':'error'});
jQuery('#yw4 .alert').alert();
window.setTimeout(function() { $('.alert').alert('close'); }, 5000);
});
</script>
最佳答案
查看您的表单操作:
<form class="well form-horizontal" id="yw0" action="form.html" method="post">
那么，form.html 是什么？ 这个页面是form.html吗？如果是这样，则该页面正在向其自身提交。这意味着它正在向 form.html 发出 POST 请求，以包含表单中的值。除非您在服务器端执行任何操作(而且您看起来并非如此)，否则对页面的任何请求的标准响应都是显示该页面。
如果您希望表单发布到其他页面，请更改操作:
<form class="well form-horizontal" id="yw0" action="thankyou.html" method="post">
但是，请注意，您仍然需要服务器端的某些东西来处理实际的表单发布。通过更改 action，您所做的就是告诉表单向 thankyou.html 而不是 form.html 发出请求，这将成功显示“谢谢”页面。但默认情况下它实际上不会对表单值执行任何操作。
为此，您需要某种服务器端代码来接受和处理这些值。 (这方面有很多选择...... PHP、ASP.NET、Java、Ruby 等等)
请注意，在服务器端代码中，您还可以更好地控制应用程序的流程。例如，也许您希望表单处理逻辑位于 form.html 上(或者更有可能位于 form.php 上)。该页面仍然可以提交给自身，然后在服务器端逻辑中您可以执行到另一个页面的重定向。如果您想要验证输入并在出现错误时重新显示表单，并且仅在验证成功时重定向到 thankyou.html，这会很有用。
关于javascript - 表单提交后重定向，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24140727/