|
JavaScript - Can I Use A Checkbox To Disable A Function?
actually, the subject pretty much is the question, but if you want more detail, here goes:
the below function: Code: function centerAndZoom(line) {
bounds = line.getBounds();
map.setCenter(bounds.getCenter(map), map.getBoundsZoomLevel(bounds));
}
pans and zooms the map when the user selects a line, which is really useful about 95% of the time and kind of annoying 5% of the time. So I was thinking it would be good to give them the option of disabling that function for the 5%. the function gets called from a couple of different places in the code, so for neatness' sakes it would be nice to have something within the function above that checks for the checkbox state before executing. but some kind of if/else where the function gets called would be ok, too... I'm not really fussy. thanks in advance. Similar TutorialsGreetings! I'm new in JS. I have codes below that disable the other checkbox when the other is checked, now I want to add check all button. Is it possible? how can I do it? any help would be great! Code: <script language = "Javascript" type="text/javascript" >
function checkbox_disabled(tocheck,todisable,todisable2)
{
var x = document.getElementById(tocheck);
if(x.checked){
document.getElementById(todisable).disabled=true;
document.getElementById(todisable2).disabled=true;
document.getElementById(todisable2).checked = false;
}else{
document.getElementById(todisable).disabled=false;
document.getElementById(todisable2).disabled=false;
document.getElementById(todisable2).checked = true;
}
}
</script>
Hello. I have a for loop, that automatically creates textfields and checkboxes. These of course have the same name and I am using request.getParameterValues to retrieve them. However, I am struggling on this rather simple issue. I am no javascript guru, so maybe you guys could help me out. I have tried googling for this answer, but havent found anything that can help my problem exactly. I have three text fields on each row and one checkbox. I would like for each checkbox I click, that the textfields to be enabled. A sample code he Code: <td><input type="text" size="10" name="pris" disabled="disabled"></td> <td><input type="text" size="10" name="toppfart" disabled="disabled"></td> <td><input type="text" size="10" name="motorinstallasjon" disabled="disabled"></td> <td><input type="checkbox" name="motorCheckbox" value="<%=motor.getId()%>" onclick="(pris.disabled=!this.checked)& (toppfart.disabled=!this.checked)& (motorinstallasjon.disabled=!this.checked)"> </td> However this doesnt quite work :-) I have tried with document.Form.pris but that didnt help either. Guys Need Help here... here i send attach my script. i need combine 2 function script into . but i can figure it out. can everyone helps me. Code:
<?php
require_once('../Connections/koneksi.php');
?>
<!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>
<script>
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
alert("Cant delete all rows");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
function selectnama()
{
var i = 0;
i = document.form1.txtcustomer.value;
i= i.replace(/^[\s]+/,'').replace(/[\s]+$/,'').replace(/[\s]{2,}/,' ');
//alert(cust[i]);
document.form1.select2.value = i;
}
function change2()
{
document.form1.txtcustomer.value = document.form1.select2.value;
}
function enable_text(status)
{
status=!status;
document.form1.qty_material.disabled = status;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form name="form1" method="post" >
<table id="dataTable" width="auto" style="margin:-4px 0 0 0;" cellspacing="6">
<tr>
<td style="width:20px;"><INPUT type="checkbox" name="chk" /></td>
<td> <input type="text" name="txttipe[]" placeholder="Tipe" id="txttipe" size="40"/> /
<input name="txtcustomer" type="text" id="txtcustomer" onkeyup="selectnama()" size="10" maxlength="10"/>
<select name="select2" style="color:blue;" onchange="change2()" >
<option></option>
<?php
$query = mysql_query("select right(KUNNR,6), NAME1 from kna1 order by NAME1") or die(mysql_error());
$query3 = mysql_query("select * from spg_kna1_exception order by NAME1") or die(mysql_error());
while($row = mysql_fetch_array($query))
{
echo "<option value=".$row[0].">$row[1] - $row[0]</option>";
}
while($row3 = mysql_fetch_array($query3))
{
echo "<option value=".$row3[0].">$row3[1] - $row3[0]</option>";
}
?>
</select>;
<input type="checkbox" name="qty_matnr" onClick="enable_text(this.checked)" > Qty <input type="text" name="qty_material">
</td>
</tr>
</table>
<INPUT type="button" value="Add Model" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Model" onclick="deleteRow('dataTable')" />
</form>
</body>
</html>
I found this script, and it works great: Code: <script type="text/javascript">
function disable(element)
{
var input = document.getElementById(element).getElementsByTagName("input");
for(var i = 0; i < input.length; i++)
{
input[i].setAttribute("disabled","true");
}
}
</script>
I tried to make the inverse by simply reversing the setAttribute() like so: Code: <script type="text/javascript">
function enable(element)
{
var input = document.getElementById(element).getElementsByTagName("input");
for(var i = 0; i < input.length; i++)
{
input[i].setAttribute("disabled","false");
}
}
</script>
But that didn't do it. Can someone show me why, and how to fix it? Here's the sample form which I'm trying to test it on: Code: <form>
<input type="radio" name="test" onclick="disable('D1')" /> disable<br/>
<input type="radio" name="test" onclick="enable('D1')" /> enable<br/>
<fieldset id="D1">
<input class="" type="text" value="test value1" /><input class="" type="text" value="test value2" /><br/>
<input class="" type="text" value="test value3" /><input class="" type="text" value="test value4" /><br/>
<input class="" type="text" value="test value5" /><input class="" type="text" value="test value6" /><br/>
</fieldset>
</form>
Edit: The ultimate goal which I'm working toward now (step by step =) is to have a form more like: Code: <form>
<input type="radio" name="test" onclick="disable('D1')" />
<fieldset id="D1">
<input class="" type="text" value="test value1" /><input class="" type="text" value="test value2" />
</fieldset>
<input type="radio" name="test" onclick="disable('D2')" />
<fieldset id="D2">
<input class="" type="text" value="test value3" /><input class="" type="text" value="test value4" />
</fieldset>
<input type="radio" name="test" onclick="disable('D3')" />
<fieldset id="D3">
<input class="" type="text" value="test value5" /><input class="" type="text" value="test value6" />
</fieldset>
</form>
And have the fieldsets enable and disable according the selection of the radio buttons. Also, the fieldsets (and their ID's) will be dynamically generated via PHP Thanks-a-bunch, ~ Mo Hi All, This is in ASP.Net Im creating a task loggin system and this allows the user to raise tasks and update them, im using javascript for validation and if the fields are empty it then changes the fields back ground to Red which is fine but then it goes on to update the data in SQL which i dont want, any suggestions or how i can achieve no post back is the result from the function is False (for fields in error) Html Code where im calling the function Code: <asp:button runat="server" id="btnChangeCommentsAuth" CSSclass="RaiseButton" OnClientClick="CommentsCheck('MainDisplayContentChange_txtAuthCommentsArea');" PostBackUrl="~/RaiseTaskChange.aspx" Text="Auth" />
Javascript function Code: function CommentsCheck(comments)
{
var com;
var result = new boolean();
com = document.getElementById(comments);
if (document.getElementById(comments).value == '') {
com.style.backgroundColor = "#B20635";
result = 0;
}
else
{
result = 1
}
}
Thanks in Advance look forward to your reply. Hi, I have a JavaScript function which counts the number of checkboxes in a form, it then counts the number of checked checkboxes, it then calculates a percentage based on the number of checkboxes checked. The problem I have is that if there is only one checkbox in the form (record from the db) then the JS function does not work. Code: //function to check total number of GREEN CheckBoxes checked
function countChecksGreen(form)
{
//initialize total count to zero
var totalChecked = 0;
//get total number of CheckBoxes in form
var chkBoxCount = examsetting.checkboxgreen.length;
//loop through each CheckBox
for (var i = 0; i < chkBoxCount; i++)
{
//check the state of each CheckBox
if (eval("document.examsetting.checkboxgreen[" + i + "].checked") == true)
{
//it's checked so increment the counter
totalChecked += 1;
}
}
//return the number of checked
var greenElement = document.getElementById('green');
var green = greenElement.innerHTML;
var percentage = totalChecked/<?php echo $exam['questions']; ?>*100;
greenElement.innerHTML = Math.round(percentage*10)/10;
}
Any help would be appreciated. Hello, i want to build a tax calculator's form, i want use a checkbox, so when the checkbox "checked" then the total tax will add the "luxury goods tax" on total tax. this is my code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>KasKusbay Order Calculator</title>
</head>
<SCRIPT language = "javascript">
var currency_rates = new Array();
currency_rates["GBP"]=0.62;
currency_rates["CAD"]=0.99;
currency_rates["EUR"]=0.75;
currency_rates["AUD"]=0.96;
function getCurrencyRates()
{
var currencyRates=0;
var theForm = document.forms["myform"];
var selectedCurrency = theForm.elements["currency"];
currencyRates = currency_rates[selectedCurrency.value];
return currencyRates;
}
function addPbm()
{
var PbmService=0;
var theForm = document.forms["myform"];
var pbm = theForm.elements["pbm"];
if(pbm.checked==true)
{
pbmService = [J];
}
return pbmService;
}
function addPbm()
{
var PbmService=0;
var theForm = document.forms["myform"];
var pbm = theForm.elements["pbm"];
if(pbm.checked==true)
{
pbmService = [J];
}
return pbmService;
}
function ceiling( num, at )
{
var temp = num / at; // 523/50 ==>> 10.46
return Math.ceil(temp) * at; // ceil(10.46 ==>> 11, 11 * 50 ==>> 550
}
function calculateTotal()
{
var X;
var form = document.myform;
var A = form.price.value.replace(/[^\d\.]/g, "");
form.price.value = A;
var B = form.shipping_cost.value.replace(/[^\d\.]/g, "");
form.shipping_cost.value = B;
var F = (parseFloat(A) + parseFloat(B)) * getCurrencyRates();
var C = Number(F) * parseFloat("0.1");
form.total.value = C.toFixed(2);
var G = Number(F) + Number(C);
var H = Number(G) * parseFloat("0.05")
form.p2.value = H.toFixed(2);
var I = Number(G) * parseFloat("0.03")
form.p3.value = I.toFixed(2);
var J = Number(G) * parseFloat("0.2")
form.p4.value = J.toFixed(2);
X = Number(C) + Number(H) + Number(I) + addPbm();
form.total_IDR.value = X.toFixed(2);
//exp: ceiling: document.jslearnform.total_USD.value = Math.ceil(X);
//or decimal: document.jslearnform.total_USD.value = X.toFixed(2);
//or even document.jslearnform.total_USD.value = Math.ceil(X).toFixed(2);
}
</SCRIPT>
<body>
<form name="myform" method="post" action="">
<table width="93%" border="0" id="form_table2">
<tr>
<th width="24%"><p>Price ›</p></th>
<td width="37%"><p> $
<input type="text" size="7" id="price" name="price" />
<select id="currency" name="currency" onchange="calculateTotal()">
<option value"gbp">GBP</option>
<option value"cad">CAD</option>
<option value"eur">EUR</option>
<option value"aud">AUD</option>
</select>
<br />
Input Price and Currency</p></td>
<td width="39%" rowspan="3"><p align="right">Duty
<input type="text" style="background-color: #DCDDDD;" size="12" id="total" readonly name="total" value="" />
</p>
<p align="right">Sales Tax
<input type="text" style="background-color: #DCDDDD;" size="12" id="p2" readonly="readonly" name="p2" value="" />
</p>
<p align="right">Income Tax
<input type="text" style="background-color: #DCDDDD;" size="12" id="p3" readonly="readonly" name="p3" value="" />
</p>
<p align="right">Luxury Goods Tax
<input type="text" style="background-color: #DCDDDD;" size="12" id="p4" readonly="readonly" name="p4" value="" />
</p></td>
</tr>
<tr>
<th>Shipping Cost ›</th>
<td> $
<input type="text" size="7" id="shipping_cost" name="shipping_cost" />
<br /></td>
</tr>
<tr>
<th>Kind ›</th>
<td><select id="currency3" name="currency2" onchange="calculateTotal()">
<option value="value""EL">Electronic</option>
<option value="value""NL">Apparel</option>
</select>
<br />
<input type="checkbox" id="pbm" name="pbm" />
Luxury Item</td>
</tr>
<tr>
<th>Tax ›</th>
<td><div align="center">
<input type="text" style="background-color: #DCDDDD;" size="14" id="total_IDR" readonly name="total_IDR" value="" />
</div></td>
<td> </td>
</tr>
<tr>
<th> </th>
<td><div align="center">
<input type="button" value="Calculate" onclick = "javascript:calculateTotal()" />
<input type="reset" value="Reset" />
</div></td>
<td><div align="center"></div></td>
</tr>
</table>
</form>
</body>
</html>
But i have problem with the function command, the total tax doesn't appear, seems i made wrong function code on function adPbm(). Code: function addPbm()
{
var PbmService=0;
var theForm = document.forms["myform"];
var pbm = theForm.elements["pbm"];
if(pbm.checked==true)
{
pbmService = [J]; =====> anyone can help me correct this coding?
}
return pbmService;
}
Thank you for anyone could help. Hello, I am not a coder and this has been giving me grief for days My form is located here on page three of the multi form: http://www.rocpinions.com/main-form.html I have been working on this for days and can't figure it out. I have four check boxes. Dog, Cat, Other, and None of These. If Dog Cat and Other (or any combination of) are checked that is fine but if the check box "None of These" is checked I need it to remove the checks from All other boxes. This is an example of exactly what I need my form to do jsfiddle.net/srEuM/ Does anyone know how I can accomplish this with RS Form Pro? Here is the code I am using: Code: <script type="text/javascript">
function checkI()
{
var checkL = document.getElementsByName('form[PetsInHouse][]');
for (var i=0;i<checkL.length-1;i++)
if(document.getElementById('PetsInHouse3').checked){
document.getElementById('PetsInHouse'+i).disabled = true;
document.getElementById('PetsInHouse'+i).checked = false;
}
else {
document.getElementById('PetsInHouse'+i).disabled = false;
}
}
</script>
This is how I am calling it in the additional attributes in RS Form Pro Code: onclick="checkI();" I am currently using this code above and it only disables all checkboxes when "None of These" is checked but if I check any of the other boxes I can still check "None of These" and that is not the correct functionality. This is exactly what I need to do but in the same format I have above. http://jsfiddle.net/srEuM/ Any help would be greatly appreciated. Thank you Deziner Hello! I have modified the create_account.php page of an osCommerce store, and I added 4 checkboxes for the 4 terms that the customers must agree to. If not checked, the error message should come up (same for each - doesn't matter)> ok nevermind it's actually working now. I am fairly new to javascript and am attempting to create a function that will clear one checkbox when another is checked. I have multiple forms with dynamically generated names on the page. Here is what I have: <script type="text/javascript"> function undo_Complete(myForm) { var formName = myForm.name; if(document.formName.getElementsByName("Needs_Change").checked==true) { document.formName.getElementsByName("Complete").checked=false; } } </script> The two checkbox fields involved: <input name="Complete" value="Yes" <?php echo($Complete=="Yes") ? "checked" : ""; ?> size="4" type="checkbox"> <input name="Needs_Change" value="Yes" <?php echo($Needs_Change=="Yes") ? "checked" : ""; ?> size="4" type="checkbox" onClick="undo_Complete(this.form)"> Could someone please tell me what I am doing wrong? Thank you! Lisa For the sample code: Code: <form name=form>
<ul>
<li><input type="text" onkeyUp="calc1();" name=x ></li>
<li><input type="text" onkeyUp="calc2();" name=y ></li>
</ul>
</form>
<script>
function calc1() {
document.form.y.value = (10 * document.form.x.value).toPrecision(5);
}
function calc2() {
document.form.x.value = (0.1 * document.form.y.value).toPrecision(5);
}
</script>
How can I use a checkbox to : (1) Upon check, change the current values to toExponential(5) format (2) Use a different script and/or function that would then calculate with toExponential(5) [as opposed to the hard coded toPrecision(5) in the current functions. (3) Upon unchecking, the result should should go back to Precision and change the function and/or script back to the original. 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'm trying to disable my record navigation pictures when they get to the end of a calendar (events are posted on days, and navigation goes to the next or previous one). Code: <a onclick="javascript:previousEvent();">
<input type="image" name="previous" src="images/SiteCollectionImages/MiniEvents/btn_Previous.gif" alt="Previous Event" title="Previous Event"/></a>
<a onclick="javascript:nextEvent();">
<input type="image" name="next" src="images/SiteCollectionImages/MiniEvents/btn_Next.gif" alt="Next Event" title="Next Event"/></a>
This is where I have to disable the pictures. Above in my JS I would like to have a handler that could disable them when they are at the end of the index, or at the beginning. Thanks! edit: I do have the logic already, just not sure how to disable the images. Code: function nextEvent(i) {
if (index == maxIndex || index >= maxIndex) {
//disable next button
tempObj = document.getElementsByName("next");
tempObj.visible = false;
}
else {
index = index + 1;
eventSelected(rawDates[index]);
}
Hello, Thanks for reading. This is my first post, I hope it's not too stupid. Should I disable the right click option or not? I have a gallery site, I don't want people to be able to copy the images with the default right click over an image. From a professional looking site point of view I suppose I would be messing with the functionality a bit too much, OR is it OK in this instance to disable the click. I know how to write the code to disable the click, but what I was thinking was maybe it would be better to leave the right click but change the menu options? I'm not sure how to change the menu options, any suggestions would be appreciated Here is a link to the site. http://www.thephotographbox.com/?ID=3 (It's still in the early stages on development) Thanks for any advice. Derek. Hi, how to disable the restore down button in internet explorer through java script. Regards, Basha. Is it possible to disable all scripts within a certain div? Like if I was displaying something in <div id="member"> and a member posts a script within that div, I would like it to not work.
Hello, I have been looking for a good walk-through online, but can't seem to find an exact resolution to what I am trying to do. Can someone please supply some example code for not displaying everything that is inside a <div>. Basically I do not want social media content to be displayed on secure pages, but want them on every other page. This is what I have: Code:
<div id="share">
<ul>
<li>
<div class="addthis_toolbox addthis_default_style ">
<a href="http://www.addthis.com/bookmark.php?v=250&username=###### class="addthis_button_compact">Share</a>
<span class="addthis_separator">|</span>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
</div>
</li>
<script>
var addthis_config = {"data_track_clickback":true};
if (document.location.protocol !== 'https:') {
$jq.getScript('http://s7.addthis.com/js/250/addthis_widget.js?username=######', function() { });
}
</script>
</ul>
</div>
Hi all, I have a form with a number of checkboxes. The 1st one is "Select All". When this checkbox is ticked I would like to disable all others. When the "Select All" checkbox is unticked, all checkboxes should be enabled. Can anyone tell me how to do this? is JQuery the preferred method these days? Thanks in advance Is there a way to disable a SINGLE script on the page, something that a user can click and it disables only the script choosen? Thanks, Latchy |
|||||||