Executing two javascript functions at the same time from one button?

Question

<center>
        <form id="f1">
            <textarea name="textcontent" id="styled" cols="40" rows="4"></textarea>
                <br>
            <input onclick='JavaScript:xmlhttpPost("/cgi-bin/test.py")' type="button" value="Show" class="blue"/>
                <br><br>
            <div id="qList">
                <img id="loading_image" src="ajax-loader.gif"/>
            </div>
        </form>
</center>

I want the image as shown in the code to appear when the Show button is clicked and the image to be replaced by the content returned by the python file.

I know I can use this script onclick="$('#loading_image').show();", but how can I make them execute together, so that image is replaced by some other content ?

`onclick="$('#loading_image').show();"` that can't be unseen :( One either uses obtrusive javascript or use unobtrusive javascript. You're using both techniques at the same time. — Ejaz, Apr 23 '13 at 18:40
possible duplicate of [onclick multiple javascript functions](http://stackoverflow.com/questions/3910736/onclick-multiple-javascript-functions) — Lie Ryan, Apr 23 '13 at 18:43

Vivin Paliath · Accepted Answer · 2013-04-23T18:44:22.000

5

First, it is better to use addEventListener, or .on from jQuery.

Second, all you have to do is have your handler call those two functions:

function handler() {
    xmlhttpPost("/cgi-bin/test.py");
    $('#loading_image').show();
}

Then bind as follows:

<input id="myInput" type="button" value="Show" class="blue"/>

...

$("#myInput").on("click", handler);

edited Apr 23 '13 at 18:44

answered Apr 23 '13 at 18:42

Vivin Paliath

94,126
40
223
295

I added this function, but when I open the html page the gif image still appears under the button before clicking it ! – Animesh Pandey Apr 23 '13 at 18:50
1

@AnimeshPandey You need to style the image as hidden initially in your HTML (`visibility: hidden`, or `display: none`), otherwise it will show up. – Vivin Paliath Apr 23 '13 at 18:52

score -1 · Answer 2 · answered Oct 25 '15 at 15:34

The best way is:

<input type="button" onclick="manyfunctions()" value="Send" />
<script src="script.js" type="text/javascript"></script>

And script.js should be like this:

function manyfunctions() {
  somefunctions()
  anotherfunction()
    //List functions to herre
}

Executing two javascript functions at the same time from one button?

2 Answers2