/    Sign up×
Community /Pin to ProfileBookmark

textbox

Copy linkTweet thisAlerts:
Jan 24.2005

how do we implement a textbox in Javascript?

For example:

if (status == “other”) {

new textbox area ???

}

could anyone tell me about it? thank you very much

to post a comment
JavaScript

13 Comments(s) ↴

Copy linkTweet thisAlerts:
@CharlesJan 24.2005 — [i]Originally posted by handong888 [/i]

[B]could anyone tell me about it?[/B][/QUOTE] Only if you can better explain yourself.
Copy linkTweet thisAlerts:
@ElegiditoJan 24.2005 — I think I'm feeling clairvoyant today, do you mean something like this:
[code=php]
bTag = document.getElementsByTagName("BODY");
newTextbox = document.createElement("INPUT");
newTextbox.type = 'text';
bTag[0].appendChild(newTextbox);
[/code]

hope that helps
Copy linkTweet thisAlerts:
@CharlesJan 24.2005 — [i]Originally posted by Elegidito [/i]

[B]I think I'm feeling clairvoyant today, do you mean something like this:

[code=php]
bTag = document.getElementsByTagName("BODY");
newTextbox = document.createElement("INPUT");
newTextbox.type = 'text';
bTag[0].appendChild(newTextbox);
[/code]

hope that helps [/B][/QUOTE] Bad, very bad. The one in ten users who do not use JavaScript will not be able to properly use the form, try this method instead:

[font=monospace]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="Content-Script-Type" content="text/javascript">

<meta name="Content-Style-Type" content="text/css">

<title>Example</title>

<style type="text/css">

<!--

fieldset {padding:1ex; width:15em}

label {display:block}

label#other {text-align}

button {display:block; margin:auto; margin-top:1em}

.hide {display:none}

-->

</style>

<script type="text/javascript">

<!--

if (document.getElementById) onload = function () {

document.getElementById ('other').className = 'hide';

var e, i = 0;

while (e = document.forms[0].elements[i++]) {if (e.type == 'radio') e.onclick = function () {document.getElementById ('other').className = document.forms[0].elements.giant[4].checked ? '' : 'hide'}}

}

// -->

</script>

</head>

<body>

<form action="some-script.pl">

<fieldset>

<legend>Giant Says</legend>

<label><input name="giant" type="radio"> Fee</label>

<label><input name="giant" type="radio"> Fie</label>

<label><input name="giant" type="radio"> Foe</label>

<label><input name="giant" type="radio"> Fum</label>

<label><input name="giant" type="radio"> Other</label>

<label id="other">Other <input type="text"></label>

<button type="submit">Submit</button>

</fieldset>

</form>

</body>

</html>[/font]

But then we're just guessing that this is what handong888 is up to.
Copy linkTweet thisAlerts:
@ElegiditoJan 24.2005 — Wow, very good idea. I was sort of just suggesting a general method to add a textbox to the body, but thats a great implementation.
Copy linkTweet thisAlerts:
@CharlesJan 24.2005 — Odly enough, doing things with an eye towards accessibility turns out to make things easier.
Copy linkTweet thisAlerts:
@handong888authorJan 25.2005 — <script type="text/javascript" language="JavaScript">

<!--

function setOptions(area,dropdown)

{

var status=area[area.selectedIndex].value;


if (status == "Visa") {

}

else if (status == "Mastercard") {

}

else if (status == "American Express") {


}

else if (status == "Discover Card") {


}

else if (status == "Macy") {


}

else if (status == "Kohl") {


}

else if (status == "Sears") {


}

else if (status == "JC Penney") {


}

else if (status == "Other") {


}
}

//-->

</script>

what I want is that If status == "Other", I want to have a new textbox show it on the page, if status == the rest of, i want to the page to be the same. how can I make this happen it.
Copy linkTweet thisAlerts:
@CharlesJan 25.2005 — [font=monospace]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="Content-Script-Type" content="text/javascript">

<meta name="Content-Style-Type" content="text/css">

<title>Example</title>

<style type="text/css">

<!--

fieldset {padding:1ex; width:15em}

label {display:block; text-align:right}

label#other {text-align}

button {display:block; margin:auto; margin-top:1em}

.hide {display:none}

-->

</style>

<script type="text/javascript">

<!--

