Back To Programming / Scripting / Coding Forum

Send Javascript variable to PHP

  • corexian
  • Novice
  • Novice
  • No Avatar
  • Joined: Feb 03, 2005
  • Posts: 24
  • Status: Offline

Post April 19th, 2005, 12:25 pm

Is it possible? Let me explain my situation a bit more.

I have a form that is being filled out by the user in order to submit the information to a database. This aspect is done in PHP. As the form is filled out, each question answered adds to a total score. The client wanted to allow the user to see their score while filling out the form, so I'm using Javascript to keep a running total and display it at the bottom of the form (using the onClick event).

Now the trick comes when I need to pass the total score on to PHP. I either need to use the onClick event on the submit button or an onSubmit event on the form to check and see if the total is above a certain amount. If it is, I need to prompt the user for additional information. I've got all of this. I need to figure out, though, how to send the response to this prompt on with the form data that is being POSTed, throw it in a SESSION variable, or something along those lines.

In that circumstance, would an onClick event on a submit button occur before the form is submitted? If so, could I simply use some hidden tags to POST the values? If not, is this even possible?

Is there a way to explicitly send a JS variable through POST without interacting with html first?
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post April 19th, 2005, 12:25 pm

  • katana
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Sep 07, 2004
  • Posts: 2390
  • Loc: Edinburgh, Scotland
  • Status: Offline

Post April 19th, 2005, 1:04 pm

Use the 'onsubmit' handler for the form:
Code: [ Select ]
<form action="..." method="post" onsubmit="return doStuff()">


The "return doStuff" is important: if your method returns "false", the form is not submitted. Hence, when you prompt the user for input, if they answer in such a way that means the form is not to be posted, you simply return false and the form is not submitted.

If the question you are asking the user is a simple OK/Cancel question, use a "confirm" dialog, which returns either true or false (for OK and Cancel respectively). Otherwise use, "prompt".

Before the form is submitted, set the data that you want passed to your next page (for the PHP to process) to the value of a hidden input element within your form. The following examples illustrate this:

First, using a 'confirm' dialog:
Code: [ Select ]
<html>
<head>
<script language="JavaScript">
function doStuff() {
    var data = "this is the data you want passed to the processing page";
    var answer = confirm("A Question?");
    if(answer) {
        document.getElementById("user_answer").value = data;
        return true;
    }
    else
        return false;
}
</script>
</head>
<body>
<form action="http://www.google.com" method="post" onsubmit="return doStuff()">
    <input type="hidden" id="user_answer" value="" />
    <input type="submit" value="Click me" />
</form>
</body>
</html>
  1. <html>
  2. <head>
  3. <script language="JavaScript">
  4. function doStuff() {
  5.     var data = "this is the data you want passed to the processing page";
  6.     var answer = confirm("A Question?");
  7.     if(answer) {
  8.         document.getElementById("user_answer").value = data;
  9.         return true;
  10.     }
  11.     else
  12.         return false;
  13. }
  14. </script>
  15. </head>
  16. <body>
  17. <form action="http://www.google.com" method="post" onsubmit="return doStuff()">
  18.     <input type="hidden" id="user_answer" value="" />
  19.     <input type="submit" value="Click me" />
  20. </form>
  21. </body>
  22. </html>


Or using a 'prompt' dialog:
Code: [ Select ]
<html>
<head>
<script language="JavaScript">
function doStuff() {
    var data = "this is the data you want passed to the processing page";
    var answer = prompt("A Question?");
    if(answer || answer == "") {    // answer = false if "cancel" pressed. return false if no input entered, i.e. ""
        document.getElementById("user_answer").value = data;
        return true;
    }
    else
        return false;
}
</script>
</head>
<body>
<form action="http://www.google.com" method="post" onsubmit="return doStuff()">
    <input type="hidden" id="user_answer" value="" />
    <input type="submit" value="Click me" />
</form>
</body>
</html>
  1. <html>
  2. <head>
  3. <script language="JavaScript">
  4. function doStuff() {
  5.     var data = "this is the data you want passed to the processing page";
  6.     var answer = prompt("A Question?");
  7.     if(answer || answer == "") {    // answer = false if "cancel" pressed. return false if no input entered, i.e. ""
  8.         document.getElementById("user_answer").value = data;
  9.         return true;
  10.     }
  11.     else
  12.         return false;
  13. }
  14. </script>
  15. </head>
  16. <body>
  17. <form action="http://www.google.com" method="post" onsubmit="return doStuff()">
  18.     <input type="hidden" id="user_answer" value="" />
  19.     <input type="submit" value="Click me" />
  20. </form>
  21. </body>
  22. </html>


Hope this helps
Why do geeks get Halloween and Christmas confused?
Because 31 Oct == 25 Dec
www.darren-king.co.uk
  • corexian
  • Novice
  • Novice
  • No Avatar
  • Joined: Feb 03, 2005
  • Posts: 24
  • Status: Offline

Post April 19th, 2005, 1:25 pm

