I'm currently having a problem with my AJAX and PHP code where by I'm trying to create a multiple form on a page which act as a different input type for each of the form themself. The problem i have now is that i currently have 4 form which carry different item id but same type of value in the input field, When I'm trying to submit form for "FORM 1" it able to call my ajax function and insert the text field into my database but the file input field is become NULL. After that when I'm trying out the "Form 2", it can insert everything include the image file input into my database but my AJAX function can't be call, it directly link me to the php field which is not a AJAX function. Same to the remaining "Form 3" and "Form 4".
Here is my code for AJAX:
<script>
$(document).ready(function(){
$("#simpleConfirm").confirm({
confirm: function (el) {
$('#myhiddendiv').show();
$.ajax({
url: 'bannerConfig.php',
data: el.closest('form').serialize(),
type: 'post'
}).done(function () {
//do something if you want when the post is successfully
if(!alert('Banner Had Successfully Updated.')){document.getElementById('form').reset();}
}).fail(function () {
//if the post is failed show an error message if you want
alert('Some error occur. Please try again later.');
}).always(function () {
//this is executed on success and failure
$('#myhiddendiv').hide();
})
}
});
$("#testing").confirm({
confirm: function (el) {
$.ajax({
url: 'bannerItem.php',
data: el.closest('form').serialize(),
type: 'post'
}).done(function () {
if(!alert('Banner Had Successfully Updated.')){document.getElementById('form').reset();}
}).fail(function () {
//if the post is failed show an error message if you want
alert('Some error occur. Please try again later.');
}).always(function () {
//this is executed on success and failure
$('#myhiddendiv').hide();
})
}
});
});
</script>
Here are few form PHP code where i use to do the submission:
<!--Banner Item No 1 Start-->
<div class="box box-primary1" id="no1" style="display:none;">
<div class="box-header">
<h3 class="box-title">Edit Banner Image No.1 <small>编辑器</small></h3>
</div>
<div class="box-body">
<form id="form" action="bannerItem.php" method="POST" enctype="multipart/form-data">
<div class="box-body">
<input type="hidden" name="banner_id" value="1"></input>
<div class="form-group" >
<label for="bannerName">Banner Name 旗帜名称</label>
<input type="text" class="form-control" name="bannerName" id="bannerName" placeholder="Please Enter Name" onChange="checkDisabled(testing);">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="uploaded_file" name="uploaded_file" onChange="checkDisabled(testing);"><br>
<p class="help-block">Your picture size not more than 2MB. (Only JPEG/JPG/PNG is allowed)</p>
</div>
<div class="checkbox">
<button id="testing" type="submit" class="btn btn-primary" disabled>Update</button>
</div>
</div><!-- /.box-body -->
</form> <!-- Date range -->
<!-- /.form group -->
<!-- Date and time range -->
<!-- /.form group -->
<!-- Date and time range -->
<!-- /.form group -->
</div><!-- /.box-body -->
</div><!-- /.box -->
<!--Banner Item No 1 End-->
<!--Banner Item No 2 Start-->
<div class="box box-primary1" id="no2" style="display:none;">
<div class="box-header">
<h3 class="box-title">Edit Banner Image No.2 <small>编辑器</small></h3>
</div>
<div class="box-body">
<form id="form" action="bannerItem.php" method="POST" enctype="multipart/form-data">
<div class="box-body">
<input type="hidden" name="banner_id" value="2"></input>
<div class="form-group" >
<label for="bannerName">Banner Name 旗帜名称</label>
<input type="text" class="form-control" name="bannerName" id="bannerName" placeholder="Please Enter Name" onChange="checkDisabled(testing);">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="uploaded_file" name="uploaded_file" onChange="checkDisabled(testing);"><br>
<p class="help-block">Your picture size not more than 2MB. (Only JPEG/JPG/PNG is allowed)</p>
</div>
<div class="checkbox">
<button id="testing" type="submit" class="btn btn-primary" disabled>Update</button>
</div>
</div><!-- /.box-body -->
</form> <!-- Date range -->
<!-- /.form group -->
<!-- Date and time range -->
<!-- /.form group -->
<!-- Date and time range -->
<!-- /.form group -->
</div><!-- /.box-body -->
</div><!-- /.box -->
<!--Banner Item No 2 End-->
<!--Banner Item No 3 Start-->
<div class="box box-primary1" id="no3" style="display:none;">
<div class="box-header">
<h3 class="box-title">Edit Banner Image No.3 <small>编辑器</small></h3>
</div>
<div class="box-body">
<form id="form" action="bannerItem.php" method="POST" enctype="multipart/form-data">
<div class="box-body">
<input type="hidden" name="banner_id" value="3"></input>
<div class="form-group" >
<label for="bannerName">Banner Name 旗帜名称</label>
<input type="text" class="form-control" name="bannerName" id="bannerName" placeholder="Please Enter Name" onChange="checkDisabled(testing);">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="uploaded_file" name="uploaded_file" onChange="checkDisabled(testing);"><br>
<p class="help-block">Your picture size not more than 2MB. (Only JPEG/JPG/PNG is allowed)</p>
</div>
<div class="checkbox">
<button id="testing" type="submit" class="btn btn-primary" disabled>Update</button>
</div>
</div><!-- /.box-body -->
</form> <!-- Date range -->
<!-- /.form group -->
<!-- Date and time range -->
<!-- /.form group -->
<!-- Date and time range -->
<!-- /.form group -->
</div><!-- /.box-body -->
</div><!-- /.box -->
<!--Banner Item No 3 End-->
Did i did anything wrong with the code? Please guide me if i'm wrong, thanks and have a nice day ahead. :)
Aucun commentaire:
Enregistrer un commentaire