...

View Full Version : Noob question: Write to textarea



bigge111
09-03-2010, 09:09 PM
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>

DaveyErwin
09-03-2010, 09:16 PM
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[0].onsubmit
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>

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

Old Pedant
09-03-2010, 09:18 PM
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"

Old Pedant
09-03-2010, 09:21 PM
From Davey:

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".

bigge111
09-03-2010, 09:26 PM
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!

Old Pedant
09-03-2010, 09:26 PM
A slightly cleaner way to code the whole thing:


<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.

Old Pedant
09-03-2010, 09:30 PM
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:


<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.

bigge111
09-03-2010, 09:32 PM
Thanks again! These things are hard to learn from just reading tutorials, it's very valuable to me :)

Old Pedant
09-03-2010, 09:54 PM
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

<script type="text/javascript">
function calculon( button )
{
button.form.test.value = button.value;
}
</script>

To


<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.

DaveyErwin
09-03-2010, 10:03 PM
I'm a total noob who decided to learn som web programming, I hope it's okey to post such questions here.


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.

Old Pedant
09-03-2010, 10:25 PM
Agree with Davey! You might even learn what types are not objects in Javascript. <snicker/>

DaveyErwin
09-03-2010, 11:04 PM
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


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



except null and undefined






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.







I'm not continuing this thread.

Old Pedant
09-03-2010, 11:53 PM
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

"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

.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.

DaveyErwin
09-04-2010, 01:30 AM
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.





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

"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

.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 !



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum