function in submit button

[gilgalbiblewheel]

Can someone tell me what's wrong that the submit button doesn't execute properly?
<div style="border: 1px solid rgb(181, 162, 111); margin: 5px 5px 5px 0px; float: left; overflow-y: scroll; overflow-x: hidden; width: 200px; height: 500px; background-color: rgb(210, 197, 160); z-index: 3;">
<span style="margin: 5px; float: left; text-align: left; display: block; color: rgb(255, 255, 255); font-weight: bold; font-size: 12px;">Use "<span style="font-weight: bold; color: red;">,,</span>" to separate words and phrases.</span><br>
<span style="text-align: center;">
<input name="Submit" value="Submit" onclick="document.write(document.getElementsByName('txtar0').innerHtml);" style="border-color: rgb(152, 169, 169); margin: 5px; float: left; background-color: rgb(76, 84, 84); color: rgb(255, 255, 255); font-weight: bold; font-size: 12px;" type="button">
<input value=" Clear the words " onclick="clearWords();" style="border-color: rgb(152, 169, 169); margin: 5px; float: left; background-color: rgb(76, 84, 84); color: rgb(255, 255, 255); font-weight: bold; font-size: 12px;" type="reset"></span><br>
<textarea id="txtarea_0" rows="6" cols="20" name="txtar0" style="margin: 5px; padding: 0px 5px; float: left; width: 190px; height: 100px; color: rgb(255, 0, 0); font-weight: bold;"></textarea>
<textarea id="txtarea_1" rows="6" cols="20" name="txtar1" style="margin: 5px; padding: 0px 5px; float: left; width: 190px; height: 100px; color: rgb(0, 0, 255); font-weight: bold;"></textarea>
<textarea id="txtarea_2" rows="6" cols="20" name="txtar2" style="margin: 5px; padding: 0px 5px; float: left; width: 190px; height: 100px; color: rgb(0, 153, 0); font-weight: bold;"></textarea>
<textarea id="txtarea_3" rows="6" cols="20" name="txtar3" style="margin: 5px; padding: 0px 5px; float: left; width: 190px; height: 100px; color: rgb(255, 153, 0); font-weight: bold;"></textarea>

<textarea id="txtarea_4" rows="6" cols="20" name="txtar4" style="margin: 5px; padding: 0px 5px; float: left; width: 190px; height: 100px; color: rgb(102, 0, 153); font-weight: bold;"></textarea>
<textarea id="txtarea_5" rows="6" cols="20" name="txtar5" style="margin: 5px; padding: 0px 5px; float: left; width: 190px; height: 100px; color: rgb(0, 255, 255); font-weight: bold;"></textarea>
</div>
As you see I put only one textarea id/name in the submit javascript.

[gnp]

Hmm ...

where to begin ..

About the button
for the submit button to function properly, it must be of type="submit", and also must be part of a form which will get submitted..

About the script on the button
source: http://javascript.about.com/library/blwrite.htm
the next thing to concern yourself with is that document.write statements must be run before the page finishes loading. This means that they must be either in the body of the page or in functions called from the body of the page
and
Any document.write statement that runs after the page finishes loading will create a new page and overwrite all of the content of the current page.
and
So you can only use document.write at best to write the original content of your page. It cannot be used to update the content of your page after that page has loaded.

Additionally, you run the command
document.getElementsByName('txtar0').innerHtml

but the getElementsByName does not return a reference to an object.
It returns a collection of elements that have the specified name.
So in order to access one you must call it by its index value in the collection.
On the same note, properties in javascript are case sensitive so the innerHtml is wrong. Should be innerHTML
document.getElementsByName('txtar0').item(0).innerHTML would be the correct way to call it
but since you have unique names for your elements and also IDs you could directly call them by id
document.getElementById('txtarea_0').innerHTML

take care

[gilgalbiblewheel]

Hmm ...

where to begin ..

About the button
for the submit button to function properly, it must be of type="submit", and also must be part of a form which will get submitted..

About the script on the button
source: http://javascript.about.com/library/blwrite.htm

and

and


Additionally, you run the command
document.getElementsByName('txtar0').innerHtml

