printing text from checkbox to text field

krazykrisi · #1 01-30-2010, 01:31 AM

I'm trying to make it so when the user checks a checkbox, the value for the checkbox will be entered into the text field.

Here is my code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" language="javascript">
<!--
function validate() {
	var month = "";
	var day = "";
	var feed = "";
	
	for (i=0;i<=12;i++) && (j=0;j<=31;j++) {
		month = document.test['month'+i].value;
		day = document.test['day'+j].value;
		document.test.feedback.value = month[i] && day[j];
		}
	}
//-->
</script>
</head>

<body>
<form action="mailto:krazykrisi@hotmail.com" method="post" name="test"  onsubmit="return validate();"><br />
<br />
<input type="checkbox" name="month1" value="January" /> January<br />
<input type="checkbox" name="month2" value="February" /> February<br />
<input type="checkbox" name="month3" value="March" /> March<br />
<input type="checkbox" name="month4" value="April" /> April<br />
<input type="checkbox" name="month5" value="May" /> May<br />
<input type="checkbox" name="month6" value="June" /> June<br />
<input type="checkbox" name="month7" value="July" /> July<br />
<input type="checkbox" name="month8" value="August" /> August<br />
<input type="checkbox" name="month9" value="September" /> September<br />
<input type="checkbox" name="month10" value="October" /> October<br />
<input type="checkbox" name="month11" value="November" /> November<br />
<input type="checkbox" name="month12" value="December" /> December<br /><br />

<input type="checkbox" name="day1" value="1" /> 1<br />
<input type="checkbox" name="day2" value="2" /> 2<br />
<input type="checkbox" name="day3" value="3" /> 3<br />
<input type="checkbox" name="day4" value="4" /> 4<br />
<input type="checkbox" name="day5" value="5" /> 5<br />
<input type="checkbox" name="day6" value="6" /> 6<br />
<input type="checkbox" name="day7" value="7" /> 7<br />
<input type="checkbox" name="day8" value="8" /> 8<br />
<input type="checkbox" name="day9" value="9" /> 9<br />
<input type="checkbox" name="day10" value="10" /> 10<br />
<input type="checkbox" name="day11" value="11" /> 11<br />
<input type="checkbox" name="day12" value="12" /> 12<br />
<input type="checkbox" name="day13" value="13" /> 13<br />
<input type="checkbox" name="day14" value="14" /> 14<br />
<input type="checkbox" name="day15" value="15" /> 15<br />
<input type="checkbox" name="day16" value="16" /> 16<br />
<input type="checkbox" name="day17" value="17" /> 17<br />
<input type="checkbox" name="day18" value="18" /> 18<br />
<input type="checkbox" name="day19" value="19" /> 19<br />
<input type="checkbox" name="day20" value="20" /> 20<br />
<input type="checkbox" name="day21" value="21" /> 21<br />
<input type="checkbox" name="day22" value="22" /> 22<br />
<input type="checkbox" name="day23" value="23" /> 23<br />
<input type="checkbox" name="day24" value="24" /> 24<br />
<input type="checkbox" name="day25" value="25" /> 25<br />
<input type="checkbox" name="day26" value="26" /> 26<br />
<input type="checkbox" name="day27" value="27" /> 27<br />
<input type="checkbox" name="day28" value="28" /> 28<br />
<input type="checkbox" name="day29" value="29" /> 29<br />
<input type="checkbox" name="day30" value="30" /> 30<br />
<input type="checkbox" name="day31" value="31" /> 31<br />

<input type="submit" value="submit" />
<input type="text" name="feedback" value"" size="50" />
</body>
</html>

I don't know what to put for the form action so I'm not sure if it's working correctly or not. Could someone please tell me if my code is wrong or if it should work?

Thanks.

**Fang** · #2 01-30-2010, 01:53 AM

Code:

