multi-step script

[Andrew V. Romero]

First off, I am mostly familier with PHP but am trying to make a
multi-step javascript program. For an example, I would like to run
different sections of the script depending on how many times the user
presses the submit button:

<form method="post" name="step1" action="test.html">

<script language="JavaScript">

var position
if (! position)
{
alert("Position0")
document.write("<input type = \"hidden\" name = \"position\" value =
\"1\">")
document.close()
}
if (position=1)
{
alert("Position1")
document.write("<input type = \"hidden\" name = \"position\" value =
\"2\">")
}

</script>

<div align=right><br><input TYPE = "submit" Value = " Next
"></div></form>

I keep running into problems...for example, javascript doesn't have an
isset command that I know of, so I can't just use hidden elements to
determine what part of the script to run. I tried using form method get
to use variables in the location to determine which parts run, but I am
not sure how to pull the variables out of the location bar using
javascript. I think I am trying to make this more complex than it
is...what is the best way to go about this?

[Richard Cornford]

"Andrew V. Romero" <rr*******@icqmail.com> wrote in message
news:3F**************@icqmail.com...

First off, I am mostly familier with PHP but am
trying to make a multi-step javascript program.
You probably know exactly what you mean by "multi-step" but if you don't
explain no one else will. (in one sense of another all programs are
"mult-step").
For an example, I would like to run different sections
of the script depending on how many times the user
presses the submit button: <snip>

Given that pressing a submit button will submit a form and (if
JavaScript is enabled/available on the client) activate the onsubmit so
each onsubmit handler could assign a reference to a separate (the next)
function to the forms onsubit handler for execution with the next
submit ckick. Though the user wont get a chance to click the submit
button that many times before the browser starts to load the response to
the form being submitted by the first click (assuming submission was not
cancelled).
I keep running into problems...for example, javascript doesn't
have an isset command that I know of,
I can only guess as to what isset does but:-

if(typeof globalVarName != 'undefined')

is probably the sort of thing you are after.
so I can't just use hidden elements to
determine what part of the script to run.
The desire to use a hidden for element implies wanting to persist
information across multiple pages, otherwise why not use a global
JavaScript variable.
I tried using form method get to use variables
in the location to determine which parts run, but I am
not sure how to pull the variables out of the location bar
using javascript.
location.href
-or-
location.search
I think I am trying to make this more complex than it
is...what is the best way to go about this?

Start by creating a clear and concise explanation of what you are really
trying to achieve.

Richard.

[Andrew V. Romero]

---
Start by creating a clear and concise explanation of what you are really
trying to achieve.
---

