We Keep Coding

Transfer input from prompt() into a text field

I have a HTML page in which when the start button is being pressed, a prompt box will appear to prompt the user to enter his/her name. When user enters his/her name and confirms the input, it would appear on the black box (as shown in the code) with white text color. I am not sure of how to "transfer" the value from prompt() to text field. I know the value of the input fields are empty by default.
function myFunction() {
var person = prompt("Please enter your name");
if (person != null) {
person = document.getElementById(input).value;
}
}
#input{
width: 15%;
padding: 50px 50px;
margin: 8px 0;
background-color: #191818;
color: white;
}
#input1 {
width: 15%;
padding: 50px 50px;
margin: 8px 0;
background-color: #7C7878;
color: white;
}
.btnEdit{
width: 30px;
margin: 5px;
display: block;
font-weight:bold;
text-align:center;
font-size:10px;
line-height:15px;
}
<h2>Part 3</h2>
<button onclick="return myFunction()" id="strt" value="Start">Start</button>
<button onclick="return reset()" id="clr" value="Clear">Clear</button> <br />
<br>
<input type="text" id="input" style="text-align:center;" name="input"/>
<button id="swap" value="Swap" class="btnEdit">--></button>
<button id="swap1" value="Swap1" class="btnEdit"><--</button>
<input type="text" id="input1" value="" style="text-align:center;" name="input1"/>
Expected output would be for the user to enter his/her name in the prompt and upon confirmation, his/her name will appear in the text field in black with white text colors.

You just need to swap it.
person = document.getElementById(input).value;
The above is wrong. It should be:
document.getElementById("input").value = person;
And you need to update the "input" too. It's not a constant.
function myFunction() {
var person = prompt("Please enter your name");
if (person != null) {
document.getElementById("input").value = person;
}
}
#input {
width: 15%;
padding: 50px 50px;
margin: 8px 0;
background-color: #191818;
color: white;
}
#input1 {
width: 15%;
padding: 50px 50px;
margin: 8px 0;
background-color: #7C7878;
color: white;
}
.btnEdit {
width: 30px;
margin: 5px;
display: block;
font-weight: bold;
text-align: center;
font-size: 10px;
line-height: 15px;
}
<h2>Part 3</h2>
<button onclick="return myFunction()" id="strt" value="Start">Start</button>
<button onclick="return reset()" id="clr" value="Clear">Clear</button> <br />
<br>
<input type="text" id="input" style="text-align:center;" name="input" />
<button id="swap" value="Swap" class="btnEdit">--></button>
<button id="swap1" value="Swap1" class="btnEdit"><--</button>
<input type="text" id="input1" value="" style="text-align:center;" name="input1" />

function myFunction() {
var person = prompt("Please enter your name");
if (person != null) {
document.getElementById('input').value = person;
}
}
#input{
width: 15%;
padding: 50px 50px;
margin: 8px 0;
background-color: #191818;
color: white;
}
#input1 {
width: 15%;
padding: 50px 50px;
margin: 8px 0;
background-color: #7C7878;
color: white;
}
.btnEdit{
width: 30px;
margin: 5px;
display: block;
font-weight:bold;
text-align:center;
font-size:10px;
line-height:15px;
}
<h2>Part 3</h2>
<button onclick="return myFunction()" id="strt" value="Start">Start</button>
<button onclick="return reset()" id="clr" value="Clear">Clear</button> <br />
<br>
<input type="text" id="input" style="text-align:center;" name="input"/>
<button id="swap" value="Swap" class="btnEdit">--></button>
<button id="swap1" value="Swap1" class="btnEdit"><--</button>
<input type="text" id="input1" value="" style="text-align:center;" name="input1"/>

I want the humidity and number of people fields have the same functionality as my temperature field