but the getElementsByName does not return a reference to an object.
It returns a collection of elements that have the specified name.
So in order to access one you must call it by its index value in the collection.
On the same note, properties in javascript are case sensitive so the innerHtml is wrong. Should be innerHTML
document.getElementsByName('txtar0').item(0).innerHTML would be the correct way to call it
but since you have unique names for your elements and also IDs you could directly call them by id
document.getElementById('txtarea_0').innerHTML

take care

Wow! Thanks. I'm going to try it out tomorrow and see what I'll come up with.

[gilgalbiblewheel]

document.getElementById('txtarea_0').innerHTML



<div style="border: 1px solid rgb(181, 162, 111); margin: 5px 5px 5px 0px; float: left; overflow-y: scroll; overflow-x: hidden; width: 200px; height: 500px; background-color: rgb(210, 197, 160); z-index: 3;">
<span style="margin: 5px; float: left; text-align: left; display: block; color: rgb(255, 255, 255); font-weight: bold; font-size: 12px;">Use "<span style="font-weight: bold; color: red;">,,</span>" to separate words and phrases.</span><br>
<span style="text-align: center;">
<input name="Submit" value="Submit" onclick="document.write(document.getElementById('txtarea_0').innerHTML);" style="border-color: rgb(152, 169, 169); margin: 5px; float: left; background-color: rgb(76, 84, 84); color: rgb(255, 255, 255); font-weight: bold; font-size: 12px;" type="button">
<input value=" Clear the words " onclick="clearWords();" style="border-color: rgb(152, 169, 169); margin: 5px; float: left; background-color: rgb(76, 84, 84); color: rgb(255, 255, 255); font-weight: bold; font-size: 12px;" type="reset"></span><br>
<textarea id="txtarea_0" rows="6" cols="20" name="txtar0" style="margin: 5px; padding: 0px 5px; float: left; width: 190px; height: 100px; color: rgb(255, 0, 0); font-weight: bold;"></textarea>
<textarea id="txtarea_1" rows="6" cols="20" name="txtar1" style="margin: 5px; padding: 0px 5px; float: left; width: 190px; height: 100px; color: rgb(0, 0, 255); font-weight: bold;"></textarea>
<textarea id="txtarea_2" rows="6" cols="20" name="txtar2" style="margin: 5px; padding: 0px 5px; float: left; width: 190px; height: 100px; color: rgb(0, 153, 0); font-weight: bold;"></textarea>
<textarea id="txtarea_3" rows="6" cols="20" name="txtar3" style="margin: 5px; padding: 0px 5px; float: left; width: 190px; height: 100px; color: rgb(255, 153, 0); font-weight: bold;"></textarea>

<textarea id="txtarea_4" rows="6" cols="20" name="txtar4" style="margin: 5px; padding: 0px 5px; float: left; width: 190px; height: 100px; color: rgb(102, 0, 153); font-weight: bold;"></textarea>
<textarea id="txtarea_5" rows="6" cols="20" name="txtar5" style="margin: 5px; padding: 0px 5px; float: left; width: 190px; height: 100px; color: rgb(0, 255, 255); font-weight: bold;"></textarea>
</div>

Now it gives a blank page. Not even the Html tags are in it.

[gnp]

I merely provided of the correct way to call the functions..

Please let me know what you are trying to accomplish, and i can help you more..

So you have 6 textareas with IDs and names.
A reset button which on click runs the clearWords() function (where is this ?)
and a submit button that tries to write to the document the contents of the txtarea_0.
correct ?
I mentioned in my post that you cannot just write in the document, your can however write inside an element in the document..

so.. where do you want to write the contents of txtarea_0 ?

[gilgalbiblewheel]

I merely provided of the correct way to call the functions..

Please let me know what you are trying to accomplish, and i can help you more..

So you have 6 textareas with IDs and names.
A reset button which on click runs the clearWords() function (where is this ?)
and a submit button that tries to write to the document the contents of the txtarea_0.
correct ?
I mentioned in my post that you cannot just write in the document, your can however write inside an element in the document..

so.. where do you want to write the contents of txtarea_0 ?

Ok I even changed it and put the function in an external js file:
function testing(){
document.write(document.getElementById('txtarea_0').value);
}
<div style="border: 1px solid rgb(181, 162, 111); margin: 5px 5px 5px 0px; float: left; overflow-y: scroll; overflow-x: hidden; width: 200px; height: 500px; background-color: rgb(210, 197, 160); z-index: 3;">
<span style="margin: 5px; float: left; text-align: left; display: block; color: rgb(255, 255, 255); font-weight: bold; font-size: 12px;">Use "<span style="font-weight: bold; color: red;">,,</span>" to separate words and phrases.</span><br>
<span style="text-align: center;">
<input name="Submit" value="Submit" onclick="testing();" style="border-color: rgb(152, 169, 169); margin: 5px; float: left; background-color: rgb(76, 84, 84); color: rgb(255, 255, 255); font-weight: bold; font-size: 12px;" type="button">
<input value=" Clear the words " onclick="clearWords();" style="border-color: rgb(152, 169, 169); margin: 5px; float: left; background-color: rgb(76, 84, 84); color: rgb(255, 255, 255); font-weight: bold; font-size: 12px;" type="reset"></span><br>
<textarea id="txtarea_0" rows="6" cols="20" name="txtar0" style="margin: 5px; padding: 0px 5px; float: left; width: 190px; height: 100px; color: rgb(255, 0, 0); font-weight: bold;"></textarea>
<textarea id="txtarea_1" rows="6" cols="20" name="txtar1" style="margin: 5px; padding: 0px 5px; float: left; width: 190px; height: 100px; color: rgb(0, 0, 255); font-weight: bold;"></textarea>
<textarea id="txtarea_2" rows="6" cols="20" name="txtar2" style="margin: 5px; padding: 0px 5px; float: left; width: 190px; height: 100px; color: rgb(0, 153, 0); font-weight: bold;"></textarea>
<textarea id="txtarea_3" rows="6" cols="20" name="txtar3" style="margin: 5px; padding: 0px 5px; float: left; width: 190px; height: 100px; color: rgb(255, 153, 0); font-weight: bold;"></textarea>

<textarea id="txtarea_4" rows="6" cols="20" name="txtar4" style="margin: 5px; padding: 0px 5px; float: left; width: 190px; height: 100px; color: rgb(102, 0, 153); font-weight: bold;"></textarea>
<textarea id="txtarea_5" rows="6" cols="20" name="txtar5" style="margin: 5px; padding: 0px 5px; float: left; width: 190px; height: 100px; color: rgb(0, 255, 255); font-weight: bold;"></textarea>
</div>
And it still gives a blank page after I type a word in the 1st textarea. Maybe "value" is not right.

[gnp]

what i mean when i say you cannot write to the document after the page has loaded i mean that the command
document.write(...) will fail if it called after the page has loaded..

I still do not know what you are trying to do but i will give a some code that will display the contents of that textarea so you have no doubts that its value is retrieved..


<div style="border: 1px solid rgb(181, 162, 111); margin: 5px 5px 5px 0px; float: left; overflow-y: scroll; overflow-x: hidden; width: 200px; height: 500px; background-color: rgb(210, 197, 160); z-index: 3;">
<span style="margin: 5px; float: left; text-align: left; display: block; color: rgb(255, 255, 255); font-weight: bold; font-size: 12px;">Use "<span style="font-weight: bold; color: red;">,,</span>" to separate words and phrases.</span><br>
<span style="text-align: center;">
<input name="Submit" value="Submit" onclick="testing();" style="border-color: rgb(152, 169, 169); margin: 5px; float: left; background-color: rgb(76, 84, 84); color: rgb(255, 255, 255); font-weight: bold; font-size: 12px;" type="button">
<input value=" Clear the words " onclick="clearWords();" style="border-color: rgb(152, 169, 169); margin: 5px; float: left; background-color: rgb(76, 84, 84); color: rgb(255, 255, 255); font-weight: bold; font-size: 12px;" type="reset"></span><br>
<textarea id="txtarea_0" rows="6" cols="20" name="txtar0" style="margin: 5px; padding: 0px 5px; float: left; width: 190px; height: 100px; color: rgb(255, 0, 0); font-weight: bold;"></textarea>
<textarea id="txtarea_1" rows="6" cols="20" name="txtar1" style="margin: 5px; padding: 0px 5px; float: left; width: 190px; height: 100px; color: rgb(0, 0, 255); font-weight: bold;"></textarea>
<textarea id="txtarea_2" rows="6" cols="20" name="txtar2" style="margin: 5px; padding: 0px 5px; float: left; width: 190px; height: 100px; color: rgb(0, 153, 0); font-weight: bold;"></textarea>
<textarea id="txtarea_3" rows="6" cols="20" name="txtar3" style="margin: 5px; padding: 0px 5px; float: left; width: 190px; height: 100px; color: rgb(255, 153, 0); font-weight: bold;"></textarea>