syntax error
Line: 14, Column: 21
Source:
 for (i=0;i<=12;i++) && (j=0;j<=31;j++) {

That will not work.
What are you checking for exactly?
All selected values are written to the email without the need for the input field.

krazykrisi · #3 01-30-2010, 02:33 AM

I dont want them to go to an email, I want the text to show in the text field. so for instance if the user checks january and 24 then january 24 will show in the text field when the button is pressed, or possibly automatically without pressing the button.

**Fang** · #4 01-30-2010, 03:32 AM

Multiple dates are allowed. Is that the intention? Perhaps you should be using radio controls or dropdowns.

krazykrisi · #5 01-30-2010, 09:05 AM

No, it's not the dates I am focused on here, it's the text by the checkboxes (the value of each checkbox). I would still have the same problem if i changed them to radio buttons or dropdown.

**Fang** · #6 01-30-2010, 10:11 AM

Code:

function validate() {
var aObj=document.getElementsByTagName('input');
var i=aObj.length; 
var str='';
while(i--) { 
    if(aObj[i].checked) {str+=aObj[i].value+','}
    }
document.test.feedback.value = str;
return (str!='')? true : false;
}

krazykrisi · #7 01-31-2010, 03:11 PM

That doesn't work, do I need to change something in the code?

**Fang** · #8 02-01-2010, 03:18 AM

It will list all checked boxes

krazykrisi · #9 02-01-2010, 02:14 PM

It doesn't work, I think I have the form tag wrong. What do I need to put in the action attribute of form. This
<form action="test.html" method="post" name="test" onclick="return validate();">

Am I calling the function correctly?

krazykrisi · #10 02-07-2010, 11:11 PM

Do I need to change the form tag at all?

**Fang** · #11 02-08-2010, 01:32 AM

No need to change the form tag, use mailto in the action as given in post #1.
The script lists all checked values.

krazykrisi · #12 02-08-2010, 12:52 PM

I don't want it to open my email client and send it by email. I just want it to go in the text field.

JMRKER · #13 02-08-2010, 02:51 PM

I'm not sure I understand the problem, but if you want to make a temporary change to prove 'Fang's suggestions are working correctly, try this ...

Code:

<form action="javascript:alert('Success')" method="post" name="test"  onsubmit="return validate();"><br />

I still don't understand how you plan to handle multiple checked months or days though.

Here is what I am using (modified display for testing purposes only ... so I did not have to scroll to see results

)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" language="javascript">
// From: http://www.webdeveloper.com/forum/showthread.php?p=1064414#post1064414

function validate() {
  var aObj=document.getElementsByTagName('input');
  var i=aObj.length; 
  var str='';
  while(i--) { 
    if(aObj[i].checked) {str+=aObj[i].value+','}
  }
  document.test.feedback.value = str;
  return (str!='')? true : false;
}

var months = ['January','February','March','April','May','June',
              'July','August','September','October','November','December'];
</script>
</head>

<body>
<form action="javascript:alert('Success')" method="post" name="test"  onsubmit="return validate();"><br />
<br />
<table border="1"><tr><td valign="top">
<script type="text/javascript">
  var str = '';
  for (var i=0; i<months.length; i++) {
    str += '<input type="checkbox" name="month'+(i+1)+'" value="'+months[i]+'" />'+months[i]+'<br />';
  }
  document.write(str);
</script>
</td><td valign="top">
<script type="text/javascript">
  var str = '';
  for (var i=0; i<31; i++) {
    str += '<input type="checkbox" name="day'+(i+1)+'" value="'+(i+1)+'" />'+(i+1)+'<br />';
    if ((i % 12) == 11) { str += '</td><td valign="top">'; }
  }
  document.write(str);
</script>
</td></tr>
</table>

<input type="submit" value="submit" />
<input type="text" name="feedback" value"" size="50" />
</body>
</html>

JMRKER · #14 02-08-2010, 03:13 PM

Additional modification to previous post.

If multiple date selections are a problem, each change to radio buttons instead ...

Code:

<table border="1"><tr><td valign="top">
<script type="text/javascript">
  var str = '';
  for (var i=0; i<months.length; i++) {
//    str += '<input type="checkbox" name="month'+(i+1)+'" value="'+months[i]+'" />'+months[i]+'<br />';
    str += '<input type="radio" name="months" value="'+months[i]+'" />'+months[i]+'<br />';
  }
  document.write(str);
</script>
</td><td valign="top">
<script type="text/javascript">
  var str = '';
  for (var i=0; i<31; i++) {
//    str += '<input type="checkbox" name="day'+(i+1)+'" value="'+(i+1)+'" />'+(i+1)+'<br />';
    str += '<input type="radio" name="days" value="'+(i+1)+'" />'+(i+1)+'<br />';
    if ((i % 12) == 11) { str += '</td><td valign="top">'; }
  }
  document.write(str);
</script>
</td></tr>
</table>

krazykrisi · #15 02-08-2010, 03:43 PM

That's exactly what I wanted, thank you. How do I get it so it prints it like January 15, instead of 15 January?

Thread Tools
Show Printable Version Email this Page
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)