Develop Reference

php form building in loop, javascript only affecting first element

I'm currently building a form, and using a PHP loop to build the elements in a table which hold the values I'm submitting after clicking a checkbox.
<form id="saveLineup">
#foreach($lists as $list)
<tr style="text-align:center;">
<td id="groupNumber">{{$list['product']}} - {{$list['product_NAME']}}</td>
<td id="detailColor">{{$list['detail']}}/{{$list['COLOR']}} - {{$list['description']}}</td>
<td id="category">{{$list['CATEGORY']}}</td>
<td><input id="addToLineup"> type="checkbox" <?php if ($list['LINE_UP'] == 1) echo "checked='checked'"; ?>></td>
</tr>
#endforeach
</form>
My issue is, I have an id on the checkbox and id's on the values so I can only get the console log when I click the very first checkbox and it only logs the very first item. How can I change this so that I can submit with any checkbox in the table and it's associated values?
$("#addToLineup").click(function (e) {
var productNumber = document.getElementById("productNumber").innerHTML = productNumber;
var detailColor = document.getElementById("detailColor").innerHTML = detailColor;
var category = document.getElementById("category").innerHTML = category;
updatedata.productNumber = productNumber;
updatedata.detailColor = detailColor;
updatedata.category = category;
$.ajax({
url: "/test/addToLineup",
data: updatedata,
_token: phpVariables.csrfToken,
type: "POST",
beforeSend: function () {
showLoading(element);
},
success: function (data) {
location.reload();
},
});
});

Here is the solution to your problem, you need to use classes instead of IDs.
#foreach($lists as $list)
<tr style="text-align:center;">
<td class="groupNumber">{{$list['product']}} - {{$list['product_NAME']}}</td>
<td class="detailColor">{{$list['detail']}}/{{$list['COLOR']}} - {{$list['description']}}</td>
<td class="category">{{$list['CATEGORY']}}</td>
<td><input class="addToLineup"> type="checkbox" <?php if ($list['LINE_UP'] == 1) echo "checked='checked'"; ?>></td>
</tr>
#endforeach
Now, in your JS section, you can fetch them by their class:
var productNumber = document.getElementsByClassName("productNumber").innerHTML = productNumber;
var detailColor = document.getElementsByClassName("detailColor").innerHTML = detailColor;
var category = document.getElementsByClassName("category").innerHTML = category;
Note: If you're applying CSS styles to those elements via their ID, you can change #productNumber to .productNumber in your CSS or you can leave the ID tag with the same name as your previous code.

In PHP code
<form id="saveLineup">
<?php $i=0; ?>
#foreach($lists as $list)
<?php $i+=1; ?>
<tr style="text-align:center;">
<td id="groupNumber<?php echo $i ?>">.
{{$list['product']}} - {{$list['product_NAME']}}
</td>
<td id="detailColor<?php echo $i ?>">.
{{$list['detail']}}/{{$list['COLOR']}} - {{$list['description']}}.
</td>
<td id="category<?php echo $i ?>">.
{{$list['CATEGORY']}}
</td>
<td>
<input id="addToLineup<?php echo $i ?>"> type="checkbox" <?php if ($list['LINE_UP'] == 1) echo
"checked='checked'"; ?>>
</td>
</tr>
#endforeach
<input id="listcount"> type="hidden" value="<?php echo $i; ?>" >
</form>
Js function
$("#addToLineup").click(function (e) {
for(var i=1 ; i <= parseInt(document.getElementById("listcount").value); i++) {
Console.log(document.getElementById("productNumber"+i).innerHTML);
Console.log(document.getElementById("detailColor"+i).innerHTML);
Console.log(document.getElementById("category"+i).innerHTML);
}
});

Clicking the submit button submit the form data multiple times