That's exactly what I was asking. I wasn't sure about the timing of the onSubmit event and certainly didn't know about having the "return" value included. Functionally, this is exactly what I need to do.

The user will be asked more than just "yes" or "no" so I had intended to use prompt(). I just need that response to go with the rest of the form.

Thank you for your help, katana. Now to implement it...
  • katana
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Sep 07, 2004
  • Posts: 2390
  • Loc: Edinburgh, Scotland
  • Status: Offline

Post April 19th, 2005, 1:27 pm

No probs corexian :D
Why do geeks get Halloween and Christmas confused?
Because 31 Oct == 25 Dec
www.darren-king.co.uk
  • teeks
  • Born
  • Born
  • No Avatar
  • Joined: Jul 17, 2005
  • Posts: 1
  • Loc: Canberra, AUS
  • Status: Offline

Post July 17th, 2005, 10:30 am

Hey - Thanks, I also found the above code useful.
I was actually looking for a way to get a variable from an alert response, similar to what you've done, except I wanted to just bring the response straight into PHP somehow without doing a form submit or refresh.
Oh well, this'll do. Cheers.
  • robpet72
  • Born
  • Born
  • No Avatar
  • Joined: May 29, 2010
  • Posts: 1
  • Status: Offline

Post May 30th, 2010, 12:26 am

Katana's reply above may have worked at one point, but I recently came across it, and I needed to make some changes to get it to work for me.

Here is the code as posted:

Code: [ Select ]
<html>
<head>
<script language="JavaScript">
function doStuff() {
  var data = "this is the data you want passed to the processing page";
  var answer = prompt("A Question?");
  if(answer || answer == "") {  // answer = false if "cancel" pressed. return false if no input entered, i.e. ""
    document.getElementById("user_answer").value = data;
    return true;
  }
  else
    return false;
}
</script>
</head>
<body>
<form action="REDIRECT PAGE LINK HERE" method="post" onsubmit="return doStuff()">
  <input type="hidden" id="user_answer" value="" />
  <input type="submit" value="Click me" />
</form>
</body>
</html>
  1. <html>
  2. <head>
  3. <script language="JavaScript">
  4. function doStuff() {
  5.   var data = "this is the data you want passed to the processing page";
  6.   var answer = prompt("A Question?");
  7.   if(answer || answer == "") {  // answer = false if "cancel" pressed. return false if no input entered, i.e. ""
  8.     document.getElementById("user_answer").value = data;
  9.     return true;
  10.   }
  11.   else
  12.     return false;
  13. }
  14. </script>
  15. </head>
  16. <body>
  17. <form action="REDIRECT PAGE LINK HERE" method="post" onsubmit="return doStuff()">
  18.   <input type="hidden" id="user_answer" value="" />
  19.   <input type="submit" value="Click me" />
  20. </form>
  21. </body>
  22. </html>


This is what I have now:

Code: [ Select ]
<html>
<head>
<script language="JavaScript">
function doStuff() {
  var answer = prompt("A Question?","this is the data you want passed to the processing page");
  if(answer) {  // answer = false if "cancel" pressed.
    document.getElementById("user_answer").value = answer;
    return true;
  }
  else if(answer == "") {  // return false if no input entered, i.e. ""
    return false;
}
  else
    return false;
}
</script>
</head>
<body>
<form action="REDIRECT PAGE LINK HERE" method="post" onsubmit="return doStuff()">
  <input type="hidden" name="user_answer" id="user_answer" value="" />
  <input type="submit" value="Click me" />
</form>
</body>
</html>
  1. <html>
  2. <head>
  3. <script language="JavaScript">
  4. function doStuff() {
  5.   var answer = prompt("A Question?","this is the data you want passed to the processing page");
  6.   if(answer) {  // answer = false if "cancel" pressed.
  7.     document.getElementById("user_answer").value = answer;
  8.     return true;
  9.   }
  10.   else if(answer == "") {  // return false if no input entered, i.e. ""
  11.     return false;
  12. }
  13.   else
  14.     return false;
  15. }
  16. </script>
  17. </head>
  18. <body>
  19. <form action="REDIRECT PAGE LINK HERE" method="post" onsubmit="return doStuff()">
  20.   <input type="hidden" name="user_answer" id="user_answer" value="" />
  21.   <input type="submit" value="Click me" />
  22. </form>
  23. </body>
  24. </html>



The reasons I made these changes were because:
  • The prompt shows the text in the text field if you add the ",text to display" at the end of the prompt question quote.
  • Having both conditions in one if statement for 'answer' didn't work. Leaving the field blank and clicking OK activated the form, when it was not supposed to.
  • Change the value line to 'answer', so it displays. 'data' would not display for me. I removed the 'data' line since it's no longer necessary.
  • Without adding a "name" value to the hidden input, it will never be found by the POST on the next page.

I hope this helps someone in the future. Katana's original code got me on the right path, but modifications for me, five years later, was required.

Page 1 of 1

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 133 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.