Question

我对表单有点问题。我无法弄清楚如何重定向到＆＃34; thankyou.html＆＃34;填写并提交表单后的页面。现在它不断回到＆＃34; form.html＆＃34;页。任何帮助都会受到极大的关注！

<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>&nbsp;&nbsp;&nbsp;&nbsp;<button name="reset" class="btn" id="yw2" type="reset">Palauta oletusarvot</button>&nbsp;</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>

Answer 1

查看您的表单操作：

<form class="well form-horizontal" id="yw0" action="form.html" method="post">

嗯，form.html是什么？ 此页面 form.html？如果是这样，那么此页面正在提交给自己。这意味着它向form.html发出POST请求，以包含表单中的值。除非您在服务器端执行任何操作（并且它看起来不像您），否则对页面的任何请求的标准响应都是显示该页面。

如果您希望表单发布到其他页面，请更改action：

<form class="well form-horizontal" id="yw0" action="thankyou.html" method="post">

但是，请注意，您仍然需要服务器端来处理实际的表单帖子。通过更改action，您正在告诉表单向thankyou.html而不是form.html发出请求，这将成功显示＆＃34;谢谢您＆＃34 ;页。但默认情况下，它实际上并没有对表单值做任何事情。

为此，您需要某种服务器端代码来接受和处理这些值。（在这方面有很多选择...... PHP，ASP.NET，Java，Ruby等等。）

请注意，在服务器端代码中，您还可以更好地控制应用程序的流程。例如，您可能希望表单处理逻辑位于form.html（或form.php更可能）。页面仍然可以提交给自己，然后在服务器端逻辑中，您可以执行重定向到另一个页面。如果要验证输入并在错误上重新显示表单，并且只有在验证成功时才重定向到thankyou.html，这将非常有用。

Answer 2

我假设引用的文件是form.html ...

<button name="submit" class="btn btn-primary" id="yw1" type="submit">Tallenna</button>

您已定义了不带操作属性的提交，因此它使用相同的页面将表单提交给...您必须添加操作并将其指向同一文件

<button name="submit" class="btn btn-primary" id="yw1" type="submit" action='form.html?submitted=1'>Tallenna</button>

和onload检查查询字符串中提交的参数，如果存在则重定向或将其定向到服务器站点脚本（例如test.php）

<button name="submit" class="btn btn-primary" id="yw1" type="submit" action='test.php'>Tallenna</button>

并在工作完成时重定向。

Answer 3

当您提交表单时，它将转到form.html，因为您已将表单中的操作添加到form.html

在form.html中编写以下代码

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>

    <script>

$(function () { 

window.location.href="thankyou.html";
        }); 
    </script>

Answer 4

只需在表单标记中的操作中添加网址即可。这将重定向到它。如下图所示。

<form id="payTmForm" action="https://pguat.paytm.com/oltp-web/processTransaction" method="post">
</form>

Answer 5

添加action的回答是错误的，因为它会将数据发送到thankyou.html而不是form.html 所以你可以使用js，这很容易：只需添加onsubmit="window.location.href = 'thankyou.html'; return false;"即可构建属性

example

表单提交后重定向

5 个答案: