document.write - using form input

**a_design_interactive** · 03-21-2007, 06:27 PM

hi. i'm trying to use a basic html form text input area w/ an event-handler in a button for the purpose of sending that user-input back out to the document so it can then be visible, for example, in a < p > element, perhaps under the form.

i've got this page where i demo font-family in bold and italic etc. it's coming out pretty decent (thanks to "John"s rec. on how to toggle the Bold / Italic, etc.) -- but now i'm getting greedy w/ it-- so what i'm trying to do is allow for user input to write the word-of-his choice into the page, so not only can the font be demo'd, but also his or her own choice of word written in the font.

i'm not concerned about applying a font to the text-- i think i can handle that part, cause it will just be in the CSS which will style the element where the "dynamic text" will appear-- right? i just need to get the dynamic text into that element, and that's what i don't know how to do.

thanks!! y'all are very awesome here! i'm very grateful for all the help i've received. i'm excited to FINALLY be learning some of the javascript basics.

**jscheuer1** · 03-22-2007, 04:05 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function relay_text(from, to){
var from=typeof from=='object'? from : document.getElementById(from);
var to=typeof to=='object'? to : document.getElementById(to);
to.innerHTML=from.value;
}
</script>
</head>
<body>
<p id="disp">&nbsp;</p>
<input type="text" id="inp"> <input type="button" onclick="relay_text('inp', 'disp');" value="Go">
</body>
</html>

**a_design_interactive** · 03-28-2007, 12:28 PM

hey John!! Muchas gracias to you senior!!

BTW-- i thought you might like to see the fruits of my (our) labours -- with the help of the "toggle bold" code you showed me.

check it out! i use it all the time myself, so i thought it would possibly be useful to others too.

i haven't implemented this new code yet (your post this thread)-- it's the first i made it back here since i posted... but i do have a quick question about that:

EDIT 4:
FORGET ALL THE OTHER STUFF... i was talking about. i think i've made some progress, however, i am also stuck again.
please observe this code, some of which (the options for example) are produced by a PHP array foreach loop thing:

Code:

<p><strong>STEP 1.)</strong>
<br />YOU Control the Text:</p>
<form method="get" id="customfontform" action="/wp-content/special/commonfonts.php">
<select  onchange="submit()" name="customfontselect"> 
<option value=""> <-- Select Typeface --> </option> 
<option value="georgia">Georgia</option> 

<option value="palatino">palatino</option> 
<option value="timesnewrom">Times New Roman</option> 
<option value="arial">Arial</option> 
<option value="arialblack">Arial Black</option> 
<option value="impact">Impact</option> 
<option value="lucida">Lucida Sans Unicode</option> 
<option value="tahoma">Tahoma</option> 
<option value="verdana">Verdana</option> 
<option value="comicsans">Comic Sans</option> 

<option value="couriernew">Courier New</option> 
<option value="lucidacon">Lucida Console</option> 
<option value="symbol">Symbol</option> 
<option value="webdings">Webdings</option> 
<option value="wingdings">Wingdings</option> 
<option value="fantasy">Fantasy</option> 
<option value="exceptMSSerif">MS Serif</option> 
<option value="exceptMSSans">MS Serif</option> 
</select> 

</form>
<p id="whatfontnow">New text will display using the Typeface:</p>
<p id="newfontname" class="comicsans">Comic Sans</p>
<p><strong>STEP 2.)</strong><br /> Enter Custom Text:<br /><input type="text" id="inp" value=" &spades; &clubs; click in here &hearts; &diams;  " /></p>
<p id="disp" class="comicsans">&nbsp;</p>
<p><strong>STEP 3.)</strong><br /> <input type="button" onclick="relay_text('inp', 'disp');" value="Convert Your Text!" /></p>
<p><strong>STEP 4.)</strong><br />Toggle Bold or Italic styles on your custom text!</p>

giving in and making it PHP allowed me to put some stuff in there (from my pre-javascript knowledge), such as the code

Code:

<p id="disp" class="comicsans">...

the ComicSans part isn't really in the source code, but it's placed there dynamically when the user selects a font-family from a drop down list. but this is using an HTTP request, page reload. if you examine the sourcecode you'll see that i've got my javascript Array all set to go-- but, unlike the PHP which i can use to dynamically implement a class (such as class="<?php print $selectoption; ?>" ) i don't know how to tackle this problem w/ JavaScript-- but it's primarily (i think) what i need to do to solve the problem-- that way, the page won't have to reload, right?

it will make a whole lot more sense if you just have a look at it, i think:
http://novicenotes.net/wp-content/sp...ommonfonts.php

thanks so much for all of your help!! this page i've been working on-- it's really finished, but i'm just trying to learn a little more and put some finishing touches on it, so to speak. thanks again! all of the help is much appreciated!

EDIT: @john: By the way-- recall that i inquired about the theory behind the ?: operator (or maybe you don't, john for all of the posting you do...) i decided to begin compiling, as i learn something new, a little "quick reference" for the perhaps "more tricky" -- the first of which is the javascript conditional operator: [ ?: ] , which you did explain to me elsewhere here at DD

ps. for anyone concerned about copyright issues, Mr. Perez is aware of the appropriations in the fonts panel.

Thread: document.write - using form input

Thread Tools

Search Thread

document.write - using form input

Bookmarks

Bookmarks

Posting Permissions