Question

I have a simple form like this:

<form id='myForm'>

    <input type='text' name='Textbox'>

    <select name='SelectBox'>
     <option class='option1'>option 1</option>
     <option class='option2'>option 2</option>
   </select>

</form>

I want to capture this form’s Textbox focus lost (blur) event and SelectBox change event.

I don’t want to apply change event for whole form because it causing to submit form more than one time.

Answer 1

Add id='SelectBox' to your select box and id='Textbox' to your text box and try the following:

function handleTextBoxBlur(event, element) {
  console.log("blur");
  console.log(element);
}
function handleSelectBoxChange(event, element) {
  console.log("change");
  console.log(element);
}

document.observe("dom:loaded", function(event) {

  $("Textbox").on("blur", "input", handleTextBoxBlur);
  $("SelectBox").on("change", "select", handleSelectBoxChange);

});