Help - Jquery/PHP - Using .post()

MrClass · February 19 2012

Hello everyone. I'm having trouble using the .post() jquery method to post data to a php file and getting back data using json. I wrote a sample code; I am sure the .post block in the jquery part is not working properly. Any other jquery code written before or after the .post() works fine. For now, just when you fill in the data in the form and hit the submit button nothing happens. I appreciate some feedback on the issue. Here is the code:

HTML part:

<html>
	<head>
		<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("input#submitbutton").click(function() {
				// we want to store the values from the form input box, then send via ajax below
				var fname     = $('#fname').attr('value');
				var lname     = $('#lname').attr('value');
				var datastring = "fname="+ fname +"&lname="+ lname+"&function=1";
				
					$.post("file.php", datastring, function(data){ 
						var printthisdiv = data.printthis; 
						var addfields = data.extrafields; 
						$('form#submit').hide(function(){$('div.success').fadeIn();}); 
						$("div.printout").html(printthisdiv); 
						$("div.printout").hide(); 
						$("div.printout").fadeIn(); 
						$("div.printout").fadeOut(); 
						}, "json");
				return false;
				});
			});
		</script>
</head>






<body>


<form id="submit" action="">
<fieldset><legend>Enter Information</legend> 
<label for="fname">Client First Name:</label> 
<input id="fname" class="text" type="text" name="fname" size="20" /> 
<label for="lname">Client Last Name:</label> 
<input id="lname" class="text" type="text" name="lname" size="20" /> 
<input type='submit' name='submitbutton' id='submitbutton' value='Submit' />
</form>
<div class="success" style="display: none;">Client has been added.</div>
<br />
<div class="printout"></div>

</body>

</html>

PHP part:

<?php 
if(isset($_POST['function']))
{
	$function = $_POST['function'];
	
	if(isset($_POST['fname']) && isset($_POST['lname']) && $function == '1')
	{
		$fname = $_POST['fname'];
		$lname = $_POST['lname'];
		
		//did something with these 2 variables like store them in a database
		
		$returnthis = "<input type='submit' name='submit2button' id='submit2button' value='Submit2' />";
		$printthis = "$fname $lname";
		
		echo json_encode(array("extrafields" => "$returnthis", "printthis" => "$printthis"));
	}
	elseif($function == '2')
	{
		
	}
	
}

?>

rtp · February 19 2012

i just tested your code

your getting the respond
{"extrafields":"<input type='submit' name='submit2button' id='submit2button' value='Submit2' \/>","printthis":"sadsa asdas"}

and the form is fading properly

whats the problem ?

Last edited by rtp (February 19 2012)

MrClass · February 19 2012

I'm using Firefox. When I enter data in the form and hit the submit button, nothing is happening.

rtp · February 19 2012

weird, am using firefox as well...

if you don't have firebug then install it from the firefox add on thingy..

open firebug and click "Net" and refresh the page... do you get any red color link or something, if you don't then click on the submit button and then you can check the respond from the file, if you get a new red file, then its a 404 meaning the ajax was not reached..

MrClass · February 19 2012

Oh God, I'm an idiot!

My WAMP server was not on :S

I already use firebug, but didnt know about that tab, thanks for that rtp!

The form is fading away correctly, but the success message is not fading in. What might be the problem?

rtp · February 19 2012

MrClass wrote:

Oh God, I'm an idiot!
My WAMP server was not on :S
I already use firebug, but didnt know about that tab, thanks for that rtp!
The form is fading away correctly, but the success message is not fading in. What might be the problem?

you need to close the fieldset tag

by the way, it's normal man, i used to spent hours changing code and get frustrated why it isn't working. In the end i realize am editing another file.

</form>
</fieldset> <!-- you forgot to close this -->
<div class="success" style="display: none;">Client has been added.</div>
<br />
<div class="printout"></div>

Last edited by rtp (February 19 2012)

MrClass · February 19 2012

Thanks rtp!

Though now actually comes the part which I am really stuck in. I have modified the code to match the problem I'm having. So when I enter data in the form, the data will be posted to the php file, then the php file returns back html data via json. Some of the returned html data is an input submit button tag. I then show this submit button on the page. Of course this new button will do something, so I made another .post() function that should run when the new button is clicked (here I am calling it submit2button). But instead of running the 2nd .post() method properly, the page is being refreshed.

