How to run code when form gets loaded
function initialize()
{
// do something
}
<body onload="initialize()">
More info and samples on: www.devarchweb.net
Write to HTMLfunction doSomething()
{
document.write("Hello");
}
More info and samples on: www.devarchweb.net
Get value of edit box and DIV html DOM elements can be accessed like below <input id="edit1" type="text" value="abc" />
var label = document.getElementById("myId");
var edit = document.getElementById("edit1");
alert(
"Text value is: " + label.innerHTML +
", Edit box value is: " + edit.value
);
edit.disabled=true; // disable edit box
More info and samples on: www.devarchweb.net
How to validate formfunction validateForm()
{
var result = ....
return result;
}
<FORM action="form_response.htm" method="post" onSubmit="return validateForm()" >
...
</FORM>
More info and samples on: www.devarchweb.net
Respond to changing values in form controls Edit box will trigger that event only when it loses focus.<select name="comboOptions" onchange="alert('You selected ' + this.value)">
...
</select>
More info and samples on: www.devarchweb.net
Setting visibility of elementsif (shouldBeHidden) {
document.getElementById("myId").style.display = "none";
}else {
document.getElementById("myId").style.display = "block";
}
More info and samples on: www.devarchweb.net
Make AJAX call AJAX stands for "Asynchronous Javascript And Xml". It allows updating parts of web page without reloading the whole page.function onClick() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
// IE 5,6
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("lblHello").innerText = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "http://localhost/ajax.txt", true);
xmlhttp.send();
}
<div id="lblHello">will be updated with AJAX</div>
<input id="btnGet" type="button" value="Make AJAX call" onclick="onClick()"/>
More info and samples on: www.devarchweb.net
Create objectvar person = {
firstName: "John",
lastName: "First"
};
alert(person.firstName);
More info and samples on: www.devarchweb.net
Create object using functionfunction Person() {
this.firstName = "John";
this.lastName = "First";
}
var p = new Person();
More info and samples on: www.devarchweb.net
One and two way data binding with Knockout<html>
<head>
<script type='text/javascript' src="knockout-3.1.0.debug.js"></script>
</head>
<body>
First name: <span data-bind="text: firstName"></span><br/>
Last name: <input data-bind="value: lastName" /><br/>
<button onclick="alert(_viewModel.firstName)">Show First name</button><br/>
<button onclick="alert(_viewModel.lastName())">Show Last name</button>
<script>
var _viewModel = {
firstName: "John",
lastName: ko.observable("First")
};
ko.applyBindings(_viewModel);
</script>
</body>
</html>