I have these two form that I want to use both on one page without a refresh. The html,validator and the php is working, but it seems to be ignoring this js file to execute the ajax and load messages on the page.How do I write an if statement? Or what are other suggestions to get if one form is filled out to execute this code?
Full Form execution
contact.js File
$(document).on('submit', '#contact-form', function (e) {
e.preventDefault();
// your ajax call
});
you are using .on() event onot correctly you have to use it like
$('#contact-form').on('submit', function (e) {
// your ajax call
}
instead of $('#contact-form').on('#submit', function (e) { }
have a look at your script again.
Related
I got some php code that i want to execute when the page is fully loaded and i only want it to execute one time and no more after clicking submit.
this is the php code i want to execute
$backup=fopen("backup/".time().".json", "w");
fwrite($backup, json_encode($list)); fclose($backup);
can someone tell me how to execute this code after page is loaded and only 1 time. If possible.
//wait for the DOM to be loaded
$(document).ready(function(){
var $button = $('#idOfYourButton');
$button.on('click', function(e){
//if we have a submit button we probably do not want it to send the data via post/get
e.preventDefault();
$.ajax({
url: "/your/path/file.php",
success: function(){
//do something when script was called
}
});
});
});
For the script to only run once, you have to define what this means. Once per session? Set a session flag on your server. Once per refresh? You can simply use a javascript variable.
I'm creating a user profile in php with the aid of jquery and ajax.
What the script does is it has a left navigation, which are tabs that populate the content area from requests made via ajax.
So I click a tab, it loads a page(using .get()), the content of the page is a form. When the form is submitted an ajax request is made to a php file that uses that data to determine what to do. Right now I haven't set up anything in the php file besides a response to send back to the DOM to know it works.
Here is the javascript related to the code in question:
/**
*
*/
$(function() {
$('form').on('submit', function(event) {
event.preventDefault();
var target = $(this).attr('href');
$.post(target, function(data) {
if (data) {
$('#flash').html(data).hide().fadeIn('fast');
}
});
});
});
/**
*
*/
$(function() {
$('#profile-tabs > a').on('click', function(event) {
event.preventDefault();
$('#profile-tabs > a').removeClass('active');
$(this).addClass('active');
var target = $(this).attr('href');
$.get(target, function(data) {
if (data) {
$('#profile-content').html(data).hide().fadeIn('fast');
}
});
});
});
When I load the tab directly without ajax, it submits just fine, the only time it doesn't work is when the content is called through the ajax request.
The javascript code I just provided is in a file called profile.js and is called after jquery.js
Any suggestions or ideas would be awesome, thanks in advance!
Try replacing $('form').on('submit' ... with $('body').on('submit', 'form', ..... I'm pretty sure, that jQuery binds the event to $('form') elements when the code loads - then, when you load your form using $.get, the event is not bound to the form.
Using the other method, it binds the even to $('body'), which is always there, and executes the bound function whenever the event-target is a form-element.
I have a form and when the user clicks the submit button I want to run a separate PHP script before the form-action (going to the next page) gets executed.
Of course I can stop the form-action with evt.preventDefault(); and then I can fire my jquery $.post call but then I cannot 'resume' or undo this preventDefault call, as far as I can see.
So what is the best way to execute a script that process some information after a user clicks the submit button BUT before the user gets redirected to the next page defined in the form action tag?
(Of course I could just carry over the data and perform whatever I want on the next page – but in this case, I would like to keep it separate).
Thanks for any suggestions!
You can try something like this:
var posted = false;
$('form').on('submit', function(ev) {
if ( ! posted ) {
ev.preventDefault();
$.post(url).done(function() {
posted = true;
$('form').trigger('submit');
});
}
posted = false;
});
Or more succinct, using extra parameters:
$('form').on('submit', function(ev, posted) {
if ( ! posted ) {
ev.preventDefault();
$.post(url).done(function() {
$('form').trigger('submit', [true]);
});
}
});
Your $.post call can be run synchronously, so the form would not submit until you've got a response from the server.
You can submit the form programmatically, perhaps in your callback function.
prevent default on form, then run post, on success of post, target the form by id and use .submit();
$('#submit-button').click(function(e) {
e.preventDefault();
$.post({
url:'url',
success:function() {
$('#formid').submit()
}
});
});
Go head with your evt.preventDefault().
Make an $.ajax() call to run your php script.
In the $.ajax() success/failure callback, check the output of the php script you want to run, and accordingly make a $.post call (or not).
You can always hook the click event, and do your stuff.
When you are done you just do $(form).submit();
Working example
$("#submitbutton").click(function(e) {
e.preventDefault();
// do your ajax stuff here.. $.post().
$("#form").submit();
});
You can use just use the native submit function instead of jQuery's submit() which goes through the event handler again
$('form').submit(function(e){ // change form to your form id
e.preventDefault();
var el = this; // store this form in variable
$.post('/echo/html/',data,function(d){ // your post function
el.submit(); // trigger native submit function in success callback
});
});
FIDDLE
In your form tag, add onsubmit="myfunction()"
jQuery has sent the aJax function when the page is loaded.
I wonder if these functions can be stop or interrupt before the page is reloaded?
Not 100% on this but you might be able to do this
$(window).load(function(e) {
e.preventDefault();
e.stopPropagation
});
Am currently using a Jquery load function to load php content into Div. But when I use my php e-mail form it turns all white an the index page is lost(the main layout I mean). Is there anyway I can use Jquery to load Insch.php back into the div even when it needs to be executed?
<form id="contactform" method="POST" action="insch.php"> <--- this is my Form
$('.menut').click(function () {
var phpFile = $(this).attr('id') + '.php';
/* alert(phpFile)*/
$.get(phpFile, function (data) {
$('#box1').html(data);
});
return false;
}); <---- my Jquery load function(on index)
I see you add returning data directly into $("#box1"). If your php file returns Html you should set dataType:'html' in the ajax request.
Sorry, your question is kinda hard to understand. I'm kinda guessing, but it sounds like you're asking how to submit the form without the page refreshing. If so, you could do something like this:
$('.menut').click(function() {
var phpFile = $(this).attr('id') +'.php';
$('#box1').load(phpFile, function() { // <-- this is your ready function
// once the form has been added to the page,
// add the 'submit' event listener
$('#contactForm').submit(function(e) {
// prevent the form from submitting regularly (causing a page refresh)
e.preventDefault();
// get the data from the form
var data = $(this).serialize();
// submit the form via AJAX and put the response in #box1
$('#box1').load($(this).attr('action'), data);
});
});
});
UPDATE:
Your ready function is the function you create in your AJAX call to be executed when the content is done loading (when the content is ready). It may also be called a callback function, complete function, or a success function.
Take a look at the comment I added on the fourth line of code above. I have pointed out what I'm referring to as your ready function.
In your question, you used this:
$.get(phpFile, function (data) {
$('#box1').html(data);
});
Which is equivalent to:
$('#box1').load(phpFile);
This loads the response (your form) from phpFile into #box1. The function (data) { ... } is your ready function. That is where you should bind the submit event to the form.
If you switch to the load() method as I am suggesting, then you would just pass a new function (which will be your ready function) as the second parameter to the load() method, which is the solution I've given in my original answer.