if (document.getElementById) onload = function () {

document.getElementById ('cardType').onchange = function () {document.getElementById ('other').className = this.selectedIndex == 3 ? '' : 'hide'};

document.getElementById ('cardType').onchange();

}

// -->

</script>

</head>

<body>

<form action="some-script.pl">

<fieldset>

<legend>Example</legend>

<label>Card Type: <select id="cardType">

<option>Visa</option>

<option>Master Card</option>

<option>American Express</option>

<option>Other</option>

</select></label>

<label id="other">Other <input type="text"></label>

<button type="submit">Submit</button>

</fieldset>

</form>

</body>

</html>[/font]
Copy linkTweet thisAlerts:
@handong888authorJan 25.2005 — Hi charles:

thank you for your help, but The following is to let you select one from drop down menu and another drop down menu will be appear on the page. I want to change the code so when I select every single value in the dropdown menu, the page will be the same except when I select the last single value, the page will have a textbox appear on the page. how can I do that? please help me. thank you

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

<!--

function setOptions(area,dropdown)

{

var status=area[area.selectedIndex].value;

dropdown.options.length = 1;

if (status == "") {

dropdown.options[0] = new Option('Please select one of the options above first',' ');

}

else if (status == "BIZ") {

dropdown.options[0] = new Option('- Select a Program -','');

dropdown.options[1] = new Option('Bachelor of Science in Business','Biz,BSB');

dropdown.options[2] = new Option('Bachelor of Science in Management','Biz,BSM');

dropdown.options[3] = new Option('2+2 Bachelor of Science in Business','Biz,BSB22');

dropdown.options[4] = new Option('2+2 Bachelor of Science in Management','Biz,BSM22');

dropdown.options[5] = new Option('Associate of Applied Science in Business Administration/Accounting','Biz,AASBAA');

dropdown.options[6] = new Option('Associate of Applied Science in Business Administration/Management','Biz,AASBAM');

}

else if (status == "IT") {

dropdown.options[0] = new Option('- Select a Program -','');

dropdown.options[1] = new Option('Bachelor of Science in Information Technology','IT,BSIT');

dropdown.options[2] = new Option('2+2 Bachelor of Science in Information Technology','IT,22BSIT');

dropdown.options[3] = new Option('Associate of Applied Science in Computer Information Systems','IT,AASCIS');

dropdown.options[4] = new Option('Information Technology Pathway Certificate','IT,ITPATH');

dropdown.options[5] = new Option('Internet and Website Development Certificate','IT,INETWEBDEV');

dropdown.options[6] = new Option('Intro to Computer Programming Language Certificate','IT,INTROCPL');

}

else if (status == "CJ") {

dropdown.options[0] = new Option('- Select a Program -','');

dropdown.options[1] = new Option('Bachelor of Science in Criminal Justice','CJ,BSCJ');

dropdown.options[2] = new Option('2+2 Bachelor of Science in Criminal Justice','CJ,22BSCJ');

dropdown.options[3] = new Option('Associate of Applied Science in Criminal Justice','CJ,AASCJ');

dropdown.options[4] = new Option('Crime Scene Technician Certificate','CJ,CSTC');

dropdown.options[5] = new Option("Terrorism/National Security Certificate",'CJ,TNSC');

}

else if (status == "PL") {

dropdown.options[0] = new Option('- Select a Program -','');

dropdown.options[1] = new Option('Bachelor of Science in Paralegal Studies','PL,BSPS');

dropdown.options[2] = new Option('2+2 Bachelor of Science in Paralegal Studies','PL,22BSPS');

dropdown.options[3] = new Option('Associate of Applied Science in Paralegal Studies','PL,AASPLS');

dropdown.options[4] = new Option('Pathway to Paralegal Certificate','PL,PPLC');

}

else if (status == "AS") {

dropdown.options[0] = new Option('- Select a Program -','');

dropdown.options[1] = new Option('SCHOOL OF ARTS & SCIENCES - Associate of Applied Science in Interdisciplinary Studies','AS,ASIS');

}

}

//-->
Copy linkTweet thisAlerts:
@CharlesJan 25.2005 — Did you try my example above?
Copy linkTweet thisAlerts:
@handong888authorJan 25.2005 — hi Charles:

I am not sure how do I try your code, because I do not understand it right now. I do not see your code will produce a new textbox which I show it on the page when I choose "other". I want to change the code so when I select every single value in the dropdown menu, the page will be the same except when I select the last single value(other), the page will have a textbox appear on the page. how can I do that? please help me. thank you
Copy linkTweet thisAlerts:
@CharlesJan 25.2005 — [i]Originally posted by handong888 [/i]

