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> <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>
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.
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.
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>
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
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>
Related
I have a problem setting up a form on my website.
I want to add two separate forms on my website, which i did, using some HTML & css.
Thoses forms need to send informations to a webhook -> it also works (since it's collected)
BUT as soon as i press submit, it redirect to the main page of the website, so no conversion (which is a shame) and a very bad input from me.
Please, lend me your intelligence, since i must be the best idiot there is.
<form name='myForm' data-form-id='IdFromWebhook' action='WebhookLink' method='post' onsubmit="return false">
<div class="row">
<div class="col-lg-12">
<div class="form-group text_box">
<label for='EMAIL_ADDRESS'>E-mail: </label><input id='insightly_email' name='email' type='text' required>
</div>
</div>
<div class="col-lg-6">
<div class="form-group text_box">
<label for='FIRST_NAME'>First name: </label><input id='insightly_firstName' name='firstName' type='text' required>
</div>
</div>
<div class="col-lg-6">
<div class="form-group text_box">
<label for='LAST_NAME'>Last Name: </label><input id='insightly_lastName' name='lastName' type='text' required>
</div>
</div>
<div class="col-lg-4">
<div class="form-group text_box">
<label for='Language__c'>Choose a language: </label>
<select id='insightly_language' name='language' required><option value='EN'>EN</option><option value='FR'>FR</option><option value='DE'>DE</option></select>
</div>
</div>
</div>
<!--Bouton d'envoi-->
<div style="display:flex;justify-content:center"><input class="btn_three" type='submit' value='Submit'></div></form>
Use event.preventDefault() this will stops redirect:
formReference.onsubmit = (event) => {
event.preventDefualt()
}
I stupidly found the right answer, i had to specify URLs for the success or error pages.
It was an insightly form.
I'll try to explain this as best as possible.
I have a form that on submit actions on email.php:
<form data-toggle="validator" role="form" method="POST" action="email.php">
<div class="row">
<!-- Full Name -->
<div class="form-group col-lg-4">
<label for="inputName" class="control-label">Name</label>
<input type="text" class="form-control" name="inputName" id="inputName" required>
</div>
<!-- email -->
<div class="form-group col-lg-4">
<label for="inputEmail" class="control-label">Email</label>
<input type="email" class="form-control" name="inputEmail" id="inputEmail" data-error="Incorrect Email Format" required>
</div>
<!-- phone number -->
<div class="form-group col-lg-4">
<label for="inputTel" class="control-label">Phone Number</label>
<input type="text" pattern="(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}" name="inputTel" id="inputTel" data-minlength="10" maxlength="15" class="form-control" placeholder="123-456-7890" data-error="(123)-456-7890 | 1234567890 | 123-456-7890">
</div>
<!-- message -->
<div class="form-group col-lg-12">
<label for="content" class="control-label">Message</label>
<textarea name="content" id="content" class="form-control" rows="6" data-minlength="5" data-error="Message Must be longer"></textarea>
</div>
<!-- button -->
<div class="form-group col-lg-12">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
After the form is successfully processed in email.php, I want it to go back to the page the form is located on and show the "thank you" modal I created
currently I have in email.php (after validation):
echo "<script>
$(window).load(function(){
$('#myModal').modal('show');
});
window.location.href="Websitename";
</script>";
This does not work. What happens is the page just gets redirected but does not display the modal.
Can anyone please provide me any assistance?
I think the problem is in
window.location.href="Websitename";
When browser see this line , she will automatically locate the browser which means new request immediately made.
Let me explain :
Your form send request to email.php -----> sends response as a javascript --> javascript request to "website name".
In order to correct this issue , you should put window.location.href inside timeout function and that timeout triggered after window.load .
Please check :
echo "<script>
function deferredFunction(){
window.location.href="Websitename";
}
$(window).load(function(){
$('#myModal').modal('show');
setTimeout(deferredFunction,5000);
});
</script>";
Hope Helps!!
i'm having a very simple app which includes a form and 2 buttons.'
Description
When the user clicks the first button the site checks if he has a discount coupon and if he has then it calculates the discount ammount based on the coupon. Thats pretty simple. If the user doesn't enter a code the the precess continues normaly.
The problem
With the data i'm posting i'm also posting the coupon field. If the user has entered a valid coupon then i disable the coupon input with jQuery and withit i also disable the ammount field. That causes a problem which makes the fields edited with jQuery "unpostable".
For example if you dont enter a coupon code then the field stays unlocked and jQuery never edits it.
The code
<form class="form-horizontal row-fluid" action="<?= base_url() . 'transactions/new' ?>" method="POST" id="form" name="form">
<div class="control-group">
<div class="alert js_hidden" id="psc_val_warning">
Παρακαλούμε εισάγεται το ποσό που αντιστοιχεί στα PINS
</div>
<label class="control-label" for="basicinput">Συνολικό ποσό</label>
<div class="controls">
<div class="input-append">
<input type="number" name="psc_val" class="span8" id="psc_val" required><span class="add-on">€</span>
</div>
</div>
</div>
<div class="control-group">
<div class="alert alert-error js_hidden" id="coupon_error">
Το κουπόνι δεν είναι έγκυρο!
</div>
<div class="alert alert-success js_hidden" id="coupon_success">
Το κουπόνι εξαργυρώθηκε με επιτυχία!
</div>
<label class="control-label" for="basicinput">Κουπόνι</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on">#</span><input class="span8" id="coupon_code" type="text" name="coupon_code" maxlength="11">
</div>
</div>
</div>
<hr>
<div class="control-group">
<label class="control-label" for="basicinput">Σημειώσεις</label>
<div class="controls">
<textarea class="span8" rows="5" name="notes"></textarea>
</div>
</div>
<hr>
<center>
<button class="btn btn-large btn-success js_hidden" id="proceed_btn" onclick="submit_form()">Proceed</button>
</center>
</form>
<center>
<a class="btn btn-large btn-info" onclick="validate()" id="check_btn">Check</a>
</center>
The JS part
function display_proceed_btn() {
$("#psc_val").prop('disabled', true);
$('#check_btn').fadeOut( "slow", function() {
$('#proceed_btn').fadeIn( "slow", function() {
});
});
}
function submit_form() {
$('#form ').submit();
}
there is the other part which takes the coupon and uses the API to see the discount value but it does pretty much the same thing $("#coupon_code").prop('disabled', true);
Add the coupon code to a hidden field once you disable the input field.
Remember to actually recalculate the final amount on the server and not trusting any user editable field ;-)
I have read the parsley.js docs but I am still learning JQuery so it goes in one ear and out the other.
I think I need to add a custom event listener to achieve what I need, but I am really not sure, so some help would be appreciated.
I have a form with parsley.js embedded. The form works as expected but I have to add some functionality to the form.
How would I display an alert message (alert('no client side errors!');) to the user when all the client side errors have been cleared or when there are no client side errors when the form is submitted?
Here is an example of my form code:
<form id="name_details_form" class="form-horizontal" method="post" data-parsley-validate>
<div id="row_id_name_details_first_name" class="control-group">
<label for="id_name_details_first_name" class="control-label required">First Names:</label>
<div class="controls">
<input data-parsley-required="true" data-parsley-maxlength="200" data-parsley-required-message="This field is required." maxlength="200" type="text" id="id_name_details_first_name" name="name_details_first_name" class="input-xxlarge parsley-error" data-parsley-id="8581" dir="ltr"><span class="parsley-errors-list filled" id="parsley-id-8581" style="display: none;"><span class="parsley-required">This field is required.</span></span>
</div>
</div>
<div id="row_id_name_details_middle_name" class="control-group">
<label for="id_name_details_middle_name" class="control-label ">Middle Names:</label>
<div class="controls">
<input id="id_name_details_middle_name" type="text" name="name_details_middle_name" data-parsley-maxlength="200" maxlength="200" class="input-xlarge" data-parsley-id="7500"><span class="parsley-errors-list" id="parsley-id-7500" style="display: none;"></span>
</div>
</div>
<div id="row_id_name_details_last_name" class="control-group ">
<label for="id_name_details_last_name" class="control-label required">Last Names:</label>
<div class="controls">
<input data-parsley-required="true" data-parsley-maxlength="200" data-parsley-required-message="This field is required." maxlength="200" type="text" id="id_name_details_last_name" name="name_details_last_name" class="input-xxlarge parsley-success" data-parsley-id="7577" dir="ltr"><span class="parsley-errors-list" id="parsley-id-7577" style="display: none;"></span>
</div>
</div>
<hr />
<input class="btn-u btn-u-blue" type="submit" value="Add">
</form>
<script>
....
</script>
This code shows the alert message when the form is submitted and the all fields are valid.
<script>
$(document).ready(function() {
// bind parsley to the form
$("#name_details_form").parsley();
// on form submit
$("#name_details_form").on('submit', function(event) {
// validate form with parsley.
$(this).parsley().validate();
// if this form is valid
if ($(this).parsley().isValid()) {
// show alert message
alert('no client side errors!');
}
// prevent default so the form doesn't submit. We can return true and
// the form will be submited or proceed with a ajax request.
event.preventDefault();
});
});
</script>
I'm trying to send the form data of my web page using jquery get() method. But when I submit the form only few of the field data where sent to the server.
Form:
<form class="form-horizontal" id="addpost" method="GET" action="">
<div class="control-group">
<label class="control-label" for="form-field">Post Title</label>
<div class="controls">
<input type="text" id="form-field" placeholder="Post Title" name="Post-title" value="" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="form-field-11">Content Here</label>
<div class="controls">
<textarea name="post-content" value="" class="autosize-transition span12" id="form-field-11" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 67px;"></textarea>
</div>
</div><!-- Insert Image Code -->
<div class="control-group">
<div class="widget-main">
<div class="controls">
<div class="ace-file-input">
<input id="id-input-file-2" type="file">
<a class="remove" href="#"></a>
</div>
</div>
<div class="controls">
<div class="ace-file-input ace-file-multiple">
<input id="id-input-file-3" type="file" multiple="">
<a class="remove" href="#">
<i class="icon-remove"></i>
</a>
</div>
<label>
<input id="id-file-format" type="checkbox" name="file-format">
<span class="lbl"> Allow only images</span>
</label>
</div>
</div>
</div><!-- Insert Image Code -->
<div class="space-4"></div>
<div class="control-group">
<label class="control-label" for="form-field-tags">Tag input</label>
<div class="controls">
<input id="form-field-tags" type="hidden" placeholder="Enter tags ..." value="Tag Input Control" name="tags">
</div>
</div>
<div class="space-4"></div>
<div class="control-group">
<label class="control-label" for="form-field-select-3">Select Category</label>
<div class="controls">
<label for="form-field-select-3">Chosen</label>
<select class="chzn-select" id="form-field-select-3" data-placeholder="Choose a Category...">
<option value="">
</option><option value="Blog">Blog
</option><option value="News Letter">News Letter
</option></select>
</div>
</div>
<div class="control-group" style="float:left; margin-right:25px">
<div class="controls"><button type="submit" class="btn btn-info">
<i class="icon-ok bigger-110"></i>
<input type="submit" value="" id="posubmit" style="opacity:0"/>Submit</button>
<button type="reset" class="btn"><i class="icon-undo bigger-110"></i>Reset</button>
</div>
</div>
<div id="resp" style="float:left; margin-top:5px">
<img id="loading" style="visibility:hidden;" src="assets/img/ajax-load.gif" width="16" height="16" alt="loading" />
</div>
</form>
JavaSccript:
$('#addpost').submit(function(e){
if(use_ajax)
{
$('#loading').css('visibility','visible');
$.get('test.php',$(this).serialize(),
function(data){
if(parseInt(data)==-1)
$.validationEngine.buildPrompt("#resp","* Please ensure all fields are filled.","error");
else
{
$("#resp").show('slow').after('<p id="resp-mes" style=" color:#000000; text-decoration: bold;">Success....</p>');
}
$('#loading').css('visibility','hidden');
setTimeout( "jQuery('#resp').hide('slow');",3000 );
setTimeout( "jQuery('#resp-mes').hide('slow');",5000 );
});
}
e.preventDefault();
}
)};
In this only 3 field values where sent to server.
That is Post-title, post-content and tags
I don't know why this happening.
Any help would be appreciated.
you have two issues.
Ajax and serialize upload doesn't work with file upload. (Read this question and answer for async upload)
jquery form serialize needs a name attribute. your select box (form-field-select-3) doesn't have a name attribute.
following is a note in jquery serialize documentation page -
Note: Only "successful controls" are serialized to the string. No
submit button value is serialized since the form was not submitted
using a button. For a form element's value to be included in the
serialized string, the element must have a name attribute. Values from
checkboxes and radio buttons (inputs of type "radio" or "checkbox")
are included only if they are checked. Data from file select elements
is not serialized.
Its because you have missed "name" attribute in select element
<select class="chzn-select" id="form-field-select-3" name="form-field-select-3" data-placeholder="Choose a Category...">
I have checked in my local, and now this is working fine.
Please check and let me know if any issue.
Thanks
I see that attrbute name="" is required and some of the input elems are missing those. so you can try placing this attribute and see if this solves the issue:
<select class="chzn-select" name="your-elem-name">
//--------------------------^^^^^^^^^^^^^^^^^^^^^-----try placing the name attr
ok of this entire form, only four elements may get sent through if all four are populated/selected from a higher index than zero;
the ones with these names;
"tags"
"file-format"
"post-content"
"Post-title"
this is because those are the only tags with a name attribute defined.
please give all the elements you want to post through to the server a name attribute with the post index you want to use to access them with.