JavaScript - Activate Button If Some Checkbox Is Checked

I am using 2-3 checkboxes in my VB.Net program.When I run the code in Firefox, I can not check or uncheck the checkboxes.I am using firebug,Still it does not show any error. It works fine in google Chrome..

Plz reply.........

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.

Need a javascript function...

If a checkbox is checked, then corresponding dropdown selection is must...

Please help me with this...

Thanks
Reply With Quote

hi guys, i need a javascript for my checkbox

1st: need to check the checkbox to go to next page or else stay at current page with an alert popout "Please check the checkbox"

can some one help me please?

Hi,
Have searched the forum and found a soloution that probably only needs some modification.

I have a number of question with related alternatives in a db that I display on a webpage. I wan't to force the user to select an alternative. I use checkboxes because sometimes more then one answer is correct. I have found a bit of code that lets me do this. The problem is that sometimes the alterative to the question is 3 and sometimes 5 (I don't know beforehand how many alterantives a question has). So is there a way to modify the code to work if there are 3 checkboxes or 5 checkboxes and so on...?

The code below only works with a fixed number of alternatives.

Code:

<form action="../" onsubmit="return checkCheckBoxes(this);">
	<p><input type="CHECKBOX" name="CHECKBOX_1" value="This..."> This...</p>
	<p><input type="CHECKBOX" name="CHECKBOX_2" value="That..."> That...</p>
	<p><input type="CHECKBOX" name="CHECKBOX_3" value="...and The Other"> ...and The Other</p>
	<p><input type="SUBMIT" value="Submit!"></p>
</form>

Code:

<script type="text/javascript" language="JavaScript">
<!--
function checkCheckBoxes(theForm) {
	if (
	theForm.CHECKBOX_1.checked == false &&
	theForm.CHECKBOX_2.checked == false &&
	theForm.CHECKBOX_3.checked == false) 
	{
		alert ('You didn\'t choose any of the checkboxes!');
		return false;
	} else { 	
		return true;
	}
}
//-->
</script>

Hi

I am very new to Javascript and I was wondering if anyone could help.

This is my jQuery code:
Code:

$(document).ready(function(){
if("input.cf_flt:checked") {
	$(".filterbox").show()
}
else {
	$(".filterbox").hide()
}
$(".filtertoggle").click(function()
  {
    $(this).next(".filterbox").slideToggle(500);
  });
});

HTML (sorry, quite a lot)
Code:

<h3 class="filtertoggle">Filter These Results <span>Click Here</span></h3>

<div class="filterbox">
<form name="cf_form" action="index.php" method="get"
	class="cf_form topfilter">
		<div class="cf_flt_wrapper">
	
		<div class="cf_flt_header" id="cfhead_0">
        Grape		</div>

		<div class="cf_wrapper_inner"
			id="cf_wrapper_inner_0">
			<ul class="cf_filters_list"><li><input onclick="window.location='/eden/index.php?custom_f_17[0]=50726f63616e69636f2c2056657264656c6c6f2c2047726563686574746f2c204d616c766173696120546f7363616e61&amp;option=com_customfilters&amp;view=products';" type="checkbox" name="custom_f_17[]"class="cf_flt" id="flt_50726f63616e69636f2c2056657264656c6c6f2c2047726563686574746f2c204d616c766173696120546f7363616e61" value="50726f63616e69636f2c2056657264656c6c6f2c2047726563686574746f2c204d616c766173696120546f7363616e61" /><label class="" for="flt_50726f63616e69636f2c2056657264656c6c6f2c2047726563686574746f2c204d616c766173696120546f7363616e61"><a href="/eden/index.php?custom_f_17[0]=50726f63616e69636f2c2056657264656c6c6f2c2047726563686574746f2c204d616c766173696120546f7363616e61&amp;option=com_customfilters&amp;view=products" class="cf_option ">Procanico, Verdello, Grechetto, Malvasia Toscana</a></label></li><li><input onclick="window.location='/eden/index.php?custom_f_17[0]=53616e67696f76657365&amp;option=com_customfilters&amp;view=products';" type="checkbox" name="custom_f_17[]"class="cf_flt" id="flt_53616e67696f76657365" value="53616e67696f76657365" /><label class="" for="flt_53616e67696f76657365"><a href="/eden/index.php?custom_f_17[0]=53616e67696f76657365&amp;option=com_customfilters&amp;view=products" class="cf_option ">Sangiovese</a></label></li></ul>		</div>
			</div>
		<div class="cf_flt_wrapper">
	
		<div class="cf_flt_header" id="cfhead_1">
        Bottle Size		</div>

		<div class="cf_wrapper_inner"
			id="cf_wrapper_inner_1">
			<ul class="cf_filters_list"><li><input onclick="window.location='/eden/index.php?custom_f_18[0]=3735636c&amp;option=com_customfilters&amp;view=products';" type="checkbox" name="custom_f_18[]"class="cf_flt" id="flt_3735636c" value="3735636c" /><label class="" for="flt_3735636c"><a href="/eden/index.php?custom_f_18[0]=3735636c&amp;option=com_customfilters&amp;view=products" class="cf_option ">75cl</a></label></li></ul>		</div>
			</div>
		<div class="cf_flt_wrapper">
	
		<div class="cf_flt_header" id="cfhead_2">
        ABV		</div>

		<div class="cf_wrapper_inner"
			id="cf_wrapper_inner_2">

			<ul class="cf_filters_list"><li><input onclick="window.location='/eden/index.php?custom_f_16[0]=31322e3525&amp;option=com_customfilters&amp;view=products';" type="checkbox" name="custom_f_16[]"class="cf_flt" id="flt_31322e3525" value="31322e3525" /><label class="" for="flt_31322e3525"><a href="/eden/index.php?custom_f_16[0]=31322e3525&amp;option=com_customfilters&amp;view=products" class="cf_option ">12.5%</a></label></li><li><input onclick="window.location='/eden/index.php?custom_f_16[0]=313325&amp;option=com_customfilters&amp;view=products';" type="checkbox" name="custom_f_16[]"class="cf_flt" id="flt_313325" value="313325" /><label class="" for="flt_313325"><a href="/eden/index.php?custom_f_16[0]=313325&amp;option=com_customfilters&amp;view=products" class="cf_option ">13%</a></label></li><li><input onclick="window.location='/eden/index.php?custom_f_16[0]=31332e3525&amp;option=com_customfilters&amp;view=products';" type="checkbox" name="custom_f_16[]"class="cf_flt" id="flt_31332e3525" value="31332e3525" /><label class="" for="flt_31332e3525"><a href="/eden/index.php?custom_f_16[0]=31332e3525&amp;option=com_customfilters&amp;view=products" class="cf_option ">13.5%</a></label></li></ul>		</div>
			</div>
		<div class="cf_flt_wrapper">
	
		<div class="cf_flt_header" id="cfhead_3">
        Vintage		</div>

		<div class="cf_wrapper_inner"
			id="cf_wrapper_inner_3">

			<ul class="cf_filters_list"><li><input onclick="window.location='/eden/index.php?custom_f_15[0]=32303038&amp;option=com_customfilters&amp;view=products';" type="checkbox" name="custom_f_15[]"class="cf_flt" id="flt_32303038" value="32303038" /><label class="" for="flt_32303038"><a href="/eden/index.php?custom_f_15[0]=32303038&amp;option=com_customfilters&amp;view=products" class="cf_option ">2008</a></label></li><li><input onclick="window.location='/eden/index.php?custom_f_15[0]=32303130&amp;option=com_customfilters&amp;view=products';" type="checkbox" name="custom_f_15[]"class="cf_flt" id="flt_32303130" value="32303130" /><label class="" for="flt_32303130"><a href="/eden/index.php?custom_f_15[0]=32303130&amp;option=com_customfilters&amp;view=products" class="cf_option ">2010</a></label></li></ul>		</div>
			</div>
		<input type="hidden" name="option" value="com_customfilters" /> <input
		type="hidden" name="view" value="products" />
</form>

</div>

