Calling Javascript function on button click

Question

Here is my javascript code but on every page load the javascript function get called i only wanted to call it when the button is clicked

            <input onclick="myFunction()"  id="btnAdd" type="button" class="btn-sm btn-default pull-right" value=" Add Qualification">

and here is my Javsacript function

<script type="text/javascript">


    function myFunction() {

        document.getElementById("btnAdd").onclick = function () { 
            $("#demo").load("@Html.Raw(Url.Action("_Experience", "Students")) ")
        };
    }
</script>

@Html.Raw() called when your page load because you are using Code behind inside your script it's not working on javascript or jquery event. — jishan siddique
– jishan siddique, Commented Oct 11, 2019 at 6:46

Mohit Prakash · Accepted Answer · 2019-10-11 06:39:06Z

1

If you using

document.getElementById("btnAdd").onclick = function () { 
        $("#demo").load("@Html.Raw(Url.Action("_Experience", "Students")) ")
    };

this code then no need to use myFunction method and remove onclick from html. Or you can just write your login in myFunction method and document.getElementById("btnAdd").onclick and add onClick in html like that

<input onclick="myFunction()"  id="btnAdd" type="button" class="btn-sm btn-default pull-right" value=" Add Qualification">

<script type="text/javascript">
    function myFunction() {
        $("#demo").load("@Html.Raw(Url.Action("_Experience", "Students")) ")
    }
</script>

answered Oct 11, 2019 at 6:39

Mohit Prakash

5122 gold badges7 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rajmuhammed Akbarshine · Accepted Answer · 2019-10-11 06:50:37Z

1

Try this code, a simple solution

<input id="btnAdd" type="button" class="btn-sm btn-default pull-right" value="Add Qualification">

<script type="text/javascript">

    var Btnid = document.getElementById("btnAdd");

    Btnid.addEventListener('click', function(e) {
       alert('Event works only when it clicks')
    });

</script>

edited Oct 11, 2019 at 6:50

answered Oct 11, 2019 at 6:41

Rajmuhammed Akbarshine

435 bronze badges

Comments

Aslam · Accepted Answer · 2019-10-11 06:38:27Z

0

<script type="text/javascript">

        document.getElementById("btnAdd").onclick = function () { 
            $("#demo").load("@Html.Raw(Url.Action("_Experience", "Students")) ")
        };

</script>

just remove the myFunction()

answered Oct 11, 2019 at 6:38

Aslam

7711 gold badge10 silver badges21 bronze badges

1 Comment

Chandrashekhar Komati Over a year ago

avoid function if you are working with id base it's good habit either If you want get multiple times to get the same value then you can use function method.

damitj07 · Accepted Answer · 2019-10-11 06:38:41Z

0

This is the only thing you need. https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onclick

And use this, A self Executing Function which makes sure your function is not called on page load. But only when the button is clicked

// self executing function here
(function() {
   // your page initialization code here
    function myFunction() {
      document.getElementById("btnAdd").onclick = function () { 
        $("#demo").load("@Html.Raw(Url.Action("_Experience", "Students")) ")
      };
    } 
})();
</script>

answered Oct 11, 2019 at 6:38

damitj07

2,9291 gold badge23 silver badges43 bronze badges

Collectives™ on Stack Overflow

Calling Javascript function on button click

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related