By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
446,180 Members | 1,138 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 446,180 IT Pros & Developers. It's quick & easy.

How to present php variable after form submit using Ajax

100+
P: 106
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?
Jun 29 '10 #1

✓ answered by Samishii23

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

Expand|Select|Wrap|Line Numbers
  1. <html><head>
  2. <script type="text/javascript"> 
  3. function clicked() {
  4.   alert(document.form1.shorturl.value);
  5. }
  6. </script> 
  7.  
  8. </head>
  9. <body>
  10.  
  11. <form name="form1">
  12. <input type="text" size="12" name="shorturl">
  13. <button onClick="clicked();">Submit</button>
  14. </form>
  15.  
  16. <div id="htmldiv"></div>
  17.  
  18. </body>
  19. </html>

Share this Question
Share on Google+
11 Replies


hsriat
Expert 100+
P: 1,654
@londres9b
You first need a basic tutorial on Ajax to understand the concept of "not-refreshing" the page.
Jun 30 '10 #2

100+
P: 106
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..
Jun 30 '10 #3

Samishii23
100+
P: 246
jQuery. Get it.

Expand|Select|Wrap|Line Numbers
  1. <script>
  2. $("#htmldiv").load("your-script.php");
  3. </script>
  4.  
  5. <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.
Jul 2 '10 #4

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

Here's page.php:

Expand|Select|Wrap|Line Numbers
  1. <html><head>
  2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  3.  
  4. <script type="text/javascript"> 
  5. $("#htmldiv").load("process.php"); 
  6. </script> 
  7.  
  8. </head>
  9. <body>
  10.  
  11. <form action="process.php" method="POST">
  12. <input type="text" size="12" name="shorturl">
  13. <input type="submit" value="Submit">
  14. </form>
  15.  
  16. <div id="htmldiv"></div>
  17.  
  18. </body>
  19. </html>
And here's process.php:

Expand|Select|Wrap|Line Numbers
  1. <?php
  2.  
  3. $shorturl = $_POST["shorturl"];
  4.  
  5. ?>
I made it simpler, let's say I want to display $shorturl on page.php (without page reloading).

Can you help me?
Jul 2 '10 #5

P: 52
I guess you simply need to add

echo $shorturl;

at the end of your code in process.php.
Jul 2 '10 #6

100+
P: 106
it's not working...
the form just submits normally and goes to process.php.

What's wrong?
Jul 10 '10 #7

Samishii23
100+
P: 246
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...

Expand|Select|Wrap|Line Numbers
  1. <html><head>
  2. <script type="text/javascript"> 
  3. function clicked() {
  4.   alert(document.form1.shorturl.value);
  5. }
  6. </script> 
  7.  
  8. </head>
  9. <body>
  10.  
  11. <form name="form1">
  12. <input type="text" size="12" name="shorturl">
  13. <button onClick="clicked();">Submit</button>
  14. </form>
  15.  
  16. <div id="htmldiv"></div>
  17.  
  18. </body>
  19. </html>
Jul 10 '10 #8

100+
P: 106
Thanks ! That helped a lot!
Jul 10 '10 #9

Samishii23
100+
P: 246
Expand|Select|Wrap|Line Numbers
  1. <html><head>
  2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  3. <script type="text/javascript"> 
  4. function clicked() {
  5.   $("#htmldiv").load("page.php");
  6. }
  7. </script> 
  8.  
  9. </head>
  10. <body>
  11. <button onClick="clicked();">Submit</button>
  12.  
  13. <div id="htmldiv"></div>
  14.  
  15. </body>
  16. </html>
Jul 11 '10 #10

100+
P: 106
@Samishii23
Oh, thanks

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

Samishii23
100+
P: 246
To make a form element into a PHP variable, thats what a typical form would be:

Expand|Select|Wrap|Line Numbers
  1. <form method="post">
  2. <input type="text" name="Text1">
  3. </form>
  4. <form method="get">
  5. <input type="text" name="Text2">
  6. </form>
Expand|Select|Wrap|Line Numbers
  1. <?php
  2. echo $_POST['Text1'];
  3. echo $_GET['Text2'];
  4. ?>
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.
Jul 12 '10 #12

Post your reply

Sign in to post your reply or Sign up for a free account.