3 Replies - 1029 Views - Last Post: 04 August 2013 - 01:04 PM

#1 molitar  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 03-August 13

Javascript display multiple checkbox values at bottom of page

Posted 03 August 2013 - 06:17 PM

I am trying to create a simple html notes utility that I will type in the callers information and hit a button and copy and paste into the call logs. Right now I am just trying to get to display to bottom of page and hope to clean up code and paste to clipboard before it's finished.

I used a form generator for now just to create the initial form but I am not able to figure out how to display all values from the checkbox. Here is what I am looking to do.

Verified?
VA VA Silent VCI VDI TOADE TARP

check the values that pertain above and display the ones checked in the format of "( VA VCI TOADE )". This will only be run off local HDD so will only have client side script capability.

<head>

<title>Call Logging</title>
<link rel="stylesheet" type="text/css" href="view.css" media="all">
<script type="text/javascript" src="view.js"></script>
</style> 

</head>
<body>
<div id="entries">
<form name ="myform">

<img id="top" src="top.png" alt="">
	<div id="form_container">
	
		<h1><a>Call Logging</a></h1>
		<form id="form_679952" class="appnitro"  method="post" action="">
					<div class="form_description">
		<li id="li_1" >
		<label class="description" for="element_1">Service Tag</label>
		<div>
			<input type="text" name="SvcTag" class="element text small" maxlength="7" value="ELVIST1"/>
		</div> 
		</li>		<li id="li_2" >
</li>		<li id="li_2" >
		<label class="description" for="element_2">Name</label>
		<span>
			<input type="text" name= "element_2_1" class="element text" maxlength="35" size="8" value="First"/>
			<label>First</label>
		</span>
		<span>
			<input type="text" name= "element_2_2" class="element text" maxlength="35" size="6" value="Last"/>
			<label>Last</label>
		</span> 
		</li>		<li id="li_3" >
		<label class="description" for="element_3">Email</label>
		<div>
			<input type="text" name="element_3" class="element text medium" type="text" maxlength="55" value="who@where.com"/> 
		</div> 
		</li>		<li id="li_4" >
		<label class="description" for="element_4">Primary Phone </label>
		<div>
			<input type="text" name="element_4" class="element text medium" type="text" maxlength="15" value="352-567-1234"/> 
		</div> 
		</li>		<li id="li_5" >
		<label class="description" for="element_5">Secondary Phone </label>
		<div>
			<input type="text" name="element_5" class="element text medium" type="text" maxlength="15" value="352-567-1234"/> 
		</div> 
		</li>		<li class="section_break">
		<p></p>
			<h3>Verified?</h3>
		<span>
		<input type="checkbox" name="verified" value="Silent" onclick="">VA
		<input type="checkbox" name="verified" value="Silent" onclick="">VA Silent
		<input type="checkbox" name="verified" value="VCI" onclick="">VCI
		<input type="checkbox" name="verified" value="TOADE" onclick="">TOADE
		<input type="checkbox" name="verified" value="VDI" onclick="">VDI
		<input type="checkbox" name="verified" value="TARP" onclick="">TARP
		</span> 
		</li>		<li class="section_break">
		</li>		<li id="li_7" >
		<label class="description" for="element_7">Operating System</label>
		<div>
		<select class="element select medium" id="element_7" name="element_7"> 
			<option value="" selected="selected"></option>
			<option value="1" >Server 2000</option>
			<option value="2" >Server 2003</option>
			<option value="3" >Server 2003 SBS</option>
			<option value="4" >Server 2008</option>
			<option value="5" >Server 2008 SBS</option>
			<option value="6" >Server 2008 R2</option>
			<option value="7" >Server 2011</option>
			<option value="8" >Server 2012</option>

		</select>
		</div> 
		</li>		<li id="li_13" >
		<label class="description" for="element_13">Backup Status </label>
		<div>
		<select class="element select medium" id="element_13" name="element_13"> 
			<option value="" selected="selected"></option>
			<option value="1" >No backup</option>
			<option value="2" >Data only backup</option>
			<option value="3" >Backup not current</option>
			<option value="4" >No backup</option>
			<option value="5" >Do not know</option>
			<option value="6" >Full backup

		</select>
		</div> 
		</li>		<li class="section_break">
			<h3>Troubleshooting</h3>
			<p></p>
		</li>		<li id="li_17" >
		<label class="description" for="element_17">Cust Stated </label>
		<div>
			<input type="text" name="element_17" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> 
		</li>		<li id="li_18" >
		<label class="description" for="element_18">Troubleshooting: </label>
		<div>
			<textarea id="element_18" name="element_18" class="element textarea medium"></textarea> 
		</div> 
		</li>		<li id="li_19" >
		<label class="description" for="element_19">Action Plan </label>
		<div>
			<textarea id="element_19" name="element_19" class="element textarea medium"></textarea> 
		</div> 


<input type="button" value="display" onclick="collect(this.form)"/>
</form>

