simple javascrpt: checkbox

AndyInUK

Hi Devs,

            <label class="label" for="ex11">Label:</label>   
            <input type="checkbox" id="ex11" />

and javascript

         $("#ex11")
		// attach the iButton behavior
		.iButton({
		 /\*  labelOn: "Yes"
		 , labelOff: "No"
		 ,\*/ change: function ($input){
				// update the text based on the status of the checkbox
				$("#status").html($input.is(":checked") ? "Switched ON" : "Switched OFF");
				
			}
		})
		// trigger the change event (to update the text)
		.trigger("change");
});

Now the problem is - When check box is checked - i want to pass a variable with 1 value that will be stored in the database. How can i do that in current situation?? Do i have to pass the variable from javascript to php and then sore it in database ? If yes then what's the best way to pass variable with 1 value to php ?? Thanks

Evan Gallup

The way I would do so (if you want to do it on the fly, without the user changing pages) is to use AJAX. It's really quite simple actually, don't let AJAX scare you off if you haven't ventured into it yet.

function saveCheckBoxValue(value)
{
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
[DO SOMETHING HERE SUCH AS THE EXAMPLE BELOW THIS]
document.getElementById('#ex11').innerHTML += "Value saved!";
}
}

xmlhttp.open("GET","[LOCATION TO PHP SCRIPT HERE]?value=" + value,true);
xmlhttp.send();
}

Then, in the HTML code for your checkbox, all you must do is this:

Not sure if this is what you were looking for, but I figured I'd give my two cents. The best part about this is that you can create multiple checkboxes, but still only use that one js function to save the values. You will most likely need to tweak this to your needs, such as the value that the checkbox must have, but it's a start at least. Happy coding! :-D

AndyInUK

Hi Evan, Thanks for your reply. This make sense and works but it doesn't seem to work when i check/uncheck more than once. I would like the checkbox with two values. When checked -> 1 should be stored in the database and when unchecked -> 0 should be stored in db. I can do something like this but then it will display two checkbox and that doesn't really help.

I guess am missing something very basic?? Thanks Andyyy

Evan Gallup

Yes, something very very very basic. You need to look at the AJAX script.

function saveCheckBoxValue(value)
{
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
if(document.getElementById('users').checked) document.getElementById('users').value = '1';
else document.getElementById('users').value = '0';
document.getElementById('#ex11').innerHTML += "Value saved!";
}
}

xmlhttp.open("GET","[LOCATION TO PHP SCRIPT HERE]?value=" + value,true);
xmlhttp.send();
}

Then just make sure you set the 'id' attribute on your checkbox.

Keep in mind what the value should start as based on the value from the database if needed. That's opening a whole new can of worms. You're going to need to get the current value from the database with PHP, and then use and if-else like the one in the javascript above to set the initial value. There are a lot of things going on in your script, you really have to keep your mind open and figure out the logic behind everything that's happening to be a successful programmer. Good luck! -Evan