Okay, let me try again (I was afraid that I would scare people off if I
went into details). I am trying to recreate a web page that I made
using PHP and javascript (see http://www.u.arizona.edu/~avr/umc/tpn/).
Most of the work for this page is done with javascript except for a few
details. Currently, index.html gathers the information entered on the
first form and pass the information onto another TPN.phtml which
displays the next form in slightly different forms with different
options depending on what the user selected on the first form. So what
I would like to do is have one html page that has a long javascript take
care of everything instead of having 2 seperate html pages. So in order
for this to work, when my new page newPage.html loads, it needs to
display the first form (currently index.html). When the user fills in
this first form and hits submit, I want the same page (newPage.html) to
reload and display one of several forms depending on the choices the
user makes in the first form. The area I am getting stuck in is how to
have the same page display this first form, then have the user hit
submit, and have another form pop up which uses information from the
first form. So far when the user presses the submit button, I keep
getting that first form to come up and am not sure how to not have it
come up.

Now that we have gone complex...to make things simple again. I would
really like to see one html page with one javascript that displays a
text field and a submit button. When the user hits submit, if there is
something in the text box I want an alert box to display #1
$textFieldEntry and for the form to redisplayed with an html line that
says submit hit once at the top. Now if the user types in something
else and hits submit, I want the alert box to pop up and say #2
$textFieldEntry and display an html line that says submit hit twice at
the top of the page. So each time submit is hit, I want it to call a
different funtion, how can I have one html page that calls a different
funtion depending on how many times the submit button is hit? I would
really love to see an html page that does what I described above,
because this would get me past this block that I have.

Thanks for all your help, sorry if I wasn't clear before.
-Andrew V. Romero

Richard Cornford wrote:

"Andrew V. Romero" <rr*******@icqmail.com> wrote in message
news:3F**************@icqmail.com...

First off, I am mostly familier with PHP but am
trying to make a multi-step javascript program.

You probably know exactly what you mean by "multi-step" but if you don't
explain no one else will. (in one sense of another all programs are
"mult-step").

For an example, I would like to run different sections
of the script depending on how many times the user
presses the submit button:

<snip>

Given that pressing a submit button will submit a form and (if
JavaScript is enabled/available on the client) activate the onsubmit so
each onsubmit handler could assign a reference to a separate (the next)
function to the forms onsubit handler for execution with the next
submit ckick. Though the user wont get a chance to click the submit
button that many times before the browser starts to load the response to
the form being submitted by the first click (assuming submission was not
cancelled).

I keep running into problems...for example, javascript doesn't
have an isset command that I know of,

I can only guess as to what isset does but:-

if(typeof globalVarName != 'undefined')

is probably the sort of thing you are after.

so I can't just use hidden elements to
determine what part of the script to run.

The desire to use a hidden for element implies wanting to persist
information across multiple pages, otherwise why not use a global
JavaScript variable.

I tried using form method get to use variables
in the location to determine which parts run, but I am
not sure how to pull the variables out of the location bar
using javascript.

location.href
-or-
location.search

I think I am trying to make this more complex than it
is...what is the best way to go about this?

Start by creating a clear and concise explanation of what you are really
trying to achieve.

Richard.

[Silvio Bierman]

AFAIK JavaScript runs in the context of a HTML page that is displayed in the
browser. As soon as a submit takes place the browser will reload the frame,
thereby completely unloading (and in this case, reloading/initializing) the
JS. The only way to get the JS in the logical state you want it to be after
the submit would be to have the server generate enough history information
into the page that can be interpreted by the JS.

Regards,

Silvio Bierman

[Richard Cornford]

"Andrew V. Romero" <rr*******@icqmail.com> wrote in message
news:3F**************@icqmail.com...
<snip>

... . The area I am getting stuck in is how to have the
same page display this first form, then have the user hit
submit, and have another form pop up which uses information
from the first form. ...
This all seems like the sort of thing that server scripting was
introduced to achieve and a server-side implementation would inevitably
be considerably more reliable that using client side scripts to modify
the form. But still your explanation is too vague to see how your stated
desire to use different functions at different stages fits into the
process.
Now that we have gone complex...to make things simple again. I
would really like to see one html page with one javascript that
displays a text field and a submit button. When the user hits
submit, if there is something in the text box I want an alert box
to display #1 $textFieldEntry and for the form to redisplayed with
an html line that says submit hit once at the top. Now if the
user types in something else and hits submit, I want the alert
box to pop up and say #2 $textFieldEntry and display an html line
that says submit hit twice at the top of the page.
Now that is more like a specification, though the requirement for a
round trip to the server seems unnecessary and given that requirement,
again, a server side PHP implementation would be more reliable.

However, there is no need for any changing of functions in this
specification. This is a page that does what you have asked for:-

<html>
<head><title></title>
<script type="text/javascript">
var queryStrings = (function(out){
if(typeof location != 'undefined'){
var temp = location.search||location.href||'';
var ofSet;
if((ofSet = temp.indexOf('?')) > -1){
temp = temp.substring((ofSet+1), temp.length);
var workAr = temp.split('&');
for(var nvp,c = workAr.length;c--;){
nvp = workAr[c].split('=');
if(nvp.length > 1){
out[nvp[0]] = nvp[1];
}
}
}
}
return out;
}({})); //inline function expression call passed an object
// literal - {} - as its parameter (out).

function getElById(ID){
if(document.getelementById){
return document.getelementById(ID);
}else if(document.all){
return document.all[ID];
}
return null;
}

function validate(){
var frm = document.forms['aForm'];
var subCountEl = frm.elements['subCount'];
subCountEl.value = (+subCountEl.value) + 1;
alert('#'+subCountEl.value+' '+frm.elements['sText'].value);
return true;
}

function setUp(){
document.forms['aForm'].elements['subCount'].value =
(+queryStrings["subCount"])||0;
document.forms['aForm'].elements['sText'].value =
(queryStrings["sText"])||'';
}
</script>
</head>
<body onload="setUp()">
<p id="dnyText"><script type="text/javascript">
if(queryStrings["subCount"]){
document.write('submit hit '+queryStrings["subCount"]+' times');
}else{
document.write('First Load');
}
</script></p>
<form name="aForm" action="" method="get"
onsubmit="return validate();">
<input type="text" name="sText" value=""><br>
<input type="submit" name="sub">
<input type="hidden" name="subCount" value="">
</form>
</body>
</html>
So each time submit is hit, I want it to call a different
funtion, how can I have one html page that calls a different
funtion depending on how many times the submit button is hit?
Your specification does not require that. It would however be possible
to use the value that my page recovers from the query string that
corresponds with hidden filed that is being used to track the number of
submits in a - select - statement that called a different function based
on that number (except that as recovered from the query string and as a
hidden input value it is really a string).
I would really love to see an html page that does what I
described above, because this would get me past this block
that I have.

Richard.

[Andrew V. Romero]

As you mentioned, I would be ideal to do this sort of project using PHP,
unfortunately, my place of emoployment does not have PHP installed and
is not interested in installing it. So that sort of leaves me with
javascript and other client side tricks to accomplish my goals. So far
it has been interesting trying to make javascript do some of things that
PHP is better at.

Thanks for the sample script, that really helps me figure out which
direction I need to take. Onto a sort of related topic...during the
day, I was also working on a script which gives me easier access to
variables in the URL. So far I have:
<script language="JavaScript">

var variablesInUrl;
var vArray = new Array();

function loadUrlVariables()
{
varString = location.search;
//removes ? from varString
varString = varString.substring(1,varString.length);
//split into array containing variable=value
variableArray = varString.split('&');
variablesInUrl = variableArray.length-1

for (i=0; i<= variablesInUrl ; i++)
{
temp = variableArray[i].split("=");
vArray[i] = new Array();
vArray[i][0] = temp[0];
vArray[i][1] = temp[1];
}
}

//function returns variable's value
function getValue(varName)
{
for (i=0; i<=variablesInUrl; i++)
{
if (vArray[i][0] == varName)
return vArray[i][1]
}
alert ("Variable: "+varName+" was not found.")
}

loadUrlVariables()

//get value of a variable named step
alert( getValue("step") )

</script>

This works okay for pulling variables out of the URL, but I have a few
questions.

- Is it possible to have the script get the variables from the URL and
turn them into your typical javascript variables? By this I mean, say
the URL has ?step=1&name=Andy. Instead of using my script and saying
getValue("step"), is it possible to have javascript create a global
variable named step with a value of 1? Using my getValue function works
okay, but is not ideal.

Thanks,
Andrew V. Romero

[Richard Cornford]

"Andrew V. Romero" <rr*******@icqmail.com> wrote in message
news:3F**************@icqmail.com...

As you mentioned, I would be ideal to do this sort of project
using PHP, unfortunately, my place of emoployment does not have
PHP installed and is not interested in installing it. ...
Short of funds? ;-)

Incidentally, if this is for an intranet and thus for internal use in a
known range of browsers with JavaScript enabled it would be helpful if
you said so because that would make life much easier. (i.e. we could
stop hassling you about reliability, fall-back and limited browser
support and concentrate on what will work in the browsers that you are
writing for.)

<snip> - Is it possible to have the script get the variables from the
URL and turn them into your typical javascript variables? ...

Possible but probably unwise as the global context already has quite a
range of properties and a naming conflict could have all sorts of
consequences. To find out how to use the string held in a variable as
the name of a global property (In JavaScript global variables are
properties of the global (window) object) go to the group FAQ and follow
the link from section 4.39, that page has a section on
creating/accessing global variables in this way:-

<URL: http://jibbering.com/faq/#4_39 >

The code I posted executes a very similar procedure to your getValue
function but it places the name=value pairs into named properties of a
globally accessible object. It also has the advantage that it places all
of the name=value pairs in that object in one operation executed in-line
as the page loads (location.search will always be available at that
point). So it does not need to repeat the string and array manipulation
for each function call. Very few property names, such as 'constructor',
'prototype' and 'toString', risk conflicting with existing object
properties and many of those will also exist in the global context
anyway.

Richard.