Jquery ajax not working in bootstrap modal - php

Question

I tried using jquery ajax to send a request to a php file, but it wasn't working.
I've searched many topics to see if they could be of help but all to no avail.
Here is my code.
NOTE: the variable are well declared but to save time, I may not be able to post them all because they are fetched from the database.
foreach($fetch_products as $row)
{
$i++;
$start_from = $i+$offset;
$super_id = $row['super_id'];
$super_name = $row['name'];
?>
<div class="modal inmodal" id="EditModal<?php echo $super_id;?>" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content animated flipInY">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title"><i class="fa fa-pencil"></i> Edit <?php echo $super_name;?></h4>
</div>
<div class="modal-body">
<form id="update_super_product_form<?php echo $super_id;?>" action="" method="post" class="form-horizontal">
<input type="hidden" name="super_id" value="<?php echo $super_id;?>"/>
<input type="hidden" name="current_page" value="<?php echo $current_page;?>"/>
<input type="hidden" name="per_page" value="<?php echo $per_page;?>"/>
<label>Product name</label>
<input type="text" name="product_name" id="product_name" value="<?php echo $super_name;?>" class="form-control">
<br/>
<div id="update_super_product_status<?php echo $super_id;?>"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal"><i class="fa fa-times-circle"></i> Close</button>
<button type="submit" id="update_super_product_btn<?php echo $super_id;?>" class="btn btn-primary"><i class="fa fa-check"></i> Save changes</button>
</div>
</form>
</div>
</div>
</div>
<script type='text/javascript'>
$("#update_super_product_form<?php echo $super_id;?>").submit(function(e)
{
e.preventDefault();
var current_page = "<?php echo $current_page;?>";
var per_page = "<?php echo $per_page;?>";
var data = new FormData($(this)[0]);
var btn = $("#update_super_product_btn<?php echo $super_id;?>");
var status = $("#update_super_product_status<?php echo $super_id;?>");
$.ajaxSetup(
{
beforeSend:function()
{
btn.attr("disabled",true);
btn.html("Please wait <img src='img/loading.gif'/>");
alert("xx");
},
complete:function()
{
btn.attr("disabled",false);
btn.html("<i class='fa fa-check'></i> Save changes");
alert("xxx");
}
});
$.ajax(
{
type: "POST",
data: data,
url: "gotcha.php?UpdateSuperProduct",
cache:false,
success: function(msg)
{
status.fadeIn("");
status.html(msg).delay(4000).fadeOut("slow");
btn.attr("disabled", false);
}
});
});
</script>
I'll be glad if you help.
Thanks