How to present php variable after form submit using Ajax

**hsriat** · Jun 30 '10, 04:00 PM

Originally posted by londres9b

I'm new in Ajax..

It's for a URL Shorten.

Upon form submit, I need to do that stuff, to short' the URL.. And I do that on a separate page, using php POST.

When that script is done and the shortened URL is generated, I need to present that to the user. (We have ti as a php variable, let's say $shorturl).

I know that it is possible to submit forms without page reloading using Ajax, but what I can't figure out is how to get a php variable from the page that processed the form, and present it to the user.

All this without refreshing the page, of course.

Anybody can tell me how to do this?

You first need a basic tutorial on Ajax to understand the concept of "not-refreshing" the page.

**londres9b** · Jun 30 '10, 08:35 PM

I have looked to the tutorial..

As far as I understand, it is possible for the server to send the '$shorturl' but I don't know how the code for that works..

**Samishii23** · Jul 2 '10, 02:34 AM

jQuery. Get it.

Code:

<script>
$("#htmldiv").load("your-script.php");
</script>

<div id="htmldiv"></div>

if I remember correctly... the .load function will call the script, and place the returned output into the container #htmldiv.

Now jQuery can push content into a HTML tag via a class property, or id property, or, well, alot more methods.

jQuery is an JavaScript coder's best friend.

**londres9b** · Jul 2 '10, 11:32 AM

thank you for your help but I it's not working...
See my code:

Here's page.php:

Code:

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

<script type="text/javascript"> 
$("#htmldiv").load("process.php"); 
</script> 

</head>
<body>

<form action="process.php" method="POST">
<input type="text" size="12" name="shorturl">
<input type="submit" value="Submit">
</form>

<div id="htmldiv"></div>

</body>
</html>

And here's process.php:

Code:

<?php

$shorturl = $_POST["shorturl"];

?>

I made it simpler, let's say I want to display $shorturl on page.php (without page reloading).

Can you help me?

**shreedhan** · Jul 2 '10, 12:02 PM

I guess you simply need to add

echo $shorturl;

at the end of your code in process.php.

**londres9b** · Jul 10 '10, 01:53 PM

it's not working...
the form just submits normally and goes to process.php.

What's wrong?

**Samishii23** · Jul 10 '10, 05:53 PM

Your problem is the <Form> has the action and method property defined, and you have a submit button. No matter what if you click the submit button the form will do to that page you defined in the "action" property.

If you want what was typed into the text box. You can just get the .value property in Javascript through your updated code below...

Code:

<html><head>
<script type="text/javascript"> 
function clicked() {
  alert(document.form1.shorturl.value);
}
</script> 
 
</head>
<body>
 
<form name="form1">
<input type="text" size="12" name="shorturl">
<button onClick="clicked();">Submit</button>
</form>
 
<div id="htmldiv"></div>
 
</body>
</html>

**londres9b** · Jul 10 '10, 05:59 PM

Thanks ! That helped a lot!

**Samishii23** · Jul 11 '10, 02:21 AM

Code:

<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"> 
function clicked() {
  $("#htmldiv").load("page.php");
}
</script> 
 
</head>
<body>
<button onClick="clicked();">Submit</button>
 
<div id="htmldiv"></div>
 
</body>
</html>

**londres9b** · Jul 11 '10, 12:17 PM

Originally posted by Samishii23

Code:

<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"> 
function clicked() {
  $("#htmldiv").load("page.php");
}
</script> 
 
</head>
<body>
<button onClick="clicked();">Submit</button>
 
<div id="htmldiv"></div>
 
</body>
</html>

Oh, thanks

But one question: What is the Javascript code for making the -content of a text input- a php variable?

**Samishii23** · Jul 12 '10, 01:49 AM

To make a form element into a PHP variable, thats what a typical form would be:

Code:

<form method="post">
<input type="text" name="Text1">
</form>
<form method="get">
<input type="text" name="Text2">
</form>

Code:

<?php
echo $_POST['Text1'];
echo $_GET['Text2'];
?>

It should be noted, that the GET is what is in the URL bar in the browser. So for example. The above $_GET variable could be set by loading this URL http://localhost/page.php?Text1=data.

GET is not secure, and should be used like, more then one page per file. http://localhost/page.php?page=home or http://localhost/page.php?page=login

Using JavaScript to set a PHP variable unless you want to do it via Ajax, is kinda pointless, unless you want to set a form behind the scenes which I wouldn't do personally. If you want to pass variables through JavaScript the best way is Ajax, and is what I showed you in post #10. Loading a php script with GET variables set like mentioned above.

How to present php variable after form submit using Ajax

How to present php variable after form submit using Ajax

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment