I'm still working on my multi-stage form (http://jsfiddle.net/xSkgH/93/) and have incorporated the following solution to assist in ajax submit:
<script type="text/javascript">
$(document).ready(function() {
$("#postData").click(function() {
$("#last-step").hide(600);
$("#task5_booking").submit(function() {
$.post('resources/process2.php', function(data) {
$("#result").html(data);
});
});
return false;
});
});
</script>
It fades out the last step well but when it comes to loading up the content ot process2.php which is simply an array of all the form fields:
<?php
print_r($_POST);
?>
Nothing seems to happen at all. The div remains blank. Would really appreciate any help guys. Thanks in advance.
if you call a resource via ajax you should also pass the serialized form along the call. So assuming $("#task5_booking") is your form element
$("#task5_booking").submit(function(evt) {
evt.preventDefault();
$.post('resources/process2.php', { data: $("#task5_booking").serialize() }, function(data) {
$("#result").html(data);
});
});
When you submit the form
stop the default event (submit) otherwise the form submission stops immediately the subsequent code and the ajax call never starts - this is done using preventDefault() method;
make a post call, passing the form serialized with serialize() method (see http://api.jquery.com/serialize/).
Please also note that as pointed out by Jack your form in the fiddle has camperapplicationForm id and not task5_booking
I think you should remove your submit function:
<script type="text/javascript">
$(document).ready(function() {
$("#postData").click(function() {
$("#last-step").hide(600);
$.post('resources/process2.php', function(data) {
$("#result").html(data);
});
return false;
});
});
</script>
$(document).ready(function() {
$("#postData").click(function(e) {
e.preventDefault();
$("#last-step").hide(600);
$("#task5_booking").submit(function() {
$.post('resources/process2.php', $(this).serialize(), function(data) {
$("#result").html(data);
});
});
});
});
Related
Well im working on a small php script and i have a problem.
ive made an edits that allows me to post infos in ajax but after the post i want to clear the fields of the form.
<script type="text/javascript">
$(document).ready(function(){
$("#form").submit(function(){
$.get("response.php", $(this).serialize(), function(a){
$("#info").html(a)
});
return false
})
});
</script>
In the submit handler you can call reset() on the form to set it back to the state it was in on load:
$("#form").submit(function(){
$.get("response.php", $(this).serialize(), function(a){
$("#info").html(a)
$('#form')[0].reset();
});
return false
})
Use
$("#form")[0].reset();
or
document.getElementById("form").reset();
Try Giving blank value to all fields
$("#form").find("input[type=text], input[type=password], textarea").val("");
If you have checkbox and selectbox also
$(':input','#form')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
Use the reset() to reset the form:
<script type="text/javascript">
$(document).ready(function(){
$("#form").submit(function(){
$.get("response.php",
$(this).serialize(),
function(a){
$("#info").html(a);
$('#form')[0].reset();
})
;return false})});
</script>
I'm "fighting" with this for hours now, I hope you could help me with the solution. So I've got a basic form with an empty div that will be then filled:
<form method='post' action='/shoutek.php'>
<input type='text' id='shout_tresc' name='shout_tresc' class='shout_tresc' />
<input type='submit' id='dodaj' value='Dodaj' />
</form>
<div class='shoutboxtresc' id='shout'></div>
<span class='loader'>Please wait...</span>
The shoutek.php contains the queries to do after submission of the form and functions to populate the div.
Here goes my jquery:
$(function() {
$(\"#dodaj\").click(function() {
// getting the values that user typed
var shout_tresc = $(\"#shout_tresc\").val();
// forming the queryString
var data = 'shout_tresc='+ shout_tresc;
// ajax call
$.ajax({
type: \"POST\",
url: \"shoutek.php\",
data: data,
success: function(html){ // this happen after we get result
$(\"#shout\").toggle(500, function(){
$('.loader').show();
$(this).html(html).toggle(500);
$(\"#shout_tresc\").val(\"\");
$('.loader').hide();
});
return false;
}
});
});
});
The problem in that is that it directs me to shoutek.php, so it does not refresh the div in ajax.
As you can see, I used return false; - i also tried the event.preventDefault(); function - it did not help. What is the problem and how to get rid of it? Will be glad if you could provide me with some solutions.
EDIT
Guys, what I came up with actually worked, but let me know if that's a correct solution and will not cause problems in the future. From the previous code (see Luceous' answer) i deleted
$(function() {
(and of course it's closing tags) and I completely got rid of the:
<form method='post' action='/shoutek.php'>
Leaving the input "formless". Please let me know if it is a good solution - it works after all.
$(function() {
$("#dodaj").click(function(e) {
// prevents form submission
e.preventDefault();
// getting the values that user typed
var shout_tresc = $("#shout_tresc").val();
// forming the queryString
var data = 'shout_tresc='+ shout_tresc;
// ajax call
$.ajax({
type: "POST",
url: "shoutek.php",
data: data,
success: function(html){ // this happen after we get result
$("#shout").toggle(500, function(){
$('.loader').show();
$(this).html(html).toggle(500);
$("#shout_tresc").val("");
$('.loader').hide();
});
return false;
}
});
});
});
For readability I removed your escapes. You've missed the preventDefault which prevents the form from being submitted.
You need to prevent the default action on submit button click:
$("#dodaj").click(function(event) {
event.preventDefault();
// your code
}
A bit of a tricky one here
Is there a way i can join the two scripts below into one so when the form is posted it actually loads both the different named url's into the 2 different named divs
<script type="text/javascript">
$(document).ready(function(){
$("#profile").validate({
debug: false,
submitHandler: function(form) {$.post('brides_Includes/edit-profile-top.php', $("#profile").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#profile")[0].reset();
});
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#profile").validate({
debug: false,
submitHandler: function(form) {$.post('brides_Includes/welcome-menu.php', $("#profile").serialize(), function(data) {
$('#mymenu').html(data);
//This executes the JavaScript passed back by the ajax.
$("#mymenu").find("script").each(function(i) {
eval($(this).text());
});
$("form#profile")[0].reset();
});
}
});
});
</script>
I am not sure if this is even possible but would be great if it was :)
Many thanks
Just put the contents of the second submitHandler into the first one:
submitHandler: function(form) {
var jqxhr1 = $.post('brides_Includes/edit-profile-top.php', $("#prof...
function(data) {
$('#results').html(data);
//This executes the JavaScript passed back by the ajax.
$("#results").find("script").each(function(i) {
eval($(this).text());
});
});
}
var jqxhr2 = $.post('brides_Includes/welcome-menu.php', $("#pro...
function(data) {
$('#mymenu').html(data);
//This executes the JavaScript passed back by the ajax.
$("#mymenu").find("script").each(function(i) {
eval($(this).text());
});
$.when(jqxhr1, jqhxr2).done(function() { $("#profile")[0].reset(); });
}
<script>
function ajax_loadpage(loadUrl,output_container)
{
$.post
(
loadUrl,
{language: "php", version: 5},function(responseText){$(output_container).html(responseText);},"html"
);
}
ajax_loadpage("url1.php","#div1");
ajax_loadpage("url2.php","#div2");
</script>
the first parameter should be supplied with the URL you want to load, the second will be the name of the id of the element you want to load it into.
I have no idea what's wrong with my code to call another PHP file via jQuery.ajax function. Need some help in identifying the error.
$('#submit').click(function(event){
event.preventDefault();
do_cart();
});
function do_cart(){
alert('testing');
$.ajax({
url:'doCartupdate.php',
success:function(){
alert('Success.');
$('#form').submit();
}
});
}
Do I miss anything here? I have no need to pass data over to the PHP file, I just need the function inside the PHP file get called.
edit 2: now I required some alert boxes.
<script type ="text/javascript">
$('#submit').live('click',function(event){
//event.preventDefault();
do_cart();
alert('Ridirecting to paypal');
});
function do_cart(){
alert('please wait');
$.ajax({
url:'doCartupdate.php',
success:function(){
alert('Success.');
//$('#form').submit();
}
});
}
</script>
It would be good if I can reduce the box to only 1 or none.
It works for me.
http://sandbox.phpcode.eu/g/8ed34.php
be sure you put this script AFTER definition of #submit or be sure you put
your code to
$(function(){
//yourcode
});
Try $('#submit').live('click', function(event){...
Change this
$('#submit').click(function(event){
event.preventDefault();
do_cart();
});
To
$('#submit').click(function(event){
do_cart();
event.preventDefault();
});
This jQuery ajax request is not working. The form submit just reloads the page, there are no alerts, nothing. Where am I going wrong?
$("#newfolder").submit(function() {
alert("1")
$.ajax({
type : "POST",
url : "<?php echo $cfg->wwwroot ?>/pages/media/async/newfolder.php",
data : $(this).serializeArray(),
success: function(data) {
alert(data)
//$.fancybox(data);
}
});
return false;
});
This can have several causes.
Ensure that you've included jQuery as one of first <script>s in HTML <head>.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
Ensure that you're calling this function when the document is ready loading.
<script>
$(document).ready(function() {
// Here.
});
</script>
Ensure that the element with id="newFolder" is present in HTML DOM tree and supports the submit event.
<form id="newFolder">