SitePoint Sponsor

User Tag List

Results 1 to 17 of 17

Hybrid View

  1. #1
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    736
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Question jquery form submission help

    Hi,

    I am trying to run a simple jQuery script that would load a php page "load.php" on click of a submit button and the load.php page would return the value of "tname" variable which is "John" in this case.

    Following is my jQuery script.
    Code:
    	<script src="jquery-1.2.6.js"></script>
    <script>
    $(document).ready(function(){
    
    	$("form#myform").submit(function() {
    
    		$.get("load.php", { tname: "John", ttime: "2pm" });
    		$("#quote").load("load.php");
    	return false;
    	});
    
    });
    
    </script>
    
    <div id="quote"></div>
    <form method="post" id="myform">
    <input name="submit" type="submit" value="Submit" />
    </form>
    load.php page script
    PHP Code:
    <?php
    echo $_GET['tname'];
    ?>
    However, the above does not work.


    Can you help me plz?


    Thanx

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to set the form action attribute to "get" if you want it to work with ur PHP script.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nvrmnd I see you're using the GET method in jQuery - Although, you will need to create a non-JS fallback.

    You need to do something with the response data so:

    Code JavaScript:
    $.get("load.php", { tname: "John", ttime: "2pm" },function(data){
        $("#quote").append(data);
    });
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  4. #4
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    736
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    can u show me an example plz?

  5. #5
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ? Look above?
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  6. #6
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you delete this line? -

    Code JavaScript:
    $("#quote").load("load.php");
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  7. #7
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    736
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Yes. still in vain.

  8. #8
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Weird... It works for me...

    This is what I'm using:

    Code html4strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test</title>
    <script type="text/javascript" src="jquery.js"></script>
    </head>
    <body>
    <script type="text/javascript">
    $(document).ready(function(){
        $("form#myform").submit(function() {
            $.get("load.php", { tname: "John", ttime: "2pm" },function(data){
                $("#quote").append(data);
            });
            return false;
        });
    });
    </script>
    <div id="quote"></div>
    <form method="post" id="myform">
    <input name="submit" type="submit" value="Submit" />
    </form>
    </body>
    </html>

    PHP (load.php)

    Code php:
    <?php
    echo $_GET['tname']." There you go...";
    ?>
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  9. #9
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    736
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Yes it works now.

    Could u plz tell me what does this line mean?

    Code:
    $("#quote").load("load.php");
    thanx for ur help.

  10. #10
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, all that line would do is load all the contents of "load.php" into #quote - So you could theoretically do this:

    Code JavaScript:
    $("#quote").load("http://www.google.com");

    Although that would be pretty pointless.

    You don't have to use $.get - you could do something like this:

    Code JavaScript:
    $("#quote").load("load.php?tname=john&ttime=2pm");

    Using $.get is best though...
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  11. #11
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    736
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    ahhh!!! gotcha.

    Seems you are a JS expert.

    Thanx for all your help.

  12. #12
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    736
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Hi again

    How do I do the same thing using $.post method?


    Thanx

  13. #13
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very simple, just change "get" to "post". ($.get --> $.post)

    Also change it in your PHP script ($_GET --> $_POST)...
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  14. #14
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    736
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    so do i still have to pass the parameters if its post or will it detect all the form variables automatically?

  15. #15
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It won't detect them - you could loop through them like shown in this screencast though: http://remysharp.com/wp-content/uplo...ajax_forms.mov
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  16. #16
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If it's only a few fields adding them individually would probably be best...
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  17. #17
    SitePoint Guru phantom007's Avatar
    Join Date
    May 2008
    Posts
    736
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    in the load.php page, if I put the following code


    PHP Code:

    <?php

    echo $_GET['tname']." There you go...";

    ?>
    and use your code, then I just get the text "There you go..." and not the tname value. What am I missing?


Bookmarks

Posting Permissions

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