i have 2 Checkboxes (in each row) in my Table. I want to submit and update a row by pressing the checkbox and not with a submit button, it works, but i want it to submit without refreshing the whole page. I am using JS and AJAX for it, but this time, i'm making something wrong.
The first Checkbox:
<td>
<form id="checkgo" method="post">
<input type="checkbox" onchange="this.form.submit()" name="wegeb" id="wegeb" value="<?php echo $row['bestellnr'] ?>">
</form>
<?php echo $row['we_gebucht']; ?> </td>
The Script for it:
<script>
$(document).ready(function() {
$("#checkgo").submit(function (event){
event.preventDefault()
var wegeb = document.getElementById("wegeb").value
var info = {wegeb: wegeb};
$.ajax({
type : "POST",
url : "addlist.php",
data : info,
});
return false;
});
});
</script>
And the php file for the Update (addlist.php):
$we_gebucht = (isset($_POST['we_gebucht']) && !empty($_POST['we_gebucht'])) ? $_POST['we_gebucht'] : null;
$we_gebucht='yes';
$bestellnr = (isset($_POST['wegeb']) && !empty($_POST['wegeb'])) ? $_POST['wegeb'] : null;
$update=mysqli_query($connection,"UPDATE bestellung SET we_gebucht='$we_gebucht' WHERE bestellnr='$bestellnr'");
$result = $connection->query($update);
My understanding:
With "var wegeb = document.getElementById("wegeb").value" i'm selecting the Checkboxes Value (which contains the Key "bestellnr" from the table), that one i'm passing as wegeb to the addlist.php, where it gets in the Variable $bestellnr. Now, the row from the Key is getting updated.
Moreover, the page is still reloading, even with the event.preventDefault().
it's clear something is wrong, but i dont see where and tried different ways.
i hope i made my problem clear,
Thanks for any Help or tip!
Update(Table):
<tr>
<td> <?php echo $row['warennr']; ?> </td>
<td> <?php echo $row['kundeprojekt_id']; ?> </td>
<td> <?php echo $row['bestellnr']; ?> </td>
<td> <?php echo $row['besteller']; ?> </td>
<td> <?php echo $row['datum']; ?> </td>
<td> <?php echo $row['gesamtwert']; ?> </td>
<td> <?php echo $row['po_nr']; ?> </td>
<td> <?php echo $row['ebest_ekw']; ?> </td>
<td>
<form id="checkgo" method="post">
<input type="checkbox" name="wegeb" id="wegeb" value="<?php echo $row['bestellnr'] ?>">
</form>
<?php echo $row['we_gebucht']; ?> </td>
<td> <?php echo $row['PSP_Element']; ?> </td>
<td>
<form id='liefert' method="post" >
<input type="checkbox" onclick="doThis(this)" name="lief" id="lief" value="<?php echo $row['bestellnr'] ?>">
</form>
<?php echo $row['geliefert']; ?> </td>
<td> <?php echo $row['smarttrack']; ?> </td>
<td> <?php echo $row['name']; ?> </td>
<td> <?php echo $row['preis']; ?> </td>
<td> <?php echo $row['menge']; ?> </td>
<td> <?php echo $row['assetnr']; ?> </td>
<td> <?php echo $row['ticketnr']; ?> </td>
<td> <?php echo $row['Anlagennr']; ?> </td>
<td> <?php echo $row['lieferantname']; ?> </td>
<td> <?php echo $row['kostenstelle']; ?> </td>
<td> <?php echo $row['kundenname_projekt']; ?> </td>
<td> <?php echo $row['standort']; ?> </td>
<td> <?php echo $row['info_uebergabe']; ?> </td>
<td> <?php echo $row['warengruppe']; ?> </td>
<td> <button class="btn-update"> ✎ </button> </td>
<td> <button class="btn-deletee" type="button" id="<?php echo $row['bestellnr']; ?>" data-id2="<?php echo $row['warennr']; ?>" data-id3="<?php echo $row['kundeprojekt_id']; ?>" >Delete</a></button></td>
</tr>
First, let's remove the inline js from your html:
<td>
<form id="checkgo" method="post">
<input type="checkbox" name="wegeb" id="wegeb" value="<?php echo $row['bestellnr'] ?>">
</form>
<?php echo $row['we_gebucht']; ?>
</td>
Then we bind the ajax call to the right event:
$(function() {
$("#wegeb").change(function (e){
e.preventDefault(); //not necessary since we are binding to the checkbox
var wegeb = $(this).val();
var info = {wegeb: wegeb};
$.ajax({
type : "POST",
url : "addlist.php",
data : info,
});
});
});
This way every time you check the checkbox or uncheck it, it will update the database accordingly
You can prevent the form from submitting with e.preventDefault();, this is not good idea.
this may help you:-
<form id="checkgo" method="post">
<input type="checkbox" onchange="doThis(this)" name="wegeb" id="wegeb" value="<?php echo $row['bestellnr'] ?>">
</form>
<script>
function doThis(checkbox){
var wegeb = document.getElementById("wegeb").value
var info = {wegeb: wegeb};
$.ajax({
type : "POST",
url : "addlist.php",
data : info,
});
return false;
}
</script>
Related
I have a form on my school web application where teachers are able to add scores for students and at the end of each row, the total, which is the sum of input values is automatically calculated per student.
The problem is that it output the total of all the students instead of the total of individual students on all the rows even ones with no scores added.
How do I get the unique total value for each row?
Below is my code
<?php if($class_id >= 1 && $class_id <= 4 && $student['is_secmid'] == 1){?>
<form method="post" action="<?php echo site_url('admin/examgroup/entrymarks') ?>" id="assign_form1111">
<input type="hidden" id="max_mark" value="<?php echo $subject_detail->max_marks; ?>">
<?php
if (isset($resultlist) && !empty($resultlist)) {
?>
<div class="row">
<div class="col-md-12">
<input type="hidden" name="exam_group_class_batch_exam_subject_id" value="<?php echo $exam_group_class_batch_exam_subject_id; ?>">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>C.A 1 (10.0)</th>
<th>C.A 2 (10.0)</th>
</tr>
</thead>
<tbody>
<?php if (empty($resultlist)) {
?>
<tr>
<td colspan="7" class="text-danger text-center"><?php echo $this->lang->line('no_record_found'); ?></td>
</tr>
<?php
} else {
foreach ($resultlist as $student) {
?>
<tr class="std_adm_<?php echo $student['admission_no']; ?>">
<input type="hidden" name="prev_id[<?php echo $student['exam_group_class_batch_exam_students_id'] ?>]" value="<?php echo $student['exam_group_exam_result_id'] ?>">
<input type="hidden" name="exam_group_student_id[]" value="<?php echo $student['exam_group_class_batch_exam_students_id'] ?>">
<td><?php echo $student['admission_no']; ?></td>
<td style="white-space: nowrap;"><?php echo $student['lastname'] . " " . $student['firstname']; ?></td>
<td> <input type="number" class="marksssss2 form-control" min="0" max="10" name="exam_group_student_ca1_<?php echo $student['exam_group_class_batch_exam_students_id']; ?>" value="<?php echo $student['exam_group_exam_result_get_ca1']; ?>" step="any"></td>
<td> <input type="number" class="marksssss3 form-control" min="0" max="10" name="exam_group_student_ca2_<?php echo $student['exam_group_class_batch_exam_students_id']; ?>" value="<?php echo $student['exam_group_exam_result_get_ca2']; ?>" step="any"></td>
<td> <output class="result"></output></td>
</tr>
<?php
}
}
?>
</tbody>
</table>
</div>
<?php if ($this->rbac->hasPrivilege('exam_marks', 'can_edit')) { ?>
<button type="submit" class="allot-fees btn btn-primary btn-sm pull-right" id="load" data-loading-text="<i class='fa fa-spinner fa-spin '></i> Please Wait.."><?php echo $this->lang->line('save'); ?>
</button>
<?php } ?>
</div>
</div>
<?php } ?>
<script>
const $inputs = $('input[type="number"]')
$inputs.change(function() {
var total = 0;
var parent = $(this).closest('.row');
parent.find('input[type="number"]').each(function() {
if ($(this).val() != '') {
total += parseInt($(this).val());
}
});
parent.find('.result').html(total);
});
</script>
you missed class row on <tr> and you are trying to find it on closest div from javascript, and you are getting this (<div class="row">), it have all the (<input type="number").
you forget to add class to TR. Add class row on <tr> so you can get all (<input type="number") inside the tr.
because of not added class on TR you are facing issue that all total have same numbers.
This is my controller:
function update_agenda() {
$id = $this->input->post['did'];
$this->load->model('agenda_model');
$data = array(
'nama' => $this->input->post('did'),
'keterangan' => $this->input->post('dketer')
);
($this->agenda_model->update($id, $data))
}
When I click button Save, it won't change anything. How can I fix this problem?
<td>
<input type ="checkbox" id="haha" class=checkbox1 name="checklist" value=<?php echo $agenda->id; ?>> <?php echo $agenda->id; ?>
</td>
<td>
<input type="text" id="hide" name="did" value="<?php echo $agenda->id; ?>">
</td>
<td>
<input type="text" name="dnama" id="nama_" value="<?php echo $agenda->nama; ?>" disabled />
</td>
<td>
<input type="text" name="dketer" id="ket_" value="<?php echo $agenda->keterangan; ?>" disabled>
</td>
<?php }?>
</td>
</tr>
</table>
<button onclick="saveUpdate()"> Save </button>
This is my model:
function update ($id,$data){
$this->db->where('id', $id);
$this->db->update('agenda', $data);
}
Here is my saveUpdate function
i hope this helpyou
view.php
<td>
<input type ="checkbox" id="haha" class=checkbox1 name="checklist" value=<?php echo $agenda->id; ?>> <?php echo $agenda->id; ?>
</td>
<td>
<input type="text" id="hide" name="did" value="<?php echo $agenda->id; ?>">
</td>
<td>
<input type="text" name="dnama" id="nama_" value="<?php echo $agenda->nama; ?>" disabled />
</td>
<td>
<input type="text" name="dketer" id="ket_" value="<?php echo $agenda->keterangan; ?>" disabled>
</td>
<?php }?>
</td>
</tr>
</table>
<button onclick="saveUpdate()"> Save </button>
controller.php
function update_agenda() {
$this->load->model('agenda_model');
$this->form_validation->set_rules('did', 'Did', 'trim|required|xss_clean');
$this->form_validation->set_rules('dketer', 'Dketer', 'trim|required|xss_clean');
if ($this->form_validation->run() === FALSE){
echo 'ERROR';
}
else{
$id = $this->input->post['did'];
$data = array(
'nama' => $this->input->post('did'),
'keterangan' => $this->input->post('dketer')
);
$this->agenda_model->update($id, $data);
$data['agenda'] = $this->agenda_model->get_data($id);
$this->load->view('formsuccess', $data);
}
}
model.php
function update($id, $data){
$this->db->where('id', $id);
$this->db->update('table', $data);
}
function get_data($id){
$this->db->where('id', $id);
return $this->db->get('table')->row();
}
I have a view code:
<?php
$i = 1;
//var_dump($this->productList);
foreach ($this->productList as $data) {
$desc=explode(",",$data['descriptions']);
?>
<tr>
<th colspan="3">
<input type="hidden" id="id_pack" name="id_pack" value="<?php echo $data['package_id']; ?>">
<input type="hidden" id="nama_pack" name="nama_pack" value="<?php echo $data['package_name']; ?>">
<h4 align="center" class="title-pack"><?php echo $data['package_name']; ?></h4>
</th>
</tr>
<tr id="dashe">
<td>
<ul class="myul">
<?php foreach($desc as $descriptions) { ?>
<li class="myli"> <?php echo $descriptions; ?></li>
<?php } ?>
</ul>
</td>
<td>
<h4 class="prize">
Rp. <?php echo number_format($data['price'],2);?>
/ month
</h4>
</td>
<td>
<p id="order" name="order" class="mybutton" data-toggle="modal" data-target=".mymodal">Order</p>
</td>
</tr>
<?php
$i++;
}
?>
And this the javascript:
document.getElementById("order").addEventListener("click", tampilkanHrm);
function tampilkanHrm() {
var pilihan=$("#nama_pack").val();
document.getElementById("choice").innerHTML = pilihan;
document.getElementById("pack").value = pilihan+" Package";
}
the problem is, in the order button it always show the same record. Just show the first data, even i clicked other order button. Hope somebody help.
You can't assign same id for multiple elements.
So, have different ids.
<?php
$i = 1;
//var_dump($this->productList);
foreach ($this->productList as $data) {
$desc=explode(",",$data['descriptions']);
?>
<tr>
<th colspan="3">
<input type="hidden" id="id_pack<?php echo $i ?>" name="id_pack" value="<?php echo $data['package_id']; ?>">
<input type="hidden" id="nama_pack<?php echo $i ?>" name="nama_pack" value="<?php echo $data['package_name']; ?>">
<h4 align="center" class="title-pack"><?php echo $data['package_name']; ?></h4>
</th>
</tr>
Similarly create buttons with different ids.
<td>
<p id="<?php echo $i ?>" name="order" class="mybutton" data-toggle="modal" data-target=".mymodal">Order</p>
</td>
Then change your javascript to jquery. Hope, you might also be using jquery [ understood from your code ]
$(".mybutton").on("click", function() {
var identifier = $(this).attr("id");
var pilihan=$("#nama_pack"+identifier).val();
$("#choice").html(pilihan);
});
Change your code like this and check.
Trying to use label for each radio-box(to customise them with css3), but there is javascript preventing the labels to work as they should. When I click on a label, the radio-box gets focused but not checked.
If you click straight on the radio-box, it validates and adds a class .validation-passed to the input. Maybe I need to make a validation for the label aswell?
Anyone faced this before and could help out to make it work?
<table class="data-table review-summary-table" id="product-review-table">
<tbody>
<?php foreach ($this->getRatings() as $_rating): ?>
<tr>
<td class="label">
<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>
</td>
<?php foreach ($_rating->getOptions() as $_option): ?>
<td class="value">
<label for="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>_<?php echo $_option->getValue() ?>">
<?php echo $this->escapeHtml($_rating->getRatingCode()) ?> <?php echo $_option->getValue() ?>
</label>
<input type="radio" name="ratings[<?php echo $_rating->getId() ?>]" id="<?php echo $this->escapeHtml($_rating->getRatingCode()) ?>_<?php echo $_option->getValue() ?>" value="<?php echo $_option->getId() ?>" class="radio" />
</td>
<?php endforeach; ?>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<input type="hidden" name="validate_rating" class="validate-rating" value="" />
<script type="text/javascript">decorateTable('product-review-table')</script>
I see that all of radio boxes have different names.
If you want collate it to 1 group you should use same names for all radio buttons.
name="ratings"
I am facing trouble getting the multiple forms on a webpage submitted using the jquery validation plugin
Below is the code for generating multiple forms on a page
<?php for($index=1;$index<4;$index++) : ?>
<tr>
<td class="center">
<div class="box-content" id="share_rss_">
<form class="share_rss_form" id="share_rss_form_<?php echo $index; ?>" method="post" action="abc2_db.php?id=<?php echo $index; ?>" data-noty-options='{"text":"This is a success notification","layout":"topLeft","type":"success"}'>
<table class="table table-bordered table-striped table-condensed " id="tbl_<?php echo $index; ?>" >
<tr id='tr_<?php echo $index; ?>'><td><input type=text class="required" name='rss_title' id='title' style="width:400px;margin:0px" value="This is just a demo"></td>
</tr>
<tr id='tr_<?php echo $index; ?>'><td><textarea class="required" name='rss_description_<?php echo $index; ?>' style="width:400px;margin:0px" >Description series</textarea></td></tr>
<tr id='tr_<?php echo $index; ?>'><td><b>Featured</b> <input type='checkbox' name='rss_featuredArticle_<?php echo $index; ?>' value=1 />
<b>Rated</b> <input type='checkbox' name='rss_rated_<?php echo $index; ?>' value=1 />
<b>Expiry time</b> <input type='checkbox' name='rss_expirySelect_<?php echo $index; ?>' value=1 />
<select name='rss_expiry_<?php echo $index; ?>'><option value=15>15</option><option value=30>30</option></select></td>
</tr>
<tr id='tr_<?php echo $index; ?>'>
<td><select class="category" class="required" name="category_<?php echo $index; ?>" id="category_<?php echo $index; ?>">
<option value="" ><b>---Select---</b></option>
<?php foreach($category as $c) :?>
<option value="<?php echo $c; ?>" ><b><?php echo $c; ?></b></option>
<?php endforeach; ?>
<br>
</select>
</td>
</tr>
<tr id='tr_<?php echo $index; ?>'><td><div id="container_for_category_<?php echo $index; ?>"></div></td>
</tr>
</table>
</form>
</div>
</td>
<td class="center">
<button class="btn btn-info approveid" href="#" type="submit" id="approve_<?php echo $index; ?>"><i class="icon-edit icon-white"></i></button>
<button class="btn btn-danger trashid" href="#" type="submit" id="trash_<?php echo $index; ?>"><i class="icon-trash icon-white"></i></button>
</td>
</tr>
<?php endfor; ?>
Below is the jquery code to trigger the validation and submission of forms
$('.share_rss_form').each(function(index,e1){
$(e1).validate({
errorClass: "error",
validClass: "success",
submitHandler: function(form) {
//The below alert is triggered
alert(form.id) ;
form.submit();
return true;
//alert(e1);
//console.log(form);
}
});
});
The problem is the above jquery seems to work partially because alert(form.id) in the validation submitHandler code. However the form doesn't submit. I have added form.submit() in the code after which the form does submit but the entire page is reloaded.
According to me the jquery validation plugin should automatically submit the form after validation but it doesnt seem so. Can someone please help?
Thanks in advance!
My guess is when you use .each(), it tries to validate the elements one by one. Then the validator submits the invalid form and reloads the page in order to validate next form element. Basically calling validate again and again.
The answer to above was the use $(form).ajaxSubmit(); instead of simply form.submit().
$('.share_rss_form').each(function(index,e1){
$(e1).validate({
errorClass: "error",
validClass: "success",
submitHandler: function(form) {
//The below alert is triggered
alert(form.id);
$(form).ajaxSubmit();
}
});
});