www.webdeveloper.com
Results 1 to 13 of 13

Thread: Show information textfield at other place

Hybrid View

  1. #1
    Join Date
    Jun 2007
    Posts
    4

    Show information textfield at other place

    Is it possible to show information from a textfield directly on another place on the same page.

    I have a textfield:
    HTML Code:
    <form action="bla.php" id="formulier" name="formulier"method="post">
    <input type="text" name="phone"	style="width:160px" id="phone"/>
    </form>
    Now when someone types something in this field it has to show it on top of the page, i tried with this, but I can't come any further. What should I do?

    HTML Code:
    <script>formulier.phone.value</script>

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    You can put the info in another HTML tag. Place this somewhere else in your page:
    HTML Code:
    <span id="copy_phone"></span>
    Then use this JavaScript function:
    Code:
    function copyValue(el) {
      document.getElementById('copy_' + el.id).innerHTML = el.value;
    }
    And attach this function to the phone text field like this:
    HTML Code:
    <input type="text" name="phone"	style="width:160px" id="phone" onchange="copyValue(this);" />

  3. #3
    Join Date
    Jun 2007
    Posts
    4
    Real great, now I want it to show it on a href, I tried this.
    Code:
    document.getElementById(Id).href('copy_' + el.id).innerHTML = el.value;
    And then
    HTML Code:
    <a id="copy_phone" href="0492664438">Telefoonnummer</a>

  4. #4
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    The .href property is a string value of the href attribute. There is no .innerHTML property of the .href property. Only HTML tags have a .innerHTML property. You only need this:
    Code:
    document.getElementById(Id).href = el.value;

  5. #5
    Join Date
    May 2004
    Location
    FL
    Posts
    3,447
    toicontien - nice snippet. Mind if I post it over at JavaScript Source? Just give me the name and URL you want me to include for credit.
    Lee

    ""Men occasionally stumble over the truth, but most of them pick themselves up and hurry off as if nothing ever happened."" -- Sir Winston Churchill

  6. #6
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    Quote Originally Posted by LeeU
    toicontien - nice snippet. Mind if I post it over at JavaScript Source? Just give me the name and URL you want me to include for credit.
    Sure thing.

    Name: Greg Burghardt
    URL: Not really sure. My crappy good for nothing home page is http://www.geocities.com/greg_burghardt/ but you might want to put the URL to this thread. I've got nothing on my personal site about this snippet.

  7. #7
    Join Date
    May 2004
    Location
    FL
    Posts
    3,447
    Either way, it's up to you.
    Lee

    ""Men occasionally stumble over the truth, but most of them pick themselves up and hurry off as if nothing ever happened."" -- Sir Winston Churchill

  8. #8
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773

  9. #9
    Join Date
    May 2004
    Location
    FL
    Posts
    3,447
    You got it. Thanks.
    Lee

    ""Men occasionally stumble over the truth, but most of them pick themselves up and hurry off as if nothing ever happened."" -- Sir Winston Churchill

  10. #10
    Join Date
    Apr 2008
    Posts
    1

    copyToPage.js

    Hello and thank you for your javascript. Is there a way to copy the data into another web page? My client needs to save data entered onto a page and "secretly" keep and/or send to them the data with the date.
    They are willing to pay for this capability, if you are interested. Please advise.

  11. #11
    Join Date
    Apr 2008
    Posts
    1

    Combine copy script with dynamic input script

    Toicontien,

    I was looking to accomplish something very similar to this copy to page script. However, I want to use it with the following code that generates a series of form fields based on the number a user selects from a pull down menu.

    My goal is once the fields are displayed and the user adds a value to each of the fields, the field value will be displayed lower on the page. I've tried several things but can't seem to accomplish my goal.

    Any suggestions. I've copied the code down below:

    Thanks in advance.

    <HTML>
    <HEAD>
    <script language="JavaScript" src="SpryAssets/SpryValidationSelect.js" type="text/javascript"></script>
    <SCRIPT LANGUAGE="JavaScript">

    function createForm(number) {
    data = "";
    inter = "'";
    if (number < 5 && number > -1) {
    for (i=1; i <= number; i++) {
    data = data + "Child #" + i + "'s" + " First Name:" + " &nbsp;"
    + "<input type='text' size=15 id="+ inter
    + "chld_fnm" + i + "'><br>" ;

    }
    if (document.layers) {
    document.layers.cust.document.write(data);
    document.layers.cust.document.close();
    }
    else {
    if (document.all) {
    cust.innerHTML = data;
    }
    }
    }
    else {
    window.alert("Please select up to 5 entries.");
    }
    }
    function copyValue(el) {
    document.getElementById('copy_' + el.id).innerHTML = el.value;
    }</script>
    <link href="SpryAssets/SpryValidationSelect.css" rel="stylesheet" type="text/css">
    </HEAD>

    <BODY BGCOLOR=#ffffff vlink=#0000ff>

    <BR>

    <center>
    <form name=counter>
    Number of children you are registering:

    <span id="spryNum_chldrn">
    <select name="Num_chldrn" id="Num_chldrn" tabindex="1" onChange="createForm(counter.Num_chldrn.value)">
    <option value=" " selected> </option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
    </span>


    <br>
    <table border=0>
    <tr><td colspan=2>
    <span id="cust" onChange="copyValue(this)" style="position:relative;"></span>
    </td>
    <p>
    <br><br>
    Your input: <span id="copy_cust" style="font-weight: bold;"></span>
    </p>
    </tr>

    <tr valign=top>

    </tr>
    <tr>
    <td>
    </td>

    </tr>
    </table>
    </form>
    </center>

  12. #12
    Join Date
    Mar 2010
    Posts
    3

    Like this snippet

    toicontien

    I found this useful in trying to accomplish a task I'm working on. I'm looking tomake two modifications that I hope are easy. 1) How do you prevent tne new text that is written to the page from overwriting the previous text? I'm trying to make a mini message board. 2) Is it possible to have two form fields ina form area and use a "submit" and "Clear" button to write the information to the page? I'm not the best at javascript , but it looks like you've given me a very good working start. Any feedback would be greatly appreciated.

    kcentric

  13. #13
    Join Date
    Apr 2010
    Posts
    3
    Is it possible to use this script with pulldown menus (e.g. a list of states)?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles