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> Code (markup): As you see I put only one textarea id/name in the submit javascript.
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 Code (javascript): 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 Code (javascript): 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 Code (javascript): take care
<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> Code (markup): Now it gives a blank page. Not even the Html tags are in it.
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); } Code (markup): <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> Code (markup): And it still gives a blank page after I type a word in the 1st textarea. Maybe "value" is not right.
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> HTML: 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; } Code (javascript): now when you click the button it will write the content of txtareao_0 inside that div hope this helps
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> Code (markup): I'm stuck on this: if(a!=5||document.getElementById('txtarea_'+[a+1]).value!==0){ contentdiv.innerHTML += " + "; } Code (markup): I want the " + " only if the following textarea has content.
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!=""
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> Code (markup):