|
JavaScript - Getting The Values Of Multiple Checked Checkboxes.
Hi, I'm having problems getting the values of selected checkboxes and outputting them to a textarea. This seems like quite a simple thing to do but its causing me a lot of bother! I am using a mixture of JavaScript and jQuery to find a solution to this.
Code: <h2>Booking Form</h2> <form name="booking"> Please choose the days that would suit your visit: <br/> <input type="checkbox" name="days" value="Monday">Monday<br/> <input type="checkbox" name="days" value="Tuesday">Tuesday<br/> <input type="checkbox" name="days" value="Wednesday">Wednesday<br/> <input type="checkbox" name="days" value="Thursday">Thursday<br/> <input type="checkbox" name="days" value="Friday">Friday<br/> </form> <textarea id="output"> </textarea> Code: var values = $("#days").val() || [];
$("p#ss").html("<strong>Checked values:</strong> " + values.join(", "));
//This just outputs "Checked values:" to the paragraph 'ss' that I created just to test it this way.
Help with this would be appreciated. Similar TutorialsCan someone please help, I don't understand why my code doesn't work?! I just want to check to see if a checkbox has been checked... Code: <script language="JAVASCRIPT" type="text/djs">
function checkCheckBoxes() {
if (document.f1.Times[].checked == false
{
alert ('You didn\'t choose any of the checkboxes!');
return false;
}
else
{
return true;
}
}
</script>
<form onsubmit="return checkCheckBoxes();" action="add-booking-script.php" name="f1" method="post">
<input type="checkbox" name="Times[]" value="07:00:00"> 07:00 - 10:00<br />
<input type="checkbox" name="Times[]" value="10:00:00"> 10:00 - 13:00<br />
<input type="checkbox" name="Times[]" value="13:00:00"> 13:00 - 16:00<br />
<input type="checkbox" name="Times[]" value="16:00:00"> 16:00 - 19:00<br />
</form>
display text depending dropdown Hey! I am creating a new function for my website which will make it very nice I believe. But since I am no good at javascript I have got quite stuck here but I don't think it's that hard afterall. Actually I'm not completely sure if javascript is needed but please lead me in the right direction here, I'm lost. What I want to make is depending what checkboxes the visitor choose and then click "Search" he will get a certain result which is categoried under these checkboxes. I don't know what else to say but I hope you get an idea of what I mean, if not please ask and I'll try explain it better. Thankful for your help I have a bunch of checkboxes like below that the user can check some or all and click the button and see the values of all the selected checkboxes. How can I do that? Code: <script>
function alertValues(){
}
</script>
<input type="checkbox" class ="normal2" value="131971" name="list[]" >
<input type="checkbox" class ="normal2" value="131973" name="list[]" >
<input type="checkbox" class ="normal2" value="131975" name="list[]" >
<input type="checkbox" class ="normal2" value="131977" name="list[]" >
<input type="button" onClick="alertValues()"
I was wondering if anyone could help me with getting this working. I'm using html to create a table which has at least 1 row but no max number of rows - as they can be added/removed by the user - and 4 columns, 1st contains a checkbox and the last 2 contain drop down menus. I wish to be able to store the values of those menus in an array only if that row's checkbox has been checked. e.g if the first row has 1 and A as it's dropdown values and the second row has 2 and B. If only row 1 has been checked the array should only contain [1,A]. Instead mine holds all the values including the non-checked ones i.e [1,A,2,B]. My code for javascript function and html table are below: Code: function calculate(textID){
var table = document.getElementById('course'); //id of table
var rowCount = table.rows.length;
var array = []; //array to hold the values
var c = 0;
dmenus = document.getElementByTagName("select"); //get the drop down menus
for(var a = 1; a < rowCount; i++){ //a = 1 as the 1st row contains column headings
var row = table.rows[a];
var check = row.cells[0].childNodes[0];
if(null != check && true == check.checked){
for(var b = 0; b < dmenus.length; b++){
val = dmenus[b].options[dmenus[b].selectedIndex].value;
array[c] = val; //set index of array to equal value of dropdown box
c++;
}
}else{
b++;
}
}
Html code for table: Code: <table id="course">
<tr>
<td><input type="checkbox" name="ucheck" id="ucheck" onclick="checkAll('course')"/></td>
<th style="color:white">Course Title</th>
<th style="color:white">Credits</th>
<th style="color:white">Grade</th>
</tr>
<tr>
<td><input type="checkbox" name="tick" id="tick"/></td>
<td><input type="text"/></td>
<td>
<select name="credits" id="credits">
<option...</select></td>
<td>
<select name="grade" id="grade">
<option...</td>
It works only for the first row but if there are more than 1 row it doesn't do what it's supposed to. The coding platform I'm working on does not seem to support jquery so javascript code will be most appreciated. Thanks Hi, I'm currently designing a website for a takeaway company, and have one page displaying their menu. So that customers can easily calculate how much their takeaway will cost, I'm going to put checkboxes next to each item. Each of the checkboxes' value will be the price of the item, and I need a script that will add the values (prices) of the checkboxes they've ticked. They can then see the total cost of their takeaway without having to work it out, and add or remove items accordingly. I will then add a button which will print out a list of the items they ticked with the total price at the bottom. The customer can bring this in with them and the staff can easily see what they want and how much to charge them. Firstly, I need to know how to make Javascript add these values (and probably save them as a variable) Secondly, how would I make this display on the page (either after they click a button, or automatically so they can see the price real-time)? - I assume this would be basic coding --- Code: document.write(var) And finally, how could I make a script which would print only the items which are ticked, and the total price? Any help with this, even if you can only answer one of the questions, would be much appreciated. Thanks in advance! -- AJE Hi, i feel kinda stupid asking this, but im kinda lost. I want to add up multiple values of groups of checkboxes. I managed to add up the values, but making it so that only one checkbox per group can be enabled at any time gives me a headache. Here is what i got so far, any hints to how to make it work would be really cool. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
</head>
<body>
<script type="text/javascript">
function Summe()
{
sum = 0;
if(document.Formular.m1.checked)
{
sum = sum + (1 * document.Formular.m1.value);
}
if(document.Formular.m2.checked)
{
sum = sum + (1 * document.Formular.m2.value);
}
if(document.Formular.m3.checked)
{
sum = sum + (1 * document.Formular.m3.value);
}
if(document.Formular.m4.checked)
{
sum = sum + (1 * document.Formular.m4.value);
}
if(document.Formular.m5.checked)
{
sum = sum + (1 * document.Formular.m5.value);
}
if(document.Formular.m6.checked)
{
sum = sum + (1 * document.Formular.m6.value);
}
if(document.Formular.m7.checked)
{
sum = sum + (1 * document.Formular.m7.value);
}
if(document.Formular.m8.checked)
{
sum = sum + (1 * document.Formular.m8.value);
}
document.Formular.black.value = sum;
}
</script>
<form name="Formular">
<INPUT TYPE="TEXTBOX" NAME="black" VALUE="" SIZE="3"> <br>
grp1<br>
<input type="checkbox" Name="m1" Value="411" id="411" onClick="javascript:Summe()"> <br>
<input type="checkbox" Name="m2" Value="412" id="412" onClick="javascript:Summe()"> <br><br>
grp2<br>
<input type="checkbox" Name="m3" Value="421" id="421"onClick="javascript:Summe()"> <br>
<input type="checkbox" Name="m4" Value="422" id="422"onClick="javascript:Summe()"> <br>
<input type="checkbox" Name="m5" Value="423" id="423" onClick="javascript:Summe()"> <br> <br>
grp3 <br>
<input type="checkbox" Name="m6" Value="431" id="431" onClick="javascript:Summe()"> <br>
<input type="checkbox" Name="m7" Value="432" id="432" onClick="javascript:Summe()"> <br>
<input type="checkbox" Name="m8" Value="433" id="433" onClick="javascript:Summe()"> <br> <br>
</form>
</body>
</html>
Hello, i'm working on a 3 page survey. When hitting next, previous, or submit it passes the values of all the questions to the next page. I've got the whole thing working correcting except for one thing: When the box is "not" checked it passes no value. I'm needing it to have a value of "1" when checked and a value of "0" when not checked, and currently when its not checked and i pass the info it leaves it blank. I'd post the whole code to one of the pages but it's long , so i'll post the snipits of the code. Code: <script type="text/javascript">
/* <![CDATA[ */
function processQueryString() {
var formData = location.search;
formData = formData.substring(1, formData.length);
while (formData.indexOf("+") != -1) {
formData = formData.replace("+", " ");
}
formData = unescape(formData);
var formArray = formData.split("&");
for (var i=0; i < formArray.length; ++i) {
//document.writeln(formArray[i] + "<br />");
var sDataName = formArray[i].split("=")
switch (sDataName[0]) {
case ".lib_use":
for (var j=0; j < document.getElementsByName(".lib_use").length; ++j) {
if (document.getElementsByName(".lib_use").item(j).value == sDataName[1]) {
document.getElementsByName(".lib_use").item(j).checked = true;
//alert("lib_use set");
}
}
break;
case ".lib_comp":
if (sDataName[1] == 1) {
document.getElementsByName(".lib_comp").checked = true;
document.getElementsByName(".lib_comp").value= 1;
}
else {
document.getElementsByName(".lib_comp").checked = false;
document.getElementsByName(".lib_comp").value= 0;
}
break;
default:
alert("not caught = " + sDataName[0]);
continue;
}
}
}
/* ]]> */
</script>
<input type="checkbox" name=".lib_comp" id="lib_comp" value="1" />
The first case that i showed in my code is a radio button, and it passes correctly, i just wanted to show the "format" i was using in a working sense. The 2nd case is an example of the check boxes. Thanks for looking at this, and giving any suggestions you might have! Hi, I am setting up an email form & i would like the subject field to hold multiple values, the forrm will be something like this: Name:Mr A Date: 01/01/01 Reason:Football I want the form to send an email without opening an email client & I would like the subject field to look like this: Subject: Mr A, 01/01/01, Football or Subject Mr A - 01/01/01 - Football Can anyone tell me if this is possible, if if is can you please point me in the right direction. Thanks I have the following script that currently returns 4 of the same images. I can't wrap my head around how to get it to return 4 random images (out of the 7 in this example)? Also the links aren't working? --- Code: var imagenumber = 7 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1;
images= new Array
images[1] = "image1.jpg"
images[2] = "image2.jpg"
images[3] = "image3.jpg"
images[4] = "image4.jpg"
images[5] = "image5.jpg"
images[6] = "image6.jpg"
images[7] = "image7.jpg"
var image = images[rand1]
links= new Array
links[1] = "link1.html"
links[2] = "link2.html"
links[3] = "link3.html"
links[4] = "link4.html"
links[5] = "link5.html"
links[6] = "link6.html"
links[7] = "link7.html"
var link = links[rand1]
document.write('<div id="image-1"><a href="' + link + '"><img src="' + image + '"></a></div><div id="image-2"><a href="' + link + '"><img src="' + image + '"></a></div><div id="image-3"><a href="' + link + '"><img src="' + image + '" border="0"></a></div><div id="image-4"><a href="' + link + '"><img src="' + image + '"></a></div>')
--- Any help would be greatly appreciated! Hello there. I'm having trouble with cookies. I have a bunch of links that when clicked on, create a cookie. For each link I need to be able to save that cookie value to the main cookie name. Here is the click function I'm using to create the cookie: $j('a.createCookie').click(function(e) { var cookieName = "InsightsCookie"; var cookieValue = $j(this).attr("id"); $j.cookie(cookieName, cookieValue, {expires: 365, path: '/'}); }); The end result would be "InsightsCookie: cookieValue, cookieValue, cookieValue" - where each link clicked on would add a value to InsightsCookie. Any help would be much appreciated. Hi all, I have to check for several possible values of a variable and I currently do it like so: Code: (SHIP_TYPE == "M" || SHIP_TYPE == "S" || SHIP_TYPE == "X") But this seems overly manual to me. I'm imagining something like the SQL "IN" function: Code: SHIP_TYPE IN ('M','S','X')
Does such a thing exist in JavaScript, or do I need to write my own function? Hey CF. I'm not great with JS, but I'm trying to build something pretty simple and even that's out of my league. I have a layout with multiple fields that need to be filled randomly from an array on click. I have an array with a bit of jQuery that randomly reloads one field on click, but I need multiple fields filled at once from the same item in the array. Code is below. I grabbed it from a tutorial somewhere, and have made some modifications. Code:
<Script>
$(document).ready( function() {
var foodArray = [
'1',
'2',
'3',
'4',
'5'
];
$('.foodtype').loadText( foodArray, 10000 ); // ( array, interval )
});
// custom jquery plugin loadText()
$.fn.loadText = function( foodArray, interval ) {
return this.each( function() {
var obj = $(this);
obj.fadeOut( 'slow', function() {
obj.empty().html( random_array( foodArray ) );
obj.fadeIn( 'slow' );
});
timeOut = setTimeout( function(){ obj.loadText( foodArray, interval )}, interval );
// reload random text (if not animated) -- entirely optional, can be removed, along with the reload link above (<a href="javascript:;" id="text-reload"><em>randomize</em></a>)
$("#text-reload").click( function(){
if( !obj.is(':animated') ) { clearTimeout( timeOut ); obj.loadText( foodArray, interval );} // animation check prevents "too much recursion" error in jQuery
});
});
}
//public function
function random_array( aArray ) {
var rand = Math.floor( Math.random() * aArray.length + aArray.length );
var randArray = aArray[ rand - aArray.length ];
return randArray;
}
</script>
That outputs one of the array items into a <span class="foodtype">. What I need is another value next to say "1", eg '1, Blue' and print "Blue" to another span. Can anyone help? The other issue I have is the divs are snap resizing, is there a way set them to animate smoothly? The total height will be variable depending on the combinations that display. Cheers guys, hope someone can help. print "<Font face=\"calibri, Arial\"><table id=\"rnatable\" border=2px width=100%>"; print "<th></th>"; print "<th>a</th>"; print "<th>b</th>"; print "<th>c</th>"; print "<th>d</th>"; print "<th>e</th>"; print "<th>f</th>"; print "<th>g</th>"; while($array = mysql_fetch_array($sql_query)) { $id=$array['a']; print "<tr id=\"newtr\">"; print "<td><input id=\"check\" type=\"checkbox\" name=\"keyword[]\" value=\"$id\" ></td>"; print "<td>".$array['a']."</td>"; print "<td>".$array['b']."</td>"; print "<td>".$array['c']."</td>"; print "<td>".$array['d']."</td>"; print "<td>".$array['e']."</td>"; print "<td>".$array['f']."</td>"; print "<td> <a href=\"http://localhost/rnasearch/retrieve.php?a=$id\">bla</a> </td></tr></font>"; } print "</table>"; } this is part of a php searchengine script that i wrote to retrieve data from a database and as you can see the last column that is g contains a link which when clicked takes the user to the second php script which retrieves additional information of that entry, but this is done for only single entries so as you can see i introduced checkboxes so that the user can check any number of checkboxes and retrieve information as per their wish now to do this i created a <input type=text where i want the value of these checkboxes i.e. $id to be posted in a delimited format so that the user can then click the corresponding button and retrieve the information this is the code <div id="floatMenu"> <ul class="menu1"> <center><li><form name="senddata" method="POST" action="http://localhost/retrieve.php" style="display:inline;"><input id="fasta" type="text" class="multitext"><input name="Fasta" type="Submit" value="Retrieve Fasta"></form> this is a css floating menu....so far so good....everything went fine.... after this i had to write a javascript to do this and i've been stuck there searching forums for the last 4 days! this is the javascript i found from somewhere which came close to doing wht i wanted it to do window.onload = function () { var cb = document.getElementById('check'); var fasta = document.getElementById('fasta'); cb.onclick = function () {fasta.value = cb.value + ","; };}; this script only sends the value of the first checkbox in the table, the others are not found by it, mind you its not the first checkbox selected its the first checkbox that is present in the table how can i resolve this problem so that even if i have n number of checkboxes in my table, if the user chooses to do so they can retrieve n number of information....please help i've almost lost hope in this! hello everybody! this is my first atempt in writing javascript and i have a problem which I have no idea how to solve. I want to take the values from several dropdown forms and make some calculations whit those in order to display a number. Unfortunately the script responts in a way that i cannot identify what is happening. this is a shorten example of my script. Code:
<html>
<head>
<script type="text/javascript">
function calcul()
{
var pcno = document.plithospc.listplpc.value;
var ndno = document.plithosnd.listplnd.value;
var hotline = document.hotlform.listhotl.value;
var sumhotline = 0;
if (hotline == 2)
{
sumhotline = 8*(1+0.5*pcno) + 2*(1+0.5*ndno);
}
else if (hotline == 3)
{
sumhotline = 16*(1+0.5*pcno) + 4*(1+0.5*pcno);
}
else
{
sumhotline = 0;
}
document.write(sumhotline);
</script>
</head>
<body>
<FORM NAME="plithospc">
<SELECT NAME="listplpc">
<OPTION SELECTED="SELECTED" VALUE=0>choose one</OPTION>
<OPTION VALUE=1>-1-</OPTION>
<OPTION VALUE=2>-2-</OPTION>
<OPTION VALUE=3>-3-</OPTION>
</SELECT>
<FORM NAME="plithosnd">
<SELECT NAME="listplnd">
<OPTION SELECTED="SELECTED" VALUE=0>choose one</OPTION>
<OPTION VALUE=1>-1-</OPTION>
<OPTION VALUE=2>-2-</OPTION>
<OPTION VALUE=3>-3-</OPTION>
</SELECT>
<FORM NAME="hotlform">
<SELECT NAME="listhotl">
<OPTION SELECTED="SELECTED" VALUE=0>choose one</OPTION>
<OPTION VALUE=1>1st selection</OPTION>
<OPTION VALUE=2>second selection</OPTION>
<OPTION VALUE=3>third selection</OPTION>
</SELECT>
<button type="button" onclick="calcul()">click me</button>
</body>
does anyone knows how to fix this? thanks in advance So I have a form. Unfortunately, I'm not using a <form> tag, it's all div. Code: <div id="mainForm"> <div class="label"><input type="checkbox" id="LeftFixed" />Left Bar Always On Screen</div> What I'm trying to do is if that box is checked, execute a javascript. How do I do that? so if checked, execute 'sources/leftbar.js' or I could even just copy the code so it's inline, and not called. Is there a way to do this? Sorted. Close thread please. New problem in post below VVV Hi, I'm using JavaScript to check (or leave empty) a checkbox based on stored data. Code: for (var q=0;q<document.Simple.Subject.length;q++) {
if (document.Simple.Subject[q].value == document.Restored.Subject.value) {
document.Simple.Subject[q].checked = true; break; }
It works perfectly, but I've discovered that it adds a simple "checked" to the form: Code: <input type="checkbox" name="Subject" value="Math" checked /> ... I thought I read that checked is not proper... it the attribute should really be checked="checked" . Is there a way to tweak this with JavaScript? Thanks. ~Wayne Thanks for clicking on this to possibly help me. I've been trying for hours to get my page to do one calculations when a radio is clicked... or to do another if a different radio is clicked. any help would be GREATLY appreciated. here is a simplified version of the code (it'd be pointless to give you the whole code, it's way too big.) Code: <html>
<head>
<title>This doesn't work...</title>
</head>
<body>
<script type="text/javascript">
function doit(){
var firstnum = form.num1.value - form.num2.value;
var secondnum = form.num1.value + form.num2.value;
if (form.op1.checked){
form.results.value = firstnum;
}
if (form.op2.checked){
form.results.value = secondnum;
}
}
</script>
<form name="form" method="post">
Num 1: <input type="text" name="num1" /><br />
Num 2: <input type="text" name="num2" /><br />
Option One <input type="radio" name="op1" /><br />
Option Two <input type="radio" name="op2" /><br />
<input type="submit" onClick="doit" /><br />
Results: <input type="text" name="results" /><br />
</form>
</body>
</html>
hi i was wondering if there was anyway i can check a check box with the help of javascript and have it add text from a database record to a text box without submitting the page with the help from php? i have the php coding done to get the info and edit it but cant have no idea how to do the javascript code thanks. PHP code: PHP 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> </head> <body> <div id="user_pm"> <?php $sql="SELECT * FROM list WHERE username='usernamehere'"; $result=mysql_query($sql); $count=mysql_num_rows($result); ?> <table width="496" border="0" cellspacing="1" cellpadding="0"> <tr> <td><form name="form1" method="post" action=""> <table width="495" border="0" cellpadding="3" cellspacing="1" bgcolor="#000000"> <tr> <td align="left" bgcolor="#3576B4" width="26"><font color="#FFFFFF" size="2"><strong></strong></td> <td align="left" bgcolor="#3576B4" width="95"><font color="#FFFFFF" size="2"><strong>From:</strong></font></td> <td align="left" bgcolor="#3576B4" width="52"><font color="#FFFFFF" size="2"><strong>To:</strong></font></td> <td align="left" bgcolor="#3576B4" width="161"><font color="#FFFFFF" size="2"><strong>Message:</strong></font></td> </tr> <?php while($rows=mysql_fetch_array($result)){ ?> <tr> <td align="center" bgcolor="#f8f8f8" width="26"> <input name="checkbox[]" type="checkbox" id="checkbox[]" value="<?php echo $rows['id']; ?>" style="float: left"></td> <td bgcolor="#f8f8f8" width="95"><font size="2"><?php echo $rows['from']; ?></font></td> <td bgcolor="#f8f8f8" width="52"><font size="2"><?php echo $rows['to']; ?></font></td> <td bgcolor="#f8f8f8" width="161"><font size="2"><?php echo $rows['message']; ?></font></td> </tr> <?php } ?> <tr> <td colspan="6" align="center" bgcolor="#f8f8f8"> <input name="edit" type="submit" id="edit" value="Edit" style="float: left"></td> </tr> <?php $message = stripslashes($post['message']); $message = $_POST['message']; $checkbox = $_POST['checkbox']; $edit = $_POST['edit']; if($edit){ for($i=0;$i<$count;$i++){ $edit_id = $checkbox[$i]; mysql_query("UPDATE list SET message='$message' WHERE id='$edit_id' And username='usernamehere'"); } if($result){ echo "<meta http-equiv=\"refresh\" content=\"0;url=index.php\">\n"; } } mysql_close(); ?> </table> </form> </td> </tr> </table> </div> </body> </html> |
|||||||