|
JavaScript - Alert Values Of Checked Checkbox Values
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()"
Similar TutorialsI 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 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'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. My goal is that when I click on the submit button, I just want to display an alert box with the values selected, and also look at this in the console.log. Can anyone help me? Thanks. Code: <html>
<head>
</head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(init);
function init() {
$ ("#t").submit(function() {
var g = showCheckedValues();
console.log(g);
alert(g);
});
function showCheckedValues() {
// Gather all values of checked checkboxes with name "bedrooms".
var checked = $('input[name=bedrooms]:checked').map(function() {
return this.value;
}).get();
}}
</script>
<body>
<form id="t">
<input type="checkbox" name="bedrooms" value="1">1 bedroom<br>
<input type="checkbox" name="bedrooms" value="2">2 bedroom<br>
<input type="checkbox" name="bedrooms" value="3">3 bedroom<br>
<input type="checkbox" name="bedrooms" value="4+">4+ bedroom<br>
<input type="submit" name="save-changes"></input>
</form>
</body>
</html>
I have a page where a user can select (via check boxes) several categories. Each category is related to a set of possible options (radio buttons) that have numeric values. When one of the options (radio button) is selected, the amount will appear in a text box (input type="text"). The numeric value in the text box will update depending on what category options are selected. However, when the checkbox is deselected, the radio boxes in the <div> are not displayed and I need to remove (reset) the radio button values from the value seen in the text box. Here are some snippets to hopefully expound on what I would like to do. Code: <script type="text/javascript">
var amountNotice = 0;
function notice(options)
{
amountNotice = parseInt(options);
calculateTotal();
}
function calculateTotal()
{
totalAmount = amountNotice;
document.getElementById("total").value = totalAmount.toFixed(2);
}
function toggle(chkbox, group, associatedValues)
{
var visSetting;
if (chkbox.checked == true)
document.getElementById(group).style.display = "inline";
else
{
document.getElementById(group).style.display = "none";
uncheckRadio(associatedValues);
}
document.getElementById(group).style.display = visSetting;
}
function uncheckRadio(associatedValues)
{
for(var i = 0; i < document.getElementById(associatedValues).length; i++)
{
if (associatedValues[i].checked == true)
associatedValues[i].checked == false;
}
calculateTotal();
}
</script>
<style type="text/css">
#groupNotice {display: none}
</script>
.
.
<input type="button" onClick="calculateTotal()" value="Calculate"><br>
<div id="groupNotice">
<b>Required Notice</b>:
<input type="radio" name="Note" onClick="notice(this.value)" value="0"> None
<input type="radio" name="Note" onClick="notice(this.value)" value="2"> Prior Day ($2)
<input type="radio" name="Note" onClick="notice(this.value)" value="2"> Prior Call ($2)<br>
</div>
<form name="CostEstimate" method="post" action="calculator.php">
<input type="checkbox" onclick="toggle(this, 'groupNotice', 'Note'); display('groupNotice','inline')" name="Notice" value=""> Notice
</form>
Everything works except for my uncheckRadio function - not sure if I am identifying the elements correctly, or if I need a totally new approach. My thinking is that the function must be accessed by the checkbox onClick call. Previously I had tried calling uncheckRadio from the notice function before I recognized is was not an appropriate location. Any assistance is greatly appreciated. - c Hi all, I am in the process of developing a calculator for some of my colleagues to use. One of the variables within the calculations is called PMH. I want to determine the value of PMH based on which checkboxes are ticked. Each checkbox has a different value. If the checkbox is not ticked, then the value of each option is 1 and obviously more than one checkbox may be ticked. I have created the checbox code: Code: <td><input type="checkbox" name="PMH" value="1.6" /> Smoker<br />
<input type="checkbox" name="PMH" value="0.4" /> CCF<br />
<input type="checkbox" name="PMH" value="0.5" /> Pulmonary Oedema / Cirrhosis<br />
<input type="checkbox" name="PMH" value="0.8" /> COAD<br /></td>
but I have no idea on how to calculate what I need for var PMH. Can someone guide me as to what I need to do please? Cheers, mads I have the following code working with the checkbox options but once I added a drop down menu with values, it doesn't calculate it. I've done some different things to try to add the drop down to the function but nothing would work that I've tried so far. I have it setup so when a box is unchecked, that option is taken off the price, the drop down should do the same to switch between the options price. Thanks for the help! Code: <script language="javascript">
totalOptions = 0;
function calculateTotalOptions(thisCheckbox){
if (thisCheckbox.checked)
{
totalOptions += parseFloat(thisCheckbox.value);
} else {
totalOptions -= parseFloat(thisCheckbox.value);
}
document.getElementById("totalOptions").value = "$" + totalOptions + ".00";
}
</script>
<form name="Options" >
<table width="765" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="8" align="center" bgcolor="#FFFFFF">Please select which model you would like to price and then add your optional equipment.</td>
<td width="4" align="center" bgcolor="#FFFFFF"> </td>
<td width="4" align="center" bgcolor="#FFFFFF"> </td>
<td width="4" align="center" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td colspan="3" align="center" bgcolor="#FFFFFF"><strong>Available on these models</strong></td>
<td width="85" align="center" bgcolor="#FFFFFF">Most Popular Options</td>
<td width="97" align="center" bgcolor="#FFFFFF">Option Code</td>
<td width="192" align="center" bgcolor="#FFFFFF"><strong>Optional Equipment</strong></td>
<td width="61" align="center" bgcolor="#FFFFFF"><strong>Price</strong></td>
<td width="149" align="center" bgcolor="#FFFFFF"><strong>Add Option</strong></td>
</tr>
<tr>
<td width="58" align="center"><p><strong>SR 125<br />
</strong></p></td>
<td width="58" align="center"><p><strong>SR 225<br />
</strong></p></td>
<td width="58" align="center"><p><strong>SR 325<br />
</strong></p></td>
<td colspan="5" align="right"><strong>Select Base Model:
</strong> <select name="model" id="model">
<option value="0.00" selected onclick="calculateTotalOptions(this);">--------</option>
<option value="-6995.00" onclick="calculateTotalOptions(this);">SR 125 Standard</option>
<option value="-7495.00" onclick="calculateTotalOptions(this);">SR 125 H.D.</option>
<option value="7995.00" onclick="calculateTotalOptions(this);">SR 125 S.D.</option>
<option value="8495.00" onclick="calculateTotalOptions(this);">SR 225 Standard</option>
<option value="8995.00" onclick="calculateTotalOptions(this);">SR 225 H.D.</option>
<option value="9595.00" onclick="calculateTotalOptions(this);">SR 225 S.D.</option>
<option value="9995.00" onclick="calculateTotalOptions(this);">SR 325 Standard</option>
<option value="10495.00" onclick="calculateTotalOptions(this);">SR 325 H.D.</option>
<option value="10995.00" onclick="calculateTotalOptions(this);">SR 325 S.D.</option>
</select></td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF"><img src="dot.png" width="11" height="11" /></td>
<td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center" bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF">SR-ES</td>
<td bgcolor="#FFFFFF">•Electric start </td>
<td bgcolor="#FFFFFF">$345.00</td>
<td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="t1" id="t1" value="345.00" onclick="calculateTotalOptions(this);"> </td>
</tr>
<tr>
<td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center"> </td>
<td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
<td>SR-OCP</td>
<td>•Operator convience package; includes tach, hour, lube meter, hydraulic pressure gauge and bottle holder</td>
<td>$125.00</td>
<td align="center"><input type="checkbox" name="t1" id="t1" value="125.00" onclick="calculateTotalOptions(this);"></td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF"> </td>
<td align="center" bgcolor="#FFFFFF"> </td>
<td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center" bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"><table cellspacing="0" cellpadding="0">
<td width="127">SR-EZM</td>
</table></td>
<td bgcolor="#FFFFFF">•EZ maintance hydraulic package; includes temperature and fill sight guage and quickdrain ball valve</td>
<td bgcolor="#FFFFFF">$100.00</td>
<td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="t1" id="t1" value="100.00" onclick="calculateTotalOptions(this);"></td>
</tr>
<tr>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center"> </td>
<td><table cellspacing="0" cellpadding="0">
<td width="127">SR-6W</td>
</table></td>
<td>•Six way wedge with on board storage</td>
<td>$495.00</td>
<td align="center"><input type="checkbox" name="t1" id="t1" value="495.00" onclick="calculateTotalOptions(this);"></td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center" bgcolor="#FFFFFF"> </td>
<td align="center" bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"><table cellspacing="0" cellpadding="0">
<td width="127">SR-JLL</td>
</table></td>
<td bgcolor="#FFFFFF">•Jointed log lift</td>
<td bgcolor="#FFFFFF">$495.00</td>
<td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="t1" id="t1" value="495.00" onclick="calculateTotalOptions(this);"></td>
</tr>
<tr>
<td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
<td><table cellspacing="0" cellpadding="0">
<td width="127">SR-SEGTR</td>
</table></td>
<td>•Segmented tire for spotting includes spotting hitch</td>
<td>$350.00</td>
<td align="center"><input type="checkbox" name="t1" id="t1" value="350.00" onclick="calculateTotalOptions(this);"></td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF"> </td>
<td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
<td bgcolor="#FFFFFF"><table cellspacing="0" cellpadding="0">
<td width="127">SR-MGST</td>
</table></td>
<td bgcolor="#FFFFFF">•Motor guard with saddle for segmented tire</td>
<td bgcolor="#FFFFFF">$95.00</td>
<td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="t1" id="t1" value="95.00" onclick="calculateTotalOptions(this);"></td>
</tr>
<tr>
<td align="center"><p><img src="dot.png" alt="" width="11" height="11" /></p></td>
<td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center"> </td>
<td><table cellspacing="0" cellpadding="0">
<td width="127">SR-MG</td>
</table></td>
<td>•Motor guard w/o saddle</td>
<td>$75.00</td>
<td align="center"><input type="checkbox" name="t1" id="t1" value="75.00" onclick="calculateTotalOptions(this);"></td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center" bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"><table cellspacing="0" cellpadding="0">
<td width="127">SR-SPRTR</td>
</table></td>
<td bgcolor="#FFFFFF">•Spare tire and holder</td>
<td bgcolor="#FFFFFF">$250.00</td>
<td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="t1" id="t1" value="250.00" onclick="calculateTotalOptions(this);"></td>
</tr>
<tr>
<td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
<td> </td>
<td><table cellspacing="0" cellpadding="0">
<td width="127">SR-HOC</td>
</table></td>
<td>•Hydraulic oil cooler</td>
<td>$795.00</td>
<td align="center"><input type="checkbox" name="t1" id="t1" value="795.00" onclick="calculateTotalOptions(this);">
</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"><table cellspacing="0" cellpadding="0">
<td width="127">SR-GRLP</td>
</table></td>
<td bgcolor="#FFFFFF">•Grip Rightâ„¢ log points (each additional point)</td>
<td bgcolor="#FFFFFF">$20.00</td>
<td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="t1" id="t1" value="20.00" onclick="calculateTotalOptions(this);">
</td>
</tr>
<tr>
<td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
<td> </td>
<td><table cellspacing="0" cellpadding="0">
<td width="127">SR-HDF</td>
</table></td>
<td>•Heavy duty fenders</td>
<td>$145.00</td>
<td align="center"><input type="checkbox" name="t1" id="t1" value="145.00" onclick="calculateTotalOptions(this);"></td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center" bgcolor="#FFFFFF"><p><img src="dot.png" alt="" width="11" height="11" /></p></td>
<td align="center" bgcolor="#FFFFFF"><img src="dot.png" alt="" width="11" height="11" /></td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"><table cellspacing="0" cellpadding="0">
<td width="127">SR-LP</td>
</table></td>
<td bgcolor="#FFFFFF">•Light package</td>
<td bgcolor="#FFFFFF">$195.00</td>
<td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="t1" id="t1" value="195.00" onclick="calculateTotalOptions(this);"></td>
</tr>
<tr>
<td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
<td align="center"><p><img src="dot.png" alt="" width="11" height="11" /></p></td>
<td align="center"><img src="dot.png" alt="" width="11" height="11" /></td>
<td> </td>
<td><table cellspacing="0" cellpadding="0">
<td width="127">SR-38LO</td>
</table></td>
<td>•38" log opening *includes 2 1/2" cylinder rod </td>
<td>$995.00</td>
<td align="center"><input type="checkbox" name="t1" id="t1" value="995.00" onclick="calculateTotalOptions(this);"></td>
</tr>
<tr>
<td colspan="8" align="center" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td align="center"> </td>
<td align="center"> </td>
<td align="center"> </td>
<td> </td>
<td> </td>
<td> </td>
<td><strong>TOTAL:</strong></td>
<td><input type="text" id="totalOptions" readonly>
</td>
</tr>
</table>
</form>
Pardon my rookie question as I know little about code, but have managed with some help to get a basic setup of what I want, just not quite the end product. I have a pricing page that is broken into multiple categories per phase. I want a customer to be able to select my checkboxes and hit a button that will display a rolled up total. I also want it to be able to re-calculate the totals if a box is subsequently unchecked. I have browsed and searched the form to get the code to where it is now but need help to finish it. Thank you in advance, Here is a bit of the code I am using so you have an example" Code: <div class="item"> <h1>Phase 1: Structurals</h1> </div> <input name="Phase 1" type="checkbox" value="0~~Phase 1: Complete w/ Engineering" /> Phase 1: Complete w/ Engineering <input name="Phase 1" type="checkbox" value="0~~Phase 1: Complete w/ Out Engineering" /> Phase 1: Complete w/ Out Engineering <input name="Phase 1" type="checkbox" value="10~~Foundation: Monoslab" /> Foundation: Monoslab <input name="Phase 1" type="checkbox" value="20~~Foundation: Post Tension" /> Foundation: Post Tension <input name="Phase 1" type="checkbox" value="30~~Foundation: Stemwall" /> Foundation: Stemwall <input name="Phase 1" type="checkbox" value="40~~Foundation: Basement" /> Foundation: Basement <input name="Phase 1" type="checkbox" value="40~~Framing w/ Engineering" /> Framing w/ Engineering <input name="Phase 1" type="checkbox" value="40~~Framing w/ out Engineering" /> Framing w/ out Engineering <input name="Phase 1" type="checkbox" value="40~~Framing Hardware (with Engineering ONLY)" /> Framing Hardware (with Engineering ONLY) <div class="item"> <h1>Phase 2: Mechanicals</h1> </div> <input name="Phase 2" type="checkbox" value="0~~Phase 2: Complete w/ Engineering" /> Phase 2: Complete w/ Engineering <input name="Phase 2" type="checkbox" value="0~~Phase 2: Complete w/ Out Engineering" /> Phase 2: Complete w/ Out Engineering <input name="Phase 2" type="checkbox" value="10~~Plumbing" /> Plumbing <input name="Phase 2" type="checkbox" value="20~~HVAC" /> HVAC <input name="Phase 2" type="checkbox" value="30~~Electrical" /> Electrical <div class="item"> <h1>Phase 3: Exterior Finishes</h1> </div> <input name="Phase 3" type="checkbox" value="0~~Phase 3: Complete" /> Phase 3: Complete <input name="Phase 3" type="checkbox" value="0~~Housewrap" /> Housewrap <input name="Phase 3" type="checkbox" value="10~~Brick" /> Brick <input name="Phase 3" type="checkbox" value="20~~Stone" /> Stone <input name="Phase 3" type="checkbox" value="30~~Vinyl Siding" /> Vinyl Siding <input name="Phase 3" type="checkbox" value="30~~Cementitious Siding" /> Cementitious Siding <input name="Phase 3" type="checkbox" value="30~~Roofing" /> Roofing <input name="Phase 3" type="checkbox" value="30~~Windows" /> Windows <input name="Phase 3" type="checkbox" value="30~~Exterior Doors" /> Exterior Doors <div class="item"> <h1>Phase 4: Interior Finishes</h1> </div> <input name="Phase 4" type="checkbox" value="0~~Phase 4: Complete" /> Phase 4: Complete <input name="Phase 4" type="checkbox" value="0~~Insulation" /> Insulation <input name="Phase 4" type="checkbox" value="10~~Drywall" /> Drywall <input name="Phase 4" type="checkbox" value="20~~Paint" /> Paint <input name="Phase 4" type="checkbox" value="30~~Interior Trim" /> Interior Trim <input name="Phase 4" type="checkbox" value="30~~Interior Doors" /> Interior Doors <input name="Phase 4" type="checkbox" value="30~~Mirrors" /> Mirrors <input name="Phase 4" type="checkbox" value="20~~Shelving" /> Shelving <input name="Phase 4" type="checkbox" value="30~~Bath Accessories" /> Bath Accessories <input name="Phase 4" type="checkbox" value="30~~Countertops" /> Countertops <input name="Phase 4" type="checkbox" value="30~~Cabinets" /> Cabinets <input name="Phase 4" type="checkbox" value="30~~Shower Surrounds" /> Shower Surrounds <input name="Phase 4" type="checkbox" value="30~~Shower Enclosures" /> Shower Enclosures <div class="item"> <h1>Phase 5: Flooring</h1> </div> <input name="Phase 5" type="checkbox" value="0~~Flooring" /> Flooring Hi, here is what I am trying to do, mind if I sound simple this is my first major javascript attempt. You click the checkbox and it changes a link. You click the checkbox again and it changes it back. So you have a page with a link : <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5RSNVHTY5D6RN" id="pay"><img src="go.gif"></a> and a checkbox : <a nohref style="cursorointer;color:blue;text-decoration:underline" onclick="changeTarget()"><input type="checkbox" OnClick="changeTarget()" checked="yes" name="opt-in" id="opt-in" align="center" /></a> </p> Clicking the checkbox runs the javascript function ChangeTarget(). Here is what I want the javascript to do: Code: 1. Write current pay value to variable 2. Compare variable to paypal link -3. change to clickbank link -else change to paypal link. Here is the code I have tried that doesnt work: Code: <script type="text/javascript">
var link = document.getElementById('pay');
function changeTarget()
if(link == "https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5RSNVHTY5D6RN")
document.getElementById('pay').href="http://1.60years.pay.clickbank.net";
else
document.getElementById('pay').href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5RSNVHTY5D6RN";
</script>
Any help would be very much appreciated, I don't know why it isnt working. It just doesnt do anything when you click it. I know the following DOES work, but it only changes the link to the value chosen... no way of changing it back when you click the checkbox a second time. Code: //WORKING CODE
<script type="text/javascript">
function changeTarget()
{
document.getElementById('pay').href="http://1.60years.pay.clickbank.net";
}
</script>
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>
i'm trying to "post" the selected checkboxes (name and value) into a mysql database; i've search "docter google" for some answers and read that the "easiest" way to do this is to collect the checkboxes and put the values and names in to an hidden textfield ( function setvalue() ) and collect this textfield in a new page with php; but this doesn't work. it seems that the variable naamtest is empty (when i load a word into this var arv it does work) can someone find my error? Code: <script type="text/javascript">
function shift(which)
{
var counter = 0; // counter for checked checkboxes
var i = 0; // loop variable
var veck = "";// final url variable
var beginsaldo = 79;
var namen_array = "";
var va_array = "";
var namen = "";
var valu = "";
var input_obj = document.getElementsByTagName('input'); // get a collection of objects with the specified 'input' TAGNAME
for (i=0; i < input_obj.length; i++){ // loop through all collected objects
if (input_obj[i].type == 'checkbox' && input_obj[i].checked == true){ // if input object is checkbox and checkbox is checked then ...
counter++; // ... increase counter
var valcheck = input_obj[i].value; // waarde van de geselecteerde checkbox in variable steken
test = Number(valcheck); // absolute rekenwaarde van variable maken
beginsaldo -= test; //beginsaldo verminderen met de checkbox value
if (counter > 0){
var naam = input_obj[i].name + ' ';
var val = input_obj[i].value + ' ';
namen = namen + naam;
valu = valu + val;
namen_array = namen.split(" ");
va_array = valu.split(" ");
var naamtest = namen_array;
}}}
if (counter > 10){
alert ("u mag maar 10 renners selecteren");
var tr = which.parentNode;
while ( tr.tagName.toUpperCase() != "TR" )
{
tr = tr.parentNode;
if ( tr == null ) return; // something went very wrong!
}
var tds = tr.getElementsByTagName("td");
tds[0].getElementsByTagName("input")[0].checked = false;
}
else if (beginsaldo < 0){
alert ("uw saldo is te laag om dit uit te voeren");
var tr = which.parentNode;
while ( tr.tagName.toUpperCase() != "TR" )
{
tr = tr.parentNode;
if ( tr == null ) return; // something went very wrong!
}
var tds = tr.getElementsByTagName("td");
tds[0].getElementsByTagName("input")[0].checked = false;
}
else{
var tr = which.parentNode;
while ( tr.tagName.toUpperCase() != "TR" )
{
tr = tr.parentNode;
if ( tr == null ) return; // something went very wrong!
}
var tds = tr.getElementsByTagName("td");
if ( tds[0].getElementsByTagName("input")[0] == which )
{
tds[2].innerHTML = tds[0].innerHTML;
tds[0].innerHTML = " ";
tds[3].innerHTML = tds[1].innerHTML;
tds[1].innerHTML = " ";
tds[2].getElementsByTagName("input")[0].checked = true;
} else {
// this code is optional!!
tds[0].innerHTML = tds[2].innerHTML;
tds[2].innerHTML = " ";
tds[1].innerHTML = tds[3].innerHTML;
tds[3].innerHTML = " ";
tds[0].getElementsByTagName("input")[0].checked = false;
}
function setValue()
{
var arv = naamtest.join();
// This line converts js array to String
document.f2.arv.value=arv;
// This sets the string to the hidden form field.
}}}
</script>
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! Hi gud mng, I have one problem... How to process textbox values/ call textbox values in JS through a Java program. My text box values are dates. I have to process these dates. Like in online banking we select day to know our transactions. After submitting we get results. remember my files are in my directory only. No need of database. My files are look like 20100929, 20100930, 20101001 For epoch_classes.js, epoch_styles.css u can download coding from this link : http://www.javascriptkit.com/script/...ch/index.shtml Code: Code:
<html>
<table width="900" border="0" cellpadding="10" cellspacing="10" style="padding:0">
<tr><td id="leftcolumn" width="170" align="left" valign="top">
<div style="margin-left:0px;margin-top:0px"><h3 class="left"><span class="left_h2">Select Option</span></h3>
<a rel="nofollow" target="_top" href="day_wise.htm" >Day-wise</a><br /> <br />
<a rel="nofollow" target="_top" href="between.htm" >Between Days</a>
<link rel="stylesheet" type="text/css" href="epoch_styles.css" />
<script type="text/javascript" src="epoch_classes.js"></script>
<script type="text/javascript">
var cal1, cal2;
window.onload = function ()
{
cal1= new Epoch('epoch_popup','popup',document.getElementById('popup_container1'));
cal2= new Epoch('epoch_popup','popup',document.getElementById('popup_container2'));
};
/*............*/
function confirmation(f)
{
var startdate = f.fromdate.value
var enddate = f.todate.value
var myday=new Date()
var yr=myday.getFullYear()
var mn=myday.getMonth()+1
var dt=myday.getDate()
var today=""
var present, ys, ms, ds, ye,me,de, start, end
if(mn < 10) { mn = "0" + mn }
if(dt <10) { dt = "0" + dt }
today= yr + "/" + mn + "/" + dt
present=yr + "/" + mn + "/" +dt
if (today < startdate )
{
alert (" Start date should not be exceed to-day's date " + present )
startdate.focus()
return false
}
if (today < enddate )
{
alert (" End date should not be exceed to-day's date " + present )
enddate.focus()
return false
}
if (today == startdate )
{
alert(" You are selected to-days date as Starting day" );
}
var answer = confirm("Do you want to continue ?")
if (answer)
{ if( startdate < enddate)
alert("Dates between " + startdate + " to " + enddate + " are confirmed" )
else
alert("Dates between " + enddate + " to " + startdate + " are confirmed" )
}
else
{
alert("Date not confirmed")
window.location="to_date.htm";
}
ys= startdate.substring(0,4);
ms= startdate.substring(5,7);
ds= startdate.substring(8,10);
start=ys + "" + ms + "" +ds
ye= enddate.substring(0,4);
me= enddate.substring(5,7);
de= enddate.substring(8,10);
end=ye + "" + me + "" +de
}
/*.......................................................*/
</script>
<div style="margin-left:100px;">
<body>
<style type="text/css">
#conf
{
margin-left:115px;
}
</style>
<td align="left" valign="top">
<table width="100" border="0" cellpadding="0" cellspacing="0">
<td style="padding-top:0px">
</table>
<h4>From Date</h4>
<form name= "formbet" id="placeholder" method="post" action="#" >
<input id="popup_container1" type="text" name= "fromdate" maxlength="10" size="20"/>
<td align="left" valign="top">
<table width="300" border="0" cellpadding="0" cellspacing="0">
<td style="padding-top:20px">
<h4>To Date</h4>
<input id="popup_container2" type="text" name= "todate" maxlength="10" size="20"/> <br /> <br />
<input id="conf" type="button" onclick="confirmation(this.form)" value="Submit">
</form>
</body>
</html>
In my coding, ys, ms, ds represents year starting, month starting, starting day... ye, me, de represents end... start,end gives file names in the format of yyyymmdd now i want to process files from 20100101 to 20100930 means from date is 2010/01/01 and to date is 2010/09/30 if i press submit button the files from 20100101 to 20100930 are processes here ys=2010 ms=01 ds =01 and ye=2010 me=09 de= 30 For this how do i call these textbox values (from date text box and todate) to another program (java) Thanks in advance. So here's what i want to do: i have 2 checkboxes, when Checkbox A is checked, i want to automatically check the checkbox B. When A is unchecked, then uncheck B how can i do that? thanks a lot ! got 3 groups of radio buttons that, if not all checked, needs to give an alert message when button clicked to continue. The button is not a submit button, but just to continue to the next part of the form which is hidden. Code: <!-- MY RADIO BUTTON GROUPS --> <input name="id[18]" value="81" id="attrib-18-81" type="radio"><label class="attribsRadioButton zero" for="attrib-18-81"> Kola Cubes</label><br /> <input name="id[18]" value="82" id="attrib-18-82" type="radio"><label class="attribsRadioButton zero" for="attrib-18-82"> Pineapple Cubes</label><br /> <input name="id[18]" value="79" id="attrib-18-79" type="radio"><label class="attribsRadioButton zero" for="attrib-18-79"> Rhubarb and Custard</label><br /> <input name="id[18]" value="80" id="attrib-18-80" type="radio"><label class="attribsRadioButton zero" for="attrib-18-80"> Strawberry and Cream</label><br /><br /> <input name="id[19]" value="99" id="attrib-19-99" type="radio"><label class="attribsRadioButton zero" for="attrib-19-99"> Kola Cubes</label><br /> <input name="id[19]" value="100" id="attrib-19-100" type="radio"><label class="attribsRadioButton zero" for="attrib-19-100"> Pineapple Cubes</label><br /> <input name="id[19]" value="97" id="attrib-19-97" type="radio"><label class="attribsRadioButton zero" for="attrib-19-97"> Rhubarb and Custard</label><br /> <input name="id[19]" value="98" id="attrib-19-98" type="radio"><label class="attribsRadioButton zero" for="attrib-19-98"> Strawberry and Cream</label><br /><br /> <input name="id[20]" value="117" id="attrib-20-117" type="radio"><label class="attribsRadioButton zero" for="attrib-20-117"> Kola Cubes</label><br /> <input name="id[20]" value="118" id="attrib-20-118" type="radio"><label class="attribsRadioButton zero" for="attrib-20-118"> Pineapple Cubes</label><br /> <input name="id[20]" value="115" id="attrib-20-115" type="radio"><label class="attribsRadioButton zero" for="attrib-20-115"> Rhubarb and Custard</label><br /> <input name="id[20]" value="116" id="attrib-20-116" type="radio"><label class="attribsRadioButton zero" for="attrib-20-116"> Strawberry and Cream</label><br /><br /> <!-- MY CONTINUE BUTTON --> <img src="images/tabs/button_continue.gif" alt="CONTINUE" onclick="Tabdoc_ManageDisplay(4)"> The onClick function on the image is to hide these and display next part of form. I understand that I could just check them automatically to force user to change them if they wanted to or just continue but if there is way to do it another way, please let me know. Or if possible to hide my continue button until all 3 groups are selected, also without using checked="checked" Thanks in advance. ----------------- Jay Hi, What's a good way/ideal data structure to achieve this? The objective of the code/function is to map user-inputted strings into a pair of specific, hard-coded strings. For example, say the user types "firefox" or "ff", or "fx". The output would be the pair ["browser", "mozilla"], for example. I'm currently using a multidimensional array, but it feels inefficient and I'm having trouble mapping an arbitrary number of inputs into 2 outputs. Code: var strings = [ ["input1", "output1a"],
["input2", "output1a"],
["input3", "output1a"],
["input1", "output1b"],
["input2", "output1b"],
["input3", "output1b"]
];
How should I map the elements ["input1", "input2", "input3"] => ["output1a", "output1b"] ? Another method I used previously was a massive switch statement. This fulfills my needs, but I'm not sure about the efficiency (though if I remember correctly, switch statements become more efficient as size grows, since it uses a hash table?). Code: switch (input) {
case "ff": case "firefox": case "fx" : case "ffox":
return ["browser", "mozilla"];
case "ie": case "internet explorer":
return ["browser", "microsoft"];
...
}
Sorted. Close thread please. New problem in post below VVV 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> I'm trying to find the best approach for saving the checked value of a checkbox in SQL With this script the FieldName "Active" toggles yes/no onClick... That we can post to the database no problem... What I am having trouble with is saving the checked value. I want to make the FieldName Active =hidden, and only display the checkbox with correct value checked yes/no. Code: <script type="text/javascript">
var YesOrNo = (function() {
if(document.select.checkbox.checked) {
document.select.Active.value = 'yes';
} else {
document.select.Active.value = 'no';
}
});
</script>
<form name="select">
<input type="hidden" name="Active" size="10" />
<input type="checkbox" name="checkbox" onclick="YesOrNo();" value="on" />
</form>
Is it possible to send a checkbox value to the DB when checked and or unchecked. I mean when you Physically chage it's state. I am running a PHP project, the page I need this functionality on has a dynamically built table from the Database. What I need to do is send the value "1" to the DB if I check on one of the rows "Published" checkbox and vice versa, removing the value of 1 from the db and changing the state to unchecked. The reason I ask in the JS forum is that PHP is a server side language and as such may not submit the change in realtime. Any help and or suggestions is much appreciated. |
|||||||