Basically if the checkbox with a class of cf_flt is checked then I want the div '.filterbox' to show. if the checkbox is unchecked then I want it to hide.
As well as this I have a toggle button called '.filtertoggle' which toggles the '.filterbox'

At the moment the '.filterbox' shows regardless of whether or not the checkbox is checked. The toggle button works correctly.

If you know how to fix this then I would be very grateful. Thank you.

go he

http://qodeplay.com/javascript



help me accomplish this and send this data to a mysql column!



note: the field will not grey out in ie.

Why my checkbox remain checked even i refresh my browser ?

I've not really an idea how to do this. I know how to do it in PHP, but I need it dynamic

<input type="checkbox" name="facebook" value="1" />
if($_POST['facebook'] == 1)
echo "<input type='text' name='facebook_url' />";

Could someone tell me how I should do this.

Thanks.

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

Pleas how can i change div bg color with active chcecked radio button

<div style="background-color:#fff;"><input type="radio" name="radio" id="radio" value="1" /> Active performer</div>
<div style="background-color:#fff;"><input type="radio" name="radio" id="radio" value="2" /> Poster</div>
<div style="background-color:#fff;"><input type="radio" name="radio" id="radio" value="3" /> Only attender</div>

- if checked, change color from #fff to #ccc


For checkboxes i find this
<span id="cDate1" style="background-color:#FFF"><input type="checkbox" name="check" id="date1" onclick="document.getElementById('cDate1').style.backgroundColor=this.checked?'#ccc':'#FFF';" /> 13.10.2010</span>

Thnx for help in advance

Hey
I'm trying to create a function which when my "other address" radio button is checked, the "address2", "suburb2" and "postcode2" fields MUST be filled out by the user. I think I need to be using a for loop to determine which button is checked , but I don't know how to apply this checked button to prompt my client that the remaining fields must be completed (as seen in red)? Here is what I have come up with so far...
Many thanks in advance for advice or pointers

[CODE][ICODE]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Order Form for Joe's Fruit Shop</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Cherie_ONeill">

<style type="text/css">
body {font-family:arial;color:#000000;font-size:10px;}
h4 {font-style:italic;}
.input {font-size:10px;color:#483D8B;}
</style>
<script type='text/javascript'>



function formValidator()
{
// Make quick references to our fields
var fullname = document.getElementById("fullname");
var stnumber = document.getElementById("stnumber");
var address = document.getElementById("address");
var suburb = document.getElementById("suburb");
var state = document.getElementById("state");
var postcode = document.getElementById("postcode");
var phone = document.getElementById("phone");
var email = document.getElementById("email");


// Check each input in the order that it appears in the form!
if(isAlphabet(fullname, "Please enter letters only for your name")){

if (isNumeric(stnumber, "Please enter numbers only for your house number")){

if(isAlphanumeric(address, "Please enter your street name")){

if(isAlphabet(suburb, "Please enter letters only for your suburb")){

if(madeSelection(state, "Please Choose a State")){

if(isNumeric(postcode, "Please enter a valid postcode")){

if(lengthRestriction(postcode, 4, 4)){

if(isNumeric(phone, "Please enter a valid phone")){

if(lengthRestriction(phone, 10, 10)){

if(emailValidator(email, "Please enter a valid email address")){

return true;

}
}
}
}
}
}
}
}
}
}
return false;
}

//ensure all fields are filled but this funtion may not be required on this form
function notEmpty(elem, helperMsg)
{

if(elem.value.length == 0)
{
alert(helperMsg);
elem.focus(); // set the focus to this input
return false;
}
return true;
}


//ensures a field is numeric only
function isNumeric(elem, helperMsg)
{
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression))
{
return true;
}
else
{
alert(helperMsg);
elem.focus();
return false;
}
}

//ensures a field contains letters only
function isAlphabet(elem, helperMsg)
{
var alphaExp = /^[a-zA-Z _]+$/;
if(elem.value.match(alphaExp))
{
return true;
}
else
{
alert(helperMsg);
elem.focus();
return false;
}
}

