We Keep Coding

How to update first td value onclickthe way it does when dragging

I have rewritten my question to better elaborate as to what I am trying to accomplish and what I have tried thus far.
I have a table on my website which dynamically loads the table rows from a database. I have successfully integrated the jQuery UI "Sortable" and "Draggable" functionality to this page. the outcome is the numeric value changes as you are dragging the rows above or below their neighboring rows and as a result always update the first column of numbers within the table.
Here is the table
<form action="" method="post" id="sort_picks">
<div class="sort-picks-container">
<table class="table-preference-order" id="sortable">
<tbody class="ui-sortable">
<?php
$counter = 1;
foreach ( $result as $query ){
$pickcheck = "SELECT * FROM picks";
$pickcutoffcheck = $wpdb->get_results( $wpdb->prepare ($pickcheck, OBJECT_K ));
foreach ($pickcutoffcheck as $pickcutoffresult) { ?>
<div style="display:none;"><?php echo $pickcutoffresult->pickCutoff; ?></div>
<?php } ?>
<?php $maxlimit = $wpdb->get_row("SELECT count(*) as CNT1 FROM picks where User='$userid'" ); ?>
<tr class="ui-state-default preference-row">
<td class="index preference-pick-order">
<input type="text" class="pick-order" id="sort" name="sort[]" pattern="[1-<?php echo $maxlimit->CNT1; ?>]{1,2}" value="<?php echo $counter; ?>" style="border:0px;max-width:60px;font-size:20px;" readonly>
</td>
<td class="preference-pick-order">
<input type="text" name="rem[]" class="borderless" style="text-align:left;width:25px;display:none;" value="<?php echo $query->REM; ?>" readonly><?php echo $query->REM; ?>
</td>
<td class="preference-emp-info">
<input type="text" name="empname[]" class="borderless" style="display:none;" value="<?php echo $query->EmpName; ?>" readonly><b><?php echo $query->EmpName; ?></b>
</td>
<td class="preference-start-class">
<input type="text" name="starttime[]" class="borderless" style="text-align:left;max-width:75px;display:none;" value="<?php echo $query->StartTime; ?>" readonly><?php echo $query->StartTime; ?>
</td>
<td class="preference-details">
<input type="text" name="job_details[]" class="borderless" value="<?php echo $query->Job_Details; ?>" readonly style="display:none;"><?php echo $query->Job_Details; ?>
<br>
<input type="text" name="startdate[]" class="borderless" style="font-weight:bold;width:100%;text-align:left;display:none;" value="<?php if($query->StartDate!=""){echo date('l\, F jS Y', strtotime($query->StartDate)); }?>" readonly><?php if($query->StartDate!=""){echo date('l\, F jS Y', strtotime($query->StartDate)); }?>
</td>
</tr>
<?php $counter++; ?>
<?php }?>
</tbody>
</table>
</div>
<br>
<div class="sorters-holder">
<button onclick="upNdown('up');return false;" class="sorters">&wedge; </button><br>
<button onclick="upNdown('down');return false;" class="sorters">&vee;</button>
</div>
<div style="display:block;margin:auto;text-align:center;">
<input type="submit" name="submit[]" value="Next" class="job-select-submit" id="validate"> <input type="button" onclick="window.history.go(-1); return false;" value="Back" class="job-select-submit">
</div>
</form>
This is the working jQuery script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<script src="../wp-content/themes/Excellence_At_Work/jquery.ui.touch-punch.min.js"></script>
<script>
var $j = jQuery.noConflict();
var sort;
$j(function() {
$j("#sortable tbody").sortable({
change: function(event, ui) {
sort = 0;
$j('#sortable tr.ui-state-default:not(".ui-sortable-helper")').each(function() {
sort++;
if ($j(this).hasClass('ui-sortable-placeholder'))
ui.helper.find('td input[name^=sort]').attr('name', 'sort[]').attr('value', sort).val(sort);
else
$j(this).find('td input[name^=sort]').attr('name', 'sort[]').attr('value', sort).val(sort);
});
}
});
$j("#sortable tbody").disableSelection();
});
</script>
<script>jQuery('#sortable').draggable();</script>
As you can see in the html code, I have successfully integrated the buttons that I need to relocate the rows however when doing so I need the value of the first td to also update accordingly as does the drab and drop method. What would I add to the below javascript to get the value of the input with the name sort[] to change to its corresponding numeric place within the table rows newly changed order onclick?
<script>
var order; // variable to set the selected row index
function getSelectedRow()
{
var table = document.getElementById("sortable");
for(var i = 0; i < table.rows.length; i++)
{
table.rows[i].onclick = function()
{
if(typeof order !== "undefined"){
table.rows[order].classList.toggle("selected");
}
order = this.rowIndex;
this.classList.toggle("selected");
};
}
}
getSelectedRow();
function upNdown(direction)
{
var rows = document.getElementById("sortable").rows,
parent = rows[order].parentNode;
if(direction === "up")
{
if(order > 0){
parent.insertBefore(rows[order],rows[order - 1]);
// when the row go up the index will be equal to index - 1
order--;
}
}
if(direction === "down")
{
if(order < rows.length){
parent.insertBefore(rows[order + 1],rows[order]);
// when the row go down the index will be equal to index + 1
order++;
}
}
}
</script>
I hope this better explains whatt I am trying to accomplish. I have hit a road block and could really use some insight, thanks in advance for all those who can provide insight.
UPDATE
I have been able to successfully update the rows first td values onclick by adding the following script after order-- and order++ however this solution is causing the input fields to drop out of the td. Any insight on how to modify this script to include the input field?
Array.prototype.forEach.call(document.querySelectorAll('td:first-child'), function (elem, idx) {
elem.innerHTML = idx + 1;
FINAL UPDATE
I have succeeded in my mission and with a minor adjustment to the snippet from the last update I was able to get the form above working as noted.
Array.prototype.forEach.call(document.querySelectorAll('td:first-child input[name^=sort]'), function (elem, idx) {
elem.value = idx + 1;
By changing
'td:first-child'
to
'td:first-child input[name^=sort]'
I was able to reference the specific input field as opposed to all input fields in the first td column and no longer am replacing the input fields with plain text.

FINAL UPDATE
I have succeeded in my mission and with a minor adjustment to the snippet from the last update I was able to get the form above working as noted.
Array.prototype.forEach.call(document.querySelectorAll('td:first-child input[name^=sort]'), function (elem, idx) {
elem.value = idx + 1;
By changing
'td:first-child'
to
'td:first-child input[name^=sort]'
I was able to reference the specific input field as opposed to all input fields in the first td column and no longer am replacing the input fields with plain text.

Auto add checkbox values and keep their name for storing in database

I have checkboxes retrieved from my database with respective item_name and value which happen to be displayed correctly, but the values are being added/subtracted automatically when selected/checked. However, i want to save the selected check box item_names and also the total sum of the values from the checkboxes. I can't accomplish this because the value option holds numeric data which should have been the checkbox item_name; here is so far what i have.
<script type="text/javascript">
function checkTotal() {
document.listForm.total.value = '';
var sum = 0;
for (i=0;i<document.listForm.sel_car.length;i++) {
if (document.listForm.sel_car[i].checked) {
sum = sum + parseInt(document.listForm.sel_ca[i].value);
}
}
document.listForm.total.value = sum;
}
</script>
HTML/PHP Snippet
<h4>Available Cars | Click on desired car(Multiple Selections enabled) | Total Price: <input type="text" size="2" name="total" value="0"/></h4>
<div class="form-group">
<?php
$stmt = $DB_con->prepare('SELECT * FROM cars ORDER BY car_id DESC');
$stmt->execute();
if($stmt->rowCount() > 0)
{
while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
extract($row);
?>
<div class="col-md-3"><label class="btn btn-primary">
<img src="user_images/<?php echo $row['userPic']; ?>" alt="..." class="img-thumbnail img-check"><input type="checkbox" name="sel_car[]" id="item4" value="<?php echo $row['car_price']; ?>" class="hidden" autocomplete="off" onchange="checkTotal()"/>
<h5><?php echo $row['se_car_model']; ?> | UGX <?php echo $row['car_price']; ?>/=</h5>
</label></div>
<?php
}
}
?>

You should also retrieve id along with Item name and value and assign the id to the checkbox.
Add the hidden field in the form
<input type="hidden" name="itemsArr" id="itemsArr" value="">
checkbox
<input onclick="checkTotal(this)" type="checkbox" id="itemId" name="ItemName" value="ItemPrice">
Div showing total amount
<div id="totalDiv"></div>
script
<script type="text/javascript">
var arr = [];
var total = 0;
function checkTotal($this)
{
var varId= $this.id;
if ($($this).is(":checked")) {
arr.push(varId);
}
else
{
arr.splice( $.inArray(varId,arr) ,1 );
}
$("#itemsArr").val(arr);
// get the price of the item from the controller by passing id to controller
$.ajax({
type: 'POST',
url: BASE_URL+"controllerName/methodName",
data: {'id':varId},
success: function (data) {
data = JSON.parse(data);
total += data.price;
$("#totalDiv").html(total);
}
});
}
On sumbitting the form you will be getting the hidden value and then store it in the database
When you want to retrieve the value from the database you can get the field and convert that string into an array using explode function and do the further tasks.

How to append multiple checkbox values into textarea with a click of one checkbox

hi guys need your help again. I have a javascript function which pass checkbox values into a textarea 'recipients', it works fine on check/uncheck and pass values accordingly into a textarea. What i want is to have one checkbox to check all checkbox and append values into a textarea.
Below is my javascript to pass vales into textarea 'recipients':
var textbox = document.getElementsByName("recipients")[0];
var checkboxes = document.getElementsByName("email");
for (var i = 0; i < checkboxes.length; i++) {
var checkbox = checkboxes[i];
checkbox.onclick = (function(chk){
return function() {
var value = "";
for (var j = 0; j < checkboxes.length; j++) {
if (checkboxes[j].checked) {
if (value === "") {
value += checkboxes[j].value;
} else {
value += ", " + checkboxes[j].value;
}
}
}
textbox.value = value;
}
})(checkbox);
}
Please help.

(1) When you make a change to checkbox you need to check all checkboxes and update to textarea.
(2) function updateAllChecked will handle all the check and update.
(3) for check all, if it is checked, set all email checkboxes to checked and call .change() to trigger the change event.
$("input[name=email]").change(function() {
updateAllChecked();
});
$("input[name=addall]").change(function() {
if (this.checked) {
$("input[name=email]").prop('checked', true).change();
} else {
$("input[name=email]").prop('checked', false).change();
}
});
function updateAllChecked() {
$('#recipients').text('');
$("input[name=email]").each(function() {
if (this.checked) {
let old_text = $('#recipients').text() ? $('#recipients').text() + ', ' : '';
$('#recipients').text(old_text + $(this).val());
}
})
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="email" value="email_1">email_1<br>
<input type="checkbox" name="email" value="email_2">email_2<br>
<input type="checkbox" name="email" value="email_3">email_3<br>
<input type="checkbox" name="email" value="email_4">email_4<br>
<br>
<input type="checkbox" name="addall">Add All Email<br>
<textarea id="recipients"></textarea>

Try something like this, using an array with a final join() once your array is populated. I think it's a lot cleaner:
checkbox.onclick = (function(chk){
return function() {
var valueArray = [];
for (var j = 0; j < checkboxes.length; j++) {
if (checkboxes[j].checked) {
valueArray.push(checkboxes[j].value); //add value to array
}
}
textbox.value = valueArray.join(", "); //join with comma separators
}
})(checkbox);
You could also extract the function and invoke the extracted function rather than adding the content of the function to every checkbox, but w/out seeing your HTML, it's a little hard to discern exactly what you're doing and why you're looping the way you are.

Hi guys here is my html and php, I retrieve recipients email from db:
here is my html with php, I retrieve recipients email from db.: <?php
$i='';
if($result_applied_jobs): ?>
<div class="tg-wrap">
<table id="tg-s6tTH" class="tg" style="width: 100%;">
<tr><th style="width: 12%"><label><input type="checkbox" name="addall" id="addall"/> Select all</label></th><th style="width: 7%">Sl. No.</th><th style="width: 20%">Applicant's Name</th><th style="width: 25%">Job Title</th><th style="width: 13%">Apply Date</th><th>Cover Letter</th></tr><?php
foreach($result_applied_jobs as $row_applied_job):
$i++;
?>
<tr>
<td><input type="checkbox" value="<?php echo $row_applied_job->email;?>" name="email" id="email"></td>
<td><?php echo $i;?></td>
<td><?php echo $row_applied_job->first_name.' '.$row_applied_job->last_name;?></td>
<td><?php echo $row_applied_job->job_title;?></td>
<td><i class="fa fa-calendar-check-o" aria-hidden="true" style="color: #5f6f81"></i> <?php echo date_formats($row_applied_job->applied_date, 'M d, Y');?></td>
<td><?php echo $row_applied_job->c_letter;?></td>
</tr>
<?php endforeach; ?>
</table>
</div><?php
else:?>
<div class="alert alert-danger"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> No application received</div>
<?php endif;?>
here is another portion for textarea:
<textarea class="form-control" id="recipientss" readonly="" placeholder="check the checkbox against applicants you want to send a message"><?php echo set_value('recipients');?></textarea>

Add form fields dynamically with php

Referring to this post. Add form fields dynamically populated dropdown list with php I have used his code but will modify it to fit my needs since I pretty much nothing about javascript. I have everything working except when you press the + button it never creates more input boxes. Any help would be great.
This my php file
<?php
session_start();
require_once("dbconfig.php");
?>
<html>
<head>
<script type="text/javascript" src="addfish.js"></script>
</head>
<form id="form1" name="form1" method="post" action="results.php">
<div id="itemRows">
<select name="species">
<option value="">Select Species</option>';
<?php $stmt = $dbc->prepare("SELECT species FROM fish");
$stmt->execute();
while($speciesq = $stmt->fetch(PDO::FETCH_ASSOC))
{
echo "<option value=\"" . $speciesq['species'] ."\">" . $speciesq['species'] ."</option>";
}
?>
</select>
Number: <input type="text" name="speciesnumber1" size="7" /> Weight: <input type="text" name="speciesweight1" /> <input onClick="addRow(this.form);" type="button" value="+" />
</div></form>
</html>
My addfish.js file
var rowNum = 0;
var ddsel = '<select name="species'+rowNum+'>';
var ddopt = '<option value="">Select Species</option>';
var ddselc= '</select>';
;
function addRow(frm) {
rowNum ++;
$.post("getlist.php", function(data) {
var frm = document.getElementById('form1')
for (var i=0; i<data.length; i++) {
ddopt += '<option value="'+data[i].value+'">'+data[i].value+'</option>';
}
var row = '<p id="rowNum'+rowNum+'">'+ddsel+ddopt+ddselc+'Number: <input type="text" name="speciesnumber'+rowNum+'" size="7" value="'+frm.speciesnumber1.value+'"> Weight: <input type="text" name="speciesweight'+rowNum+'" value="'+frm.speciesweight.value+'"> <input type="button" value="-" onclick="removeRow('+rowNum+');"></p>';
jQuery('#itemRows').append(row);
frm.add_qty.value = '';
frm.add_name.value = '';
}, "json");
}
function removeRow(rnum) {
jQuery('#rowNum'+rnum).remove();
}
This is my getlist.php
<?php
session_start();
include("dbconfig.php");
$stmt = $dbc->prepare("SELECT species FROM fish");
$stmt->execute();
$result = array();
while ($rows = $stmt->fetch(PDO::FETCH_ASSOC)){
$result[] = array(
'value' => $rows['species'],
);
}
echo json_encode($result);
?>

Your code is using jQuery, but I don't see where you include this library. Try to put this code before include addfish.js in header :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

If you need to add rows with this fields dynamically I suggest you make a row which is the original row:
<div class="rows" data-rows="1">
<div class="row row-first">
<select name="row[0][select_name]">
<option value="1">Some value</option>
</select>
<input type="text" name="row[0][text_name]" />
</div>
</div>
and the javascript
<script type="text/javascript">
$('#add_row').on('click', function(){
var row = $('.row-first').clone(); // Clone the first row
var rows = parseInt($('.rows').attr('data-rows'));
rows++;
$('.rows').attr('data-rows', rows);
row.removeClass('row-first'); // Prevent multiple rows cloning
$(row).find('[name]').each(function(){
var name = $(this).attr('name');
name = name.replace(/\[[0-9+]\]/, '[' + rows + ']');
$(this).attr('name', name);
$(this).val("").change(); // Null the select
});
$('.rows').append(row);
});
</script>
So what you do is clone the first row and remove the class, which you search. Increment the rows count and replace all names in you row with the new row number e.g. row[0][name] becomes row[1][name], and append the row.
Also when you edit the rows you MUST put set the data-rows to the exact number. You can do it like count($myRows). And when you write the remove row function DO NOT REMOVE the first row.
Hope it hepls.

// You can use this
var row = '<p id="rowNum'+rowNum+'">'+ddsel+ddopt+ddselc+'Number: <input type="text" name="speciesnumber'+rowNum+'" size="7" value="'+$($(frm).find('input[name="speciesnumber1"]')[0]).val()+'"> Weight: <input type="text" name="speciesweight'+rowNum+'" value="'+$($(frm).find('input[name="speciesnumber1"]')[0]).val()+'"> <input type="button" value="-" onclick="removeRow('+rowNum+');"></p>';
jQuery('#itemRows').append(row);

Javascript Auto Sum dynamic textboxes

I am creating a quote/order page that includes different types of options for the order all of which are calculated differently. I have a javascript function that will take the values inputed into the text boxes onchange and add a total at the bottom of a page. The issue I'm running into is the base product can be multiple lengths and many option prices are calculated by the foot. So what I have done is made a hidden field that stores the length of the base product and drop down menus to select the option. I have another javascript function that multiplies these two values and puts the total in one of the text boxes that should be auto summed with the first function. Both work perfectly independent of each other, however the issue I have is that the "on change command for the sum function isn't being recognized when the multiplication function auto updates the text box...
Any Help is very greatly appreciated.
Code...
<script type="text/javascript">
function multiplyLengthWalls(){
var length = parseInt(document.getElementById('length').value, 10);
var walls = parseInt(document.getElementById('walls').value, 10);
var total = length*walls;
document.getElementById('wallstotal').value = total;
}
</script>
<script type="text/javascript">
function sumCost() {
var arr = document.getElementsByName('featuretotal');
var tot = 0;
for(var i=0; i<arr.length;i++){
if(parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('totalcost').value = tot;
}
</script>
HTML....
<td><select name="walls" id="walls" onchange="multiplyLengthWalls()">
<?php
do {
?>
<option value="<?php echo $row_walls['dcost']?>"><?php echo $row_walls['name']?></option>
<?php
} while ($row_walls = mysql_fetch_assoc($walls));
$rows = mysql_num_rows($walls);
if($rows > 0) {
mysql_data_seek($walls, 0);
$row_walls = mysql_fetch_assoc($walls);
}
?>
</select></td>
<td><label for="wallstotal"></label>
<input type="text" name="featuretotal" id="wallstotal" class="test" onchange="sumCost()"/></td>
</tr>
<tr>
<td>Ceiling:</td>
<td><label for="ceiling"></label>
<select name="ceiling" id="ceiling">
<?php
do {
?>
<option value="<?php echo $row_ceiling['dcost']?>"><?php echo $row_ceiling['name']?></option>
<?php
} while ($row_ceiling = mysql_fetch_assoc($ceiling));
$rows = mysql_num_rows($ceiling);
if($rows > 0) {
mysql_data_seek($ceiling, 0);
$row_ceiling = mysql_fetch_assoc($ceiling);
}
?>
</select></td>
<td><label for="ceilingtotal"></label>
<input type="text" name="featuretotal" id="ceilingtotal" class="test" onchange="sumCost()"/></td>
</tr>
<tr>
<td>Floor:</td>
<td><label for="floor"></label>
<select name="floor" id="floor">
<?php
do {
?>
<option value="<?php echo $row_floor['dcost']?>"><?php echo $row_floor['name']?></option>
<?php
} while ($row_floor = mysql_fetch_assoc($floor));
$rows = mysql_num_rows($floor);
if($rows > 0) {
mysql_data_seek($floor, 0);
$row_floor = mysql_fetch_assoc($floor);
}
?>
</select></td>
<td><label for="floortotal"></label>
<input type="text" name="featuretotal" id="floortotal" class="test" onchange="sumCost()"/></td>
</tr>
</table>
<p> </p>
</div>
<div id="structural">structural</div>
<div id="hidden">hidden --
<input name="length" type="hidden" id="length" value="<?php echo $row_models['length']; ?>" />
</div>
</div>
<div id="footer">
<div id="total">total:<input name="totalcost" type="text" id="totalcost" readonly="readonly" /></div>