Execute JS after a certain event

user_14979935 0
Viewed 145

I didn't find an answer here (maybe because my knowledge in JS is very limited), so I decided to ask the question myself: How can I execute my javascript after a certain event? I have a form and I want the JS to run after the last radio is selected but before submitting the form.

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form id="myform">
   //various fields
</form>


<script type="text/javascript">

 function myfunction() {}


</script>
</body>
</html>

I managed the function to run when loading the website and after the last field was filled/radio was checked, but i want it to run ONLY when the last radio was checked.

Thx for everyone to help me

javascript
3 Answers

Try: onclick=“myfunction()” For example if your code is <input type=“checkbox” onclick=“myfunction()”> Then it might run something like this:

/* Notice how the function  below corresponds with the onclick function */
function myfunction() {
  alert("Box Checked!")
  //Put whatever you want in here
 }
function Yes() {
  alert("Thanks!")
  //Put whatever you want in here as well
}
function No() {
  alert("Aw...")
  //Put whatever you want in here as well
}
function Submit() {
  alert("Thanks!")
 }
<!Doctype html>
<html>
<p>Check this box!</p>
<input type="checkbox" onclick="myfunction()">Check me!</input>
<!-- notice the onclick function here -->
<br>
<br>
<p>Fill this form!</p>
<label for="username">Username: </label>
<input type="text" id="username" name="username">
<br><br>
<input onclick="Submit()"type="submit" value="Submit">
<!-- notice the onclick function here as well -->
<p>Is this answer good?</p>
<input onclick="Yes()" type="radio">
<!-- You know the drill ;) -->
<label>Yes! </label>
<br>
<input onclick="No()" type="radio">
<!-- Ditto -->
<label>No! </label>
</html>

This will work for most elements with a user required click (i.e Check Box, Submit button, so on...) Just insert onclick="myfunction()". For more information, go to this site: https://www.w3schools.com/jsref/event_onclick.asp Hoped this helped!

user_149247540

You can use element.addEventListener(“event”, function) and element.removeEventListener(“event”, function) instead of the on attributes. It can make your code much cleaner! Here’s a simple example:

document.getElementById(“button”).addEventListener(“click”, myFunction);
function myFunction(){
alert(“hello world!”);
}
user_113656360

You can make a function that will do something when a certain condition is met(that is sorta an event in theory in the first place)

In other words, not every living thing that happens dispatches an event of some sort, especially composite things like that. For things like those, just wait until your logical event happens then execute some code.. the following function works like that

function onEvent(condition,whenFulfiled,eventParam){
  var i=setInterval(()=>{
    if(condition()){
      clearInterval(i)
      whenFulfiled(eventParam)
    }
  },0)
}

var checkboxes=document.getElementsByClassName('checkbox')
//example uses
onEvent(
  function(){
    return [...checkboxes]
    .filter(a=>a.checked)
    .length == checkboxes.length
  },
  function(boxes){
    console.log("all boxes checked :D\nunchecking them...")
    boxes.forEach(a=>a.checked=false)
  },
  [...checkboxes]
)
<div><h3>when checked all are checked(which is not a real event, this ad-hoc "event listener" would activate)</h3></div>
<div><input class="checkbox" type="checkbox" /></div>
<div><input class="checkbox" type="checkbox" /></div>
<div><input class="checkbox" type="checkbox" /></div>
<div><input class="checkbox" type="checkbox" /></div>

user_106972130
Related