|
JavaScript - Help Me Please With Radio And Checkbox
hi can someone help me on my code on javascript sory im a newbie can you check this and help me what i need to do to add all the radio botton and check box. i already finish the add formula on the checkbox but i do not know how to add the two selected radio buttons to my checkbox buttons help please...
for example: O selected is 80 O 60 O 60 O selected is 15 O 15 O 25 chkbox 22 chkbox 30 chkbox 8 Code: function Compute(form)
{
if(form.radio1[0].checked)
form.text1.value=form.radio1[0].value; <---- the value of this is 80
else if(form.radio1[1].checked)
form.text1.value=form.radio1[1].value; <---- 60
else if(form.radio1[2].checked)
form.text1.value=form.radio1[2].value; <---- 60
else if(form.radio1[0].checked)
form.text1.value=form.radio1[0].value; <---- 15
else if(form.radio2[1].checked)
form.text1.value=form.radio2[1].value; <---- 15
else if(form.radio2[2].checked)
form.text1.value=form.radio2[2].value; <---- 25
var a=0;
if(form.chk1.checked) <----22
a = a + eval(form.chk1.value);
if(form.chk2.checked) <----30
a = a + eval(form.chk2.value);
if(form.chk3.checked) <----8
a = a + eval(form.chk3.value);
if(form.chk1.checked && form.chk2.checked)
a = eval(form.chk1.value) + eval(form.chk2.value);
if(form.chk1.checked && form.chk3.checked)
a = eval(form.chk1.value) + eval(form.chk3.value);
if(form.chk2.checked && form.chk1.checked)
a = eval(form.chk2.value) + eval(form.chk1.value);
if(form.chk2.checked && form.chk3.checked)
a = eval(form.chk2.value) + eval(form.chk3.value);
if(form.chk3.checked && form.chk1.checked)
a = eval(form.chk3.value) + eval(form.chk1.value);
if(form.chk3.checked && form.chk2.checked)
a = eval(form.chk3.value) + eval(form.chk2.value);
if(form.chk1.checked && form.chk2.checked && form.chk3.checked)
a = eval(form.chk1.value) + eval(form.chk2.value) + eval(form.chk3.value);
form.text1.value=a;
}
Similar TutorialsI 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 Hello, After pulling out all my hairs, I am seeking some help with a JS validation script which would be for a case where we have multiple radio buttons which required a response from user and as a additional case if certain radio option is selected user should select one or more options listed as check boxes under that specific radio button. I have attached an image showing sample scenario with this post. If someone has an Idea how to to do please sail me thru. 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 ! Hi, If I have two check-boxes and one is already checked and then the is checked, how would I get it to uncheck the first one using JavaScript. Thanks, Cs1h I have 4 rows in a table. Each row consist of 4 radio buttons. Each radio button per row has different values in it but has the same name (group) ex: <input type="radio" name="a" value="1"> <input type="radio" name="a" value="2"> <input type="radio" name="a" value="3"> <input type="radio" name="a" value="4"> <input type="radio" name="b" value="1"> <input type="radio" name="b" value="2"> <input type="radio" name="b" value="3"> <input type="radio" name="b" value="4"> and so on.. If I click radio button A with value 2, I want to output the total at the bottom as "2".. Also, if I click radio button B with value 3, I want to output the total of A and B as 5 and so on.. How can I automatically calculate the answer based on which radio button was click? update: I got my answer from this site: http://stackoverflow.com/questions/1...s-using-jquery I am making a google CSE for a client site and I need to concatenate checkbox values together on the end of another form value. So I have a text box and the checkboxes: Code: <input name="q" cid="q" size="25" maxlength="50" value"off road tires"> <input type="checkbox" name="q" id="q" value="cooper|hankook" /> <input type="checkbox" name="q" id="q" value="Mickey Thompson|Bfgoodrich|GBC" /> <input type="checkbox" name="q" id="q" value="Hoosier|Nitto" /> For Google the URL string needs to be like this: Code: results.html?q=off road tires AND inurl:cooper|hankook|Mickey Thompson|Bfgoodrich|GBC this string says the person did not check the last box. I am having a hard time trying to do this. If you guys know a better way to accomplish the same thing I am all ears but I thought I would bring it to the experts and see what they had to say. Thanks for the help! Hi, I have a checkbox and when I "check" I want to add a <p> inside of an <div> and when I "uncheck" I want to remove the <p> from <div>. I've tried this but it's not working Code: $('#checkbox').change(function(){
$('div').html('<p>Some Text</p>');
}, function() {
$('div').remove('<p>Some Text</p>');
});
I hope you can help.. Regards Looking for a simple method to Toggle textbox yes/no using CheckBox This example does not work! But I hope this will help explain what I am trying to do Code: <SCRIPT LANGUAGE="JavaScript">
function YesOrNo() {
if(document.formname.checkboxname.checked)
{
document.formname.textname.disabled='Yes';
}
else
{
document.formname.textname.disabled='No';
}}
</SCRIPT>
<form name="formname">
<input type="text" size="10" name="textname">
<input type="checkbox" onclick="YesOrNo()" name="checkboxname" value="Yes">
</form>
I was trying to get total amount from these all checkbox, when I submit, but I don't know somewhere wrong. Please help me out. Here is my code: <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> Form </title> <script language = "JavaScript"> // The event handler functions for the check boxes function appleHandler() { var number = document.orderForm.apples.value; total = total + number * 0.59; } function orangeHandler() { var number = document.orderForm.oranges.value; total = total + number * 0.49; } function bananaHandler() { var number = document.orderForm.bananas.value; total = total + number * 0.39; } // The event handler function to produce the total cost message // when "submit" is clicked function finish() { total = total * 1.05; alert("Thank you for your order \n" + "Your total cost is: $" + total + "\n"); } </script> </head> <body> <h3> Order Form </h3> <form name = "orderForm" onSubmit = "finish()"> <p> <input type = "checkbox" name = "apples" size = "3" onClick = "appleHandler()" /> Apples </p><p> <input type = "checkbox" name = "oranges" size = "3" onClick = "orangeHandler()" /> Oranges </p><p> <input type = "checkbox" name = "bananas" size = "3" onClick = "bananaHandler()" /> Bananas </p><p> <input type = "reset" name = "reset" /> <input type = "submit" name = "submit" /> </p> </form> </body> </html> i have a checkbox: Code: <input type="checkbox" id="my_checkbox" name="option2" value="Check" checked>Check i want to add an event to it so that i do something to a dom element when it is checked and when it is not checked.What is the event and how can i get its status? Hi all, Can anyone point me in the right direction for some sample code that when the selection on a checkbox changes, either writes or removes some content? In this instance, when the checkbox is unchecked, I want more table rows and columns written with the relevant data within them. Then when checked, I want this data removed. Many thanks 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 am using a checkbox to turn on and off some labels on a line on a google map, which is working fine if the line is already drawn, using this function: Code: function distboxclick(labelsbox) {
if (labelsbox.checked) {
for (var i=0; i<distmarkers.length; i++) {
if (distmarkers[i].mLabel != null) distmarkers[i].mLabel.show();
}
} else {
for (var i=0; i<distmarkers.length; i++) {
if (distmarkers[i].mLabel != null) distmarkers[i].mLabel.hide();
}
}
}
but the thing is that I want the labels to be turned off to begin with and switched on if the box is checked. Which is also fine, using this snippet: Code: if (prevMarker){
var dist = getSegmentDistance(prevMarker.mMarker, distmarker);
var label = new ELabel(point, dist, "labelstyle", new GSize(10,-15));
distmarkers[numMarkers-1].mLabel = label;
distlabels.push(label);
map.addOverlay(label);
label.hide();
drawOverlay();
}
but what I am trying to do now is make sure that if the box is checked before the line starts to be drawn then the labels will come up straight away. So I figured all I had to do was add in the following to the above: Code: if (labelsbox.checked){
label.show(); }
else {
label.hide(); }
and pass the labelsbox variable to the function where that is all happening. But instead I get a "labelsbox is undefined" error... If I take that if statement out I see that labelsbox is defined, but that doesn't really help. I guess I'm putting things in the wrong order or something, but I'm kind of baffled. You can see my test page here. Thanks in advance for any suggestions. Hey guys, I am having a bit of an issue here. I have a form which has 3 checkboxes in it: (sorry, ignore the asp) Code: <input name="certs" id="certs" type="checkbox" <% If certs="on" Then Response.Write("checked=""checked""") %> />
<input name="nocerts" id="nocerts" type="checkbox" <% If nocerts="on" Then Response.Write("checked=""checked""") %> />
<input name="certsna" id="certsna" type="checkbox" <% If certsna="on" Then Response.Write("checked=""checked""") %> />
Anyways, I want to enforce the following: - Only one checkbox can be checked from these 3, no more - At least one checkbox must be checked before submission I have found a couple small scripts to validate that at least one is pressed, but I do not know how to make sure no more than one is pressed, and how to combine scripts is beyond me. Can anyone offer any assistance? Is this difficult to do? Hello I have a site of classifieds ads.... user is choosing what he want to see/search and then a table is printed on the screen(with all the requested results) My question is... Is there a way to add a "CHECK BOX" to each of the ads and the user is checking what he wants to see later on. after he will have a button "see my checked ads" and a page will open with ONLY the ads that he checked before Any suggestions? Thanks a lot Danny Sorted. Close thread please. New problem in post below VVV Hi, i have the next code: PHP Code: Code: <span id="review-buttons-container" class="a-center">
<input type="image" src="<?php echo $this->getSkinUrl('images/btn_place_order.gif') ?>" onclick="review.save();" value="<?php echo $this->__('Place Order') ?>" />
</span>
</p>
</div>
<script type="text/javascript">
//<![CDATA[
var review = new Review('<?php echo $this->getUrl('checkout/onepage/saveOrder') ?>', '<?php echo $this->getUrl('checkout/onepage/success') ?>', $('checkout-agreements'));
//]]>
</script>
and i add the follow JavaScript code to create checkbox (the idea is that only when you with the checkbox checked, the button work) i try: PHP Code: Code: <span id="review-buttons-container" class="a-center">
<form action="" onSubmit="return check(this);">
<input name="chkbox" value="please make sure i'm checked" type="checkbox" />
<input type="image" src="<?php echo $this->getSkinUrl('images/btn_place_order.gif') ?>" onclick="review.save();" value="<?php echo $this->__('Place Order') ?>" />
</form>
</span>
</p>
</div>
<script type="text/javascript">
//<![CDATA[
function check(form){
if( form.chkbox.checked )
return true;
else{
alert("please check the checkbox");
return false;
}
}
var review = new Review('<?php echo $this->getUrl('checkout/onepage/saveOrder') ?>', '<?php echo $this->getUrl('checkout/onepage/success') ?>', $('checkout-agreements'));
//]]>
</script>
but its not work for me my javascript knowledge is not so good, please help me to create this checkbox) Thanks. Hi, I have the following codes but my checkbox is not appearing. The values of the checkbox do print out in the alert. Can anyone tell me what is wrong with it? Thank you! Code: var table = document.getElementById('maintable');
var i; // iterator
var item; // pointer to item in received list
for(i = 0;
(item = contacts.ReturnValue.getNext()) != undefined;
++i) {
table.insertRow(i + 1);
var result = "<td>";
if(item.FirstName != undefined) {
result += item.FirstName.Value;
}
result += "</td><td>";
if(item.LastName != undefined) {
result += item.LastName.Value;
}
result += "</td><td>";
if(item.MobilePhoneGen != undefined) {
result += item.MobilePhoneGen.Value;
}
result += "</td><td>";
if(item.EmailGen != undefined) {
result += item.EmailGen.Value;
}
var td1 = document.createElement("td");
var chkbox = document.createElement('input');
chkbox.type='Checkbox';
table.rows[i + 1].innerHTML = result;
chkbox.value=item.MobilePhoneGen.Value;
td1.appendChild(chkbox);
alert(chkbox.value);
}
Hi. I have a list of checkboxes with Ids that go something like; chk_AGE=16 chk_AGE=17 chk_AGE=18 chk_GENDER=MALE chk_GENDER=FEMALE chk_RANK=OFFICER chk_RANKE=OTHER When a user checks/unchecks '16' (for example), I want javascript to look up how many checkboxes in my form have an Id that begins with "chk_AGE" and return the number in an alert box ("3" in this case). If my user had checked/unchecked "Officer" an alert box would return "2" as there are 2 checkboxes that begin "chk_RANK". Can someone please help with this? I am a complete javascript beginner. Hi, I want to check all checkboxes using one main checkbox. Then, the checkboxes will be disabled. But then, when the user unchecks the main checkbox, it must revert all the checkboxes to be enabled. How do I do so? 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>
<title>TSPL Admin</title>
<script type='text/javascript'>
function checkUncheckAll(checkAllState, chkbxGroup)
{
// Check that the group has more than one element
if(chkbxGroup.length > 0)
{
// Loop through the array
for (i = 0; i < chkbxGroup.length; i++)
{
chkbxGroup[i].checked = checkAllState.checked;
}
document.getElementById("Checkbox7").disabled = true;
document.getElementById("Checkbox8").disabled = true;
document.getElementById("Checkbox9").disabled = true;
document.getElementById("Checkbox10").disabled = true;
document.getElementById("Checkbox11").disabled = true;
document.getElementById("Checkbox12").disabled = true;
document.getElementById("Checkbox13").disabled = true;
document.getElementById("Checkbox14").disabled = true;
}
else
{
// Single element so not an array
chkbxGroup.checked = checkAllState.checked;
}
}
</script>
<style type ="text/css">
.style42
{
border-style: solid;
border-width: 1px;
margin-left: 10px;
width: 135px;
border-color: #8181F7;
text-align: left;
float:left;
}
.style45
{
float: left;
}
</style>
</head>
<body>
<form id="form1" method="post" action="default.aspx">
<br />
<div class="style19">
<tr>
<td align="left">
<div class="style45">
<input id="Checkbox6" name="checkall" onclick="checkUncheckAll(this, grp1);" type="checkbox" />All
</div>
<div class="style42">
<input name="grp1" id="Checkbox7" type="checkbox" />Account Admin<br />
<input name="grp1" id="Checkbox8" type="checkbox" />Network Admin<br />
<input name="grp1" id="Checkbox9" type="checkbox" />Organization Admin<br />
<input name="grp1" id="Checkbox10" type="checkbox" />Super Admin<br />
</div>
<div class="style42">
<input name="grp1" id="Checkbox11" type="checkbox" />Schema Admin<br />
<input name="grp1" id="Checkbox12" type="checkbox" />Troubleshooting Admin<br />
<input name="grp1" id="Checkbox13" type="checkbox" />Helpdesk Admin<br />
<input name="grp1" id="Checkbox14" type="checkbox" />Online Admin<br />
</div>
</td>
</tr>
</div>
</form>
</body>
</html>
|
|||||||