473,320 Members | 2,133 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

How to present php variable after form submit using Ajax

106 100+
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>

11 2935
hsriat
1,654 Expert 1GB
@londres9b
You first need a basic tutorial on Ajax to understand the concept of "not-refreshing" the page.
Jun 30 '10 #2
londres9b
106 100+
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
246 100+
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
londres9b
106 100+
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
I guess you simply need to add

echo $shorturl;

at the end of your code in process.php.
Jul 2 '10 #6
londres9b
106 100+
it's not working...
the form just submits normally and goes to process.php.

What's wrong?
Jul 10 '10 #7
Samishii23
246 100+
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
londres9b
106 100+
Thanks ! That helped a lot!
Jul 10 '10 #9
Samishii23
246 100+
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
londres9b
106 100+
@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
246 100+
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

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

Similar topics

0
by: Vibhu | last post by:
If a website is developed using ASPX, the page is submitted using the Javascript function theform.__EVENTTARGET.value = eventTarget.split("$").join(":"); I am building a small application that...
1
by: jayamca | last post by:
I have a form which is submitted via ajax. This form contains simple input elements and a field which needs to be a file upload. I came to know that we can do this by using hidden IFrame technique....
5
by: lucyh3h | last post by:
Hi, I am trying to use XMLHttpRequest to do server side validation. I have several fields on a form and a submit button. The submit button has an event assocated with it when clicked. The...
5
by: jad2006 | last post by:
Hi i have a requirement to pass the parameters say account No to a javaScript when the user clicks a link , The form action will also be set in JavaScript, and form is submitted in...
3
by: dmorand | last post by:
I've looked far and wide around the internet trying to find a decent tutorial on how to start using ajax to control my form posting. I'd like to have it so my users don't have to go to a new...
1
by: mrbadboy | last post by:
Hi, I need to submit multiple forms with using single button. I've mentioned my code below. <? if(isset($_POST)){ print_r($_POST); } ?> <script type="text/javascript">
3
rizwan6feb
by: rizwan6feb | last post by:
Hi, everyone! I am learning AJAX these days. I want to validate a form with Ajax in such a way that every field is validated on the "onBlur" event. There are fields like Username, First Name, Last...
18
by: vetrib2w | last post by:
Hi , In short: How to change the form action attribute value using javascript and that need to supported in IE also ? BRIEF: I am using ajax function to submit the form. I am also...
4
by: ghjk | last post by:
I' developing web site with php and postgres. I want to validate php forms using ajax. I'm new to ajax and tried to several examples. But still I couldn't get it. Could someone please tell me a...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.