dynamic PHP form in javascript

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

dynamic PHP form in javascript

Post by s.dot »

I need a dynamic PHP form to be inserted into an element of my webpage when a certain javascript condition is met.

I thought it would work if I put the form script inside of a javascript function, and then when the condition is met, write it to the element on the page.

This is what I tried:

Code: Select all

<script>
<!--
var timeout = 1000; var num = 0; var na = "00"; var secs = <? if($premiumarray['premium'] == "y"){ echo "10"; } ELSE { echo "20"; } ?>

function go(){ na = secs; if (secs < 10) { na= "0" + na; }
document.getElementById("countDownText").innerHTML = na;
secs = secs - 1

function form(){
<form action="<? echo $PHP_SELF; ?>" method="post">
<input type="hidden" name="action" value="anticheat">
<?
$rand1 = rand(0,9);
$rand2 = rand(0,9);

$random = $rand1.$rand2;

$randb1 = rand(0,9);
$randb12 = rand(0,9);
$button1 = $randb1.$randb12;


$randb2 = rand(0,9);
$randb22 = rand(0,9);
$button2 = $randb2.$randb22;


$randb3 = rand(0,9);
$randb32 = rand(0,9);
$button3 = $randb3.$randb32;


$randb4 = rand(0,9);
$randb42 = rand(0,9);
$button4 = $randb4.$randb42; ?>

To continue click: <B><? echo $random; ?></B><BR><BR>
<? $buttonsarray = array("$random","$button1","$button2","$button3","$button4");
shuffle($buttonsarray);
$anticheatbabble = "randomanticheatbabblehere";
?>
<input type="hidden" name="random" value="<? echo md5($random.$anticheatbabble); ?>">
<? foreach($buttonsarray as $button) {
   echo "<input type=\"submit\" name=\"cheat\" value=\"$button\"> "; } ?>
</form>
 }

if (secs+1 < 1) { document.getElementById("countDownText").write("" +form()+ ""); }

if (secs+1 > 0) { setTimeout("go();",timeout); }
}
-->
</script>
But when I do this, nothing shows up at all, which makes me think there is an error somewhere. Can php be utilized inside of a javascript function?


feyd | :roll:
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

you may want to check your Javascript Console.. as your Javascript function form() has errors. Specifically, all or lines 10-45
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

feyd wrote:you may want to check your Javascript Console.. as your Javascript function form() has errors. Specifically, all or lines 10-45
LOL... *Yikes" :roll:
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

I am unsure of how to next php inside of javascript ;/
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

scrotaye wrote:I am unsure of how to next php inside of javascript ;/
Even if there was no PHP in that it be syntactically incorrect.

Code: Select all