<textarea id="txtarea_4" rows="6" cols="20" name="txtar4" style="margin: 5px; padding: 0px 5px; float: left; width: 190px; height: 100px; color: rgb(102, 0, 153); font-weight: bold;"></textarea>
<textarea id="txtarea_5" rows="6" cols="20" name="txtar5" style="margin: 5px; padding: 0px 5px; float: left; width: 190px; height: 100px; color: rgb(0, 255, 255); font-weight: bold;"></textarea>
</div>
<div id="displaycontent"></div>

here i just added the last div with id = displaycontent

and some also changes in the script

function testing(){
var contentdiv = document.getElementById('displaycontent');
contentdiv.innerHTML = document.getElementById('txtarea_0').value;
}

now when you click the button it will write the content of txtareao_0 inside that div

hope this helps

[gilgalbiblewheel]

Ok. I'm building from the code you gave me:
<script language="javascript1.6">
function testing(){
var color = new Array();
color[0] = "red";
color[1] = "blue";
color[2] = "green";
color[3] = "orange";
color[4] = "purple";
color[5] = "aqua";

var contentdiv = document.getElementById('displaycontent');
contentdiv.innerHTML = "";
for(a=0; a<6; a++){
var key = document.getElementById('txtarea_'+[a]);
if(key.value!=0){
contentdiv.innerHTML += "<span style=\"color: " + color[a] + "; font-weight: bold;\">" + document.getElementById('txtarea_'+[a]).value + "</span>";
if(a!=5||document.getElementById('txtarea_'+[a+1]).value!==0){
contentdiv.innerHTML += " + ";
}
}
}
var urlExtension = document.getElementById('displayurl');
urlExtension.innerHTML = "";
for(a=0; a<6; a++){
urlExtension.innerHTML += "&txtarea" + [a] + "=" + document.getElementById('txtarea_'+[a]).value;
}
}
</script>

I'm stuck on this:
if(a!=5||document.getElementById('txtarea_'+[a+1]).value!==0){
contentdiv.innerHTML += " + ";
}
I want the " + " only if the following textarea has content.

[gnp]

you have an error in your check in there

change the !== to !=

additionally

change
document.getElementById('txtarea_'+[a+1]).value!==0
to
document.getElementById('txtarea_'+[a+1]).value!= ""

and
key.value!=0
to
key.value!=""

[gilgalbiblewheel]

document.getElementById('txtarea_'+[a+1]).value!= ""


This is still showing error:

Error: document.getElementById("txtarea_" + [a + 1]) is null
Source File: http...new/twotexts/textareasample.php
Line: 22

[gilgalbiblewheel]

Ok. I changed the sequence and now it works:
<script language="javascript1.6">
function testing(){
var color = new Array();
color[0] = "red";
color[1] = "blue";
color[2] = "green";
color[3] = "orange";
color[4] = "purple";
color[5] = "aqua";

var contentdiv = document.getElementById('displaycontent');
contentdiv.innerHTML = "";
for(a=0; a<6; a++){
var key = document.getElementById('txtarea_'+[a]);
if(key.value!=0){
if(a!=0){
contentdiv.innerHTML += " + ";
}
contentdiv.innerHTML += "<span style=\"color: " + color[a] + "; font-weight: bold;\">" + document.getElementById('txtarea_'+[a]).value + "</span>";
}
}
var urlExtension = document.getElementById('displayurl');
urlExtension.innerHTML = "";
for(a=0; a<6; a++){
if(document.getElementById('txtarea_'+[a]).value!= ""){
urlExtension.innerHTML += "&txtarea" + [a] + "=";
}
urlExtension.innerHTML += document.getElementById('txtarea_'+[a]).value;
}
}
</script>