ajax post within div

[jizzyfingers]

Kind people's suggestions on StackOverflow did not get this working. no matter cannot get this working. Gone through so many examples on the web which don't help.

To be honest, I have not tried this outside a DIV because the intention is specifically use AJAX to load and post a form across to a page within the confines of said DIV.

Many Thanks for the advancement of what is to come.

The #contentmainpane is a DIV.

On the FIRST PHP page ...

<form id="form1" method="POST">
<input id="l" name="l" size="45" type="text" value="book">
<input id="submit" name="submit" value="save" type="submit">
</form>


<script>
$('#form1').submit(function(event){

event.preventDefault();

var book = $('#book').serialize();
var cart = '/content/pages/cart.php';
var formdata = {"book": book}


$.ajax({

type: "POST",

url : "/content/pages/cart.php",

data: { 'l' : book },

success: function(msg){

$("#contentmainpane").load(cart);

}
});
});
</script>



On the second PHP page contain...

if (isset($_POST['l'])) {
echo $_POST['l']; }
else {
echo 'nope'; }

[DanInMa]

give this a try.

<form id="form1" method="POST">
<input id="l" name="l" size="45" type="text" value="book">
<input id="submit" name="submit" value="save" type="submit">
</form>


<script>
$('#form1').submit(function(event){

event.preventDefault();

var formdata= $(this).serialize();
var carturl = '/content/pages/cart.php';

$.ajax({

type: "POST",

url : carturl,

data: formdata,

success: function(msg){

$("#contentmainpane").html(msg);

}
});
});
</script>

[jizzyfingers]

DanInMa, that worked beautifully!

Please could you give me a little education on the bits you have implemented i.e. 'this' worked and 'form1' did not
also...
how could one know the "data:" is passed to the parameter in function (in this case (msg). I took it the data gets loaded into the receiving page hence (cart)

success: function(msg){
$("#contentmainpane").load(cart);

I am just on the bottom of the ladder finding ajax/js counter intuitive.

Really pleased it now works - but I still feel stupid.
Although your information will help so many people.

So many thanks DanInMa.
JF

[DanInMa]

<form id="form1" method="POST">
<input id="l" name="l" size="45" type="text" value="book">
<input id="submit" name="submit" value="save" type="submit">
</form>


<script>
$('#form1').submit(function(event){

event.preventDefault();

var formdata= $(this).serialize();//$(this) refers to the element you attached the submit function to  .serialize() prepares the values from the form for url submission and does most of the work for you
var carturl = '/content/pages/cart.php';//get your basic cart url

$.ajax({

type: "POST",

url : carturl,//get basic processing page url from variable

data: formdata,

success: function(msg){//msg is the html response from the page you just posted to

$("#contentmainpane").html(msg);//this changes the html to show the response

}
});
});
</script>

hope this makes sense.

ok also, you need to bear in mind some peopel actually do disable javascript. you should make your form work without ajax first. this includes giving your form an action attribute. I liek to do it that way then in your .ajax call you can do this

var $posttype = $(this).attr('method')
var $carturl = $(this).attr('action')

[DanInMa]

oh alos, what this does : $("#contentmainpane").load(cart);

is submit a basic ajax call to the url from "cart" without any data submitted with the request. .load is typically used when you want to update an element from a secondary page or other resource such as a web service.

[jizzyfingers]

Originally Posted by DanInMa

oh alos, what this does : $("#contentmainpane").load(cart);

is submit a basic ajax call to the url from "cart" without any data submitted with the request. .load is typically used when you want to update an element from a secondary page or other resource such as a web service.

ahh! JS is mainly knowing what the functions do it seems. happy I can learn from your experience. thank you

[jizzyfingers]

Originally Posted by DanInMa

<form id="form1" method="POST">
<input id="l" name="l" size="45" type="text" value="book">
<input id="submit" name="submit" value="save" type="submit">
</form>


<script>
$('#form1').submit(function(event){

event.preventDefault();

var formdata= $(this).serialize();//$(this) refers to the element you attached the submit function to  .serialize() prepares the values from the form for url submission and does most of the work for you
var carturl = '/content/pages/cart.php';//get your basic cart url

$.ajax({

type: "POST",

url : carturl,//get basic processing page url from variable

data: formdata,

success: function(msg){//msg is the html response from the page you just posted to

$("#contentmainpane").html(msg);//this changes the html to show the response

}
});
});
</script>

hope this makes sense.

ok also, you need to bear in mind some peopel actually do disable javascript. you should make your form work without ajax first. this includes giving your form an action attribute. I liek to do it that way then in your .ajax call you can do this

var $posttype = $(this).attr('method')
var $carturl = $(this).attr('action')

I just don't know how to use the form action to load another page inside the div #contentmainpane which is why I resorted to JS
I understand that some do disable JS but I guess these people cannot use a lot of sites.

Do you have an idea how to load a page within #contentmainpane div using the form action? I can only ever see the form action load _blank so a new window/tab loads the secondary page ?

I'm not keen on JS (allow the user turn it off) myself.