JavaScript - If Checkbox Is Checked Show Input Field

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.

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>

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>

hello

I have a list of checkbox called de[] i use [] for create array in php so i have a button called "delete" so i want to activate the button if almost one of checkbox has been checked other way the input button will be disable. sorry for my english jejejeje. Regards

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?

Need a javascript function...

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

Please help me with this...

Thanks
Reply With Quote

Why my checkbox remain checked even i refresh my browser ?

ok so here is my situation

i have 4 hidden fields in a form called "searchform"

Code:

<input type="hidden" name="forumchoice[]" value="1" checked />
<input type="hidden" name="forumchoice[]" value="2" checked />

<input type="hidden" name="forumchoice[]" value="3" checked />
<input type="hidden" name="forumchoice[]" value="4" checked />

Now here's what i want to do:

i have two checkbox

Code:

<input  onclick="??????????" type="checkbox" name="checkbox1" id="checkbox1"/>
<input  onclick="??????????" type="checkbox" name="checkbox2" id="checkbox2"/>

- when checkbox1 is checked, i want to activate the hidden inputs 1 & 2. if it is unchecked, then desactivate hidden inputs 1&2

- when checkbox2 is checked, i want to activate the hidden inputs 3 & 4. if it is unchecked, then desactivate hidden inputs 3&4


could someone help me with the "onclick" code i would need to do this ??

thanks a lot!!

I was wondering if anyone could help me with getting this working.

I'm using html to create a table which has at least 1 row but no max number of rows - as they can be added/removed by the user - and 4 columns, 1st contains a checkbox and the last 2 contain drop down menus.

I wish to be able to store the values of those menus in an array only if that row's checkbox has been checked. e.g if the first row has 1 and A as it's dropdown values and the second row has 2 and B. If only row 1 has been checked the array should only contain [1,A]. Instead mine holds all the values including the non-checked ones i.e [1,A,2,B].

My code for javascript function and html table are below:

Code:

function calculate(textID){
    var table = document.getElementById('course'); //id of table
    var rowCount = table.rows.length;
    var array = []; //array to hold the values
    var c = 0;

    dmenus = document.getElementByTagName("select"); //get the drop down menus

    for(var a = 1; a < rowCount; i++){ //a = 1 as the 1st row contains column headings
        var row = table.rows[a];
        var check = row.cells[0].childNodes[0];
        if(null != check && true == check.checked){
            for(var b = 0; b < dmenus.length; b++){
                val = dmenus[b].options[dmenus[b].selectedIndex].value;
                array[c] = val; //set index of array to equal value of dropdown box
                c++;
            }
        }else{
            b++;
        }
    }

Html code for table:
Code:

<table id="course">
    <tr>
        <td><input type="checkbox" name="ucheck" id="ucheck" onclick="checkAll('course')"/></td>
            <th style="color:white">Course Title</th>
            <th style="color:white">Credits</th>                
            <th style="color:white">Grade</th>
        </tr>
    <tr>
            <td><input type="checkbox" name="tick" id="tick"/></td>
            <td><input type="text"/></td>
            <td>
                <select name="credits" id="credits">
                    <option...</select></td>
            <td>
                <select name="grade" id="grade">
                    <option...</td>

It works only for the first row but if there are more than 1 row it doesn't do what it's supposed to. The coding platform I'm working on does not seem to support jquery so javascript code will be most appreciated. Thanks

Hi,

my code below shows 2 radio buttons, when you click on one, it shows the content from a div, I would like to show the content of the checked radio button by default, at teh moment, they don't show any content until they are clicked!

Code:

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){ 
    $("input[name$='group1']").click(function() {
        var test = $(this).val();
        $("div.desc").hide();
        $("#"+test).show();
    }); 
});


</script>

</head>

<body>
    <input type="radio" name="group1" value="AvailableMon" checked>Available  
    <input type="radio" name="group1" value="Unavailable">Unavailable

<style type="text/css">
    .desc { display: none; }
</style>

<div id="AvailableMon" class="desc">Available</div>
<div id="Unavailable" class="desc">Unavailable</div>
</body>
</html>

display text depending dropdown

Hey!

I am creating a new function for my website which will make it very nice I believe. But since I am no good at javascript I have got quite stuck here but I don't think it's that hard afterall. Actually I'm not completely sure if javascript is needed but please lead me in the right direction here, I'm lost.

What I want to make is depending what checkboxes the visitor choose and then click "Search" he will get a certain result which is categoried under these checkboxes.

I don't know what else to say but I hope you get an idea of what I mean, if not please ask and I'll try explain it better.

Thankful for your help

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>

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!

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()"