Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations wOOdy-Soft on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

adding text to textbox with checkbox 2

Status
Not open for further replies.
schase

schase

Technical User
Sep 7, 2001
1,756
US
Hi all,

Please beware my javascript abilities are next to none.

I have a form, that the text box - txtDescription - may have a default value in it or not.

Then 4 or 5 checkbox's with different values.

I would like the value of the textbox be placed into the text area - added onto the default value when checked(and hopefully removed if unchecked) .

For example
Code: 
<textarea name="txtDescription" cols="42" rows="10" class="inputbox">Some default stuff here</textarea>
And if they check say the top two checkboxes.
Code: 
<input type="checkbox" name="txtCK1" value="L/M">L/M<br>
<input type="checkbox" name="txtCK2" value="Talked with family">T w/ Family <br>
<input type="checkbox" name="txtCK3" value="Talked with parents">T w/ Parents <br>

After checking the top two checkbox's - the text area would now show

Some default stuff here L/M Talked with family


any idea how to go about this?

Thank you

"Never underestimate the power of determination"

Stuart
Net+
 
Sort by date Sort by votes

This should do everything you've asked:

Code: 
<html>
<head>
	<script type="text/javascript">
	<!--
		var savedBoxValue = '';
		function updateSavedBoxValue() {
			savedBoxValue = document.forms[0].txtDescription.value;
		}

		function checkboxClicked(checkBoxObj) {
			document.forms[0].txtDescription.value = savedBoxValue;
			var inputs = document.forms[0].getElementsByTagName('input');
			for (var loop=0; loop<inputs.length; loop++) {
				if (inputs[loop].type.toLowerCase() == 'checkbox') {
					if (inputs[loop].checked) document.forms[0].txtDescription.value += ' ' + inputs[loop].value;
				}
			}
		}
	//-->
	</script>
</head>
<body onload="updateSavedBoxValue();">
	<form>
		<textarea name="txtDescription" cols="42" rows="10" class="inputbox" onchange="updateSavedBoxValue();">Some default stuff here</textarea>
		<br /><input type="checkbox" name="txtCK1" value="L/M" onclick="checkboxClicked();">L/M
		<br /><input type="checkbox" name="txtCK2" value="Talked with family" onclick="checkboxClicked();">T w/ Family
		<br /><input type="checkbox" name="txtCK3" value="Talked with parents" onclick="checkboxClicked();">T w/ Parents
	</form>
</body>
</html>

This is how it works... When the document loads, I save a copy of whatever is in the textarea. I update this saved copy whenever the user changes the content of the textarea.

When any of the checkboxes are clicked, the textarea text is reset to the saved value, and then all checkboxes are 'scanned', in source order. If they are checked, their text is appended to the textarea text.

The only way that I can see to cause a problem (and it's not really a big deal) is if one of the checkboxes is checked (and thus its text is appended to the textarea), and the user modifies the text in the textarea.

At that point, the onchange event kicks in, and the checkbox text becomes part of the textarea "default" text from then on. But hey - you can't have it all ;o)

Hope this helps,
Dan
 
Upvote 0 Downvote
Thank you for your reply.

No errors at all, but for some reason it does not add the checkbox values to the text area at all.

Here is the form elements with the text area and checkboxes. Not sure what is not working.

Code: 
        <div align="center"> 
          <textarea name="txtDescription" cols="42" rows="10" class="inputbox" onchange="updateSavedBoxValue();"></textarea>
        </div>
      </td>
      <td valign="top" width="100"> <span class="bodytextbold">AND </span> <br>
        <input type="checkbox" name="txtCK1" value="L/M" onclick="checkboxClicked();">
        <span class="foldertabtext">L/M<br>
        <input type="checkbox" name="txtCK2" value="Talked with family" onclick="checkboxClicked();">
        T w/ Family <br>
        <input type="checkbox" name="txtCK3" value="Talked with parents" onclick="checkboxClicked();">
        T w/ Parents <br>
        <input type="checkbox" name="txtCK4" value="Talked with spouse" onclick="checkboxClicked();">
        T w/ Spouse </span> </td>

"Never underestimate the power of determination"

Stuart
Net+
 
Upvote 0 Downvote

>> No errors at all, but for some reason it does not add the checkbox values to the text area at all.

Is it my code that didn't work, of your interpretation of my code that didn't work? The code you've posted above is not what I posted.

I suggest you try my code as-is, without any changes... If that works, then assume you've made an error while implementing it.

If that is the case, then please post your complete source, rather than just a portion of it. I cannot see if you've correctly copied all the JS, or implemented the body onload tag as directed.

Dan
 
Upvote 0 Downvote
Thank you for your reply.

The code i posted is the same as you posted with the exception of the <br /> which is out of the input tag fields. Unless I keep overlooking something - I do not see any difference in code.

I have in the header tag

Code: 
<script type="text/javascript">
    <!--
        var savedBoxValue = '';
        function updateSavedBoxValue() {
            savedBoxValue = document.forms[0].txtDescription.value;
        }

        function checkboxClicked(checkBoxObj) {
            document.forms[0].txtDescription.value = savedBoxValue;
            var inputs = document.forms[0].getElementsByTagName('input');
            for (var loop=0; loop<inputs.length; loop++) {
                if (inputs[loop].type.toLowerCase() == 'checkbox') {
                    if (inputs[loop].checked) document.forms[0].txtDescription.value += ' ' + inputs[loop].value;
                }
            }
        }
    //-->
    </script>

The body onload

Code: 
<body bgcolor="#EAEDEE" text="#000000" leftmargin="0" topmargin="0" onLoad="updateSavedBoxValue();"

And the top portion to my form - anything under this is other form fields - no other checkboxes at all.

Code: 
<form name="form1" method="post" action="lead_history_detail.asp">
<%
strStatus=request("txtStatus")
%>
<%
'response.write request.querystring("txtHistoryType")
Response.Write "<input type=Hidden name=txtGo value=1>"
Response.Write "<input type=Hidden name=txtLeadID value=" & strLeadID & ">"
Response.Write "<input type=Hidden name=txtHistoryID value=" & strHistoryID & ">"
Response.Write "<input type=Hidden name=txtStatus value=" & strStatus & ">"
%>
  <table width="380" border="0" bgcolor="#EAEDEE" bordercolor="#EAEDEE" cellpadding="0" cellspacing="0" align="center">
    <tr> 
      <td colspan="3"> 
        <div align="center" class="columnheaderblack">Lead History Update</div>
      </td>
    </tr>
    <tr> 
      <td colspan="3"> 
        <div align="center" class="bodytextbold">Description of contact just completed</div>
      </td>
    </tr>
    <tr> 
      <td colspan="2"> 
        <div align="center"> 
          <textarea name="txtDescription" cols="42" rows="10" class="inputbox" onchange="updateSavedBoxValue();"></textarea>
        </div>
      </td>
      <td valign="top" width="100"> <span class="bodytextbold">AND </span> <br>
        <input type="checkbox" name="txtCK1" value="L/M" onclick="checkboxClicked();">
        <span class="foldertabtext">L/M<br>
        <input type="checkbox" name="txtCK2" value="Talked with family" onclick="checkboxClicked();">
        T w/ Family <br>
        <input type="checkbox" name="txtCK3" value="Talked with parents" onclick="checkboxClicked();">
        T w/ Parents <br>
        <input type="checkbox" name="txtCK4" value="Talked with spouse" onclick="checkboxClicked();">
        T w/ Spouse </span> </td>
    </tr>

"Never underestimate the power of determination"

Stuart
Net+
 
Upvote 0 Downvote

Is the form on yourpage the first one, or do you have more than one form? If you have more than one form, you might need to change "document.forms[0]" to be [1], [2], etc, depending on which form number it is. Either that, or reference it by name using document.forms['formName']

Dan
 
Upvote 0 Downvote
ahhh lemme try that

"Never underestimate the power of determination"

Stuart
Net+
 
Upvote 0 Downvote
hmmm, ok well i tried both and ended up with

document.forms['form1']trying various numbers gave me errors every time - about not found or not an object.

This is my header code -
Code: 
    <script type="text/javascript">
    <!--
        var savedBoxValue = '';
        function updateSavedBoxValue() {
            savedBoxValue = document.forms['form1'].txtDescription.value;
        }

        function checkboxClicked(checkBoxObj) {
            document.forms['form1'].txtDescription.value = savedBoxValue;
            var inputs = document.forms['form1'].getElementsByTagName('input');
            for (var loop=0; loop<inputs.length; loop++) {
                if (inputs[loop].type.toLowerCase() == 'checkbox') {
                    if (inputs[loop].checked) document.forms['form1'].txtDescription.value += ' ' + inputs[loop].value;
                }
            }
        }
    //-->
    </script>

No errors - but it still isnt adding the checkbox values.

Is there any way to write the steps out to the screen?

"Never underestimate the power of determination"

Stuart
Net+
 
Upvote 0 Downvote

You still haven't said if the code I posted worked for you or not - if it didn't then something is wrong outside of your code.

If my code did work for you, then you'll have to post your complete page, not just the header code - or better still, a URL to it.

Dan
 
Upvote 0 Downvote
I said it was still not passing the values. Your code has not worked yet. Have you tried this code on a page there?

One thing I havnt tried is isolating your code - I should have, but havnt seen any conflicts yet. I'll give that a shot.

URL won't work, I've protected it behind a few layers.

"Never underestimate the power of determination"

Stuart
Net+
 
Upvote 0 Downvote
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<form name=form1>
<textarea name="txtDescription" cols="42" rows="10" class="inputbox">Some default stuff here</textarea>
<br>
<input type="checkbox" name="txtCK1" value="L/M">L/M<br>
<input type="checkbox" name="txtCK2" value="Talked with family">T w/ Family <br>
<input type="checkbox" name="txtCK3" value="Talked with parents">T w/ Parents <br>
</form>
<SCRIPT LANGUAGE="JavaScript">
<!--
var coll =document.form1.tags("INPUT");
for (i=0; i<coll.length; i++)
{
if(coll.item(i).type=="checkbox")coll.item(i).onclick=f1;
}
function f1()
{
var temString="";
for (i=0; i<coll.length; i++)
{
if(coll.item(i).type=="checkbox")
if(coll.item(i).checked)temString+=coll.item(i).value+" ";
}
//alert(temString);
form1.txtDescription.value=temString
}
//-->
</SCRIPT>
</BODY>
</HTML>
 
Upvote 0 Downvote

>> Your code has not worked yet.
>> One thing I havnt tried is isolating your code

Then please have the decency to do so. At the very leat, when someone gives some code for you to try, you could try it as-is, before complaining that it doesn't work.

For the record, I've retried my code.. And it works 100% in IE (6) and FireFox 0.8, so most likely it will sork in most browsers. Here's what I did:

- I copied the code that I posted (my first reply in this thread) into an editor. I did not modify the source in any way whatsoever.

I saved it as "tt_test.html"

I loaded "tt_test.html" in to a browser, and it worked just fine.

Given that it works for me as described in both IE and FireFox, I can only imaging that you've made some error while implementing the code, or your browser doesn't like something. What browser are you testing in it?

Hope this helps,
Dan


 
Upvote 0 Downvote
Tested your form - and it worked perfect as you mentioned. After restructuring my form a few times. I found a hidden field that was duplicating the txtDescription form field - causing a conflict. I overlooked it a dozen times. Thank you for your help on this.

Thank you

"Never underestimate the power of determination"

Stuart
Net+
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
796
lexer
lexer
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
916
xwb
xwb
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
681
Rayj0000
Rayj0000
lexer
  • Locked
  • Question
Adding datepicker calendar dynamically
Replies
0
Views
335
lexer
lexer

Part and Inventory Search

Sponsor

Back
Top