function form(){
<form action="<? echo $PHP_SELF; ?>" method="post">
<input type="hidden" name="action" value="anticheat">
See anything odd about this?

I'm looking at the function but I can't see what it's meant to do.

It'd be impossible to get PHP to execute on the demand of a javascript function without making a request to the server (window.location() or similar).

You could however have a dynamic JavaScript function written in PHP, whereby the PHP writes the JavaScript code.
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

it is just a form that needs inserted when my timer reaches zero. it will be inserted into the webpage in the <div> layer "countDownText"

I figured if I wrote it in a function, and then called that function when the timer reaches zero, it would write that form to the page... is this incorrect?
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

Something like:

Code: Select all

<script language=&quote;javascript&quote;>
function showForm(which) {
    showit = window.setTimeout(function() { which.style.display='block' }, '10000'); //Dislay after 10 seconds
    return true;
}
</script>
<body onload=&quote;showForm(document.getElementById('theForm'))&quote;>
<div id=&quote;theForm&quote; style=&quote;display: none&quote;>
<form action=&quote;...&quote; method=&quote;post&quote;>
Name: <input type=&quote;text&quote; name=&quote;username&quote;>
</form>
</div>
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

Using this script, it seems to have the thing I want to do backwards. It breifly flashes the form, and then displays the timer. I would like it to display the timer until it reaches zero, and then show the form. Here is my code:

Code: Select all

<script>
<!--
var timeout = 1000; var num = 0; var na = &quote;00&quote;; var secs = <? if($premiumarray&#1111;'premium'] == &quote;y&quote;){ echo &quote;10&quote;; } ELSE { echo &quote;20&quote;; } ?>

function go(){ na = secs; if (secs < 10) { na = &quote;0&quote; + na; }
document.getElementById(&quote;countDownText&quote;).innerHTML = na;
secs = secs - 1
if (secs+1 > 0) { setTimeout(&quote;go();&quote;,timeout); }
if (secs+1 < 1) { 
function showForm(which) {
showit = window.setTimeout(function() {
which.style.display='block' }, '10000');
return true; } } }
-->
</script>
And here is the HTML part.

Code: Select all

<BODY onLoad=&quote;go(); showForm(document.getElementById('countDownText'));&quote;>
<div id='countDownText'>

FORM HERE

</div>
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

a) You're overwriting the innerHTML of the DIV, so even though it sets display=block there's no content
b) Do you have some CSS which sets the display to "none" until the timer=0 ?
c) The function showForm needs to be defined outside of the scope of the function go()... Sorted :wink:

Code: Select all

<html>
<head>
<script>
<!--
var timeout = 1000; var num = 0; var na = &quote;00&quote;; var secs = 10;

function go(which){ 
	na = secs; if (secs < 10) { 
		na = &quote;0&quote; + na; 
	}
	document.getElementById(&quote;timerbox&quote;).innerHTML = na;
	secs = secs - 1
	if (secs+1 > 0) { 
		setTimeout(&quote;go();&quote;,timeout); 
	}
	if (secs+1 < 1) {
		document.getElementById(&quote;timerbox&quote;).style.display='none';
		showForm(which);
	}
	
}
function showForm(which) {
	showit = window.setTimeout(function() {which.style.display='block' }, '10000');
}
-->
</script>
</head>
<BODY onLoad=&quote;go(); showForm(document.getElementById('countDownText'));&quote;>
<div id=&quote;timerbox&quote; style=&quote;height:200px; width:90%; border:2px solid black; text-align:center; position:absolute; top:100px; z-index:1; display:block&quote;>test</div>
<div id=&quote;countDownText&quote; style=&quote;height:200px; width:90%; border:2px solid black; text-align:center; position:absolute; top:100px; z-index:0; display:none&quote;>

FORM HERE<br />
Something here!

</div>
</body>
</html>
Last edited by Chris Corbyn on Wed Apr 06, 2005 5:19 pm, edited 1 time in total.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

Oh... BTW, if you try to work on your coding style (nesting brackets etc) it'll be much easier to read. }}} at the end of a function looks hard to read. Start writing long scripts and you have a jungle :P

A decent editor can do most of the nesting work for you.

d11
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

wow, thank you very much. That works beautifully. I am relatively new to JavaScript, so that is why my coding didn't work / was a mess. The javascript portion is only one small part of my site, but very important. I need to read up on it.

Once again, thanks.
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

