/    Sign up×
Community /Pin to ProfileBookmark

show form IF input evaluates as true?

Hi guys I’m a noob to this site.

I have written a simple registration web page, but I don’t know how to make the page show the form named ‘register’ ONLY if the user’s input is satisfactory. How do i do it? I’ve even tried putting the form code into a document.write() ! ?
Here’s the code I have:

<HTML>
<HEAD>Register/Sign in<BR>
<TITLE>SOFASPEND – IN THE BEST POSSIBLE TASTE!</TITLE>

<SCRIPT language=”JavaScript” type=”text/javascript”>

var strInput;

strInput = window.prompt(‘Do you wish to register (1) or are you an existing member (2)?’,”);

//decide which option was chosen

if (strInput==1)
{
document.write(‘<BR>WELCOME – WE WILL SET UP YOUR ACCOUNT DETAILS NOW<BR>’);
}
else
{
if (strInput==2)
{
document.write(‘SHOP UNTIL YOU DROP<BR>’);
}

else
{
strInput = window.prompt(‘Are you a member (1) or do you wish to register (2)?’,”);
if (strInput==1)
{
document.write(‘<BR>WELCOME – WE WILL SET UP YOUR ACCOUNT DETAILS NOW<BR>’);
}
else
{
if (strInput==2)
{
document.write(‘<BR>SHOP UNTIL YOU DROP<BR>’);
}
}
}

}
</SCRIPT>
<SCRIPT>

/* A password checking application with an event-driven interface */

function isNumeric(aCharacter)
{
return (aCharacter >= ‘0’) && (aCharacter <= ‘9’)
};

function isLowerCase(aCharacter)
{
return (aCharacter >= ‘a’) && (aCharacter <= ‘z’)
};

function isUpperCase(aCharacter)
{
return (aCharacter >= ‘A’) && (aCharacter <= ‘Z’)
};

function isAlpha(aCharacter)
{
return (isUpperCase(aCharacter) || isLowerCase(aCharacter))
};

function isAlphaNumeric(aCharacter)
{
return (isAlpha(aCharacter) || isNumeric(aCharacter))
};

function checkLength(aString)
{
return (aString.length >= 4) && (aString.length <= 8)
};

function checkLegal(aString)
{
var result;

result = true;
for (var position = 0; position < aString.length; position = position + 1)
{
if (!isAlphaNumeric(aString.charAt(position)))
{
result = false
}
};
return result

};

function checkFirst(aString)
{
return isAlpha(aString.charAt(0))
};

/* Slightly different implementation of the checkHasDigit() function, which uses a for loop instead of a while loop */

function checkHasDigit(aString)

{
result = false;
for (var position = 0; position < aString.length; position = position + 1)
{
if (isNumeric(aString.charAt(position)))
{
result = true
}
};
return result
}

function checkPass(password)
/* checks that a password conforms to a specified format */
{
var errorFound;

errorFound = false;

if (!checkLength(password))
{
errorFound = true;
window.alert( ‘length not in range (4-8)’)
};

if (!checkLegal(password))
{
errorFound = true;
window.alert( ‘illegal characters in password (must all be alphanumeric)’)
};

if (!checkFirst(password))
{
errorFound = true;
window.alert( ‘first character must be alphabetic’)
};

if (!checkHasDigit(password))
{
errorFound = true;
window.alert( ‘must contain at least one digit (but not the first character)’)
};

if (!errorFound)
{
window.alert( ‘password accepted’)
}

};

</SCRIPT>

</HEAD>
<BODY>
<FORM NAME = “register”>

<!–textboxes–><BR>
First Name<BR><INPUT NAME = “txtFName” TYPE = “TEXT” VALUE = ”><BR>

Surname<BR><INPUT NAME = “txtSName” TYPE = “TEXT” VALUE = ”><BR>

Choose your password<BR><INPUT NAME = “txtPassword” TYPE = “TEXT” VALUE = ”>

<!–submission button–>
<BR><BR><INPUT NAME = “btnSubmit” TYPE = “BUTTON” VALUE = ‘Submit’ ONCLICK = “checkPass(document.register.txtPassword.value)”>
<BR>

</FORM>

</BODY>
</HTML>

to post a comment
HTML

14 Comments(s)

Copy linkTweet thisAlerts:
@kiwibritFeb 26.2008 — Personally, I would do what you want server side.
Copy linkTweet thisAlerts:
@n_codringtonauthorFeb 26.2008 — By the way I have to keep it on ONE page, not link to another when the input is satifactory. The question I MEANT to post was different:

Hi guys I'm a noob to this site.

I have written a simple registration web page, but I don't know how to make the page show the form named 'register' ONLY if the user's input is satisfactory. How do i do it? I've even tried putting the form code into a document.write() ! ?

Here's the code I have:

<HTML>

<HEAD>Register/Sign In<BR>

<TITLE>SOFASPEND - IN THE BEST POSSIBLE TASTE!</TITLE>

<SCRIPT language="JavaScript" type="text/javascript">

var strInput;

strInput = window.prompt('Do you wish to register (1) or are you an existing member (2)?','');

//decide which option was chosen

if (strInput==1)

{

document.write('<BR>WELCOME – WE WILL SET UP YOUR ACCOUNT DETAILS NOW<BR>');

}

else

{

if (strInput==2)

{

document.write('SHOP UNTIL YOU DROP<BR>');

}

else
{
strInput = window.prompt('Are you a member (1) or do you wish to register (2)?','');
if (strInput==1)
{
document.write('<BR>WELCOME – WE WILL SET UP YOUR ACCOUNT DETAILS NOW<BR>');
}
else
{
if (strInput==2)
{
document.write('<BR>SHOP UNTIL YOU DROP<BR>');
}
}
}

}

