JS beginner to expert, study notes-7 (sec-12 form validation)

Checkbox:

We can check which checkboxes are checked by user or how many checkboxes are there and what are their values etc without submitting the form.

<form action="" id="myForm">
	<div>
		<label><input type="checkbox" name="myCheck" value="PHP">PHP</label>
		<label><input type="checkbox" name="myCheck" value="HTML">HTML</label>
		<label><input type="checkbox" name="myCheck" value="Java">Java</label>
		<label><input type="checkbox" name="myCheck" value="sass">sass</label>
	</div>

	<input type="submit" value="add" name="button">
</form>

<div id="info"></div>

We can access the value of checkboxes through form element.

var myForm = document.getElementById("myForm");

var valuesArray = myForm.myCheck    // array

var valueOfFirstItem = myForm.myCheck[0].value;    // PHP

var isChecked = myForm.myCheck[0].checked    // true if checked or false if not checked

For the above HTML, “myForm.myCheck” gives an array which contains the values of the checkboxes.

The following code checks if a checkbox is checked or not. And it puts all checked values inside the info div.

var myForm = document.getElementById("myForm");
var button = document.getElementById("myForm").button;
var info = document.getElementById("info");

button.onclick = function(e){

	var tmp = ""

	for( var i = 0; i < myForm.myCheck.length; i++){
		if(myForm.myCheck[i].checked)
			tmp += myForm.myCheck[i].value + " ";
	}

	info.innerHTML = tmp;

	e.preventDefault();
};

Radio boxes:

//HTML
<form action="" id="myForm">
	<label><input type="radio" name="agree" value="true">Agree</label>
	<label><input type="radio" name="agree" value="false" checked>Deny</label>

	<input type="submit" value="add" name="button" disabled>
</form>



//CSS
var myForm = document.getElementById("myForm");
var button = document.getElementById("myForm").button;


for(var i = 0; i < myForm.agree.length; i++){
	myForm.agree[i].onclick = function(){
		button.disabled = ( this.value === "false" );
	};
}

We take two radio in a form first and setup a for loop which will run exactly same amount of radio buttons in the form. When we click on a radio, it checks the value of “value” attribute of that radio. If it returns false then it sets disabled property of the button to false. So, when a user clicks on radio which represents true the button will be active and vice versa.

Combo Box:

<form action="" id="myForm">
	
	<select name="course">
		<option>HTML</option>
		<option>PHP</option>
		<option>Java</option>
	</select>

</form>

//js

var myForm = document.getElementById("myForm");

alert(myForm.course); // HTML Select Element. Now we are upto select element.
alert(myForm.course.options); // HTML Options Collection. Now we are upto options.
alert(myForm.course.options[0].text); // HTML. text of 1st member of options

But, value is used to change the display texts of options which is visible to user. Generally, we need to get the value of options. If no value attribute is defined the value property will return the texts. To get the value:

// HTML
<form action="" id="myForm">
	<select name="course">
		<option value="firstCourse">HTML</option>
		<option>PHP</option>
		<option>Java</option>
	</select>
</form>

// JS
var myForm = document.getElementById("myForm");

alert(myForm.course.options[1].value);	// php. no value attr defined.
alert(myForm.course.options[0].value);	// firstCourse

The following code will alert the index of selected option each time you change the select element.

var myForm = document.getElementById("myForm");

var select = myForm.course;

select.onchange = function(){
	alert(select.selectedIndex);    // it will alert the index each time u select an option
	
	alert(select.options[select.selectedIndex].value);	// value of the selected index
	
	alert(this.value);	// 'this' also refers to the currenly selected option. value of the selected index
};

add & remove option elements:

var myForm = document.getElementById("myForm");

var select = myForm.course;


//removing the element at index 0
select.remove(0);


// adding an element
var optionElement = document.createElement("option");
optionElement.text = "New Element";
optionElement.value = "newValue";

select.add(optionElement);