[B]hi Charles:



I am not sure how do I try your code, because I do not understand it right now. I do not see your code will produce a new textbox which I show it on the page when I choose "other". I want to change the code so when I select every single value in the dropdown menu, the page will be the same except when I select the last single value(other), the page will have a textbox appear on the page. how can I do that? please help me. thank you [/B][/QUOTE] Cut and paste my code and you will see that it does exactly what you ask. I cannot adapt it to your needs because you are trying to make a JavaScript dependent page. And that is very bad.
Copy linkTweet thisAlerts:
@handong888authorJan 25.2005 — hi Charles:

your code working very good, but it does not match my code. what I wan t is a javascript(not html) that can merge into my other code. I am currently have something like this:

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

<!--

function setOptions(area,dropdown)

{

var status=area[area.selectedIndex].value;

dropdown.options.length = 1;

if (status == "") {

dropdown.options[0] = new Option('Please select one of the options above first',' ');

}

else if (status == "BIZ") {

dropdown.options[0] = new Option('- Select a Program -','');

dropdown.options[1] = new Option('Bachelor of Science in Business','Biz,BSB');

dropdown.options[2] = new Option('Bachelor of Science in Management','Biz,BSM');

dropdown.options[3] = new Option('2+2 Bachelor of Science in Business','Biz,BSB22');

dropdown.options[4] = new Option('2+2 Bachelor of Science in Management','Biz,BSM22');

dropdown.options[5] = new Option('Associate of Applied Science in Business Administration/Accounting','Biz,AASBAA');

dropdown.options[6] = new Option('Associate of Applied Science in Business Administration/Management','Biz,AASBAM');

}

else if (status == "IT") {

dropdown.options[0] = new Option('- Select a Program -','');

dropdown.options[1] = new Option('Bachelor of Science in Information Technology','IT,BSIT');

dropdown.options[2] = new Option('2+2 Bachelor of Science in Information Technology','IT,22BSIT');

dropdown.options[3] = new Option('Associate of Applied Science in Computer Information Systems','IT,AASCIS');

dropdown.options[4] = new Option('Information Technology Pathway Certificate','IT,ITPATH');

dropdown.options[5] = new Option('Internet and Website Development Certificate','IT,INETWEBDEV');

dropdown.options[6] = new Option('Intro to Computer Programming Language Certificate','IT,INTROCPL');

}

else if (status == "CJ") {

dropdown.options[0] = new Option('- Select a Program -','');

dropdown.options[1] = new Option('Bachelor of Science in Criminal Justice','CJ,BSCJ');

dropdown.options[2] = new Option('2+2 Bachelor of Science in Criminal Justice','CJ,22BSCJ');

dropdown.options[3] = new Option('Associate of Applied Science in Criminal Justice','CJ,AASCJ');

dropdown.options[4] = new Option('Crime Scene Technician Certificate','CJ,CSTC');

dropdown.options[5] = new Option("Terrorism/National Security Certificate",'CJ,TNSC');

}

else if (status == "PL") {

dropdown.options[0] = new Option('- Select a Program -','');

dropdown.options[1] = new Option('Bachelor of Science in Paralegal Studies','PL,BSPS');

dropdown.options[2] = new Option('2+2 Bachelor of Science in Paralegal Studies','PL,22BSPS');

dropdown.options[3] = new Option('Associate of Applied Science in Paralegal Studies','PL,AASPLS');

dropdown.options[4] = new Option('Pathway to Paralegal Certificate','PL,PPLC');

}

else if (status == "AS") {

dropdown.options[0] = new Option('- Select a Program -','');

dropdown.options[1] = new Option('SCHOOL OF ARTS & SCIENCES - Associate of Applied Science in Interdisciplinary Studies','AS,ASIS');

}

}

//-->

</script>


I want to change this and I have explain this earlier. but thank you for your help anyway
Copy linkTweet thisAlerts:
@CharlesJan 25.2005 — [i]Originally posted by handong888 [/i]

[B]I am currently have something like this...[/B][/QUOTE] Yes, I know. When you have a page that will still work without JavaScript, one where JavaScript adds just a litle fluff, then let me know. Until then, perhaps someone else can help you.
×

Success!

Help @handong888 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 5.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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...