AJAX Submit Button Got Disabled - php

Question

i want to create a dynamic search using php and ajax, and then choose the results that will be inserted in another tabke in database by using checkboxes..
here's the code to query the search in table
<?php
//include('../koneksi/koneksi.php');
mysql_connect('localhost','root',''); //ini untuk koneksi databasenya
mysql_select_db('aam'); // nama tabel
$key=$_GET['q'];
$query = mysql_query("select * from dokter where nama LIKE '%$key%'");
echo "
<table border='1'>
<tr>
<th>Kode Dokter</th>
<th>Nama</th>
<th>Spesialis</th>
<th>Alamat</th>
<th>Kota</th>
<th>Pilih</th>
</tr>
";
while($row = mysql_fetch_array($query))
{
//$array[] = $row['title'];
echo "<tr>";
echo "<th>" . $row['id_dokter'] . "</th>";
echo "<th>" . $row['nama'] . "</th>";
echo "<th>" . $row['spesialis'] . "</th>";
echo "<th>" . $row['alamat'] . "</th>";
echo "<th>" . $row['kota'] . "</th>";
echo"<th> <input name='chkbox[]' type='checkbox' value='". $row['id_dokter'] ."'> </th>";
echo "</tr>";
}
echo "</table>";
?>
the code above will generate a table in my page. after the results populated, i use this code to submit my choices to the database
function kirimJadwal(){
$(document).ready(function(e) {
var checkboxdokter = new Array();
$("form#formulir").on('submit', function(e){
e.preventDefault();
/*$("input:checked").each(function() {
checkboxdokter.push($(this).val());
});*/
$.ajax({
type: "POST",
url: "Planning-kirim.php",
dataType:"html",
//data: {checkboxdokter:checkboxdokter},
data: $("form#formulir").serialize(),
success: function(data){
alert(checkboxdokter);
}
});
});
});
}
and this is the form that i use to put the results
<form method='post' action='Planning-kirim.php' name="formulir" id="formulir">
</div>
<label> Atur Jadwal</label>
<a id="dt1" href="#" <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span></a>
<input type="date" name="date">
<input type="submit" id="kirim" value="Submit" />
</form>
the problem is, when the results populated, the submit button will do nothing everytime i click it? is there any of my functions here that freezes the button???

Answer 1

Try to replace your javascript with this:
$(document).ready(function() {
$("#formulir").on('submit', function(){
$.ajax({
type: "POST",
url: "Planning-kirim.php",
dataType:"html",
data: $("#formulir").serialize(),
success: function(data){
alert("123");
}
});
return false;
});
});
And html with this:
$(document).ready(function() {
$("#formulir").on('submit', function(){
$.ajax({
type: "POST",
url: "Planning-kirim.php",
dataType:"html",
data: $("#formulir").serialize(),
success: function(data){
alert("123");
}
}).done(function(){
alert();
});
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method='post' action='Planning-kirim.php' name="formulir" id="formulir">
<label> Atur Jadwal</label>
<a id="dt1" href="#" ><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span></a>
<input type="date" name="date">
<input type="submit" id="kirim" value="Submit" />
</form>
Click on the submit button and look to the firebug. You'll find sent requests there. So the javascript works.

Answer 2

Document need to load before function.
$(document).ready(function(e) {
kirimJadwal();
function kirimJadwal(){
var checkboxdokter = new Array();
$("form#formulir").on('submit', function(e){
e.preventDefault();
/*$("input:checked").each(function() {
checkboxdokter.push($(this).val());
});*/
$.ajax({
type: "POST",
url: "Planning-kirim.php",
dataType:"html",
//data: {checkboxdokter:checkboxdokter},
data: $("form#formulir").serialize(),
success: function(data){
alert(checkboxdokter);
}
});
});
});
}