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.

How can i edit my ingredients through array of input fields

How can I make a form like posting my ingredient but in the way that I will only edit the posted ingredients
this is the Javascript of the button
<script>
$(document).ready(function() {
var max_fields = 25; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
if (x < max_fields) { //max input box allowed
x++; //text box increment
$(wrapper).append('<div class="col-md-6 div-' + x + '"><input type="text" class="form-control" name="mytext[]" required/></div>'); //add input box
$(wrapper).append('<div class="col-md-6 div-' + x + '"><input type="text" class="form-control" name="mytext2[]" required/>Remove</div>');
}
});
$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
e.preventDefault();
$(".div-" + $(this).attr("div-id")).remove();
x--;
})
});
</script>
This is the form of inserting the ingredients
<div class="input_fields_wrap">
<div class="col-md-6">
<h5>Notes/Scaling (quantity, additional info)</h5>
<input type="text" class="form-control" name="mytext2[]" required>
<br>
</div>
<div class="col-md-6">
<h5>Name of Ingredient:</h5>
<input type="text" class="form-control" name="mytext[]" required>
<br>
</div>
<br>
</div>
<div class="col-md-12">
<button class="add_field_button button loading-pulse">Add More Fields</button>
</div>
this is how i implode it
$ingredient_name =implode("^",$_POST["mytext"]);
$ingredient_value = implode("^", $_POST["mytext2"]);
this is how i explode it
$ingredient_name = explode("^",$ingredient_name);
$ingredient_value = explode("^", $ingredient_scale);
$ingredients = array_combine($ingredient_value,$ingredient_name);
this is how i loop it
<table class="table-bordered" style="width:90%;">
<th style="text-align:center;">Ingredient Scale</th>
<th style="text-align:center;">Ingredient Name</th>
<?php
foreach($ingredients as $amount => $name)
{
?>
<tr>
<td style="margin:left:10px;"><?php echo "{$amount}"?></td>
<td style="margin:left:10px;"><?php echo "{$name}"?></td>
</tr>
<?php
}
?>
</table>
for example in the database
there are 2 columns,
recipe_ingredient_value recipe_ingredient_name
1/4,1/2,1 cup sugar,meat,water
i want it to extract into an input fields that i can edit (rename, add ,delete)
for example
1/4 sugar remove
1/2 meat remove
1 cup water remove
add more fields

You should print all values in a form inside the loop and then you need some sort of "Save" button and a route ready to receive new values. This route should be a php script, for example, that would loop through your new data and perform an update.
I'm suggesting you're writing PHP framework-free, standalone app. That way you have to think about a lot of things, which is good for you if you are a beginner.
Now back to the point:
It would be great if you could print a hidden id of a database row, somewhere inside the loop:
<tr>
<td><input type="text" name="recipe_id" value="<?php echo $amount; ?> /></td>
<td><input type="text" name="recipe_id" value="<?php echo $name; ?> /></td>
<input type="hidden" name="recipe_id" value="<?php echo $recipe_id; ?> />
</tr>
Remember that route that collects and updates the data? Let's call it "update-script.php".
The update-script.php should perform a check for every field in a $_GET or $_POST variable, to see if that value has been changed. If yes, the row should be updated, if not, then it should be skipped. It's up to you to create the logic for this.
Furthermore, I noticed that your javascript code needs some adjustments. I will only hint one thing that kinda sticks out:
$(add_button).click(function(e){
For the sake of your future work, please use "on" method that is described here:
http://api.jquery.com/on/
Trust me, when you start working with DOM elements, changing the DOM and adding new events, this will be your savior.
Good luck!

I think the easiest way would be to structure your inputs like this.
<tr>
<td>
<input type="hidden" name="recipe[<?= $recipe_id; ?>][id]" value="<?php echo $recipe_id; ?>" placeholder="value"/>
<input type="text" name="recipe[<?= $recipe_id; ?>][value]" value="<?php echo $value; ?>" placeholder="name"/>
</td>
<td><input type="text" name="recipe[<?= $recipe_id; ?>][name]" value="<?php echo $name; ?>" /></td>
<td><input id="recipe_<?= $recipe_id; ?>" type="checkbox" name="recipe[<?= $recipe_id; ?>][delete]" value="1" /><label for="recipe_?= $recipe_id; ?>">Delete</label></td>
</tr>
Where $recipe id is the row id. Then your javascript would add more rows like
<tr>
<td><input type="text" name="recipe[2][value]" value="" placeholder="value" /></td>
<td><input type="text" name="recipe[2][name]" value="" placeholder="name" /></td>
<td></td>
</tr>
Then in your php you can see the array will be formatted nicely into arrays of recipes like:
array(
array(
'name' => 'Pie'
'value' => 2
'recipe_id' => 1
),
array(
'name' => 'Deleted Pie'
'value' => 2
'recipe_id' => 2
'deleted' => 1
),
array(
'name' => 'New pie'
'value' => 2
),
)
Then using the deleted key you can check if you need to delete the Database row and if it has the recipe_id key then it might need to be updated. If it doesn't have the recipe key then its a new recipe.

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>

Cant get value of hidden field after ajax Jquery

I have a page that when a link is clicked it opens a pop up box to insert new charges. When this pop up box opens I use jquery load() function to insert a table with all the current charges (loaded from mysql) from a script on another page called load_charges.php.
The problem I am having is I can not access any of the hidden values from the content I just loaded I use:
var charge_id = $(':hidden:first', $(this)).val();
this normally gets me the value of the first hidden element but it does not work if I am trying get the info from the page load from load_charges.php. I will list my code below:
case_cpanel.php:
//HTML Table with Form elememt
<table>
<tr class="lead_hover">
<td>
<form class="calc" title="Case Expense Calculator" style="cursor:pointer;">
<input type="hidden" id="lead_id" value="21946295" />
<input type="hidden" id="final_id" value="74" />
<input name="order" type="hidden" id="final_id" value="3" />
</form>
</td>
</tr>
<tr class="lead_hover">
<td>
<form class="calc" title="Case Expense Calculator" style="cursor:pointer;">
<input type="hidden" id="lead_id" value="21978679" />
<input type="hidden" id="final_id" value="79" />
<input name="order" type="hidden" id="final_id" value="1" />
</form>
</td>
</tr>
</table>
// Jquery to load popup form box
$(".calc").click(function () {
var value = $(':hidden:eq(0)', $(this)).val();
$('input[name=lead_id]').val(value);
var value = $(':hidden:eq(1)', $(this)).val();
$('input[name=final_id]').val(value);
var value = $(':hidden:eq(2)', $(this)).val();
$('.order').val(value);
var lead_id = $(':hidden:eq(0)', $(this)).val();
var string1 = "token=<? echo $_SESSION['token']; ?>&lead_id=";
var url = "../ajax/load_charges.php";
var datastring = string1.concat(lead_id);
$('#calc_right_display').html('<div><img src="../imgs/loading4.gif" align="center" /></div>').load(url, datastring).show();
$("#calc_div").overlay().load();
});
load_charges.php:
// table that is load with new form elements
<table width="266" border="0" cellpadding="5">
<? do { ?>
<tr>
<td width="163">
<? echo $row_charges[ 'rows'][ 'title']; ?>
</td>
<td width="83">$
<? echo $row_charges[ 'rows'][ 'charge']; ?>
</td>
<td width="27">
<form class="delete_charge" title="Delete Charge" style="cursor:pointer;">
<input type="hidden" id="id1" value "<? echo $row_charges['rows']['id']; ?>">
</form>
</td>
</tr>
<? } while ($row_charges[ 'rows']=m ysql_fetch_assoc($row_charges[ 'query'])); ?>
</table>
//Jquery Code on load_charges.php
<script>
$(".delete_charge").click(function () { * *
var charge_id = $(':hidden:first', $(this)).val(); * *
var str2 = "token=<? echo $_REQUEST['token']; ?>&delete_charge=true&id=";
var str_lead_id = "&lead_id=<? echo $_REQUEST['lead_id']; ?>";
var url2 = "../ajax/cm_expenses_delete.php";
var datastring2 = str2.concat(charge_id, str_lead_id);
$('#calc_right_display').html('<div><img src="../imgs/loading4.gif" align="center" /></div>').load(url2, datastring2).show();
});
</script>
The problem is var charge_id = $(':hidden:first', $(this)).val(); is not returning any value from the new page that just loaded. Any Help would be greatly appreciated.
Thank you in advance.
Ryan

You may be having a problem retrieving the value because you are missing an equal sign.This:
<input type="hidden" id="id1" value"<? echo $row_charges['rows']['id']; ?>">
Change to:
<input type="hidden" id="id1" value="<? echo $row_charges['rows']['id']; ?>">
This would explain it because your input has no value.

I made the following test, based on your data:
$(document).ready(function(){
var charge_id = $('input:hidden:first').val();
alert(charge_id);
var charge_id = $('input[type=hidden]:first').val();
alert(charge_id);
});
Working fiddle here: http://jsfiddle.net/robertrozas/c4AHM/1/

jquery regex out 0 from cloned element and insert it?

I'd like to learn how to regex out 0 from all elements inside clone and replace it with var count_rows.
//Duplicate table tr for multiple subtitle entry
$("#add_subtitle").on("click", function(){
var count_rows = $(".subs_row").length;
$("#sub_0").clone().insertBefore("#append_sub");
return false;
});
markup:
<tr valign="top" id="sub_0" data-num="0" class="subs_row">
<th scope="row"><label for="subtitle">Subtitle_0</label></th>
<td>
<input name="subtitle[0][url]" type="text" value="<?php echo $wovies_extra_data[0]['subtitle'][0]['url']; ?>" style="width:280px;">
<p class="howto">Url</p>
</td>
<td>
<input name="subtitle[0][lang]" type="text" value="<?php echo $wovies_extra_data[0]['subtitle'][0]['lang']; ?>" style="width:100px;">
<p class="howto">Language: Label</p>
</td>
<td>
<input name="subtitle[0][lang_code]" type="text" value="<?php echo $wovies_extra_data[0]['subtitle'][0]['lang_code']; ?>" style="width:50px;">
<p class="howto">Language: Code</p>
</td>
<td>
<input name="subtitle_def" type="radio" value="<?php echo $key; ?>" <?php if ($wovies_extra_data[0]['subtitle_def'] == $key) {echo "checked";} ?> style="width:100px;">
<p class="howto">Default?</p>
</td>
</tr>
oh and how can I make my regex not touch zero in width:50px; ?

Regexp is probably the wrong way to go here.
I would suggest to use a template system like http://mustache.github.io/ or underscore
If you really want to replace the zeros inside your existing HTML code you could target only certain attributes:
function replaceZero(row) {
return function (i, value) {
return value.toString().replace(0, row);
}
}
var $row = $("#sub_0");
$("label", $row).text(replaceZero(200));
$("input", $row).attr("name", replaceZero(200));
$row.attr("id", replaceZero(200));
Fiddle (simplified)
Fiddle (with clone)