If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

Users who have thanked DanInMa for this post:

It Worked

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.

<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

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.

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

<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

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 ?