I have asynchronously loaded form. When I submit the form by clicking the submit button, it submits multiple times. I have gone through some of the SO answers but still the problem is there.
Form:
<form action="" method="POST" id="aproveForm" class="smart-form" novalidate="novalidate">
<fieldset>
<section class="col col-5" >
<select class="form-control" name="groupid" onchange="loadInvoice(this.value);">
<option value="1">Sales</option>
<option value="2">Merchandiser</option>
</select>
</section>
</fieldset>
</form>
JS
function loadInvoice(id){
nid= 'id='+id;
$.ajax({
type:'POST',
url:'loadform.php',
data:nid,
dataType:'html',
success:function(data) {
$('#payform').html(data);
}
});
}
in the <div id="payform">, I have loaded the form from loadform.php which is like below:
<form method="POST" id="mulpayment">
<table class="table table-bordered" style="width:80%;">
<tr>
<th><div align="center">Name of Customer</div></th>
<th><div align="center">New Payment</div></th>
<th><div align="center">Total Debit</div></th>
</tr>
<?php
alldebt=0;
foreach($linvoice as $row): ?>
<input type="hidden" id="gcustomer" name="gcustomer[]" value="<?php echo $row['customerid']; ?>">
<?php
echo "<tr>";
echo "<td><div align=left>".$row['name'].".</div></td>";
echo '<td><input type="text" id="gpay" name="gpay[]" min="0" required style="width:100%;"></td>';
echo '<td align="right"><i class="fa fa-inr"></i> '.$row['totaldebit'].'</td>';
echo "</tr>";
$alldebt += $row['totaldebit'];
endforeach;
?>
<tr>
<th colspan="3"><div align="right">Total</div></th>
<th><div align="right"><i class="fa fa-inr"></i> <?php echo number_format($alldebt,2); ?></div></th>
</tr>
<tr>
<td colspan="6">
<div align="right">
<input type="submit" id="savePayment" value="Save Payment" class="btn btn-success">
</div>
</td>
</tr>
</table>
</form>
When I submit the form, it submits multiple times,i.e., paymentupdate.php runs multiple times. I want to run paymentupdate.php one time only. How do I solve this problem? Please help.
$(document).on("submit", "#mulpayment", function(e){
e.preventDefault();
var gcustomer = $("input[id='gcustomer']").map(function(){return $(this).val();}).get();
var gpay = $("input[id='gpay']").map(function(){return $(this).val();}).get();
var gbalance = $("input[id='gbalance']").map(function(){return $(this).val();}).get();
var gid = $('#gid').val();
var paymentMade = 'gcustomer='+gcustomer+'&gpay='+gpay+'&gbalance='+gbalance+'&gid='+gid;
$.ajax({
type:'POST',
dataType:"json",
data:paymentMade,
url: 'paymentupdate.php',
success:function(data) {
if(data.success){
$('#mulpayment')[0].reset();
$('#payform').html(data.record);
}else{
alert(data.msg);
}
}
});
return false;
});

Try adding disable to your button after submitting your form. like for example
$(document).on("click", "#mulpayment", function(e){
e.preventDefault();
$(':input[type="submit"]').prop('disabled', true);
var gcustomer = $("input[id='gcustomer']").map(function(){return $(this).val();}).get();
var gpay = $("input[id='gpay']").map(function(){return $(this).val();}).get();
var gbalance = $("input[id='gbalance']").map(function(){return $(this).val();}).get();
var gid = $('#gid').val();
var paymentMade = 'gcustomer='+gcustomer+'&gpay='+gpay+'&gbalance='+gbalance+'&gid='+gid;
$.ajax({
type:'POST',
dataType:"json",
data:paymentMade,
url: 'paymentupdate.php',
success:function(data) {
if(data.success){
$('#mulpayment')[0].reset();
$('#payform').html(data.record);
$(':input[type="submit"]').prop('disabled', false);
}else{
alert(data.msg);
}
}
});
});
in this way, it can prevent from clicking multiple times. you can enable back the button once the ajax request succeeds.

Try change button type="submit" for type="button":
$(document).on("click", "#mulpayment", function(e){
var gcustomer = $("input[id='gcustomer']").map(function(){return $(this).val();}).get();
var gpay = $("input[id='gpay']").map(function(){return $(this).val();}).get();
var gbalance = $("input[id='gbalance']").map(function(){return $(this).val();}).get();
var gid = $('#gid').val();
var paymentMade = 'gcustomer='+gcustomer+'&gpay='+gpay+'&gbalance='+gbalance+'&gid='+gid;
$.ajax({
type:'POST',
dataType:"json",
data:paymentMade,
url: 'paymentupdate.php',
success:function(data) {
if(data.success){
$('#mulpayment')[0].reset();
$('#payform').html(data.record);
}else{
alert(data.msg);
}
}
});
});
And remove action and method attributes from the form tags, you dont need it if you use ajax:
<form id="aproveForm" class="smart-form" novalidate="novalidate">
<form id="mulpayment">

