Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Noob question: Write to textarea

    I'm a total noob who decided to learn som web programming, I hope it's okey to post such questions here.

    I've written a script to learn how to fill in a value into a textarea by a button click. (See below.) I get it to show the selected number of each button, however the numbers just flashes and disappers right away. I want it to stay in the textarea. How do I do that and why does this problem appear?

    Head section
    <script type="text/javascript">

    function calculon(i)
    {
    document.forms['siffror'].elements['test'].value = i;
    return;
    }

    body section
    <form name="knappar">
    <input name="sifferknapp" type="submit" value=1 onClick=calculon(this.value)>
    <input name="sifferknapp" type="submit" value=2 onclick=calculon(this.value)>
    <input name="sifferknapp" type="submit" value=3 onclick=calculon(this.value)><br />
    <input name="sifferknapp" type="submit" value=4 onclick=calculon(this.value)>
    <input name="sifferknapp" type="submit" value=5 onclick=calculon(this.value)>
    <input name="sifferknapp" type="submit" value=6 onclick=calculon(this.value)><br />
    <input name="sifferknapp" type="submit" value=7 onclick=calculon(this.value)>
    <input name="sifferknapp" type="submit" value=8 onclick=calculon(this.value)>
    <input name="sifferknapp" type="submit" value=9 onclick=calculon(this.value)><br />
    </form>

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by bigge111 View Post
    I'm a total noob who decided to learn som web programming, I hope it's okey to post such questions here.

    I've written a script to learn how to fill in a value into a textarea by a button click. (See below.) I get it to show the selected number of each button, however the numbers just flashes and disappers right away. I want it to stay in the textarea. How do I do that and why does this problem appear?

    Head section
    Code:
    <script type="text/javascript">
    
    function calculon(i)
    {
    document.forms[0].onsubmit
     document.forms['siffror'].elements['test'].value = i;
    return;
    }
    body section
    Code:
    <form name="knappar">
    <input name="sifferknapp" type="submit" value=1 onClick=calculon(this.value)>
    <input name="sifferknapp" type="submit" value=2 onclick=calculon(this.value)>
    <input name="sifferknapp" type="submit" value=3 onclick=calculon(this.value)><br />
    <input name="sifferknapp" type="submit" value=4 onclick=calculon(this.value)>
    <input name="sifferknapp" type="submit" value=5 onclick=calculon(this.value)>
    <input name="sifferknapp" type="submit" value=6 onclick=calculon(this.value)><br />
    <input name="sifferknapp" type="submit" value=7 onclick=calculon(this.value)>
    <input name="sifferknapp" type="submit" value=8 onclick=calculon(this.value)>
    <input name="sifferknapp" type="submit" value=9 onclick=calculon(this.value)><br />
    </form>
    Code:
    <script>
    function calculon(i)
    {
    document.forms[0].onsubmit
     document.forms['siffror'].elements['test'].value += i+" ";
    return false;
    }
    
    
    </script>
    
    
    <form name="knappar" >
    <input name="sifferknapp" type="submit" value=1 onClick='calculon(this.value);return false;'>
    <input name="sifferknapp" type="submit" value=2 onclick='calculon(this.value);return false;'>
    <input name="sifferknapp" type="submit" value=3 onclick='calculon(this.value);return false;'><br />
    <input name="sifferknapp" type="submit" value=4 onclick='calculon(this.value);return false;'>
    <input name="sifferknapp" type="submit" value=5 onclick='calculon(this.value);return false;'>
    <input name="sifferknapp" type="submit" value=6 onclick='calculon(this.value);return false;'><br />
    <input name="sifferknapp" type="submit" value=7 onclick='calculon(this.value);return false;'>
    <input name="sifferknapp" type="submit" value=8 onclick='calculon(this.value);return false;'>
    <input name="sifferknapp" type="submit" value=9 onclick='calculon(this.value);return false;'><br />
    
    </form>
    <form name=siffror>
    <input type="text" name="test">
    </form>
    Last edited by DaveyErwin; 09-03-2010 at 09:37 PM.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,688
    Thanks
    80
    Thanked 4,646 Times in 4,608 Posts
    Because you are using SUBMIT buttons. So after they call the onclick function, they SUBMIT the <form>! Since your ACTION= in the <form> is blank, the form submits back to the same page. Which means the server *RELOADS* the same page. But, of course, the reload starts from a fresh page, nothing saved.

    Just change all your type="submit" to type="button"
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,688
    Thanks
    80
    Thanked 4,646 Times in 4,608 Posts
    From Davey:
    Code:
    document.forms['siffror'].elements['test'].value += i;
    So long as the buttons are SUBMIT buttons, that won't help. But if you change the buttions to just type="button", that code would have the effect of changing the value in the <textarea> by *CONCATENATING* the i values, one after the other.

    That is, if the user pushed 3 then 7 then 2, the textarea would then read "372".
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    bigge111 (09-03-2010)

  • #5
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    As Old Pedant wrote, the change of operator didn't help my initial problem, but thanks to DaveyErwin I learned one more useful thing. Thanks both of you!

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,688
    Thanks
    80
    Thanked 4,646 Times in 4,608 Posts
    A slightly cleaner way to code the whole thing:
    Code:
    <script type="text/javascript">
    function calculon( button )
    {
        button.form.test.value = button.value;
    }
    </script>
    ...
    <form name="knappar">
    <textarea name="test"></textarea>
    <br/><br/>
    <input type="button" value="1" onclick="calculon(this)">
    <input type="button" value="2" onclick="calculon(this)">
    <input type="button" value="3" onclick="calculon(this)">
    <input type="button" value="4" onclick="calculon(this)">
    <input type="button" value="5" onclick="calculon(this)">
    <input type="button" value="6" onclick="calculon(this)">
    <input type="button" value="7" onclick="calculon(this)">
    <input type="button" value="8" onclick="calculon(this)">
    <input type="button" value="9" onclick="calculon(this)">
    </form>
    There's really no reason to give a name= to buttons. You very seldom need to refer to them by name. And by passing the button reference (this) instead of its value (this.value), you can "find" the <form> using the code shown, rather than needing to look up the form by name.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,688
    Thanks
    80
    Thanked 4,646 Times in 4,608 Posts
    Just FYI: For those situation where you *DO* need to use a submit button to do something and then, probably conditionally, want supress the form submit, it's easy:
    Code:
    <script type="text/javascript">
    function whatever(button)
    {
        var form = button.form.;
        if ( form.foo.value == "" )
        {
            alert("You must fill in the foo value first!");
            return false;
        }
        return true;
    }
    ...
    <form>
        foo: <input name="foo" />
        <br/>
        <input type="submit" value="Push Me" onclick="return whatever(this);" />
    </form>
    Returning false from the function (and returning *THAT* value from the actual onclick! Important! the step often omitted) will suppress the action of the submit button.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    New to the CF scene
    Join Date
    Sep 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks again! These things are hard to learn from just reading tutorials, it's very valuable to me

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,688
    Thanks
    80
    Thanked 4,646 Times in 4,608 Posts
    One last thing...

    If you really did want to *ADD* the values from the buttons to the (assumed sum) in the textarea, you could just change that code from
    Code:
    <script type="text/javascript">
    function calculon( button )
    {
        button.form.test.value = button.value;
    }
    </script>
    To
    Code:
    <script type="text/javascript">
    function calculon( button )
    {
        var field = button.form.test;
        field.value = parseFloat(field.value) + parseFloat(button.value);
    }
    </script>
    If you know the values are alway integers, you can use parseInt() instead of parseFloat(), but really you'll get the same results.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by bigge111 View Post
    I'm a total noob who decided to learn som web programming, I hope it's okey to post such questions here.
    Quote Originally Posted by bigge111 View Post
    Thanks again! These things are hard to learn from just reading tutorials, it's very valuable to me
    Keep reading, keep asking questions here. There is no need to be confused
    plenty of explainations here.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,688
    Thanks
    80
    Thanked 4,646 Times in 4,608 Posts
    Agree with Davey! You might even learn what types are not objects in Javascript. <snicker/>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by Old Pedant View Post
    Agree with Davey! You might even learn what types are not objects in Javascript. <snicker/>
    Im glad you mentioned that because i need your advice

    Quote Originally Posted by DaveyErwin View Post
    in javascript everything is an object
    object properties are objects
    string literals are objects
    alert("hiyas".substring(0,1))
    everything is an object
    Maybe you can help me out


    Quote Originally Posted by Dormilich View Post
    except null and undefined

    Quote Originally Posted by rnd me View Post

    All objects (except null) can store properties.
    Can you see the problem ?
    One poster claims null is mot an object
    and the other uses null in a context
    that makes me believe he thinks null
    is an object.Now the advice i need from
    you is which of these posters am i to
    rely on.




    Quote Originally Posted by Old Pedant View Post

    I'm not continuing this thread.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,688
    Thanks
    80
    Thanked 4,646 Times in 4,608 Posts
    Have you heard of "auto-boxing"?

    When a primitive value is used in a context where an object is needed, many languages will *automatically* "auto-box" the value to convert to a standard object.

    When you code
    Code:
        "abcdef".substring(1,3)
    ECMAScript calls for the automatic "boxing" (conversion) of the string value to a String object. NOTICE CAREFULLY the difference in spelling there: string vs. String.

    If you will go look at the ECMAScript documentation, sections 4.16, 4.17, 4.18
    http://bclary.com/2004/11/07/#a-4.3.16
    you will see that difference *very* carefully and well spelled out.

    It's worth following the link to http://bclary.com/2004/11/07/#a-15.5.1

    You might also read http://bclary.com/2004/11/07/#a-7.8

    Unfortunately, the ECMAScript docs don't use the term "auto-box", but you can easily read between the lines to see that indeed ECMAScript (aka JavaScript) does this. See especially
    http://bclary.com/2004/11/07/#a-9
    and
    http://bclary.com/2004/11/07/#a-9.9

    In other words, when JS sees the notation
    Code:
        .substring(...)
    it knows that an Object is required. It looks at what is to the left of the period and sees that the literal string (which is a string value) is not an Object, so it applies 9.9 and creates an Object from the string value. And, as 9.9 says, it creates a String object.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Quote Originally Posted by DaveyErwin View Post
    Im glad you mentioned that because i need your advice
    Maybe you can help me ouy
    Can you see the problem ?
    One poster claims null is mot an object
    and the other uses null in a context
    that makes me believe he thinks null
    is an object.Now the advice i need from
    you is which of these posters am i to
    rely on.



    Quote Originally Posted by Old Pedant View Post
    Have you heard of "auto-boxing"?

    When a primitive value is used in a context where an object is needed, many languages will *automatically* "auto-box" the value to convert to a standard object.

    When you code
    Code:
        "abcdef".substring(1,3)
    ECMAScript calls for the automatic "boxing" (conversion) of the string value to a String object. NOTICE CAREFULLY the difference in spelling there: string vs. String.

    If you will go look at the ECMAScript documentation, sections 4.16, 4.17, 4.18
    http://bclary.com/2004/11/07/#a-4.3.16
    you will see that difference *very* carefully and well spelled out.

    It's worth following the link to http://bclary.com/2004/11/07/#a-15.5.1

    You might also read http://bclary.com/2004/11/07/#a-7.8

    Unfortunately, the ECMAScript docs don't use the term "auto-box", but you can easily read between the lines to see that indeed ECMAScript (aka JavaScript) does this. See especially
    http://bclary.com/2004/11/07/#a-9
    and
    http://bclary.com/2004/11/07/#a-9.9

    In other words, when JS sees the notation
    Code:
        .substring(...)
    it knows that an Object is required. It looks at what is to the left of the period and sees that the literal string (which is a string value) is not an Object, so it applies 9.9 and creates an Object from the string value. And, as 9.9 says, it creates a String object.
    Well that certainly sheds a new light
    on my ubderstanding of these posters
    Thank you for going the extra mile
    But you are seriously off topic in this thread !


  •  

    Posting Permissions

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