okay so now that I have that problem done I HAVE ANOTHER problem :(
I promise... I really do try to figure these things out on my own.

The problem is, once the form is displayed, the variables are not being passed to the form action script page.

Here is my coding.

Code: Select all

&lt;? require 'important.php'; ?&gt;
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt;CrazyExchange.net - Surfing for credits&lt;/TITLE&gt;
&lt;script&gt;
&lt;!--
var timeout = 1000; var num = 0; var na = &quote;00&quote;; var secs = 10;
function go(which){na = secs;
	if (secs &lt; 10) { na = &quote;0&quote; + na }
	document.getElementById(&quote;timerbox&quote;).innerHTML = na;
	secs = secs - 1
	if (secs+1 &gt; 0) { setTimeout(&quote;go();&quote;,timeout); }
	if (secs+1 &lt; 1) {	document.getElementById(&quote;timerbox&quote;).style.display='none'; showForm(which);	}
	}
function showForm(which) {
	showit = window.setTimeout(function() { which.style.display='block' }, '10000');
	}
--&gt;
&lt;/script&gt;
&lt;/HEAD&gt;
&lt;BODY onLoad=&quote;go(); showForm(document.getElementById('countDownText'));&quote; BGCOLOR=&quote;#666666&quote; LEFTMARGIN=&quote;0&quote; TOPMARGIN=&quote;0&quote; onContextMenu=&quote;return false;&quote;&gt;
&lt;table width=&quote;100%&quote; cellspacing=&quote;0&quote; cellpadding=&quote;3&quote; border=&quote;0&quote;&gt;
	&lt;tr&gt;
		&lt;td valign=&quote;top&quote; width=&quote;100%&quote;&gt;
			&lt;table border=&quote;1&quote; bordercolor=&quote;#000000&quote; cellspacing=&quote;0&quote; cellpadding=&quote;3&quote; width=&quote;100%&quote;&gt;
				&lt;tr&gt;
					&lt;td bgcolor=&quote;#999999&quote; valign=&quote;top&quote; width=&quote;20%&quote;&gt;
					&lt;font color=&quote;white&quote; size=&quote;2&quote; face=&quote;tahoma&quote;&gt;Welcome, &lt;B&gt;&lt;? echo $theuser; ?&gt;&lt;/B&gt;&lt;BR&gt;
					&lt;/td&gt;
					&lt;td valign=&quote;top&quote; bgcolor=&quote;#999999&quote; width=&quote;20%&quote;&gt;
					&lt;div id=&quote;timerbox&quote; display:block&quote;&gt;&lt;/div&gt;
					&lt;div id=&quote;countDownText&quote; z-index:0; style=&quote;display: none&quote;&gt;
&lt;font color=&quote;#FFFFFF&quote; size=&quote;2&quote; face=&quote;tahoma&quote;&gt;
&lt;form action=&quote;surf.php&quote; method=&quote;post&quote;&gt;
&lt;input type=&quote;hidden&quote; name=&quote;action&quote; value=&quote;anticheat&quote;&gt;
&lt;?
$rand1 = rand(0,9);
$rand2 = rand(0,9);

$random = $rand1.$rand2;

$randb1 = rand(0,9);
$randb12 = rand(0,9);
$button1 = $randb1.$randb12;


$randb2 = rand(0,9);
$randb22 = rand(0,9);
$button2 = $randb2.$randb22;


$randb3 = rand(0,9);
$randb32 = rand(0,9);
$button3 = $randb3.$randb32;


$randb4 = rand(0,9);
$randb42 = rand(0,9);
$button4 = $randb4.$randb42; ?&gt;

To continue click: &lt;B&gt;&lt;? echo $random; ?&gt;&lt;/B&gt;&lt;BR&gt;&lt;BR&gt;
&lt;? $buttonsarray = array(&quote;$random&quote;,&quote;$button1&quote;,&quote;$button2&quote;,&quote;$button3&quote;,&quote;$button4&quote;);
shuffle($buttonsarray);
$anticheatbabble = &quote;randomanticheatbabblehere&quote;;
?&gt;
&lt;input type=&quote;hidden&quote; name=&quote;random&quote; value=&quote;&lt;? echo md5($random.$anticheatbabble); ?&gt;&quote;&gt;
&lt;? foreach($buttonsarray as $button) {
   echo &quote;&lt;input type=\&quote;submit\&quote; name=\&quote;cheat\&quote; value=\&quote;$button\&quote;&gt; &quote;; } ?&gt;
&lt;/form&gt;
&lt;/font&gt;
&lt;/div&gt;
					&lt;/td&gt;
					&lt;td valign=&quote;top&quote; bgcolor=&quote;#999999&quote;&gt;&lt;? require 'bannerrotation.php'; ?&gt;&lt;BR&gt;
					&lt;a href=&quote;profile.php?u=&lt;? echo $_COOKIE&#1111;'theuser']; ?&gt;&quote; target=&quote;_blank&quote;&gt;&lt;u&gt;&lt;font color=&quote;#FFFFFF&quote; size=&quote;2&quote;&gt;&lt;B&gt;My Account&lt;/B&gt;&lt;/font&gt;&lt;/u&gt;&lt;/a&gt; &lt;font color=&quote;#FFFFFF&quote; size=&quote;2&quote;&gt;&lt;B&gt;|&lt;/B&gt;&lt;/font&gt; &lt;a href=&quote;buycredits.php&quote; target=&quote;_blank&quote;&gt;&lt;font color=&quote;#FFFFFF&quote; size=&quote;2&quote;&gt;&lt;B&gt;Buy Credits&lt;/B&gt;&lt;/font&gt;&lt;/a&gt;
					&lt;/td&gt;
				&lt;/tr&gt;
		&lt;/table&gt;
		&lt;/td&gt;
	&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;
Script Action Page

Code: Select all

&lt;? require 'important.php';
if($_POST&#1111;'action'] == &quote;anticheat&quote;){
if($_POST&#1111;'random'] == md5($_POST&#1111;'cheat'].$anticheatbabble)){
echo &quote;You have pressed the correct button&quote;; } ELSE {
echo &quote;You pressed the wrong button&quote;; die(); } } ?&gt;
The form seems to send the form info to the right page, but none of the variables are being passed, even when I try to echo them to the page.


feyd | Please review how to post code using

Code: Select all

and

Code: Select all

tags. Read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url][/color]
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post by Chris Corbyn »