javascript method executing twice - bootstrap-slider

I have n dynamically generated sliders each with the given DOM id slider{n}.
Because I don't know how many sliders I will have, I have attached my on slideStop event to the class, and then using $(this) to get the id, and do whatever's relevant to that slider.
$(".slider").on("slideStop", function(slideEvt) {
var rowoffset = $(this).attr("id").substring(6);
$("#percentage" + rowoffset).text(slideEvt.value);
updateNumbers(rowoffset);
});
Everything works as planned except the script is executing the updateNumbers() method twice.
As you can see here my postdata is logged to console twice along with each response, one with the correct values, and a 2nd call which has undefined values.
it's clear that the first response is a response to the 2nd call.
Why is my method firing twice? Is it something to do with the slider library or jquery?
How come the response to the failed call comes back first even though the failed call is always executed 2nd?
Here is the updateNumbers method, which certainly doesn't call its self.
function updateNumbers(rowoffset){
//get variables from DOM element values
var percentage = $("#slider" + rowoffset).val();
var group = $("#rrgroup").val();
var rrclass = $("#rrclass").val();
var category = $("#rrcategory").val();
var subcategory = $("#subcategory" + rowoffset).val();
var period = $("#rrperiod").val();
var year = $("#rryear").val();
var yearmonth = $("#rryearmonth").val();
var rangesize = $("#rangesize" + rowoffset).text();
var storesstring = $("#rrstores").val();
if(storesstring == ""){
storesarray = [];
} else {
var storesarray = storesstring.split(",");
}
var postdata = {percentage: percentage,
group: group,
class: rrclass,
category: category,
subcategory: subcategory,
period: period,
year: year,
yearmonth: yearmonth,
stores: storesarray,
rangesize: rangesize};
console.log(postdata);
$.ajax({
url: "ajaxrangemix.php",
type: "post",
dataType: 'json',
data: postdata,
success: function (response) {
console.log(response);
$("#dropskus" + rowoffset).text(response.skus);
$("#keepsales" + rowoffset).text(response.sales);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
}
HTML
<div class='panel-body' id='rangemixbody'>
<input type='hidden' id='rrgroup' value="<?php echo $group; ?>">
<input type='hidden' id='rrclass' value="<?php echo $class; ?>">
<input type='hidden' id='rrcategory' value="<?php echo $category; ?>">
<input type='hidden' id='rrperiod' value="<?php echo $period; ?>">
<input type='hidden' id='rryear' value="<?php echo $yr; ?>">
<input type='hidden' id='rryearmonth' value="<?php echo $yrmth; ?>">
<input type='hidden' id='rrstores' value='<?php implode(",", $storename); ?>'>
<table class='table table-striped'>
<thead>
<tr>
<th>Subcategory</th>
<th><span>0%</span><span class="pull-right">100%</span></th>
<th>%</th>
<th>Current Range Size</th>
<th>Drop Skus</th>
<th>Keep Sales</th>
<th>Sales Share</th>
</tr>
</thead>
<tbody>
<?php
$i = 0;
$subcategories = array();
foreach($rangereviewarray as $row){
?>
<tr>
<td>
<input type="hidden" id="subcategory<?php echo $i;?>" value="<?php echo $row['subcategory']; ?>">
<?php $subcategories[$i] = $row['subcategory']; ?>
<?php echo $row['subcategory']; ?>
</td>
<td>
<input id="slider<?php echo $i; ?>" type="text" class="slider" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="100" data-slider-tooltip="hide">
</td>
<td>
<span id="percentage<?php echo $i; ?>">100</span>%
</td>
<td>
<span id="rangesize<?php echo $i; ?>"><?php echo $row['rangesize']; ?></span>
</td>
<td><span id="dropskus<?php echo $i; ?>">0</span></td>
<td>
<input type="hidden" id="sales<?php echo $i; ?>" value="<?php echo $row['sales']; ?>">
<span id="keepsales<?php echo $i; ?>"><?php echo number_format($row['sales'], 2); ?></span>
</td>
<td><?php echo number_format($row['share'], 2); ?></td>
</tr>
<?php
$i++;
}
?>
</tbody>
</table>
<input type='hidden' id='rrsubcategories' value='<?php implode(",", $subcategories); ?>'>
</div>

It's really hard to determine the reason for the event fire twice from the question. My only suggestion, based on the attached screenshot, is to cancel the request when the slider is not related to any DOM element:
function updateNumbers(rowoffset){
var $el = $("#slider" + rowoffset);
if( $el.length == 0 ) {
return;
}
//get variables from DOM element values
var percentage = $el.val();
var group = $("#rrgroup").val();
var rrclass = $("#rrclass").val();
var category = $("#rrcategory").val();
var subcategory = $("#subcategory" + rowoffset).val();
..... rest of the function
}

Update Database Record with Ajax in Codeigniter

I am trying to update database records using ajax from the ajax response, getting success message but the actual database records are not updated at all. But it wonder how the ajax response should throw the success message while the query is not updating the database.
VIEW:
// AJAX code to update the database
// update marks when form is submitted
$('#updateMarks').on('submit',function(event) {
event.preventDefault();
var practical_mark = $("#mark_written").val();
var written_mark = $("#mark_practical").val();
var comment = $("#comment").val();
var mark_id = $("#mark_id").val();
$.ajax({
type: "POST",
url: "<?php echo site_url('admin/exam_marks_update'); ?>",
data: { practical_mark : practical_mark,
written_mark: written_mark,
comment : comment,
mark_id : mark_id
},
success: function(response)
{
alert("success");
},
error: function(){
alert("Error");
},
});
});
<?php foreach($marks as $row2): ?>
<form method="post" role="form" id="updateMarks">
<tr>
<td class="text-center"><?php echo $student['name']; ?></td>
<td>
<!-- create two col table for marks category -->
<table class="table table-bordered table-hover toggle-circle">
<thead>
<tr>
<th data-toggle="true" class="text-center"><?php echo get_phrase('written_exam'); ?></th>
<th data-toggle="true" class="text-center"><?php echo get_phrase('practical_exam'); echo get_phrase('_(out_of_100)'); ?></th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center"><input type="number" value="<?php echo $row2['written_mark_obtained'];?>" id="mark_written" name="mark_written" class="form-control" /></td>
<td class="text-center"><input type="number" value="<?php echo $row2['practical_mark_obtained'];?>" id="mark_practical" name="mark_practical" class="form-control"/></td>
</tr>
</tbody>
</table>
<!-- end create two col table for marks category -->
</td>
<td class="text-center"><textarea class="form_control" id="comment" name="comment" rows="4" > <?php echo $row2['comment'] ?> </textarea></td>
<td class="text-center">
<input type="hidden" id="mark_id" name="mark_id" value="<?php echo $row2['mark_id'];?>" />
<button type="submit" class="btn btn-block btn-success btn-md"><i class="icon pe-pen" aria-hidden="true"></i><?php echo get_phrase('update'); ?></button>
</td>
</tr>
</form>
<?php endforeach; ?>
Controller:
function exam_marks_update(){
$data['written_mark_obtained'] = $this->input->post('written_mark');
$data['practical_mark_obtained'] = $this->input->post('practical_mark');
$data['comment'] = $this->input->post('comment');
$this->crud_model->update_student_marks($data, $this->input->post('mark_id'));
}
MODEL
function update_student_marks($data, $mark_id){
$this->db->where('mark_id', $mark_id);
$this->db->update('mark', $data);
}

Jquery ajax success callback function is always called if the request to server succeeds. You need to return response data from server to verify when database operation was successful or not. I have edited your code , this might work for you.
MODEL
function update_student_marks($data, $mark_id){
.....
return $this->db->update('mark', $data);
}
Controller::
function exam_marks_update(){
.....
if($this->crud_model->update_student_marks($data, $this->input->post('mark_id'))){
echo json_encode(array('success' => true));
exit;
} else {
echo json_encode(array('success' => false));
exit;
}
}
View
$.ajax({
type: "POST",
url: "<?php echo site_url('admin/exam_marks_update'); ?>",
dataType :'json',
data: { practical_mark : practical_mark,
written_mark: written_mark,
comment : comment,
mark_id : mark_id
},
success: function(response)
{
if (response.success === true){
alert("success");
} else {
alert('failed');
}
},
error: function(){
alert("Error");
},
});

Your Controller retrieving inputs which doesn't exists... you need to pass your name, id as inputs and not the value which you echo... see as Controller:
function exam_marks_update(){
$data = array(
'written_mark_obtained' => $this->input->post('written_mark'),
'practical_mark_obtained' => $this->input->post('practical_mark'),
'comment' => $this->input->post('comment')
);
$this->db->where('mark_id', $this->input->post('mark_id'));
$this->db->update('mark', $data);
}
and change this:
var comment = $("#comment").val();
to
var comment = $("#comment").html();
As comment is textarea...

How can I hide the text box in jquery for initial loading?

I am working in this project where I face this issue. My code works when I click after loading.
I have used id for each user. This is the code for active/inactive users. I passed the id to each textbox and span. It is not working. Give some ideas on how to fix this issue.
PHP Code:
<!--top section start-->
<?php $this->load->view("header");?>
<div id="wrapper" style="height: auto;">
<div class="user_intro">
<table width="600" height="300">
<th style="text-align:left;">First Name</th>
<th style="text-align:left;">Email</th>
<th style="text-align:center;">Active Status </th>
<?php
foreach($result as $user)
{?>
<tr>
<td style="text-align:left;"><?php echo $user->first_name;?></td>
<td style="text-align:left;"><?php echo $user->email;?></td>
<?php if ($user->status == 1) { ?>
<td style="text-align:center;"><input type="button" id="<?php echo $user->user_id; ?>" value="" class="on" onclick="togglestyle(this,this.id)" /> </td>
<td><span id="reason_<?php echo $user->user_id; ?>"><input type="text" value="<?php echo $user->reason; ?>" /> </span></td>
<?php }
else {?>
<td style="text-align:center;"><input type="button" id="<?php echo $user->user_id; ?>" value="" class="off" onclick="togglestyle(this,this.id)" /> </td>
<td><span id="reason_<?php echo $user->user_id; ?>"><input type="text" value="<?php echo $user->reason; ?>" /> </span></td>
<?php } ?>
</tr>
<?php }
?>
</table>
</div>
</div>
<!--fotter section start-->
</div> <?php $this->load->view("footer"); ?>
javascript code i have added in header file.:
<script type="text/javascript">
function togglestyle(el, id) {
if (el.className == "on") {
$("#reason_" + id).show();
$.ajax({
type: "POST",
url: "statuson",
data: "userid=" + id,
success: function (html) {
if (html == 'true') {
el.className = "off";
}
},
});
} else {
$("#reason_" + id).hide();
$.ajax({
type: "POST",
url: "statusoff",
data: "userid=" + id,
success: function (html) {
if (html == 'true') {
el.className = "on";
}
},
});
}
}
</script>

You can simply add "display:none;" for the element you want to hide in initial loading.
Like:
<span id="reason_<?php echo $user->user_id; ?>" style="display:none;">
Then your code should work.

Simple...on document load call the function with default values like
<script type="text/javascript">
$(document).ready(function(){
togglestyle(el,id); //Here el,id are default values for those you need to hide initially
});
</script>
or if you want to hide all the textboxes initially then try like
$(document).ready(function(){
$("span[id^='reason'] input[type='text']").hide();
})

Use this one in your div style="display:none;

jQuery("input[name='multiple_location']").on('change', function () {
if (jQuery('input[name="multiple_location"]:checked').val()=='yes') {
jQuery("#primary_location_text").css('visibility', '');
} else {
jQuery("#primary_location_text").css('visibility', 'hidden');
}
});