I have an issue with insert function inputting data twice. I have been looking around for possible solutions but I can’t seem to fix it. Big part is probably because I am new to using jquery and modals. Please do not criticize me not using parameterized queries. This is code:
This would be the code for my index page:
<div class="modal fade" id="uni_modal" role='dialog' data-bs-backdrop="static" data-bs-keyboard="true">
<div class="modal-dialog modal-md modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
</div>
<div class="modal-body">
</div>
<div class="modal-footer py-1">
<button type="button" class="btn btn-sm rounded-0 btn-primary" id='submit' onclick="$('#uni_modal form').submit()">Save</button>
<button type="button" class="btn btn-sm rounded-0 btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Script: for my main page:
<script>
$(function(){
// Components Functions
$('.manage_percentage').click(function(){
uni_modal('Manage Subject's Components Percentage',"editSubjectPercentage.php?id="+$(this).attr('data-id'))
})
})
</script>
editSubjectPercentage.php:
<div class="container-fluid">
<form action="" id="percentage-form">
<input type="hidden" name="id" value="<?php echo isset($_GET['id']) ? $_GET['id'] : '' ?>">
<table class="table table-striped table-hover">
<colgroup>
<col width="75%">
<col width="25%">
</colgroup>
<thead>
<tr>
<th class="py-0 px-1 text-center">Component</th>
<th class="py-0 px-1 text-center">Percentage (%)</th>
</tr>
</thead>
<tbody>
<?php
$component = $con->query("SELECT * FROM `tblcomponent` order by Id asc");
$total = 0;
while($row = mysqli_fetch_array($component)):
$total += isset($data[$row['Id']]) ? $data[$row['Id']] : 0;
?>
<tr>
<td class="py-0 px-1"><input type="hidden" name="component_id[]" value='<?php echo $row['Id'] ?>'><?php echo $row['componentTitle'] ?></td>
<td class="py-0 px-1">
<input type="number" step="any" class="form-control form-control-sm rounded-0 w-100 text-end" name="percentage[]" value="<?php echo (isset($data[$row['Id']])) ? $data[$row['Id']] : 0 ?>" required>
</td>
</tr>
<?php endwhile; ?>
<tfoot>
<tr>
<th class="py-0 px-1 text-center">Total</th>
<th class="py-0 px-1 text-center text-end" id="total"><?php echo $total ?>%</th>
</tr>
</tfoot>
</tbody>
</table>
</form>
</div>
<script>
$(function(){
$('input[name="percentage[]"]').on('input',function(){
var total = 0;
$('input[name="percentage[]"]').each(function(){
var _perc = $.isNumeric($(this).val()) === true ? $(this).val() : 0;
total += parseFloat(_perc)
})
$('#total').text(total+"%")
})
$('#percentage-form').submit(function(e){
e.preventDefault();
$('.pop_msg').remove()
var _this = $(this)
var total = $('#total').text()
total = total.replace(/%/gi,'')
console.log(total)
if(parseFloat(total) !== 100)
{
alert("Total Percentage must be 100%");
return false;
}
var _el = $('<div>')
_el.addClass('pop_msg')
$('#uni_modal button').attr('disabled',true)
$('#uni_modal button[type="submit"]').text('submitting form...')
$.ajax({
url:'./Actions.php?a=save_percentage',
method:'POST',
data:$(this).serialize(),
dataType:'JSON',
error:err=>{
console.log(err)
_el.addClass('alert alert-danger')
_el.text("An error occurred.")
_this.prepend(_el)
_el.show('slow')
$('#uni_modal button').attr('disabled',false)
$('#uni_modal button[type="submit"]').text('Save')
},
success:function(resp){
_el.addClass('alert alert-success')
$('#uni_modal').on('hide.bs.modal',function(){
location.reload()
})
_el.text(resp.msg)
_el.hide()
_this.prepend(_el)
_el.show('slow')
$('#uni_modal button').attr('disabled',false)
$('#uni_modal button[type="submit"]').text('Save')
}
})
})
})
</script>
This is the code of “./Actions.php?a=save_percentage”
<?php
Class Actions extends mysqli{
private $sql;
function __construct(){
$this->sql = new mysqli("localhost", "root", "", "resultgrading");
}
function save_percentage(){
extract($_POST);
$data = "";
foreach($component_id as $k => $v){
if(!empty($data)) $data .= ", ";
$data .= "('$id','{$v}','{$percentage[$k]}')";
}
$this->sql->query("DELETE FROM `component_subject_percentage` where `subject_id` = '{$id}'");
if($this->sql->query("INSERT INTO `component_subject_percentage` (`subject_id`,`component_id`,`percentage`)VALUES ('29','5','30'), ('29','6','20'), ('29','8','50')") === true){
$resp['status'] ='success';
$resp['msg'] = $data;
}else{
$resp['status'] ='failed';
$resp['msg'] = "Data fails to save. Error: ". $this->sql->lastErrorMsg();
$resp['sql'] = $sql;
}
return json_encode($resp);
}
}
$a = isset($_GET['a']) ?$_GET['a'] : '';
$action = new Actions();
switch($a){
case 'save_percentage':
echo $action->save_percentage();
break;
default:
// default action here
break;
}