jquery help

2CODE

I'm trying to post data with jquery and here's my html code

<html>

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
</script>

<script type="text/javascipt">
function post()
{
  var name = $('#name').serialize();
  $.post('pro.php',name,function(output)
  {
    $('#alert').html(output).show().fadeOut(4000);
  });
}

</script>

</head>
<div id="alert" style="border: 1px; background-color: #990033"></div>
<form id='name'>
Name : <input type="text" name="test"  />
<input type="button" onclick="post();" value="sub" />
</form>
</html>

And here's my php file

if (isset($_POST['test']))
{
  $name = $_POST['test'];
  echo 'Your name is '.$name;
}

However it doesn't work any ideas why ?

bradgrafelman

First problem I see is the 'type' attribute of the second <script> block; you probably want to use "javascript" rather than "javascipt".

2CODE

**** I was sure that I done it correct, Thank you it's working now

2CODE

Another question, How can I disable the normal post when you press enter php post the data normally without jquery unless you press on sub button which have the post() call. How I can do that ?

bradgrafelman

One way would be to get rid of the need to have to actually click the button. Instead, change the button to a normal submit button and move your Javascript code to the 'onsubmit' handler of the <form> entity.

2CODE

I don't know why this code is don't work

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"><head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
</script>
        <script type="text/javascript">
function post()
{
  var data = $('#subdata').serialize();
  $.post('pro.php',data,function(output)
  {
    $('#alert').html(output);
  });
}

</script>
	</head>

<body>


<form id="subdata" onsubmit="post();">

<div id="alert"></div>
				<p><br />
								Template Name :&nbsp;
				<input type="text" name="tempname" /><br />
                          <input class="button" value="Reset" type="reset" />&nbsp;
                          <input type="button" value="Submit" />
				</p>
</form>
</body>

And here's the pro.php file

if (isset($_POST['tempname']))
{$data = $_POST['tempname'];
echo $data;
}

It's submit the data "There's no loading" but I don't see any reply from pro.php file I don't know why

Bonesnap

Add method="post" to your form.

2CODE

I didn't use the form method post I use the post data from the jquery so I add it and it's still doesn't work because I use $.post instead.

bradgrafelman

Two problems I see:

Your "Submit" button is just a button, it's not an actual submit type input (thus clicking it won't do anything).
Your form is going to refresh the page when you fix the above error because there's nothing telling the browser to stop from actually trying to submit the form. Add a "return false" in the onsubmit handler of the form after you call your post() function to stop the form from causing this.

Bonesnap

bradgrafelman;10990409 wrote:
Two problems I see:

Your "Submit" button is just a button, it's not an actual submit type input (thus clicking it won't do anything).

Your form is going to refresh the page when you fix the above error because there's nothing telling the browser to stop from actually trying to submit the form. Add a "return false" in the onsubmit handler of the form after you call your post() function to stop the form from causing this.

Alternatively he can remove the onsubmit="post();" from the form element and add onclick="post();" to the button, and that would fix both of those (that's personally how I do it).

bradgrafelman

Bonesnap;10990415 wrote:
that would fix both of those

Excellent observation. Sometimes I wonder where my head's at...

Bonesnap

Haha you think that's bad? I once spent nearly half an hour wondering why CSS changes weren't taking effect before I realized I hadn't uploaded the file...:o

2CODE

I already tried these things guys before posting the new code here, I know this way as you can see in the first post I use onclick not onsubmit so I've tried onclick but no luck it's still the same it doesn't work. Try it by yourself.

Bonesnap

I would suggest then using a debugging tool such as Firebug to see what's actually happening when making the AJAX call. Firebug will alert you of many errors that are not always apparent.

Also, is your PHP file located in the same folder as your HTML file?

Lastly, though this probably doesn't matter, why are you using such an old version of jQuery? They're up to 1.6.4 now with many improvements including speed and stability.

bradgrafelman

2CODE;10990437 wrote:
Try it by yourself.

I did try the method I suggested above, and it worked.

2CODE

That's strange, Can you give me your full code now ?

I'm getting this error in firebug

Node cannot be inserted at the specified point in the hierarchy
[Break On This Error] fragment.appendChild( ret );

Bonesnap

I tried it and it worked, too. I copied and pasted your code and removed the onsubmit="post();" from the form element and added onclick="post();" to the button and it worked.