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 HTML

function 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 form

function 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 elements

if (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 object

var person = {
  firstName: "John",
  lastName: "First"
};
alert(person.firstName);


More info and samples on: www.devarchweb.net

Create object using function

function 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>





More info and samples on: www.devarchweb.net