Copy table cell text into an input as value attribute

Discussion in 'Javascript' started by charles-brewster@ntlworld.com, Jun 22, 2006.

  1. Guest

    I'm trying to write a simple JavaScript function which will use a
    button to copy table cell data into a form input text box as the
    "value" attribute.

    The following is intended to test the function, but doesn't work. I'm
    new to this - previous JavaScript experience mostly copy & paste -
    could somebody please point to where I'm going wrong.

    ~~~~~~~~~~~~~~~~~~~~~~~~~
    <head>
    <title>Testing JavaScript</title>
    <script language="JavaScript">
    function copytext(source_id, dest_id)
    {
    var s = getElementById(source_id);
    var d = getElementById(dest_id);
    var text = s.innerText;

    d.setAttribute("value", text);
    }
    </script>
    </head>
    <body>
    <h1>Testing JavaScript</h1>
    <form>
    <table>
    <tr>
    <td id="cell1">
    <b>a string of text</b>
    </td>
    <td>
    <button onclick="copytext('cell1', 'input1')">>></button>
    </td>
    <td>
    <input type="text" id="input1" width="20">
    </td>
    </tr>
    </table>
    </form>
    </body>
    </html>

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    Many thanks for any helpful suggestions

    CB
    , Jun 22, 2006
    #1
    1. Advertising

  2. RobG Guest

    wrote:
    > I'm trying to write a simple JavaScript function which will use a
    > button to copy table cell data into a form input text box as the
    > "value" attribute.
    >
    > The following is intended to test the function, but doesn't work. I'm
    > new to this - previous JavaScript experience mostly copy & paste -
    > could somebody please point to where I'm going wrong.
    >
    > ~~~~~~~~~~~~~~~~~~~~~~~~~
    > <head>
    > <title>Testing JavaScript</title>
    > <script language="JavaScript">


    The language attribute is deprecated, type is required:

    <script type="text/javascript">


    > function copytext(source_id, dest_id)
    > {
    > var s = getElementById(source_id);


    Please don't indent using tabs when posting, use 2 (preferred) or 4 spaces.

    getElementById is a method of the DOM 2 Core document interface:

    var s = document.getElementById(source_id);

    It is also best to test features that may not be supported by some browsers:

    if (document.getElementById){
    var s = document.getElementById(source_id);
    ...

    > var d = getElementById(dest_id);


    var d = document.getElementById(dest_id);


    > var text = s.innerText;


    The innerText property is IE proprietary and not widely implemented.
    The W3C equivalent is textContent, which naturally isn't implemented by
    IE. Alternative utilities have been posted here, search the archives
    for 'innerText textContent'.


    > d.setAttribute("value", text);


    setAttribute is known to be a bit buggy on some browsers - though I
    don't think there should be a problem here. Anyhow, it's much simpler
    to write:

    d.value = text;


    > }
    > </script>
    > </head>
    > <body>
    > <h1>Testing JavaScript</h1>
    > <form>


    The action attribute is required for HTML forms, even if it has no value:

    <form action="">


    [...]
    > <button onclick="copytext('cell1', 'input1')">>></button>


    Inside a form, a button element is by default a submit button. So even
    if the value is copied to the input, the form is posted to the current
    page, causing it to re-load and clear the value.

    <URL:http://www.w3.org/TR/html4/interact/forms.html#edef-BUTTON>


    If you don't want it to be a submit button, give it a type attribute
    value of 'button'. Anyhow, it seems better to use an input with
    type="button" and avoid the issue:

    <input type="button" value=">>"
    onclick="copytext('cell1', 'input1')">

    [...]

    --
    Rob
    RobG, Jun 22, 2006
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Phillip Roncoroni
    Replies:
    14
    Views:
    1,069
    Toby A Inkster
    Apr 5, 2004
  2. Replies:
    1
    Views:
    4,235
    Joe Kesselman
    Aug 2, 2006
  3. Replies:
    8
    Views:
    512
  4. sdf
    Replies:
    3
    Views:
    1,877
  5. Replies:
    2
    Views:
    140
Loading...

Share This Page