//ensures a field has both numbers & letters
function isAlphanumeric(elem, helperMsg)
{
var alphaExp = /^[A-Za-z0-9 _]*[A-Za-z0-9][A-Za-z0-9 _]*$/;
if(elem.value.match(alphaExp))
{
return true;
}
else
{
alert(helperMsg);
elem.focus();
return false;
}
}

//restricts the amount of digits required in a numeric field
function lengthRestriction(elem, min, max)
{
var uInput = elem.value;
if(uInput.length >= min && uInput.length <= max)
{
return true;
}
else
{
alert("Please enter between " +min+ " and " +max+ " characters");
elem.focus();
return false;
}
}

//validates a selection has been made from the select lists
function madeSelection(elem, helperMsg)
{
if(elem.value == "Please Choose")
{
alert(helperMsg);
elem.focus();
return false;
}
else
{
return true;
}
}

//validates the email address
function emailValidator(elem, helperMsg)
{
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(emailExp))
{
return true;
}
else
{
alert(helperMsg);
elem.focus();
return false;
}

}

//resets the form

function formReset()
{
document.getElementById("orderForm").reset();
}



</script>

</head>

<body>

<h2>Order Form</h2>

<h4>* Indicates required fields.</h4>

<h4>Your details:</h4>

<form name="orderForm" id="orderForm" onsubmit="return formValidator()">

<p>* Name:&nbsp;<input id="fullname" name="fullname" class="input"></p>

* Number:&nbsp;<input id="stnumber" size="5" class="input">&nbsp;* Address:&nbsp;<input id="address" name="address" class="input"></p>

<p>* Suburb or Town:&nbsp;<input id="suburb" name="suburb" class="input">

&nbsp;* State:&nbsp;<select class="input"id="state"><option>Please Choose</option><option>ACT</option><option>NSW</option><option>NT</option><option>QLD</option><option>SA</option><option>VIC</option><option>WA</option></select>

&nbsp;* Postcode:&nbsp;<input id="postcode" name="postcode" maxlength="4" size="4" class="input" ></p>

<p>* Home phone:&nbsp;<input name="phone" id="phone" maxlength="10" size="10" class="input"></p>

<p>* Email:&nbsp<input name="email" id="email" value="enter your current email address" class="input"></p>

<br>


<h4>Purchase details</h4>

<p>* Basket choice:&nbsp;<select class="input"><option>Fruit Deluxe</option><option>Vege Deluxe<option>Fruit & Vege Deluxe</option><option>Tropical Treat</option><option>Vege Basics</option></select>

&nbsp;Quantity:&nbsp;<select class="input"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></p>

<p>* Deliver to:</p>

<input type="radio" id="deliverhome" name="delivery" value="home" checked="checked"><label for="deliverhome">Home address</label><br>

<input type="radio" id="deliverother" name="delivery" value="other"><label for="deliverother">Other address</label> <br>

<br>

<input type="text" name="address2" id="address2" class="input">&nbsp;(Street)

&nbsp; <input type="text" name="suburb2" id="suburb2" class="input">&nbsp;(Suburb/Town)

&nbsp;<select class="input"><option>ACT</option><option>NSW</option><option>NT</option><option>QLD</option><option>SA</option><option>VIC</option><option>WA</option></select>&nbsp;(State)

&nbsp;< input type="text" name="postcode2" id="postcode2" maxlength="4" size="4" class="input">&nbsp;(Postcode)


<br>

<input type="submit" value="Submit">&nbsp;<input type="button" onclick="formReset()" value="Reset">

</form>

</body>

</html>

Hi - noob here.

I'm trying to set the value of a radio button in an html page when another radio button on the same page is checked.

I want to use an external javascript file rather than inline script.

My html is:

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>Pin config</title>
<link type="text/javascript" href="scripts/pinRadioBtns.js" />
</head>


<body>


<form name="preset">
	<input type="radio" name="preset" value="option1" onclick="javascript: setBtns();" />Option 1
	<input type="radio" name="preset" value="option2" />Option 2
</form>

