I am currently using the following script in my page.
<form action="" method="get">
<div>
<label><input type="checkbox" onclick="updateArea(this)">How many previous owners has this car had? </label>
<label><input type="checkbox" onclick="updateArea(this)">When is the next service and MOT due? </label>
<label><input type="checkbox" onclick="updateArea(this)">Is the car still for sale? </label>
<label><input type="checkbox" onclick="updateArea(this)">Can I arrange a viewing or test drive? </label>
<label><input type="checkbox" onclick="updateArea(this)">Do you do part exchange? </label>
<label><input type="checkbox" onclick="updateArea(this)">Do you have any additional pictures? </label>
<label><input type="checkbox" onclick="updateArea(this)">Has this car got a full service history? </label>
<label><input type="checkbox" onclick="updateArea(this)">Do you offer finance? </label>
<label><input type="checkbox" onclick="updateArea(this)">Do you offer warranty? </label>
<label><input type="checkbox" onclick="updateArea(this)">What's the lowest cash price you'd offer? </label>
<script type="text/javascript">
<!--
document.write('<textarea rows="10" id="area" name="textname" cols="54"></textarea>')
function updateArea (e) {
document.getElementById('area').value = '';
for (var i=0; i<e.form.elements.length; i++){if (e.form.elements[i].type == 'checkbox' && e.form.elements[i].checked) {document.getElementById('area').value += e.form.elements[i].nextSibling.data; document.getElementById('area').value += '';}};
}
// -->
</script>
<input type="submit">Submit</button>
</div>
</form>
It basically allows the user to select a checkbox which then passes the values of the checkbox into a text box.
The script works just fine but I need there to be a default value in the textarea and then if the user selects a checkbox then the values are added after. i have tried this…
document.write('<textarea rows="10" id="area" name="textname" cols="54">Some text here</textarea>')
and although “Some text here” does initially appear, it disappears when a checkbox is selected. Ideally, it would not disappear.
Is this possible? If so, how would I achieve this? Any help would be fully appreciated
should form part of the form and not be written in to the page, if you want to set a default text in the text area then set it in HTML if the text needs to remain static to start with, via JavaScript or written in using PHP if you need to have the texts changed.
document.write is as dead as Netscape 4. All browsers more modern than that provide better ways to interact with the HTML that can run after the page finishes loading.
Move the JavaScript to just before the </body> tag and hard code the content of the document.write where you want it to appear.
<script type="text/javascript">
<!--
function updateArea (e) {
document.getElementById('area').value = '';
for (var i=0; i<e.form.elements.length; i++){if (e.form.elements[i].type == 'checkbox' && e.form.elements[i].checked) {document.getElementById('area').value += e.form.elements[i].nextSibling.data; document.getElementById('area').value += '';}};
}
// -->
</script>
<form action="" method="get">
<div>
<label><input type="checkbox" onclick="updateArea(this)">How many previous owners has this car had? </label>
<label><input type="checkbox" onclick="updateArea(this)">When is the next service and MOT due? </label>
<label><input type="checkbox" onclick="updateArea(this)">Is the car still for sale? </label>
<label><input type="checkbox" onclick="updateArea(this)">Can I arrange a viewing or test drive? </label>
<label><input type="checkbox" onclick="updateArea(this)">Do you do part exchange? </label>
<label><input type="checkbox" onclick="updateArea(this)">Do you have any additonal pictures? </label>
<label><input type="checkbox" onclick="updateArea(this)">Has this car got a full service history? </label>
<label><input type="checkbox" onclick="updateArea(this)">Do you offer finance? </label>
<label><input type="checkbox" onclick="updateArea(this)">Do you offer warranty? </label>
<label><input type="checkbox" onclick="updateArea(this)">What's the lowest cash price you'd offer? </label>
<textarea rows="10" id="area" name="textname" cols="54">Some text here</textarea>
<input type="submit">Submit
</div>
</form>
However, it still does not work. As soon as I select a checkbox the “Some text here” text disappears.
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<head>
<title>Your Web Page Title</title>
</head>
<body onload="document.getElementById('area').value = tarea;">
<form action="" method="get" onsubmit="return false"> <!-- change onsubmit= if form goes to server -->
<div id="qlist"></div><p>
<textarea rows="10" id="area" name="textname" cols="54">
Some default value
</textarea>
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
//set default value of the text area at page load
var tarea = "Some default value\
";
var qList = [
"How many previous owners has this car had?",
"When is the next service and MOT due?",
"Is the car still for sale?",
"Can I arrange a viewing or test drive?",
"Do you do part exchange?",
"Do you have any additional pictures?",
"Has this car got a full service history?",
"Do you offer finance?",
"Do you offer warranty?",
"What's the lowest cash price you'd offer?",
];
function updateArea (e) {
var str = tarea;
var sel = document.getElementById('qlist').getElementsByTagName('input');
for (var i=0; i<sel.length; i++) {
if (sel[i].checked) { str += qList[i]+'\
'; }
} document.getElementById('area').value = str;
}
window.onload = function() {
var str = '';
for (var i=0; i<qList.length; i++) {
str += '<label><input type="checkbox" onclick="updateArea(this)">'+qList[i]+'</label><br/>';
} document.getElementById('qlist').innerHTML = str;
}
</script>
</body>
</html>
However, I do have one other issue that I didn’t see coming.
At the moment if the user selects a checkbox the value of that checkbox is added to the textarea, which is fine. However, if the user then manually ads a sentence to the text area and then goes on to check another checkbox then the sentence they manually added disappears.
Basically, I need the user to be able to add their own free text to the textarea without it disappearing if a checkbox is selected. The value of the checkbox should simply be added after.
You need to combine the two so that they don’t get in each other’s way like this.
Remove the handler from the body tag then rewrite the window.onload handler
The quickest way to solve the manual entry of items into the text area is to make it readonly. This way nobody can enter anything and your script works as it is. You do this like this:
If you want manual entry, create another text box and ask them to put it in there. Then you can check if it is populated and add it to the list before submitting the form.
I notice that when the form is submitted it sends carriage return and linefeed characters because you are using "
" within your strings. You might want to consider whether you need to remove these before submitting the form.
