Jquery load Php file - php

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.

Related

multiple forms on one page using bootstrap, ajax and external php

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.

Event.prevent() default ajax not sending data from form to php

I already checked around for this answer but all are different problems just same title (to prevent random duplicate marks).
Here is an ajax call to the click of the filter button that should send the data inserted in the form formmatcat to the php file formfilt.php and should load the result in a div with id resultins
<script>
$(function () {
$('#filter').on('click', function(event){
event.preventDefault();
$.ajax({
type: 'post',
url: 'formfilt.php',
data: $('#formmatcat').serialize(),
success: function () {
$("#resultins").load('formfilt.php');
}
});
});
});
</script>
I set the preventdefault to load only in the div without redirecting to the php file and this works but if I put the preventDefault it echoes the string I build by concatenating values sent from the form with those empty values. The strange thing is that if I remove preventDefault of course it redirects and loads the php file but with the correct values:
Moral of the story, data in the form with the ajax call goes correctly to the php file but looks like preventDefault don't let this. Thanks in advance
Here's the structure of the html part with the form
<form id="formmatcat" method="post" action="formfilt.php">
.
.
various textboxes
.
.
</form>
What you're doing is sending an AJAX request toformfilt.php, when this call happens and it returns a response it will be stored as a parameter within the success or $.done function as I'll mention later, that is where your echo'd content will be.
What you're doing here is when the call is successful, you simple send a GET request to the same page. Since that GET request differs from the AJAX POST request and has no POST parameters you'll not get the correct output.
By simply submitting the form and letting it go to the page rather than cancelling the request you're getting the right values as you're directly posting to the page with the correct values, when you call the load function you're doing a seperate AJAX get request.
What load actually is, is a rough equivelant to $.get which is shorthand for $.ajax.
Looking at jQuery AJAX docs
jqXHR.done(function( data, textStatus, jqXHR ) {});
An alternative construct to the success callback option, the .done() method replaces the deprecated jqXHR.success() method. Refer to deferred.done() for implementation details.
Basically, a $.ajax() call returns a promise object that you can chain callbacks on when it is finished. Also note that data here will be the actual content within your PHP file, thus if you rewrite your AJAX call like so:
<script type="text/javascript">
$(function() {
$('#filter').on('click', function(e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'formfilt.php',
data: $('#formmatcat').serialize()
}).done(function(data) {
$('#resultins').html(data);
});
});
});
</script>
It will then continue to load the output of formfilt.php into the div with ID resultins.
dont use form, use input without form, and use button tag use onclick to run function, if you use form, it will submit and redirect,
i'm not good with ajax on jQuery
but if i were to use javascript/XHR
var CB=document.getElementById("filter").value; //get input/filter value
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200)
document.getElementById('contain').innerHTML=xhttp.responseText;
};
var url="formfilt.php?filter="+CB;
xhttp.open("GET", url, true);
xhttp.send();
if you want to use post :
xhttp.open("POST", "formfilt.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send('filter='+CB);
sorry, i'm also learning, and new to this, just learning a week ago,

Cannot make two ajax calls in one request

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.

make a $.post before form action takes place

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 Colorbox and Forms

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()

Categories