<form name="pin4">
   <input type="radio" name="pin4" id="pin4btn1" value="GPIO0" />GPIO0 <br />
   <input type="radio" name="pin4" id="pin4btn2" value="nSPI_ADDR0" />nSPI_ADDR0
</form>
</body>

and my javascript file (which lives in a 'scripts' folder 1 level lower than the html)

Code:

function setBtns () {
   document.pin4.pin4btn1.checked = true;
   document.pin4.pin4btn2.checked = false;
}

so when the Option 1 radio button in the top form is clicked, I want to check the pin4btn1 radio button in the second form. currently when I preview the html (I'm using expression web) and click the option 1 radio button, nothing happens. maybe I'm referencing the 2nd radio button incorrectly..?

any tips much appreciated...

Hi,

I have a choice of three market items and I want the value of the selected one to be sent to my form. My code is:

Code:

<script type="text/javascript">
function loadXMLDoc2(File,ID,Msg){
if (window.XMLHttpRequest)  {
  xmlhttp=new XMLHttpRequest();
  }
else {
	try{
  xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }	
}

xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById(ID).innerHTML=xmlhttp.responseText;
    }
  }

var params=Msg;
xmlhttp.open("POST",File,true);

xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
}
</script>
</head>
<body>
	<input type="radio" name="myitem" id="myitem" value="All;" onclick="OtherFunction()" />All
	<br /><br />'							<input type="radio" name="myitem" id="myitem" value="Shirts" onclick="OtherFunction()"  />Shirts
 	<br /><br />
              <input type="radio" name="myitem" id="myitem" value="Trousers" onclick="OtherFunction()" />Trousers
 	<br /><br />
	<br /><br />

<input type="button" class="indent" name="submitB" id="submitB" value="Submit" onclick="loadXMLDoc2('insertMarket.php','txtHint', 'md='+encodeURI(document.getElementById('myitem').value))" />
<div id="txtHint"></div>

This doesn't work.

I have tried giving them different ids, I have tried replacing the id with checked="id=\'myitem\'", I have tried getElementById(\'myitem.checked\'), I have tried getElementbyName.

In my full page I have far more radio buttons, so I don't want to do a getElementById(\'myitem[0].checked || myitem[1].checked etc.

I think the solution must be along these lines. But I have run out of alternatives to try. Needless to say as it currently stands it gives the last radio button's value, which means it doesn't like them having the same id, but when I tried changing how the id was applied, or called - ElementByName, FF gives the error message as id is null.

Hello,

I am pretty new at javascript and I am trying to create a payment form that has both fields for payment by check and payment by credit card.

I am wondering how I would go about having a radio button that asks the user how they would like to pay "credit card" or "check" and depending on which one they pick it shows the fields pertaining to that type of payment.

the fields in the form look like this:
Credit Card Fields:
Code:

<select name="card_type" size="1">
	<option value="">- Card Type - </option>
	<option value="1">Visa</option>
	<option value="2">Mastercard</option>
	<option value="3">Discover</option>
	<option value="4">American Express</option>
</select>

Expiration Date<input type="text" name="exp_date" value="" id="exp_date">

CVC Code<input type="text" name="cvc" value="" id="cvc">

Card Number<input type="text" name="card_number" value="" id="card_number">

Amount On Credit Card<input type="text" name="card_amount" value="" id="card_amount">

Name On Card<input type="text" name="name_on_card" value="" id="name_on_card">

Billing Address<input type="text" name="billing_address" value="" id="billing_address">

Billing City<input type="text" name="billing_city" value="" id="billing_city">

<select name="billing_state" size="1">
	<option value="">- Billing State -</option>
</select>

Check Fields:
Code:

Name (as printed on check)<input type="text" name="check_name" value="" id="check_name">

Address On Check<input type="text" name="check_address" value="" id="check_address">

Amount On Check<input type="text" name="check_amount" value="" id="check_amount">

Checking Account Number<input type="text" name="check_acc_number" value="" id="check_acc_number">

Routing Number<input type="text" name="routing_number" value="" id="routing_number">

Check Number<input type="text" name="check_number" value="" id="check_number">