I have three fields. In my temperature field the onclick on button should get coloured as well as store a value in a session variable. I did that.
Similarly I want my humdidty and number of people field to have a functionality like: on click on 1st button, it should get coloured and store '1' as value in a session varaible. On click on 2nd button, I want 1st as well as 2nd button to get coloured and store a value in the session variable as '2'. On click on 3rd button, I want 1st as well as 2nd andn 3rd button to get coloured and store the value as '3'. On click on 4th button, I want all buttons to get coloured and store the value as '4'.
As I´m new to jQuery I´m trying hard to do it. how can I do this???
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
var buttonClicked = "";
$("input").on('click', function(){
var thisDiv = $(this).val();
buttonClicked = thisDiv;
var classToAdd = "";
$.post("chk.php", { buttonClicked: buttonClicked});
console.log(thisDiv);
switch(thisDiv){
case "1": classToAdd = "red";
break;
case "2":
classToAdd = "blue";
break;
case "3":
classToAdd = "green";
break;
case "4":
classToAdd = "yellow";
break;
default:
break;
};
$("input").each(function(index,value){
var actualClass = $(value).attr("class");
if(index < thisDiv){
$(value).addClass(classToAdd).removeClass(actualClass);
}else{
if(actualClass != "button"){
$(value).addClass("button").removeClass(actualClass);
}
}
});
});
});
</script>
<?php
$_SESSION["buttonClicked"] = $_POST["buttonClicked"];
?>
<style>
.green{
background-color: green;
border: 1px solid black;
color: white;
padding: 8px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
}
.blue{
background-color: blue;
border: 1px solid black;
color: white;
padding: 8px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
}
.yellow{
background-color: yellow;
border: 1px solid black;
color: white;
padding: 8px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
}
.red{
background-color: red;
border: 1px solid black;
color: white;
padding: 8px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
}
.button {
background-color: white;
border: 1px solid black;
color: white;
padding: 8px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
}
.button1{
background-color: white;
border: 1px solid black;
color: white;
padding: 8px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
}
.button2{
background-color: white;
border: 1px solid black;
color: white;
padding: 8px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
}
</style>
<body>
<div align="left">Temperature </div>
<form action='chk.php' method='post'>
<input type="button" class="button" value="1">
<input type="button" class="button" value="2">
<input type="button" class="button" value="3">
<input type="button" class="button" value="4">
<br><br>
<div align="left">Humidity</div>
<input type="button" class="button1" value="1">
<input type="button" class="button1" value="2">
<input type="button" class="button1" value="3">
<input type="button" class="button1" value="4">
<br><br>
<div align="left">Number of people </div>
<input type="button" class="button2" value="1">
<input type="button" class="button2" value="2">
<input type="button" class="button2" value="3">
<input type="button" class="button2" value="4">
<br><br>
<input type='submit' value='submit'>
<input type='reset' value='reset'>
</body>
</html>

