Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

I need to run two functions onclick. I can't get them both to work even when nested together

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.

like image 540
Allison Avatar asked Aug 06 '12 20:08

Allison


People also ask

Can we use two functions onClick event?

Greetings! Yes, you can call two JS Function on one onClick.

Can we pass two functions onClick event React?

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.

How do you call two methods on onClick React?

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 .

Can an element have multiple onClick events?

So the answer is - yes you can :) However, I'd recommend to use unobtrusive JavaScript.. mixing js with HTML is just nasty.

Is it possible to call two functions in one click?

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.

How to run multiple JavaScript functions onclick?

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.

How to call multiple functions from onClick event handler?

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?

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.


2 Answers

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>
like image 86
FishBasketGordo Avatar answered Sep 21 '22 13:09

FishBasketGordo


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.

like image 34
Travis J Avatar answered Sep 23 '22 13:09

Travis J