0

I need to have all javaScript external and I have window.onload = function

window.onload = function(){//onload allows external onclick
      document.getElementById('submit').onclick = function(evt) { 
       calcOrder();//validation of input(s)

} }//end window.onload = function()

this works when the submit button is clicked in the form, My question is I have an onBlur event also in the form how can I combine it into the window.onload = function ? Or can I?

<p><input name="fname" id="fname" type="text" size="20" maxlength ="15" placeholder="First Name" onblur="validateFirstname();"/>&nbsp;<span id ="fnameprompt"></span>
     <br>First name - Must be between 2 to 15 Characters </p>
Billy Payne
  • 99
  • 1
  • 9
  • I don't know about wording for this question. In the title it sounds like your trying to attach 2 handlers to the same element when the window loads. but the question says that you want to attach 2 different handlers to 2 different elements maybe check this.. http://stackoverflow.com/questions/11845678/adding-multiple-event-listeners-to-one-element – jack blank Mar 20 '16 at 05:01

1 Answers1

1

You just need to add the following line inside the window.onload function

document.getElementById('fname').onblur = function(evt) { validateFirstname();

Here is an example

<html>
<body>

<script language="javascript">
window.onload = function(){
  document.getElementById('submit').onclick = function(evt) { calcOrder(); }
  document.getElementById('fname').onblur = function(evt) { validateFirstname(); }
}

function calcOrder() {
   alert('calcOrder');
}

function validateFirstname() {
   alert('validateFirstname');
}
</script>

<p><input name="fname" id="fname" type="text" size="20" maxlength ="15" placeholder="First Name"/>&nbsp;<span id ="fnameprompt"></span>
 <br>First name - Must be between 2 to 15 Characters </p>
  <input type="button" id="submit" name="submit" value="submit">
</body>
</html>
Ricardo González
  • 1,385
  • 10
  • 19