On side note (what's the stray css doing here?) :D ....

Code: Select all

<div id=&quote;timerbox&quote; display:block&quote;></div>
<div id=&quote;countDownText&quote; z-index:0; style
Next.... can you echo the variables out onto the surf.php page (outside of any conditional checks)?
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

Okay, I'm just going to post the form and the corresponding script.

surf_frame.php

Code: Select all

<form action="surf.php" method="post">
<input type="hidden" name="action" value="anticheat">
<?
$rand1 = rand(0,9);
$rand2 = rand(0,9);

$random = $rand1.$rand2;

$randb1 = rand(0,9);
$randb12 = rand(0,9);
$button1 = $randb1.$randb12;


$randb2 = rand(0,9);
$randb22 = rand(0,9);
$button2 = $randb2.$randb22;


$randb3 = rand(0,9);
$randb32 = rand(0,9);
$button3 = $randb3.$randb32;


$randb4 = rand(0,9);
$randb42 = rand(0,9);
$button4 = $randb4.$randb42; ?>

To continue click: <B><? echo $random; ?></B><BR><BR>
<? $buttonsarray = array("$random","$button1","$button2","$button3","$button4");
shuffle($buttonsarray);
$anticheatbabble = "randomanticheatbabblehere";
?>
<input type="hidden" name="random" value="<? echo md5($random.$anticheatbabble); ?>">
<? foreach($buttonsarray as $button) {
   echo "<input type=\"submit\" name=\"cheat\" value=\"$button\"> "; } ?>
</form>
Surf.php

Code: Select all

if(!$_POST['random']){ die("no variables were submitted"); }
if($_POST['random'] == md5($_POST['cheat'].$anticheatbabble)){
echo "You have pressed the correct button"; die(); } ELSE {
echo "<You clicked the wrong button"; die(); }
Needless to say, no variables are being passed because I get the "no variables were submitted" error.

I don't know what is wrong :(
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

!$_POST['random'] can "fail" for several reasons: It may be blank, it may not exist, short tags may not be on at your server, etc..

...and scrotaye, re-read the posting code guidelines or refresher (available on the portal and site news board) specifically concerning how labeling works.
Post Reply