I am trying to submit a form to a page within my domain, then resubmit it automatically to another domain.
The code below works fine up to the point of resubmitting. It changes the action on the form OK and removes the ID so it should submit like a normal form the second time around.
Can anyone see the problem as to why it won't resubmit?
Thanks
$("form#dataForm").validate({
// Validation code here...
submitHandler: function(form) {
$.post('queries/pay.php', $("#dataForm").serialize(), function(data) {
$("#dataForm").removeAttr("id").attr({
"action":data.action
}, function() {
$("form").submit(); // This part of the code does not work
});
});
}
});
try this:
$("form").unbind('submit').submit();
Related
I included a php form into my html code and changed it from index.html to index.php. The contact form is working well and sending everything. After submitting the user gets the message "Thank you. The message has been sent.". However, when the page is refreshed it jumps up to the header and the user has to scroll down again to see the message.
I know why this happens. A couple of days ago I had included this code:
$(document).ready(function(){
$(this).scrollTop(0);
});
I did so because when somebody visited my website he was directed to the contact form first and the page did not load at the header first. However, now, when somebody is submitting a message the page scrolls again to the top. Do you know any way to avoid this? It would be nice if the user would see the header first when visiting the website but should be redirected to the form section when submitting a message.
Thank you for your help.
Use a cookie:
https://www.w3schools.com/js/js_cookies.asp
$(document).ready(function(){
if(!getCookie(cname)){
$(this).scrollTop(0);
}
});
$( "#formID" ).submit(function( event ) {
setCookie(cname, cvalue, exdays)
});
Essentially you have two possible states. The first possible state is when you want to scroll to the top, the other is when you do not want to scroll to the top. Let's assume that you know what the condition is to be tested. In that case your code would look like:
<?php
if ($condition) {
?>
//your scrolling JS code
<?php
}
?>
Now, how could we determine $condition? an idea is to store some value in the $_SESSION of the user, which will be a logical value which will determine whether we need to scroll or not. You should check whether the value exists in $_SESSION and if not, default it to true or false (depending on your actual need).
When using jQuery, return false is doing 3 separate things when you call it:
event.preventDefault();
event.stopPropagation();
Stops callback execution and returns immediately when called.
See jQuery Events: Stop (Mis)Using Return False for more information and examples.
Ref
Wrap that particular JS code block with a PHP if condition that checks whether the form has not been submitted. E.g.
<?php if (!$formSubmitted) { ?>
[JS code here]
<?php } ?>
Try this
$('form').submit(function(e)
{
e.preventDefault();
$.ajax({
type: 'POST',
url: "your_page.php",
data: $('form').serialize(),
success: function(response) { /*what to do on response*/ },
});
});
Here i prevent default submit with reloading and send ajax post
I would like to ask help on jQuery Mobile plugin conflict on my main scripts. Im trying to create another version of the website, which is the mobile version with a bought template that uses jQuery Mobile. Still the site is in CodeIgniter framework based from the web version.
In my main scripts, I have a preventDefault() function on every form submit to display the validation errors. Then when I migrated the site I'm working on with the bought Mobile Template, it seems not to listen to the preventDefault(). whenever I submit a form, it will show validation errors but will change the page seconds after before I could read it. It refreshes the site.
My script looks something like the code below. This works on my web version. >>>
$('form#frm-signup-updates').submit(function(e){
e.preventDefault();
$.post(base_url+'home/subscribe', $('#frm-signup-updates').serialize(), function(data){
if(data == 'success'){
loadpopup();
}
else{
var json = $.parseJSON(data);
$("span.error-notif#name").append(json.name);
$("span.error-notif#email").append(json.email);
}
});
});
Try return false to block submit.
$('form#frm-signup-updates').submit(function(e){
$.post(base_url+'home/subscribe', $('#frm-signup-updates').serialize(), function(data){
if(data == 'success'){
loadpopup();
}
else{
var json = $.parseJSON(data);
$("span.error-notif#name").append(json.name);
$("span.error-notif#email").append(json.email);
}
});
return false;
});
UPDATE:
Well, I checked source code of jQuery Mobile and found that jQM prevent form submit by default, and handle with ajax.
//bind to form submit events, handle with Ajax
$.mobile.document.delegate("form", "submit", function(event) {
var formData = getAjaxFormData($(this));
if (formData) {
$.mobile.changePage(formData.url, formData.options);
event.preventDefault();
}
});
preventDefault is invalid because submit is done by $.mobile.changePage not browser.
So, if wanna prevent submit, that is $.mobile.changePage, I have two suggestions:
1. Add 'data-ajax=false' attribute to form element
demo1
2. Do ajax when submit button clicked
demo2
I have a div set up with a form inside and set to post using ajax and returning the results in the div like so
$(document).ready(function(){
$("#guestList").validate({
debug: false,
submitHandler: function(form) {
// do other stuff for a valid form
//$('form').attr('id', 'guestList1')
$.post('brides_Includes/guestlistDisplay1.php', $("#guestList").serialize(), function(data) {
$('#results').html(data)
$("form#guestList")[0].reset();
});
}
});
});
When the results come back it shows the correct changes and replaces the form. However when I post the form again. The relevent changes take place as they should but it then also refreshes the page and shows the posted info in the address bar
How can I post the form and replace it allowing it to post and call the script again without this happening?
the problem with returning forms using ajax is that any JavaScrip code already on the page will not see/take advantage of the new form. The best way to get around this is to pass the JavaScrip and the HTML back using ajax.
Basically you pass the below code back each time you pass a new form back. You'll need to update the IDs and links (brides_Includes/guestlistDisplay1.php). You will need to replace your code on the main page with this code as well because this is needed to execute any JavaScrip passed back.
<script type="text/javascript">
$(document).ready(function(){
$("#guestList").validate({
debug: false,
submitHandler: function(form) {
// do other stuff for a valid form
//$('form').attr('id', 'guestList1')
$.post('brides_Includes/guestlistDisplay1.php', $("#guestList").serialize(), function(data) {
$('#results').html(data);
//This executes the JavaScript passed back by the ajax.
$("#results").find("script").each(function(i) {
eval($(this).text());
});
$("form#guestList")[0].reset();
});
}
});
});
</script>
I need help here.
My jQuery code does not return the submit button name in the $_POST Array...
This is my code:
<script type="text/javascript">
$(document).ready(function(){
$('#submForm').validate({
submitHandler: function(form) {
// Do cleanup first
form.submit();
}
})
});
</script>
<input type="submit" class="paypal_bttn" value="premium" name="bttn">
In the $_POST array I can see everything except the button name, that I am really in need to know...
Please help.
Thanks
That's normal. No button was clicked by the user. You forced the submission of the form using javascript. Why do you expect that a button name would be sent when no button was clicked at all. What if you had multiple submit buttons? Which one would you like to send in this case? If your server side script expects some button name you could inject a hidden field into the form with the same name and set its value just before forcing its submission:
$(form).append(
$('<input/>', {
type: 'hidden',
name: 'bttn',
value: 'premium' // TODO: you might want to adjust the value
})
);
form.submit();
you are not submitting or validating the form on button click, since you have wrapped your code inside the ready handler as soon as the DOM is ready you form is validated and then submitted
<input type="submit" class="paypal_bttn" value="premium" name="bttn">
what you can do is
$(document).ready(function(){
$("input[name='bttn']").click(function(e){
e.preventDefault(); //your button type is submit so prevent the default form submission
$('#submForm').validate({
submitHandler: function(form) {
// Do cleanup first
form.submit();
}
})
});
});
The jQuery is not running when you are clicking the button. What you need to do is add the "click(function()" instead. You can then use attr() or other items to select what you want to from there.
You should also use return false; if you don't want the page to submit and you want to use AJAX.
$(".paypal_bttn").click(function(){
// add stuff to do here.
});
You might want to capture the click of the button and do your validation/submit from there.
$('.paypal_bttn').click( function() {
// Do cleanup first
// validate form and submit
}
I have a form which I want to submit and show in Colorbox.
The form is Mals Ecommerce View Cart.
See: https://www.mals-e.com/tpv.php?tp=4
I want it to Show the Cart contents in a colorbox iframe. Is this possible to do using the FORM method rather than the Link method?
here the best answer..
add this to your submitbutton : id="SearchButton"
then use this:
$(document).ready(function() {
$("input#SearchButton").colorbox({href: function(){
var url = $(this).parents('form').attr('action');
var ser = $(this).parents('form').serialize(); //alert(url+'?'+ser);
return url+'?'+ser;
}, innerWidth:920, innerHeight:"86%", iframe:true});
});
test at: http://wwww.xaluan.com or http://wwww.xaluan.com/raovat/
I recently faced this problem, spent some time searching the solution and found this:
$("#submit_button").click(function () { // ATTACH CLICK EVENT TO MYBUTTON
$.post("/postback.php", // PERFORM AJAX POST
$("#info_form").serialize(), // WITH SERIALIZED DATA OF MYFORM
function(data){ // DATA NEXT SENT TO COLORBOX
$.colorbox({
html: data,
open: true,
iframe: false // NO FRAME, JUST DIV CONTAINER?
});
},
"html");
});
I.e. Colorbox uses submitting the form via standard jQuery methods. Hope this helps someone.
Try
$("input#formsubmit").colorbox({title: function(){
var url = $(this).parents('form').attr('action');
}});
Not tested, I just took the syntax from the Colorbox page. You'd have to give your submit button an id of "formsubmit" for the above to work.
you can open colorbox independently using:
jQuery.colorbox({href:,iframe:true, opacity:0.6 ,innerWidth:760,innerHeight:420,title:});
and you can call this function on any event like:
jQuery("document").ready(function(){ jQuery.colorbox.. });
when u submit a form send a query parameter along with it. When after submission you reach back the form. see if that parameter is populated.
and then call jQuery.colorbox()