</div>
<div id="results"></div>
<script type="text/javascript">
function collect(frm) {
document.getElementById("results").innerHTML+=
"SvcTag: "+frm.SvcTag.value+
"<br>Name: "+frm.element_2_1.value+ " "+frm.element_2_2.value+
"<br>Email: "+frm.element_3.value+
"<br>Primary Phone: "+frm.element_4.value+
"<br>Secondary Phone: "+frm.element_5.value+

"<hr>"

frm.reset();
} 
</script>
</body>


Is This A Good Question/Topic? 0
  • +

Replies To: Javascript display multiple checkbox values at bottom of page

#2 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 442
  • View blog
  • Posts: 1,890
  • Joined: 30-April 10

Re: Javascript display multiple checkbox values at bottom of page

Posted 03 August 2013 - 09:37 PM

I would use something like:
for (var i = 0; i<frm.verified.length; i++){
    console.log(frm.verified[i].checked);//logged the status of the check box
}



This will check all the checkboxes to see if they are checked, if they are you will need to add the value or text to your results div.


New code:
Spoiler

This post has been edited by laytonsdad: 03 August 2013 - 09:48 PM
Reason for edit:: Added new code

Was This Post Helpful? 1
  • +
  • -

#3 molitar  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 03-August 13

Re: Javascript display multiple checkbox values at bottom of page

Posted 04 August 2013 - 12:54 PM

Thanks to your help I was finally able to get the data showing in it's proper format for copy and pasting. Can you tell me how I can copy this to clipboard instead of displaying to the bottom of the page?

<head>

<title>Call Logging</title>
<link rel="stylesheet" type="text/css" href="view.css" media="all">

<script language="javascript" type="text/javascript">

function limitText(limitField, limitCount, limitNum) {
	if (limitField.value.length > limitNum) {
		limitField.value = limitField.value.substring(0, limitNum);
	} else {
		limitCount.value = limitNum - limitField.value.length;
	}
}

</script>

<script LANGUAGE="VBScript">
Sub Window_onload
	window.resizeTo 330,718
End Sub
window.moveTo 0, 0
	
</script>

</head>


<body>
<div id="entries">
<form name ="myform">

	<div id="form_container">
	
		<form id="form_679952" class="appnitro"  method="post" action="">
					<div class="form_description">


		<label class="description" for="element_1"><b>Svc Tag or Code</b></label>
		<div>
			<input type="text" name="SvcTag" class="element text small" maxlength="11" size="12" value="ELVIST1"/>
		</div> 


		<br>
		<label class="description" for="Name"><b>Name</b></label>
		<br>
		<span>
			<input type="text" name= "name_1" class="element text" maxlength="30" size="16" value="First"/>
		</span>
		<span>
			<input type="text" name= "name_2" class="element text" maxlength="30" size="21" value="Last"/>
		</span>
		</div> 


		<br>
		<label class="description" for="email"><b>Email</b></label>
		<br>
		<div>
			<input type="text" name="email" class="element text medium" type="text" maxlength="30" size="31" value="who@where.com"/> 
		</div> 


		<br>
		<label class="description" for="phone_1"><b>Primary Phone</b></label>
		<br>
		<span>
			<input type="text" name="phone_1" class="element text medium" type="text" maxlength="12" size="13" value="352-567-1234"/> 
		</span>
		<span>
			<input type="text" name="phone_1_ext" class="element text medium" type="text" maxlength="5" size="6" value=""/> 
		</span>		
		</div> 


		<br>
		<label class="description" for="phone_2"><b>Secondary Phone</b></label>
		<br>
		<span>
			<input type="text" name="phone_2" class="element text medium" type="text" maxlength="12" size="13" value="352-567-1234"/> 
		</span>
		<span>
			<input type="text" name="phone_2_ext" class="element text medium" type="text" maxlength="5" size="6" value=""/> 
		</span>
		</div>


		<br>
		<label class="description" for="verified"><b>Verification</b></label>
		<span>
			<br>
			<input type="radio" name="verified" value="VA" onclick="">VA
			<input type="radio" name="verified" value="Silent VA" onclick="">Silent VA
			<input type="radio" name="verified" value="No VA" onclick="">No VA
			<br>
			<input type="checkbox" name="verified" value="VCI" onclick="">VCI
			<input type="checkbox" name="verified" value="TOADE" onclick="">TOADE
			<input type="checkbox" name="verified" value="VDI" onclick="">VDI
			<input type="checkbox" name="verified" value="TARP" onclick="">TARP
		</span>
		</div>

		
		<br>
		<label class="description" for="os"><b>Operating System</b></label>
		<div>
		<select style="width: 135px" class="element select medium" id="os" name="os"> 
			<option value="Not applicable" selected="selected">Not applicable</option>
			<option value="Server 2000" >Server 2000</option>
			<option value="Server 2003" >Server 2003</option>
			<option value="Server 2003 SBS" >Server 2003 SBS</option>
			<option value="Server 2008" >Server 2008</option>
			<option value="Server 2008 SBS" >Server 2008 SBS</option>
			<option value="Server 2008 R2" >Server 2008 R2</option>
			<option value="Server 2011" >Server 2011</option>
			<option value="Server 2011 SBS" >Server 2011 SBS</option>
			<option value="Server 2012" >Server 2012</option>
			<option value="Linux base OS" >Linux OS</option>
			<option value="Xen or ESXi OS" >Xen or ESXi OS</option>
			<option value="Non Server OS" >Non Server OS</option>
		</select>
		</div> 


