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?