onclick function doesn't work in an Ajax loaded button

Question

So, I have a website which after selecting day loads some forms with Ajax request. In this loaded website (I just add its content to a modal), I have a button

<button class="btn btn-success" type="button" onclick="addInput()" name="add">
   Dodaj kolejny przedział.
</button>

Which should call the function addInput(), which is defined in the "master" html file

<script type="text/javascript">

$(document).ready(function() {

fields = 0;
function addInput() {
  alert("dodajemy");
   if (fields != 24) {
  document.getElementById('text').innerHTML += "test<br>";
  // document.getElementById('text').innerHTML += "Poczatek: <input type='text' value='' />Koniec: <input type='text' value='' /><br />";
  fields += 1;
} else {
  document.getElementById('text').innerHTML += "No wiecej ci nie potrzeba<br>";
}

};  

$.ajaxSetup({ cache: false, type: 'POST',
headers: { "cache-control": "no-cache" } });

$("#wybierz_pokoj").submit(function() {

    var url = "/testowa/wybierz_pokoj" // the script where you handle the form input.
    document.getElementById("modal").innerHTML = "Czekamy"
    $.ajax({
           type: "POST",
           url: url,
           evalJS: true,
           data: $("#wybierz_pokoj").serialize(), // serializes the form's elements.
           cache: false,
           success: function(data)
           {
              document.getElementById("modal").innerHTML = data;
           }
         });

    return false; // avoid to execute the actual submit of the form.
});
}); 
</script>

And after clicking the button, I'm getting "Uncaught ReferenceError: addInput is not defined" error.

What am I doing wrong?

Please don't use inline javascript (`onclick="addInput()"`). You're already using jQuery, use it better. Also getElementById? `document.getElementById('text')` == `$('#text')` — Popnoodles, Jun 05 '14 at 19:46

Popnoodles · Answer 1 · 2014-06-05T19:04:10.457

The best solution is not to write inline JS and use jQuery the way it was intended to be used.

Remove the onclick from your HTML and bind the event with jQuery.

$(document).ready(function() {


    $('button[name="add"]').on('click', function(){
        addInput();
    });

    fields = 0;
    function addInput() { // etc etc

You don't really need the function within the scope of that dom.ready either.

Demo

score 1 · Accepted Answer · answered Jun 05 '14 at 18:59

You've defined the function inside the document.ready call - try defining it outside like so:

<script type="text/javascript">

function addInput() {
  alert("dodajemy");
   if (fields != 24) {
  document.getElementById('text').innerHTML += "test<br>";
  // document.getElementById('text').innerHTML += "Poczatek: <input type='text' value='' />Koniec: <input type='text' value='' /><br />";
  fields += 1;
} else {
  document.getElementById('text').innerHTML += "No wiecej ci nie potrzeba<br>";
}

};  


$(document).ready(function() {

fields = 0;

$.ajaxSetup({ cache: false, type: 'POST', headers: { "cache-control": "no-cache" } });
$("#wybierz_pokoj").submit(function() {
    var url = "/testowa/wybierz_pokoj"; // the script where you handle the form input.
    document.getElementById("modal").innerHTML = "Czekamy";
    $.ajax({
           type: "POST",
           url: url,
           evalJS: true,
           data: $("#wybierz_pokoj").serialize(), // serializes the form's elements.
           cache: false,
           success: function(data)
           {
              document.getElementById("modal").innerHTML = data;
           }
         });

    return false; // avoid to execute the actual submit of the form.
});
}); 
</script>

I'm not sure what you're doing with the "fields" variable, but if you need it ay any point, make sure it's also declared outside the document.ready function as well.

score 0 · Answer 3 · edited May 23 '17 at 12:05

The problem is scope. The addInput function is inside the the document.ready() anonymous function, so it's not visible outside that scope. Javascript in onXXX attributes is executed in the global scope, so it can't access addInput.

The simplest solution is to move the definition of addInput outside the anonymous function, or change it to:

window.addInput = function() {
    ...
};

Or instead of using inline Javascript, you could use event delegation. See Event binding on dynamically created elements?

onclick function doesn't work in an Ajax loaded button

3 Answers3