New Html code:

<html>
	<head>
		<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("input#submitbutton").click(function() {
				// we want to store the values from the form input box, then send via ajax below
				var fname     = $('#fname').attr('value');
				var lname     = $('#lname').attr('value');
				var datastring = "fname="+ fname +"&lname="+ lname+"&function=1";
				
					$.post("filephp.php", datastring, function(data){ 
						var printthisdiv = data.printthis; 
						var addfields = data.extrafields; 
						/*alert(printthisdiv);
						alert(addfields);
						$('form#submit').hide();*/ 
						$('div.success').fadeIn();
						
						$("div.printout").html(printthisdiv); 
						$("div.printout").hide(); 
						$("div.printout").fadeIn();
						
						$("div.showbutton").html(addfields); 
						$("div.showbutton").hide(); 
						$("div.showbutton").fadeIn(); 
						
						
						}, "json");
				return false;
				});
				
				$("input#submit2button").click(function() {
					// we want to store the values from the form input box, then send via ajax below
					
					var datastring = "function=2";
					
						$.post("filephp.php", datastring, function(data){ 
							
							//var submit2buttonpressed = data.submit2buttonpressed;
							$("div.printout").html("<p>Submit 2 button pressed!</p>"); 
							$("div.printout").hide(); 
							$("div.printout").fadeIn(); 
							
							
							}, "json");
					return false;
					});
			});
		</script>
</head>






<body>


<form id="submit" action="">
<fieldset><legend>Enter Information</legend> 
<label for="fname">Client First Name:</label> 
<input id="fname" class="text" type="text" name="fname" size="20" /> 
<label for="lname">Client Last Name:</label> 
<input id="lname" class="text" type="text" name="lname" size="20" /> 
<input type='submit' name='submitbutton' id='submitbutton' value='Submit' />
<div class="showbutton"></div>
</fieldset>
<br />

</form>
<div class="success" style="display: none;">Client has been added.</div>
<br />
<div class="printout"></div>


</body>

</html>

New PHP code:

<?php 
if(isset($_POST['function']))
{
	$function = $_POST['function'];
	
	if(isset($_POST['fname']) && isset($_POST['lname']) && $function == '1')
	{
		$fname = $_POST['fname'];
		$lname = $_POST['lname'];
		
		//did something with these 2 variables like store them in a database
		
		$returnthis = "<input type='submit' name='submit2button' id='submit2button' value='Submit2' />";
		$printthis = "$fname $lname";
		
		echo json_encode(array("extrafields" => "$returnthis", "printthis" => "$printthis"));
	}
	elseif($function == '2')
	{
		echo json_encode(array("submit2buttonpressed" => "1"));
	}
	
}

?>

rolf · February 19 2012

MrClass wrote:

My WAMP server was not on :S

Short-circuit between the ears :-D

Last edited by rolf (February 19 2012)

MrClass · February 24 2012

I would like to acknowledge the efforts of RTP and Ayman Farhat in helping me solve my jquery mystery. RTP helped me with the .post function. Ayman solved the major mystery of applying jquery functions on dynamically inserted html elements. For all Jquery lovers out there, embrace this:

$(document).on(events, selector, data, handler);

Thank you guys. You are my heroes

Ayman · February 24 2012

Glad It worked :)

LebGeeks

#1 February 19 2012

Help - Jquery/PHP - Using .post()

#2 February 19 2012

Re: Help - Jquery/PHP - Using .post()

#3 February 19 2012

Re: Help - Jquery/PHP - Using .post()

#4 February 19 2012

Re: Help - Jquery/PHP - Using .post()

#5 February 19 2012

Re: Help - Jquery/PHP - Using .post()

#6 February 19 2012

Re: Help - Jquery/PHP - Using .post()

#7 February 19 2012

Re: Help - Jquery/PHP - Using .post()

#8 February 19 2012

Re: Help - Jquery/PHP - Using .post()

#9 February 24 2012

Re: Help - Jquery/PHP - Using .post()

#10 February 24 2012

Re: Help - Jquery/PHP - Using .post()

Board footer