Results 1 to 3 of 3

Thread: document.write - using form input

  1. #1
    Join Date
    Jan 2006
    Location
    up here in my tree
    Posts
    53
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default document.write - using form input

    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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jan 2006
    Location
    up here in my tree
    Posts
    53
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.
    Last edited by a_design_interactive; 03-28-2007 at 08:43 PM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •