$(document).on('submit','#form_pem', function(event){
event.preventDefault();
var kode = $('#kode').val();
var name = $('#name').val;
var price = $('#price').val;
var dataToSend = new FormData(this);
if(kode != '' && name != '' && price != ''){
$.ajax({
url:"<?=site_url('bpem/user_action')?>",
method:"POST",
data:dataToSend,
contentType:false,
proccessData:false,
success: function(response)
{
alert(response);
$('#form_pem')[0].reset();
$('#modalpem').modal('hide');
dataTable.ajax.reload();
}
});
}
else{
alert("Please fill in all the details!");
}
});
This is my JavaScript code
<div class="modal fade text-xs-left" id="modalpem" tabindex="-1" role="dialog" aria-labelledby="myModalLabel35" aria-hidden="true">
<div class="modal-dialog modal-sm">
<form method= "post" id="form_pem">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h3 class="modal-title text-xs-center">Add Payment Cost</h3>
</div>
<div class="modal-body">
<fieldset class="form-group floating-label-form-group">
<label for="Kode">Code <span class="required">*</span></label>
<input type="text" class="form-control" name="kodebayar" id="kodebayar" placeholder="Payment Code">
</fieldset>
<fieldset class="form-group floating-label-form-group">
<label for="name">Name <span class="required">*</span></label>
<input type="text" class="form-control" name="nama" id="nama" placeholder="Payment Name">
</fieldset>
<fieldset class="form-group floating-label-form-group">
<label for="projectinput7">Monthly Fee <span class="required">*</span></label>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="number" class="form-control" placeholder="Monthly Fee" aria-label="Amount (to the nearest dollar)" name="harga" id="harga">
<span class="input-group-addon">.00</span>
</div>
</fieldset>
</div>
<div class="modal-footer">
<input type="reset" class="btn btn-grey" value="Clear">
<input type="submit" class="btn btn-warning" name="action" id="action" value="Add">
</div>
</div>
</form>
</div>
</div>
And this is the view. But I encountered an error like:
TypeError: 'append' called on an object that does not implement interface FormData.
Did I forget to add something? What should I do? Thank you for your assistance