You could perhaps approach the problem like this - the session handling is only a rough example but I think this does what I understood the question to be.
<?php
session_start();
if( $_SERVER['REQUEST_METHOD']=='POST' ){
if( !empty( $_POST['bttn'] ) && !empty( $_POST['type'] ) ){
$type=$_POST['type'];
$bttn=$_POST['bttn'];
$_SESSION['buttonClicked'][ $type ]=$bttn;
exit( json_encode( $_SESSION['buttonClicked'] ) );
}
}
?>
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>Set Colours of Buttons</title>
<style>
.green{
background-color: green;
border: 1px solid black;
color: white;
padding: 8px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
}
.blue{
background-color: blue;
border: 1px solid black;
color: white;
padding: 8px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
}
.yellow{
background-color: yellow;
border: 1px solid black;
color: black;
padding: 8px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
}
.red{
background-color: red;
border: 1px solid black;
color: white;
padding: 8px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
}
input[type='button']{
border: 1px solid black;
padding: 8px 30px;
margin:0 0.25rem;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
}
</style>
<script>
(function(){
var colours={
1:'red',
2:'blue',
3:'green',
4:'yellow'
};
var flags={
passive:true,
capture:false
};
function setcolours(e){
var _class=this.dataset.class;
var col=this.parentNode.querySelectorAll('input[type="button"][data-class="'+_class+'"]');
/* Clear previous colour classes assigned */
col.forEach(function(e,i,a){
Object.values( colours ).forEach(function( c ){
e.classList.remove( c );
});
});
/* Add colour class to any element with a value equal to or less that selected button value */
for( var i=this.value; i > 0; i-- ){
try{
if( col[ i - 1 ].nodeType==1 )col[ i - 1 ].classList.add( colours[ col[ i - 1 ].value ] )
}catch( err ){
console.info( err );
continue;
}
}
ajax( this.value, this.dataset.type );
}
function ajax( value, type ){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if( xhr.readyState==4 && xhr.status==200 ){
document.getElementById('results').innerHTML=this.response;
}
};
var params='bttn='+value+'&type='+type;
xhr.open( 'post', location.href, true );
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send( params );
}
function bindEvents(e){
var col = document.querySelectorAll('input[type="button"]');
if( col && col.length > 0 ){
for( var n in col ){
if( col[ n ].nodeType==1 ){
col[ n ].addEventListener( 'click', setcolours.bind( col[ n ] ), flags );
}
}
}
}
document.addEventListener( 'DOMContentLoaded', bindEvents, flags );
}());
</script>
</head>
<body>
<form action='chk.php' method='post'>
<div align="left">Temperature </div>
<input type="button" class="button" data-class='b' data-type='temperature' value="1">
<input type="button" class="button" data-class='b' data-type='temperature' value="2">
<input type="button" class="button" data-class='b' data-type='temperature' value="3">
<input type="button" class="button" data-class='b' data-type='temperature' value="4">
<br />
<br />
<div align="left">Humidity</div>
<input type="button" class="button1" data-class='b1' data-type='humidity' value="1">
<input type="button" class="button1" data-class='b1' data-type='humidity' value="2">
<input type="button" class="button1" data-class='b1' data-type='humidity' value="3">
<input type="button" class="button1" data-class='b1' data-type='humidity' value="4">
<br />
<br />
<div align="left">Number of people </div>
<input type="button" class="button2" data-class='b2' data-type='people' value="1">
<input type="button" class="button2" data-class='b2' data-type='people' value="2">
<input type="button" class="button2" data-class='b2' data-type='people' value="3">
<input type="button" class="button2" data-class='b2' data-type='people' value="4">
<br />
<br />
<input type='submit' value='submit'>
<input type='reset' value='reset'>
</form>
<pre id='results'></pre>
</body>
</html>
Because the weather is awful I was able to spend a bit of time at the laptop and ended up modifying the markup, css & javascript.
<?php
session_start();
if( $_SERVER['REQUEST_METHOD']=='POST' ){
if( !empty( $_POST['bttn'] ) && !empty( $_POST['type'] ) ){
$type=$_POST['type'];
$bttn=$_POST['bttn'];
$_SESSION[ 'buttonClicked' ][ $type ]=$bttn;
header( 'HTTP/1.1 200 OK', true, 200 );
header( 'Content-Type: application/json' );
exit( json_encode( $_SESSION[ 'buttonClicked' ] ) );
}
}
?>
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>Set Colours of Buttons</title>
<style>
input[type='button']{
background-color:white;
border: 1px solid black;
padding: 0.5rem 2rem;
margin:0 0.25rem;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
float: left;
}
.green{
background-color: green!important;
color: white;
}
.blue{
background-color: blue!important;
color: white;
}
.yellow{
background-color: yellow!important;
color: black;
}
.red{
background-color: red!important;
color: white;
}
.pink{
background-color: pink!important;
color: black;
}
.orange{
background-color: orange!important;
color: white;
}
.purple{
background-color: purple!important;
color: white;
}
.brown{
background-color: brown!important;
color: white;
}
legend,fieldset{
border:none;
}
legend{
border-bottom:1px solid gray;
padding:0.5rem;
}
</style>
<script>
(function(){
var colours={
1:'red',
2:'orange',
3:'yellow',
4:'pink',
5:'brown',
6:'purple',
7:'blue',
8:'green'
};
var flags={
passive:true,
capture:false
};
function setcolours(e){
var _type=this.parentNode.dataset.type;
var col=this.parentNode.querySelectorAll( 'input[type="button"]' );
/* Clear previous colour classes assigned */
col.forEach(function(e,i,a){
Object.values( colours ).forEach(function( c ){
e.classList.remove( c );
});
});
/* Add colour class to any element with a value equal to or less that selected button value */
for( var i=this.value; i > 0; i-- ){
try{
if( col[ i - 1 ].nodeType==1 )col[ i - 1 ].classList.add( colours[ col[ i - 1 ].value ] )
}catch( err ){
console.info( err );
continue;
}
}
/* send the ajax request to store values into session variables &/or whatever actions are required */
ajax( this.value, this.parentNode.dataset.type );
}
function ajax( value, type ){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if( xhr.readyState==4 && xhr.status==200 ){
document.getElementById('results').innerHTML=this.response;
}
};
var params='bttn='+value+'&type='+type;
xhr.open( 'post', location.href, true );
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send( params );
}
function bindEvents(e){
var col = document.querySelectorAll('form > fieldset > input[type="button"]');
if( col && col.length > 0 ){
for( var n in col ){
if( col[ n ].nodeType==1 ){
col[ n ].addEventListener( 'click', setcolours.bind( col[ n ] ), flags );
}
}
}
}
document.addEventListener( 'DOMContentLoaded', bindEvents, flags );
}());
</script>
</head>
<body>
<form action='chk.php' method='post'>
<fieldset data-type='temperature'>
<legend>Temperature</legend>
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<input type="button" value="4" />
<input type="button" value="5" />
<input type="button" value="6" />
<input type="button" value="7" />
<input type="button" value="8" />
</fieldset>
<fieldset data-type='humidity'>
<legend>Humidity</legend>
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<input type="button" value="4" />
<input type="button" value="5" />
<input type="button" value="6" />
<input type="button" value="7" />
<input type="button" value="8" />
</fieldset>
<fieldset data-type='people'>
<legend>Number of people</legend>
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<input type="button" value="4" />
<input type="button" value="5" />
<input type="button" value="6" />
<input type="button" value="7" />
<input type="button" value="8" />
</fieldset>
<br />
<br />
<input type='submit' value='submit'>
<input type='reset' value='reset'>
</form>
<pre id='results'></pre>
</body>
</html>