</SCRIPT>

<SCRIPT>

function checkLength(strVar)

{

return (strVar.length >= 7) && (strVar.length <= 15)

};

function checkPass(password)

/* checks that a password conforms to a specified format */

{

var blnError;

blnError = false;

if (!checkLength(password))
{
blnError = true;
window.alert('Password invalid. Use 7-15 characters. (You used ' + document.register.txtPassword.value.length + ' characters.)');
};

if (!blnError)
{
window.alert('Password accepted');
}

};


</SCRIPT>

</HEAD>

<BODY>

<FORM NAME = "register">

<!--textboxes--><BR>

First Name<BR><INPUT NAME = "txtFName" TYPE = "TEXT" VALUE = ''><BR>

Surname<BR><INPUT NAME = "txtSName" TYPE = "TEXT" VALUE = ''><BR>

Choose your password<BR><INPUT NAME = "txtPassword" TYPE = "TEXT" VALUE = ''>

<!--submission button-->

<BR><BR><INPUT NAME = "btnSubmit" TYPE = "BUTTON" VALUE = 'Submit' ONCLICK = "checkPass(document.register.txtPassword.value)">

<BR>

</FORM>

</BODY>

</HTML>
Copy linkTweet thisAlerts:
@n_codringtonauthorFeb 26.2008 — How do I add a form to a page only if the user input is true? My page currently takes user input, but adds the form to the page regardless. ? :mad:

HTML please!
Copy linkTweet thisAlerts:
@afigueroaFeb 26.2008 — if you're using php (a language would have been nice):
<i>
</i>&lt;?php
if($userInput) {
displayForm();
}
?&gt;
Copy linkTweet thisAlerts:
@n_codringtonauthorFeb 26.2008 — Sorry about that, it's in HTML.
Copy linkTweet thisAlerts:
@ray326Feb 26.2008 — I'd declare the form display:hidden until needed then change it to display:block.
Copy linkTweet thisAlerts:
@n_codringtonauthorFeb 26.2008 — I'd declare the form display:hidden until needed then change it to display:block.[/QUOTE]


How do I implement that? Could I have an example please? ?
Copy linkTweet thisAlerts:
@ray326Feb 26.2008 — Here's a snippet.
[code=html]
<style type="text/css">
.noshow { visibility: hidden; }
.showit { visibility: visible; }
</style>

<script type="text/javascript">
function showit() {
document.getElementById("f1").className="showit";
return false;
}
</script>
</head>

<body>
<a href="#" onclick="showit()">Click to show form</a><br><br>
<form name="f1" id="f1" action="#" method="get" class="noshow">
<table border="0">
<tr>
<td>Login:</td>
<td><input type="text" name="login" id="login"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit"></td>
</tr>
</table>
</form>
</body>
[/code]
Copy linkTweet thisAlerts:
@TheRaveFeb 29.2008 — HTML is static it cannot dynamically display information by itself. You either need a server-side language that dynamically creates HTML (e.g. php) or you need a client-side language to dynamically change the HTML (e.g. javascript).
Copy linkTweet thisAlerts:
@TheRaveFeb 29.2008 — This is an interesting way of doing things :S?

Firstly, its not very secure. People could easily bypass all of your registration and see whatever they want.

Secondly, it has vast amounts of javascript which could easily be disabled.

Also, what are you going to do with their "registration" details. Where do they go? It seems they aren't stored anywhere.

Its a good attempt at doing things but this kind of thing should really be done using a server side language.
Copy linkTweet thisAlerts:
@n_codringtonauthorFeb 29.2008 — This is an interesting way of doing things :S?

Firstly, its not very secure. People could easily bypass all of your registration and see whatever they want.

Secondly, it has vast amounts of javascript which could easily be disabled.

Also, what are you going to do with their "registration" details. Where do they go? It seems they aren't stored anywhere.

Its a good attempt at doing things but this kind of thing should really be done using a server side language.[/QUOTE]


It's ok because it's the way my assignment asked for it. It's working from the ground up, and it will be secure in the end. So do you know how to?
Copy linkTweet thisAlerts:
@n_codringtonauthorFeb 29.2008 — HTML is static it cannot dynamically display information by itself. You either need a server-side language that dynamically creates HTML (e.g. php) or you need a client-side language to dynamically change the HTML (e.g. javascript).[/QUOTE]

JavaScript IS what I'm using. I don't know HOW to use JS to hide/show a form in a document. Do you? Code appreciated as I've tried what I can in JS, but haven't succeeded.
Copy linkTweet thisAlerts:
@TheRaveFeb 29.2008 — I apologise but when asked you did say:Sorry about that, it's in HTML.[/QUOTE]

Anyway, it can easily be done with styles.

style="display: block;"

style="display: hidden;"

[code=html]<html>
<body>
<div id="formtohide" style="display: hidden">
<form name="aform">
<input name="someinput" />
</form>
</div>
</body>
</html>[/code]


Then were appropriate use Javascript to change the style to "display: block".

It should be noted that people will still be able to see the all the code for the form by using view-source. Hence if they are clever they can use the form. This is a security risk that can only be avoided if you use a server-side languagae.
Copy linkTweet thisAlerts:
@TheRaveFeb 29.2008 — Fair enough, but just to note it won't be "secure in the end" unless you use a server-side language.

Have you tried ray326's code. If his doesn't work you can always substitute:
.noshow { visibility: hidden; }
.showit { visibility: visible; }

for:
.noshow { display: hidden; }
.showit { display: block; }
×

Success!

Help @n_codrington spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...