Redirecting after form submit

Question

I have a little problem with a form. I can't figure out how to redirect to the "thankyou.html" page after the form is filled and submitted. Now the it keeps returning to "form.html" page. Any help would be greatly appriciated!

<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>

Are you using any server side language..? To what are you submitting the form..? — T J, Jun 10 '14 at 12:17
@hardbinger Are you joking? Just change action="form.html" to action="thankyou.html" — Gajotres, Jun 10 '14 at 12:19
Take a look at http://stackoverflow.com/questions/12252378/capturing-a-form-submit-with-jquery-and-submit you will maybe find a solution. — labilbe, Jun 10 '14 at 12:21

score 2 · Answer 1 · answered Jun 10 '14 at 12:23

Look at your form action:

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

Well, what is form.html? Is this page form.html? If so, then this page is submitting to itself. That means it's making a POST request to form.html, to include the values from the form. Unless you're doing anything server-side (and it doesn't look like you are), the standard response for any request to a page is to display that page.

If you want your form to post to a different page, change the action:

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

However, be aware that you still need something server-side to handle the actual form post. By changing the action all you're doing is telling the form to make a request to thankyou.html instead of form.html, which will successfully display the "thank you" page. But it won't actually do anything with the form values by default.

For that, you'll need some kind of server-side code to accept and process those values. (There are many options in that regard... PHP, ASP.NET, Java, Ruby, etc., etc.)

Note that in server-side code you would also have a lot more control over the flow of the application. For example, maybe you want the form-handling logic to be on form.html (or form.php more likely). The page can still submit to itself, and then in server-side logic you can perform a redirect to another page. This can be useful if you want to validate the input and re-display the form on an error, and only redirect to thankyou.html if validation is successful.

Finally some sensible answer :D + 1 – Gajotres Jun 10 '14 at 12:25 — Gajotres, Jun 10 '14 at 12:25

score 1 · Answer 2 · edited Dec 24 '17 at 09:36

I assume that the quoted file is form.html...

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

you've defined submit without action property so it use the same page to submit form to... You must add action and direct it either to same file

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

and onload to check for submitted parameter in query string and if exists to redirect or to direct it to a server site script (e.g. test.php)

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

and redirect when work is done.

score 0 · Answer 3 · answered Jun 10 '14 at 12:20

0

when you submit form,it will goes at form.html,because you have add action in form to form.html

write following code in your 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>

answered Jun 10 '14 at 12:20

Mr7-itsurdeveloper

1,631
2
17
24

@hardbinger wants to thankyou.html page after submit..so,i gave above solution ...if he wants to go directly then have to change form action to thankyou.html. – Mr7-itsurdeveloper Jun 10 '14 at 12:30

score -1 · Answer 4 · answered Jun 10 '14 at 12:28

-1

answer with adding action is wrong, because it sends data to thankyou.html instead form.html so you may use js, it is very easy: just add onsubmit="window.location.href = 'thankyou.html'; return false;" to form attributes

example

answered Jun 10 '14 at 12:28

raskalbass

740
4
21

score -1 · Answer 5 · answered Nov 22 '16 at 10:44

-1

Just add a url at the action in the form tag. This would redirect to it. As shown below.

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

answered Nov 22 '16 at 10:44

Abhinav Nigam

503
4
5

Redirecting after form submit

5 Answers5