Html button does not display form

here is my code. i have created a button and on click event i want to display form but my form is not displaying.
gives an error " Uncaught SyntaxError: Invalid or unexpected token"
<input id="Result" name="display" type="button" value="Cost Report" onclick= document.getElementById("form id").style.display="block";
style="overflow:hidden;padding: 5px 5px; border-radius: 3px;font-size: 8.5pt; width:200px ; background-color: #E7FCCA; font-weight: bold; ">
<div>
<form id="form id" style="display: block;">Results</form>
</div>

When binding events to element, they should be wrapped by " or '.
<input id="Result" name="display" type="button" value="Cost Report" onclick='document.getElementById("form id").style.display="block";' style="overflow:hidden;padding: 5px 5px; border-radius: 3px;font-size: 8.5pt; width:200px ; background-color: #E7FCCA; font-weight: bold; ">
<div>
<form id="form id" style="display: none;">Results</form>
</div>

Try this. you should add single quotes onclick='document.getElementById("form id").style.display="block";'
<input id="Result" name="display" type="button" value="Cost Report" onclick= 'document.getElementById("form id").style.display="block";'
style="overflow:hidden;padding: 5px 5px; border-radius: 3px;font-size: 8.5pt; width:200px ; background-color: #E7FCCA; font-weight: bold; ">
<div> <form id="form id" style="display: none;">Results</form></div>
fiddlelink

There should not be any space in id's, as id for a DOM element is unique. So please change your form id to something like id="form-id".
Also set form display:none.
<input id="Result" name="display" type="button" value="Cost Report" onclick='document.getElementById("form-id").style.display="block";'
style="overflow:hidden;padding: 5px 5px; border-radius: 3px;font-size: 8.5pt; width:200px ; background-color: #E7FCCA; font-weight: bold; ">
<div> <form id="form-id" style="display: none;">Results</form></div>

you can use ng-show and make your form visible on click and viceversa
<input id="Result" name="display" type="button" value="Cost Report" onclick= "showForm=!showForm"
style="overflow:hidden;padding: 5px 5px; border-radius: 3px;font-size: 8.5pt; width:200px ; background-color: #E7FCCA; font-weight: bold; ">
<div>
<form id="form id" ng-show="showForm">Results</form>
</div>

How to highlight a blank field in a <form> using listeners?

