The HTML is:
<input name="submit"
type="submit"
class="button"
value="Click Here"
tabindex="13"
onclick="return ValidateForm();" />
The ValidateForm() function has all the usual form validating code. The other function I can't get to run (except by itself it works fine..example
<input name="submit"
type="submit"
class="button"
value="Click Here"
tabindex="13"
onclick="disDelay(this);" />
I tried putting them both after the onclick...example
<input name="submit"
type="submit"
class="button"
value="Click Here"
tabindex="13"
onclick="return ValidateForm(); disDelay(this);" />
I also tried putting one the code in the same function with no success.
The function disDelay() is
function disDelay(obj){
obj.setAttribute('disabled','disabled');
setTimeout(function(){obj.removeAttribute('disabled')},10000);
}
It is to be used as a delay to keep the form from getting duplicate submissions from multiple clicks. The delay is at 10 seconds right now just for testing purposes. I need the validation and delay to work together.
Greetings! Yes, you can call two JS Function on one onClick.
The first solution to perform multiple onClick events in React is to include all of your actions inside of a function and then call that single function from the onClick event handler. Let's explore how to do that in a React Component: import React from 'react'; function App() { function greeting() { console.
What would be the equivalent for making two function calls onClick in ReactJS? Very simple: pass a function that calls the two functions, just like you would to with ele. onclick = ... or addEventListener .
So the answer is - yes you can :) However, I'd recommend to use unobtrusive JavaScript.. mixing js with HTML is just nasty.
Yes, You can call two or more function in one click, see the examples. The string that you write after ‘onclick’ attribute in HTML5 is actually a JavaScript expression that will be executed by the browser once the ‘onclick’ event is fired by that particular DOM element.
Run multiple JavaScript functions onclick. onclick is an HTML attribute. This event is triggered when mouse is clicked on it. This is an example of using onclick event. <button onclick="any_function ()">Click to fire</button>. You can use either function or anything. Check this below link to learn more.
Use an inline function inside of the onClick event handler and call multiple functions onClick. Write your logic inside of an inline function that’s inside of the onClick event handler (Worst option).
How to do many things with one onclick attribute. We'll use fictitious function names One (), Two (), and Three () to show how to implement the onclick attribute for calling multiple functions. Put all the function calls into the onclick attribute's value.
Returning the value of the first function terminates the click handler. Essentially, this is what you're doing in your attempt to combine:
<input name="submit" type="submit" class="button"
value="Click Here" tabindex="13"
onclick="return submit_Click(this);" />
<script type="text/javascript">
function submit_Click(sender) {
return ValidateForm();
disDelay(sender); // !!! This call is unreachable !!!
}
</script>
Here is one simple option to correct it:
<input name="submit" type="submit" class="button"
value="Click Here" tabindex="13"
onclick="return submit_Click(this);" />
<script type="text/javascript">
function submit_Click(sender) {
var r = ValidateForm();
disDelay(sender); // It seems like you would only want to call this
// function if the form is validate, so there should
// probably be an if-statement surrounding it. However,
// I'll leave that up to you.
return r;
}
</script>
You almost had it, just reverse the order of the function calls.
<input name="submit" type="submit" class="button" value="Click Here" tabindex="13" onclick="disDelay(this); return ValidateForm(); " />
The return from ValidateForm is going to cause the rest of the code to be unreachable so it must be last.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With