jquery form submission help

**phantom007** · Jul 1, 2008, 01:49

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

**JimmyP** · Jul 1, 2008, 02:10

You need to set the form action attribute to "get" if you want it to work with ur PHP script.

**JimmyP** · Jul 1, 2008, 02:14

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

**phantom007** · Jul 1, 2008, 02:16

can u show me an example plz?

**JimmyP** · Jul 1, 2008, 02:18

? Look above?

**phantom007** · Jul 1, 2008, 02:35

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?

**JimmyP** · Jul 1, 2008, 03:01

Did you delete this line? -

Code JavaScript:

$("#quote").load("load.php");

**phantom007** · Jul 1, 2008, 03:04

Yes. still in vain.

**JimmyP** · Jul 1, 2008, 03:10

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...";
?>

**phantom007** · Jul 1, 2008, 03:17

Yes it works now.

Could u plz tell me what does this line mean?

Code:

$("#quote").load("load.php");

thanx for ur help.

**JimmyP** · Jul 1, 2008, 03:22

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

**phantom007** · Jul 1, 2008, 03:44

ahhh!!! gotcha.

Seems you are a JS expert.

Thanx for all your help.

**phantom007** · Jul 1, 2008, 22:03

Hi again

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

Thanx

**JimmyP** · Jul 1, 2008, 22:53

Very simple, just change "get" to "post". ($.get --> $.post)

Also change it in your PHP script ($_GET --> $_POST)...

**phantom007** · Jul 1, 2008, 22:58

so do i still have to pass the parameters if its post or will it detect all the form variables automatically?

**JimmyP** · Jul 1, 2008, 23:19

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

**JimmyP** · Jul 1, 2008, 23:19

If it's only a few fields adding them individually would probably be best...

User Tag List

Thread: jquery form submission help

Thread Tools

Display

jquery form submission help

Bookmarks

Bookmarks

Posting Permissions