<br>
		<label class="description" for="backup"><b>Backup Status</b></label>
		<div>
		<select style="width: 135px" class="element select medium" id="backup" name="backup"> 
			<option value="Not applicable" selected="selected">Not applicable</option>
			<option value="No backup" >No backup</option>
			<option value="Data only backup" >Data only backup</option>
			<option value="Full image backup" >Full image backup</option>
			<option value="Untested backup" >Untested backup</option>
			<option value="Backup not current" >Backup not current</option>
			<option value="Do not know" >Do not know</option>
		</select>
		</div>


		<br>
		<label class="description" for="controller"><b>RAID Controller</b></label>
		<div>
		<select style="width: 135px" class="element select medium" id="controller" name="controller">
			<option value="Not applicable" selected="selected">Not applicable</option>
			<option value="CERC" >CERC</option>
			<option value="PERC 3" >PERC 3</option>
			<option value="PERC 4" >PERC 4</option>
			<option value="PERC 5" >PERC 5</option>
			<option value="PERC 6" >PERC 6</option>
 			<option value="PERC H300" >PERC H300</option>
			<option value="PERC H310" >PERC H310</option>
			<option value="PERC H700" >PERC H700</option>
			<option value="PERC H710" >PERC H710</option>
			<option value="PERC H200" >PERC H200</option>
			<option value="SAS 5" >SAS 5</option>
			<option value="SAS 6" >SAS 6</option>
			<option value="SATA" >SATA</option>
		</select>
		</div>


<br>
		<label class="description" for="custstated"><b>Cust Stated</b></label>
		<br>
			<input type="text" name="custstated" class="element text medium" type="text" size="41" maxlength="120" value="cust stated..."/> 
		</br> 

		
		<br>
		<label class="description" for="troubleshoot"><b>Troubleshooting</b></label>
		<div>
			<textarea wrap=physical cols=37 rows=10 name="troubleshoot" onkeydown="limitText(this.form.troubleshoot,this.form.countdown,750);" 
			onkeyup="limitText(this.form.troubleshoot,this.form.countdown,750);"></textarea>
			<br>
			<font size="1">(Maximum characters: 750)<br>
			You have <input readonly type="text" name="countdown" size="3" value="750" tabIndex="-1"> characters left.</font>
		</div>

		
		<br>
		<label class="description" for="actionplan"><b>Action Plan</b></label>
		<div>
			<textarea wrap=physical cols=37 rows=5 id="actionplan" name="actionplan" class="element textarea medium"></textarea> 
		</div> 

		<input type="button" value="display" onclick="collect(this.form)"/>
		<input type="button" value="Reset" style="position: relative; left: 132px;"  onclick="window.location.reload()" >


</form>
</div>

<div id="results"></div>
<script type="text/javascript">
function collect(frm) {
					var string = "SvcTag: " + frm.SvcTag.value +
						"<p>Inbound call ( ";
                                
					for (var i = 0; i < frm.verified.length; i++) {
					   if (frm.verified[i].checked){
						string += " " +frm.verified[i].value;
					   }
					}

					document.getElementById("results").innerHTML += string + " )" +
					
						
						"<br>Operating System: " + frm.os.value +
						"<br>Backup Status: " + frm.backup.value +
						"<br>Controller: " + frm.controller.value +
						"<p>Cust stated: " + frm.custstated.value +
						"<p>Troubleshooting:<br>" + frm.troubleshoot.value +

						"<p><p>Name: " + frm.name_1.value + " " + frm.name_2.value +
						"<br>Email: " + frm.email.value +
						"<br>Pri Phone: " + frm.phone_1.value + " ext: " + frm.phone_1_ext.value +
						"<br>Sec Phone: " + frm.phone_2.value + " ext: " + frm.phone_2_ext.value +

						"<p><p>Action Plan:<br>" + frm.actionplan.value +
						"<hr/>";
  
 				//frm.reset();
				}
</script>

</body>


Was This Post Helpful? 0
  • +
  • -

#4 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 442
  • View blog
  • Posts: 1,890
  • Joined: 30-April 10

Re: Javascript display multiple checkbox values at bottom of page

Posted 04 August 2013 - 01:04 PM

Have a look at this, I have never researched this my self but a quick google search will give you a plethera of articals.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1