Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    ajax post within div

    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'; }

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    give this a try.

    Code:
    <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>

  • Users who have thanked DanInMa for this post:

    jizzyfingers (11-26-2012)

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile 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.

    So many thanks DanInMa.
    JF

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Code:
    <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

    Code:
    var $posttype = $(this).attr('method')
    var $carturl = $(this).attr('action')
    Last edited by DanInMa; 11-26-2012 at 03:37 PM.

  • #5
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    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.

  • #6
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DanInMa View Post
    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

  • #7
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question

    Quote Originally Posted by DanInMa View Post
    Code:
    <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

    Code:
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •