We Keep Coding

Looping Table Rows in Form

So I'm trying to code a form that sits inside a table that has only one row. The row contains a drop down box, text box and a checkbox.
<table class="table text-size-12">
<thead>
<tr>
<th scope="col">Location</th>
<th scope="col" class="text-nowrap">COD Charge</th>
<th scope="col">Allow Negotiate</th>
</tr>
</thead>
<tbody>
<?php
for($rows = 0; $rows < 5; $rows++):
?>
<tr>
<td>
<select name="location" class="form-control" style="width:250px">
<option value="">--- Select Location ---</option>
<?php foreach ($locations as $state): ?>
<optgroup label="--- <?= $state->name ?> ---">
<?php foreach ($state->locations as $area): ?>
<option value="{{ $key }}"><?= $area->name ?></option>
<?php endforeach ?>
</optgroup>
<?php endforeach ?>
</select>
</td>
<td>
<input type="text" id="shipping_fee_value">
</td>
<td>
<input type="checkbox" id="shipping_fee_allow_negotiate">
<script>
document.getElementById('shipping_fee_allow_negotiate').onchange = function (){
document.getElementById('shipping_fee_value').disabled = this.checked;
}
</script>
</td>
</tr>
<?php endfor ?>
</tbody>
</table>
As you can see, I've used Javascript so that if the checkbox is checked, the text box will be disabled.
<td>
<input type="text" id="shipping_fee_value">
</td>
<td>
<input type="checkbox" id="shipping_fee_allow_negotiate">
<script>
document.getElementById('shipping_fee_allow_negotiate').onchange = function (){
document.getElementById('shipping_fee_value').disabled = this.checked;
}
</script>
</td>
And I've also looped the rows 5 times using for. My problem is, the checkbox disabling text box script only works in the first row, how do I allow each row to be independent?
P.S. I prefer not hard coding every specific row just because so.

You are repeating the id of the elements. You can't do this. id are meant to be unique. Set a unique id on the every element.
<td>
<input type="text" id="shipping_fee_value_<?= $rows ?>">
</td>
<td>
<input type="checkbox" class="shipping_fee_allow_negotiate" data-target="shipping_fee_value_<?= $rows ?>">
<script>
var elements = document.getElementsByClassName('shipping_fee_allow_negotiate');
for (var i = 0; i < elements.length; i++) {
elements[i].onchange = function() {
document.getElementById(this.dataset.target).disabled = this.checked;
}
}
</script>
</td>
Here we are using the $row variable to add a index to the id property on the input.
<input type="text" id="shipping_fee_value_0"/>
Also we use the data-target property on the checkbox to tell him which specific input to handle on the onchange callback.
<input type="checkbox" class="shipping_fee_allow_negotiate" data-target="shipping_fee_value_0">
And finally the selector to assign the callback is using getElementsByClassName to select all the checkboxes.

Because your id is common that's why they consider only the first row instead of common id use dynamic id.

Set value of HTML element from javascript

