CODEWITHSUNDEEP
javascriptjqueryhtmlformshttp-redirect
hardbinger
hardbinger

Reputation: 1

Redirecting after form submit

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>

Upvotes: 0

Views: 8707

Answers (5)

i100
i100

Reputation: 4666

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.

Upvotes: 1

Abhinav Nigam
Abhinav Nigam

Reputation: 591

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>

Upvotes: -1

raskalbass
raskalbass

Reputation: 740

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

Upvotes: -1

David
David

Reputation: 218798

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.

Upvotes: 2

Mr7-itsurdeveloper
Mr7-itsurdeveloper

Reputation: 1631

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>

Upvotes: 0

Related Questions