My knowledge of listeners is new. I understand what they're for but not 100% on how to set them up. I'm working on a basic project that needs a listener so that when a blank form is submitted it will highlight the text boxes red. The red boxes will then go away when the text is typed into the boxes. I believe I have everything setup but the listeners. Feel free to correct if im wrong but im looking for assistance with a couple steps. I know that im close or at least feel that this is the only step I dont quite understand yet:
Set up a listener on the form’s submit event so that the code prevents submission of the form (preventDefault()) if either the title or description field is left blank or the accept license box is not checked, but otherwise submits the form.
Enhance the JavaScript so that blank fields trigger a change in the appearance
of the form (using the style defined earlier).
Add another listener to the fields so that when the user types into a field
(changed event) JavaScript removes the red color you just added.
Here is my code:
function isBlank(inputField){
if(inputField.type=="checkbox"){
if(inputField.checked)
return false;
return true;
}
if (inputField.value==""){
return true;
}
return false;
}
function makeRed(inputDiv){
inputDiv.style.backgroundColor="#AA0000";
inputDiv.parentNode.style.backgroundColor="#AA0000";
inputDiv.parentNode.style.color="#FFFFFF";
}
function makeClean(inputDiv){
inputDiv.parentNode.style.backgroundColor="#FFFFFF";
inputDiv.parentNode.style.color="#000000";
}
window.onload = function(){
var mainForm = document.getElementById("mainForm");
var requiredInputs = document.querySelectorAll(".required");
for (var i=0; i < requiredInputs.length; i++){
requiredInputs[i].onfocus = function(){
this.style.backgroundColor = "#EEEE00";
}
}
mainForm.onsubmit = function(e){
var requiredInputs = document.querySelectorAll(".required");
for (var i=0; i < requiredInputs.length; i++){
if( isBlank(requiredInputs[i]) ){
e.preventDefault();
makeRed(requiredInputs[i]);
}
else{
makeClean(requiredInputs[i]);
}
}
}
}
/* general text formatting */
h1, h2, h3, nav, footer {
font-family: Georgia, Cambria, "Times New Roman", serif;
}
body {
font-family: "Lucida Sans", Verdana, Arial, sans-serif;
font-size: 85%;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 90%;
margin: 0 auto;
}
table tbody td{
/* border: 1pt solid #95BEF0; */
line-height: 1.5em;
vertical-align: top;
padding: 0.5em 0.75em;
}
legend {
background-color: #EBF4FB ;
margin: 0 auto;
width: 90%;
padding: 0.25em;
text-align: center;
font-weight: bold;
font-size: 100%;
}
fieldset {
margin: 1em auto;
background-color: #FAFCFF;
width: 60%;
}
form p {
margin-top: 0.5em;
}
.box {
border: 1pt solid #95BEF0;
padding: 0.5em;
margin-bottom: 0.4em;
}
.rectangle {
background-color: #EBF4FB;
padding: 0.5em;
}
.centered {
text-align: center;
}
.rounded, .rounded:hover {
border: 1px solid #172d6e;
border-bottom: 1px solid #0e1d45;
border-radius: 5px;
text-align: center;
color: white;
background-color: #8c9cbf;
padding: 0.5em 0 0.5em 0;
margin: 0.3em;
width: 7em;
-webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 4px 0 #b3b3b3;
box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 4px 0 #b3b3b3;
}
.rounded:hover {
background-color: #7f8dad;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Chapter 6</title>
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="css/Lab5.css" />
<script type="text/javascript" src="script/Lab5.js"></script>
</head>
<body>
<!-- <form method="get" action="" id="mainForm"> "Your original line of code replaced with your line of code from Lab 4 -->
<form method="get" action="http://www.randyconnolly.com/tests/process.php">
<fieldset>
<legend>Photo Details</legend>
<table>
<tr>
<td colspan="2">
<p>
<label>Title</label><br/>
<input type="text" name="title" size="80" class="required" />
</p>
<p>
<label>Description</label><br/>
<textarea name="description" rows="5" cols="61" class="required">
</textarea>
</p>
</td>
</tr>
<tr>
<td>
<p>
<label>Continent</label><br/>
<select name="continent">
<option>Choose continent</option>
<option>Africa</option>
<option>Asia</option>
<option>Europe</option>
<option>North America</option>
<option>South America</option>
</select>
</p>
<p>
<label>Country</label><br/>
<select name="country">
<option>Choose country</option>
<option>Canada</option>
<option>Mexico</option>
<option>United States</option>
</select>
</p>
<p>
<label>City</label><br/>
<input type="text" name="city" list="cities" size="40"/>
<datalist id="cities">
<option>Calgary</option>
<option>Montreal</option>
<option>Toronto</option>
<option>Vancouver</option>
</datalist>
</p>
</td>
<td>
<div class="box">
<label>Copyright? </label><br/>
<input type="radio" name="copyright" value="1">All rights reserved<br/>
<input type="radio" name="copyright" value="2" checked>Creative Commons<br/>
</div>
<div class="box">
<label>Creative Commons Types </label><br/>
<input type="checkbox" name="cc" >Attribution <br/>
<input type="checkbox" name="cc" >Noncommercial <br/>
<input type="checkbox" name="cc" >No Derivative Works <br/>
<input type="checkbox" name="cc" >Share Alike
</div>
</td>
</tr>
<tr>
<td colspan="2" >
<div class="rectangle">
<label>I accept the software license</label>
<input type="checkbox" name="accept" class="required">
</div>
</td>
</tr>
<tr>
<td>
<p>
<label>Rate this photo: </label><br/>
<input type="number" min="1" max="5" name="rate" />
</p>
<p>
<label>Color Collection: </label><br/>
<input type="color" name="color" />
</p>
</td>
<td>
<div class="box">
<p>
<label>Date Taken: </label><br/>
<input type="date" name="date" />
</p>
<p>
<label>Time Taken: </label><br/>
<input type="time" name="time" />
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="rectangle centered">
<input type="submit" class="rounded"> <input type="reset" value="Clear Form" class="rounded">
</div>
</tr>
</table>
</fieldset>
</form>
</body>
</html>

On submit (object is your form):
object.onsubmit = function(){
//things you want to happen on form submit
};
In order to listen to inputs (object is an input field), try this:
object.oninput = function(){
//things that happen during input
};
PS: This will be much easier using jQuery.

how to do colored checkbox in javascript

This is a page code that shows attendance report of student.I want checkbox in colored if checked green else red.please help me to do this.I tried it but didn't work.Now i can click only on one checkbox that change color.check this image: http://i.stack.imgur.com/JgICk.png
<style>
.checkbox {
margin: 0 0 2em 2em;
}
.checkbox .tag {
color: #595959;
display: block;
float: left;
font-weight: bold;
position: relative;
width: 120px;
}
.checkbox label {
display: inline;
}
.checkbox .input {
display: none;
}
.input + label {
-webkit-appearance: none;
background-color: red;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
padding: 9px;
display: inline-block;
position: relative;
}
.input:checked + label:after {
background-color: green;
color: #595959;
content: '\2714';
font-size: 10px;
left: 0px;
padding: 2px 8px 2px 2px;
position: absolute;
top: 0px;
}
</style>
<?php
if(isset($_POST["submit"]))
{
//Here goes array
for($i=0;$i<count($_POST['student']);$i++)
{
$name=$_POST['student'][$i];
echo $name;
}
}
?>
</head>
<body >
Report Attendance
<form name="myform" action="" method="post">
<div class="checkbox">
<table border="1" cellspacing="2" cellpadding="5" summary="">
<?php while ($row = mysql_fetch_assoc($res)){?>
<tr><td> <input type="checkbox" class="input" id="input" name="student[]" value="<?php echo $row['stu_id']; ?>" checked="checked" > <?php echo $row['stu_name'] ; ?> <label for="input"></label>
<br/></td></tr>
<?php }?>
</table>
<input type="submit" name="submit" value="submit"/>
</div>
</form>
</body>
</html>

You just need to make id as unique and labels should point to unique id. Here is the jsfiddle with static HTML https://jsfiddle.net/sua2wsm1/
below changes required in your HTML page
<table border="1" cellspacing="2" cellpadding="5" summary="">
<?php while ($row = mysql_fetch_assoc($res)){?>
<tr><td> <input type="checkbox" class="input" id="input<?php echo $row['stu_id']; ?>" name="student[]" value="<?php echo $row['stu_id']; ?>" checked="checked" > <?php echo $row['stu_name'] ; ?> <label for="input<?php echo $row['stu_id']; ?>"></label>
<br/></td></tr>
<?php }?>

Actually, duplicates ID can be the problem. A label is link to an input with the for attribute. So, if you click on the label, it'll be the same as clicking on the input. Your css is hiding the inputs, and using label:after as a box. So, if all inputs have the same id, clicking on a label will not work as expected