I am using session variable to keep track of items in the cart. I generate a table using loop to display contents of the cart. The code for table is as follow:
<?php
$count=0;
$grandTotal=0;
foreach($_SESSION['cart'] AS $product) {
$table=$product['table'];
$id=$product['id'];
$Name=$product['name'];
$qty=$product['quantity'];
$price=$product['price'];
$total=$qty*$price;
$grandTotal +=$total;
?>
<tr>
<td class="cart_product">
<img src=<?php $i=2; echo "images/".$table."/".$id.".jpg"?> height="150" width="150">
</td>
<td class="cart_description">
<h4><?php echo $Name?></h4>
<p><?php echo "Web ID: ".$id?></p>
</td>
<td class="cart_price">
<p><?php echo $price?></p>
</td>
<td class="cart_quantity">
<div class="cart_quantity_button">
<a class="cart_quantity_up" href="addToCart.php?table=<?php echo $table ?>&action=inc&id=<?php echo $id ?>" id="increment"> + </a>
<input class="cart_quantity_input" type="text" name="quantity" id="qty" value="<?php echo $qty?>" autocomplete="off" size="2">
<!-- <p class="cart_quantity_input" name="qunatity" id="qty"><?php echo $qty?></p>-->
<a class="cart_quantity_down" href="addToCart.php?table=men&action=dec&id=<?php echo $id ?>" name="decrement" > - </a>
</div>
</td>
<td class="cart_total">
<p class="cart_total_price"><?php echo $total ?></p>
</td>
<td class="cart_delete">
<a class="cart_quantity_delete" href="addToCart.php?table=men&action=del&id=<?php echo $id ?>"><i class="fa fa-times"></i></a>
</td>
</tr>
<?php
}
$tax=0.15*$grandTotal;
?>
I am having problem with + and - buttons within a tags. I want to increment or decrement value in input field named quantity. But since i am generating table in a loop i do not know the id of each field. I want to do something like this:
<script>
$(document).ready(function () {
$("#increment").click(function () {
var oldval=document.getElementById("qty").value;
var newval=parseInt(oldval);
document.getElementById("qty").value=newval++;
});
});
</script>
But this method always increments first quantity field in the table. How do i get ids of other quantity fields in the table?

Dont use ids inside loop.Just use class for that>check the snippet for a smaple demo
$(document).ready(function () {
$(".increment").click(function () {
var oldval = $(this).prev('.qty').val();
var newval = parseInt(oldval)+ 1;
$(this).prev('.qty').val(newval);
});
$(".decrement").click(function () {
var oldval = $(this).next('.qty').val();
var newval = parseInt(oldval) - 1;
$(this).next('.qty').val(newval);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table> <tr>
<td>sl No</td>
<td>name</td>
<td>Dept</td>
<td>dummy</td>
<td>dummy</td>
<td>dummy</td>
</tr>
<tr>
<td>1</td>
<td>name</td>
<td>
</td>
<td>name</td>
<td>name</td>
<td> </td>
</tr>
<tr>
<td>2</td>
<td>name</td>
<td>Dept</td>
<td>name</td>
<td> <button class="decrement"> - </button>
<input type="text" class="qty" value="1"/>
<button class="increment">+ </button>
</td>
<td>name</td>
</tr>
<tr>
<td>3</td>
<td>name</td>
<td>name</td>
<td>name</td>
<td>name</td>
<td>name</td>
</tr>
</table>

There are 2 solutions to this problem:
When generating table using php, assign unique id to each row's <a> and <input>, such as #increment_id8878 and #input_id8878. Then when #increment or #decrement button is clicked, operate <input> with corresponding id.
Operate <input> element with jQuery's relative selector.
For example:
$('.increment').click(function() {
var inputEle = $(this).siblings('input');
var originVal = inputEle.val();
inputEle.val(parseInt(originVal) + 1);
});
A jsfiddle is made for the 2nd solution.
BTW, duplicate id should be avoided in HTML code.

Don't use same id for multiple elements instead use class like below
<a class="cart_quantity_up" href="addToCart.php?table=<?php echo $table ?>&action=inc&id=<?php echo $id ?>" class="increment">
same is case of decrement button user class
<a class="cart_quantity_down" href="addToCart.php?table=men&action=dec&id=<?php echo $id ?>" name="decrement" class="decrement"> - </a>
You can bind click event to these anchors and change the quantity in input inside same parent div
$(function(){
$('.increment').on('click', function(){
var $parent = $(this).closest('.cart_quantity_button');
var $input = $parent.find('.cart_quantity_input');
var value = $input.val();
value = parseInt(value)+1;
$input.val(value);
});
$('.decrement').on('click', function(){
var $parent = $(this).closest('.cart_quantity_button');
var $input = $parent.find('.cart_quantity_input');
var value = $input.val();
value = parseInt(value)-1;
$input.val(value);
});
});

Second drop down depends on my first drop down. How?

I have a two drop downs in my program, and I want it to be like this:
I have a list of employee and display/populate the list and put it
inside of my first drop down.
Second is that, when I choose "Francis" the second drop down will
have a value/event only for Francis and so on when I choose also another employee.
I think the first drop down is correct, but I want to get the value of it and put it inside in my SQL statement in the WHERE clause in my second drop down. How?
<tr>
<td><label for="cname">Client Name:</label></td>
<td><select name="cname" id="cname">
<option>Choose</option>
<?php
include("alqdb.php");
$result=mysqli_query($con, "SELECT ClientName FROM events");
while($row=mysqli_fetch_assoc($result)){
echo "<option>".$row["ClientName"]."</option>";
}
?>
</select>
</td>
</tr>
<tr>
<td><label for="survey">Survey:</label></td>
<td><select name="survey" id="survey">
<option>Choose</option>
<?php
include("alqdb.php");
$result=mysqli_query($con, "SELECT EventTitle FROM events WHERE ClientName = 'Francis'");
while($row=mysqli_fetch_assoc($result)){
echo "<option>".$row["EventTitle"]."</option>";
}
?>
</select>
</td>
</tr>

Do a ajax request for the second select:
create a php file for the ajax request
html:
<tr>
<td><label for="cname">Client Name:</label></td>
<td><select name="cname" id="cname">
<option>Choose</option>
<?php
include("alqdb.php");
$result=mysqli_query($con, "SELECT ClientName FROM events");
while($row=mysqli_fetch_assoc($result)){
echo "<option>".$row["ClientName"]."</option>";
}
?>
</select>
</td>
</tr>
<tr>
<td><label for="survey">Survey:</label></td>
<td><select name="survey" id="survey">
<option>Choose</option>
</select>
</td>
</tr>
ajax.php
<?php
include("alqdb.php");
$result=mysqli_query($con, "SELECT EventTitle FROM events WHERE ClientName = '"$_GET['cname']"'");
while($row=mysqli_fetch_assoc($result)){
echo "<option>".$row["EventTitle"]."</option>";
}
?>
js:
<script>
$(function(){
$('#cname').on('change',function(){
$.ajax({
url:ajax.php,
data:{cname:$('#cname').val()};
type:'get',
contentType:'html',
success:function(data){
$('#survey').append(data);
}
});
});
});
</script>

Save updated values to database and show them in html table

I have a table like the following:
<script>
$("#edit").hide(); // Hide the edit table first
$("#update").click(function() {
$("#edit").toggle();
$("#shown").toggle();
// If we are going from edit table to shown table
if($("#shown").is(":visible")) {
var vouchertype = $('input[name="vouchertype[]"]').map(function(){return $(this).val();}).get();
var mode= $('select[name="mode[]"]').map(function(){return $(this).val();}).get();
// Then add it to the shown table
var baseurl='<?php echo base_url()."index.php/account/insert_voucher";?>';
$.ajax({
type: "POST",
url: baseurl,
data: $('#edit *').serialize() ,
cache: false,
success: function(html) {
alert(html);
}
});
$(this).val("Edit");
}
else $(this).val("Update");
});
</script>
<table width="62%" height="70" border="1" cellpadding="0" cellspacing="0" class="tbl_grid" id="shown">
<?php if(count($voucher_info) > 0 ){ ?>
<tr class="bgcolor_02">
<td width="22%" height="25" align="center" class="admin" >S.no</td>
<td width="37%" align="center" class="admin">Voucher Type</td>
<td width="37%" align="center" class="admin">Voucher Mode</td>
</tr>
<?php
$rownum = 1;
foreach ($voucher_info as $eachrecord){
$zibracolor = ($rownum%2==0)?"even":"odd";
?>
<tr align="center" class="narmal">
<td height="25"><?php echo $eachrecord->voucher_id; ?></td>
<td><?php echo $eachrecord->voucher_type; ?></td>
<td><?php echo ucwords($eachrecord->voucher_mode); ?></td>
</tr>
<?php }
}
else {
echo "<tr class='bgcolor_02'>";
echo "<td align='center'><strong>No records found</strong></td>";
echo "</tr>";
}
?>
</table>
<table width="62%" height="70" border="1" cellpadding="0" cellspacing="0"
id="edit">
<?php if(count($voucher_info) > 0 ){ ?>
<tr class="bgcolor_02">
<td width="27%" align="center" class="admin" >S.no</td>
<td width="37%" align="center" class="admin" >Voucher Type</td>
<td width="47%" align="center" class="admin" >Voucher Mode</td>
<!-- <td width="41%" align="center" class="narmal"> <strong>Actions</strong></td>-->
</tr>
<?php
$rownum = 1;
foreach ($voucher_info as $eachrecord){
$zibracolor = ($rownum%2==0)?"even":"odd";
?>
<tr align="center" class="narmal">
<td height="25"><?php echo $eachrecord->voucher_id ; ?><input type="hidden" name="voucher_id[]" value="<?php echo $eachrecord->voucher_id; ?>" /></td>
<td><input name="vouchertype[]" type="text" value="<?php echo $eachrecord->voucher_type; ?>" /></td>
<td><select name="mode[]" >
<option value="paidin" <?php if($eachrecord->voucher_mode=='paidin') { ?> selected="selected" <?php } ?>>Paid In</option>
<option value="paidout" <?php if($eachrecord->voucher_mode=='paidout') { ?> selected="selected" <?php } ?>>Paid Out</option>
</select></td>
</tr>
<?php } }
else {
echo "<tr class='bgcolor_02'>";
echo "<td align='center'><strong>No records found</strong></td>";
echo "</tr>";
}
?>
</table>
</td>
</tr>
<input id="update" type="submit" name="submit" value="Edit"/
In first table I am displaying values from database. But when user click on edit button below the table, Then that table values should be editable for user. I have succeeded in making editable fields but again when user click on submit then updated values are not displaying in first table. I know it's possible with jQuery or JavaScript. When I alert(newsales), the alert is undefined.

An easy way to handle this would be have two separate tables, and toggle between them when you edit a table. So for example we have a table that shows our normal data called shown and one with the input and select for a user to enter data called edit. These tables will share the same button, and when clicked it will toggle between the tables, making it look like it's switching between edit and show mode. This way we can just copy the values from the edit table to the text in the shown table. Here is an example:
$("#edit").hide(); // Hide the edit table first
$("#update").click(function() {
$("#edit").toggle();
$("#shown").toggle();
// If we are going from edit table to shown table
if($("#shown").is(":visible")) {
// Get the data from the edit table
var newSales = $("#edit tr:nth-child(1) td input[name='vouchertype']").val();
var newPay = $("#edit tr:nth-child(1) td select[name='mode']").val();
var newTax = $("#edit tr:nth-child(2) td select[name='tax']").val();
// Then add it to the shown table
$("#shown tr:nth-child(1) td:nth-child(2)").text(newSales);
$("#shown tr:nth-child(1) td:nth-child(3)").text(newPay);
$("#shown tr:nth-child(2) td:nth-child(1)").text(newTax);
$(this).val("Edit");
}
else $(this).val("Update");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="shown">
<tr>
<td>Sr no</td><td>Sales</td><td>Paid in</td>
</tr>
<tr><td>Taxed</td></tr>
</table>
<table id="edit">
<tr>
<td>Sr no</td><td><input type="text" name="vouchertype" value="Sales" /></td>
<td>
<select name="mode">
<option value="paidin">Paidin</option>
<option value="paidout">Paidout</option>
</select>
</td>
</tr>
<tr>
<td>
<select name="tax">
<option value="Taxed">Taxed</option>
<option value="Not Taxed">Not Taxed</option>
</select>
</td>
</tr>
</table>
<input id="update" type="submit" name="submit" value="Edit"/>
Notice: This is an answer to the original question, which is quite different then the new question added in as an edit.

Change tablefilling with select option value

Im new to php and ajax and wanted to display a table that's filled with content of a database. I succeeded doing it but now I'm trying to change the tables content with a select. I know there are many sites explaining how to do it, but I somehow don't get it. The best solution for me is by changing the table without a reload of the page or reloading it with a separate button.
I read about doing it with ajax / javascript but, as I mentioned, Im not familiar with those things.
Below is my code thats already workin.
PHP:
<?php
$mysqlhost="localhost"; //
$mysqluser="root"; //
$mysqlpwd=""; //
$mysqldb="wordpress"; //
$connection=mysql_connect($mysqlhost, $mysqluser, $mysqlpwd);
mysql_select_db($mysqldb, $connection);
$sql = "SELECT id, user_email FROM wp_users";
$db_query = mysql_query($sql);
?>
<table cellpadding="1" cellspacing="3" border="1">
<tr>
<td>ID</td>
<td>Mail</td>
</tr>
<?php
while ($adr = mysql_fetch_array($db_query)){
?>
<tr>
<td><?=$adr['id']?></td>
<td><?=$adr['user_email']?></td>
</tr>
<?php
}
?>
</table>
My selects:
<select name="Choose" title="chose">
<option value="one" id="One">One</option>
<option value="two" id="Two">Two</option>
<option value="three" id="Three">Three</option>
</select>
Id really appreciate some code or hints how to do it.

Here is the code:
html:
<table id="tableid"> //mention id for a table
......
......
</table>
// create an event for select
<select name="Choose" title="chose" onchange="getajax(this.value)">
<option value="one" id="One">One</option>
<option value="two" id="Two">Two</option>
<option value="three" id="Three">Three</option>
</select>
javascript:
function getajax(value){
$.ajax({
type: "GET",
url: "Ajaxpage.php",
data: {text:value},
success: function(data) {
$("#tableid").html(data);
}
});
}
Ajaxpage.php:
<?php
$mysqlhost="localhost"; //
$mysqluser="root"; //
$mysqlpwd=""; //
$mysqldb="wordpress"; //
$connection=mysqli_connect($mysqlhost, $mysqluser, $mysqlpwd); //use mysqli instead of mysql
mysqli_select_db($mysqldb, $connection);
$sql = "SELECT id, user_email FROM wp_users where someid='".$_GET['text']."'";
$query = mysql_query($sql);
while($row= mysql_fetch_array(query)){
echo "<tr><td>".$row['id']."</td><td>".$row['user_email']."</td></tr>";
}
?>

<script>
function reloadWithOptionValue(){
document.FilterFrom.submit();
}
</script>
<?php
$mysqlhost="localhost"; //
$mysqluser="root"; //
$mysqlpwd=""; //
$mysqldb="wordpress"; //
$connection=mysql_connect($mysqlhost, $mysqluser, $mysqlpwd);
mysql_select_db($mysqldb, $connection);
$sql = "SELECT id, user_email FROM wp_users";
if(isset($Choose) && !empty($Choose)){
$sql.=" where id like '%$Choose%' or user_email like '%$Choose%'";
}
$db_query = mysql_query($sql);
?>
<form method="post" name="FilterFrom">
<table cellpadding="1" cellspacing="3" border="1">
<tr>
<td>ID</td>
<td>Mail</td>
</tr>
<?php
while ($adr = mysql_fetch_array($db_query)){
?>
<tr>
<td><?=$adr['id']?></td>
<td><?=$adr['user_email']?></td>
</tr>
<?php
}
?>
</table>
<select name="Choose" title="chose" onchange="reloadWithOptionValue()">
<option value="one" id="One">One</option>
<option value="two" id="Two">Two</option>
<option value="three" id="Three">Three</option>
</select>
</form>
try this one