Develop Reference

Passing Parameters To PHP Table Hyperlink

I want the second and third columns of my php table to be a hyperlink to a different page for each row. I need to pass 3 parameters to the hyperlink
1) The value from the first column - empID listed in the table below
2) The value from $weekStart - selected from a input type="date" at top of page
3) The value from $weekEnd - selected from a input type="date" at top of page
I am trying this syntax, but it is not passing in the parameters and I am getting a page not found error. How should this syntax be altered so that it passes all 3 params and navigates to the appropriate page?
Week Start:<input type="date" name="weekStart">
Week End:<input type="date" name="weekEnd">
<input type="submit" name="submit" value="View Employee Data">
<?php
if (isset($_POST['submit']))
{
$weekStart = $_POST['weekStart'];
$weekEnd = $_POST['weekEnd'];
//Generate Table Here
}
?>
foreach ($tsql as $res)
{
print "<tr>";
print "<td>" . $res->EmpID . "</td>";
print "<td>'.$Row['DailySales'].''" . $res->DailySales . "</td>";
print "<td>'.$Row['SalesForWeek'].''" . $res->SalesForWeek . "</td>";
print "</tr>";
}

You didn't append the string well. Please try the below code
foreach ($tsql as $res)
{
print "<tr>";
print "<td>" . $res->EmpID . "</td>";
print "<td><a href='DailySales.php?param1=".$weekStart."&param2=".$weekEnd."&param3=".$Row['EmpID']."'>".$Row['DailySales']."</a>" . $res->DailySales . "</td>";
print "<td><a href='WeeklySales.php?param1=".$weekStart."&param2=".$weekEnd."&param3=".$Row['EmpID']."'>".$Row['SalesForWeek']."</a>" . $res->SalesForWeek . "</td>";
print "</tr>";
}
If it still shows not found page, then please check the file names.
Update: I hope you need to replace some variables in your loop as updated in the below code
foreach ($tsql as $res)
{
print "<tr>";
print "<td>" . $res->EmpID . "</td>";
print "<td><a href='DailySales.php?param1=".$weekStart."&param2=".$weekEnd."&param3=".$res->EmpID."'>".$res->DailySales."</a></td>";
print "<td><a href='WeeklySales.php?param1=".$weekStart."&param2=".$weekEnd."&param3=".$res->EmpID."'>".$res->SalesForWeek."</a></td>";
print "</tr>";
}

Completely untested and I'm not 100% sure what the data in those links were supposed to be doing, but I think this should give you a solid starting point and you can tweak the HTML generation to get what you want.
I wouldn't bother trying to do it in PHP at all, pass the entire data set to JS and do it there.
Week Start:<input type="date" name="weekStart" id="weekStart">
Week End:<input type="date" name="weekEnd" id="weekEnd">
<input type="submit" name="submit" value="View Employee Data">
<?php
if (isset($_POST['submit']))
{
$weekStart = $_POST['weekStart'];
$weekEnd = $_POST['weekEnd'];
//Generate Table Here
}
// Create a JSON version of your data to pass to the script
$data = json_encode( $tsql );
?>
<!-- Create an empty table for your data-->
<table id="employee-table"></table>
<script>
$("#submitForm").on("click", function(e) {
// Stop the form from reloading the page
e.preventDefault();
// Set up your variables, you'll need to add ID's to the form inputs
var employees = <?php echo $data; ?>;
// See the employees data in your inspector console
console.log(employees);
var weekStart = $("#weekStart").val();
var weekEnd = $("#weekEnd").val();
// Generate the HTML for all the employees
var html = "";
for( var1=0; i<employees.length; i++ ) {
html += "<tr>";
html += "<td>" . employees[i].EmpID . "</td>";
html += "<td>" + employees[i].DailySales + "</td>";
html += "<td><a href='WeeklySales.php?param1='" + weekStart + "'&param2='" + weekEnd + "'&param3='" + employees[i].id +"'>" + employees[i].SalesForWeek + "</a></td>";
html += "</tr>";
}
// Insert the HTML that you generated into the table.
$("#employee-table").html(html);
});
</script>

Jquery form inputs not being serialized

So what I'm doing is after an AJAX call, I need to dynamically create a table row containing two hidden inputs, one regular input, and two buttons that have the same functionality as the buttons already on the page when it loads. My problem is that the form I try to serialize is empty, and I'm not sure why.
Here's how I'm generating my html:
function addNewPlayerRow(player, tid) {
var html = "<tr> <form role='form' name='editplayerform'>";
html += "<td>";
html += "<input type='hidden' name='tournamentidform' value='" + tid + "'/>";
html += "<input type='hidden' name='playerid' value='" + player._id + "'>";
html += "<input type='input' class='form-control' name='playername' value='" + player.player_name + "'/>";
html += "</td></form>";
html += "<td>";
html += "<button type='button' class='btn btn-sm btn-success saveplayerbutton' onclick='savePlayerSender(this)'>Save Name</button>";
html += "<button type='button' class='btn btn-sm btn-danger deleteplayerbutton' onclick='deletePlayerSender(this)'>Remove</button>";
html += "</tr>";
$(html).hide().appendTo("#playersbody").fadeIn(300);
}
And here's the onclick function for buttons of the deleteplayerbutton class.
function deletePlayerSender(button) {
var form = $(button).parent().prev().prev();
console.log($(form));
console.log($(form).serialize());
}
When I click the button, the console logs and empty serialization form. Anyone know why?

A simple test like:
console.log($(button).parent().prev().prev().tagName);
should reveal which element you are targeting, which at first look seems to me the <tr> element and not the form. Furthermore, as other suggested you should revisit your html structure. Note that you forgot the closing </td> before the closing </tr>

The button has a reference to the form it belongs to:
<button type="submit" onclick="deletePlayerSender(this)">Remove</button> //add the type submit, which mimics the behaviour of input
var form = $(button).get(0).form; //access the DOM element using get(0)
//alternatively
var $form = $(button).parents('form'); //parents() in plural. Return the form element as jQuery element
console.log(form, $form);
console.log($(form).serialize());
console.log($form.serialize());

check https://jsfiddle.net/dk7qbfpd/. I did some corrections to your code and now is working.
there are some changes in both methods, add and delete
function addNewPlayerRow(player, tid)
{
var html = "<tr><td><form role='form' name='editplayerform" + player._id + "' id='editplayerform" + player._id + "' >";
html += "<input type='hidden' name='tournamentidform' value='" + tid + "'/>";
html += "<input type='hidden' name='playerid' value='" + player._id + "'>";
html += "<input type='input' class='form-control' name='playername' value='" + player.player_name + "'/>";
html += "</form></td>";
html += "<td>";
html += "<button type='button' class='btn btn-sm btn-success saveplayerbutton' onclick='savePlayerSender(" + player._id + ");'>Save Name</button>";
html += "<button type='button' class='btn btn-sm btn-danger deleteplayerbutton' onclick='deletePlayerSender(" + player._id + ");'>Remove</button>";
html += "</td></tr>";
$(html).hide().appendTo("#playersbody").fadeIn(300);
}
function deletePlayerSender(playerId)
{
var form = $("#editplayerform" + playerId);
console.log($(form).serialize());
}

You can't put html where you want,
Form element can't be placed between Table blocks which means it can only
wrap a table, or be placed within td.
Also try replace
.parent().prev().prev()
with
$(button).parent().parent().find('form')
that will support structure changes
Working code below:
function addNewPlayerRow(player, tid) {
var html = "<tr>";
html += "<td><form role='form' name='editplayerform'>";
html += "<input type='hidden' name='tournamentidform' value='" + tid + "'/>";
html += "<input type='hidden' name='playerid' value='" + player._id + "'>";
html += "<input type='input' class='form-control' name='playername' value='" + player.player_name + "'/>";
html += "</form></td>";
html += "<td>";
html += "<button type='button' class='btn btn-sm btn-success saveplayerbutton' onclick='savePlayerSender(this)'>Save Name</button>";
html += "<button type='button' class='btn btn-sm btn-danger deleteplayerbutton' onclick='deletePlayerSender(this)'>Remove</button>";
html += "</tr>";
$(html).hide().appendTo("#playersbody").fadeIn(300);
}
function deletePlayerSender(button) {
var form = $(button).parent().parent().find('form');
console.log($(form));
console.log($(form).serialize());
}

Thanks for all the help, everyone! I managed to fix it by putting the form inside the <td> and then finding the form starting at the button by doing this:
var form = $(button).parent().prev().children("form");

Getting Value of Input Element Created After DOM Load

I have multiple input elements arranged in 16 rows and 5 columns (Just like a grid) . The contents of the 16 rows are inserted into a mysql table as 16 records with each record contains 5 fields. I want a method to get the value of all the input into an array using jquery and pass this to a ajax post request.
dataentry.php contains this code
jQuery('#metentry').submit(function(e){
e.preventDefault();
// getting data from form to variables
var date=jQuery('#stddate').val();
var kgsunit=jQuery('#unit').val();
var kgsshift=jQuery('#shift').val();
//sending data to script
jQuery.post("get_blank_form.php", {
"date":date,
'unit':kgsunit,
'shift':kgsshift,
}, function(data) {
//displaying message
jQuery('#blankform').html(data);
jQuery('#formpanel').hide();
});
get_blank_form.php contains this code:
echo'<form id="shiftentry" name="shiftentry" >';
echo "Date:<input id=shiftdate value='".$date."'/>";
echo "Unit:<input id=shiftdate value='".$unit."'/>";
echo "Shift:<input id=shiftdate value='".$shift."'/><br/>";
echo "<table><tr><th>No</th><th>Ele</th><th>Location</th><th>Drate </th><th>H3 Val </th><th>Part </th> <th>Iod</th><th>Cont. </th></tr>";
while($row2=mysql_fetch_array($result_sec))
{
echo "<tr>";
echo "<td>".++$rc."</td>";
echo "<td><input size='5' id='".$row2['ele']."' value='".$row2['ele']."' /></td>";
echo "<td><input id='".$row2['loc_id']."' value='".$row2['loc']."' /></td>";
echo "<td><input size='5' id='drate".$rc."' value='".$row2['drate']."'/></td>";
echo "<td><input size='5' id='h3".$rc."' value='0' /></td>";
echo "<td><input size='5' id='part".$rc."' value='0' /></td>";
echo "<td><input size='5' id='iod".$rc."' value='0' /></td>";
echo "<td><input size='5' id='cont".$rc."' value='0' /></td>";
echo "</tr>";
}
echo " </table>";
echo '<div align="center">';
echo '<input type="submit" id="submit2" name="submit2" value="Submit" width="30" />';
echo '</div>';
echo '</form>';
Both the above scripts are working and this will add a form"shiftentry" to the DOM in dataentry.php. This form conains around 21 rows and 8 columns containing input elements. I want a method to get the values in this 21 x 8 input elements and pass it to a jQuery post request. Since the form is added after the DOM is loaded, how to get the value?
My final aim is to append this 21 rows into a mysql table. This part I knew, once I get all the values. Any suggestions ?
I have this function which create a multi dimensional array of input values. But in this casethe 'form1' is loaded before DOM is completed. But in the above scenario, form is dynamically added after DOM loding is completed
jQuery('#form1').submit(function(e){
e.preventDefault();
var arr = jQuery('#form1 tr:gt(0)').map(function() {
return [jQuery('input', this).map(function() {
return this.value;
}).get()];
}).get();
});
I also have another jquery script in this page which is used to traverse through the input boxes (obviously, these input boxes are loaded after DOM)
jQuery(document).delegate('input','keyup',function(e){
if(e.which==39)
jQuery(this).closest('td').next().find('input').focus();
else if(e.which==37)
jQuery(this).closest('td').prev().find('input').focus();
else if(e.which==40)
jQuery(this).closest('tr').next().find('td:eq('+jQuery(this).closest('td').index()+')').find('input').focus();
else if(e.which==38)
jQuery(this).closest('tr').prev().find('td:eq('+jQuery(this).closest('td').index()+')').find('input').focus();
});
How can I use the delegate option in the script used for traverse in the script for getting input values?

Copy input text to another, inside a foreach loop?

This page generates a table contaning routes, and in the end of every "tr" there is a button that should copy the text inside those 2 fields in each line to the Name3 and Name 4 inputs, respectively.
But when I click, nothing is happening, I think that getElementById("Name1_".index) is making the hole code invalid, but how to make it correctly?
<script type="text/javascript">
function copyTextValue(key) {
var index = key;
var text1 = document.getElementById("Name1_".index).value;
var text2 = document.getElementById("Name2_".index).value;
document.getElementById("Name3").value = text1;
document.getElementById("Name4").value = text2;
}
</script>
<input type="text" id='Name3' />
<input type="text" id='Name4' />
<?php
$get_rotas = file_get_contents('routes.txt');
$array = explode("\r\n", $get_rotas);
foreach($array as $key=>$rota) {
//Route(rota) Example: TRM J169 BLH V16 BXK|3666
$rota_distance = explode("|", $rota);
echo "<tr bordercolor='#FFFFFF'>";
echo "<td><input type=\"text\" id=\"Name1_$key\" value='" . $rota_distance[0] . "'/></td>";
echo "<td><input type=\"text\" id=\"Name2_$key\" value='" . $rota_distance[1] . "'/></td>";
echo "<td><input type=\"button\" onclick=\"copyTextValue($key);\" value=\"Copy\" ></td>";
echo "</tr>";
}
?>

For concatenating strings in JavaScript use + instead of ..

How to let user hide rows from a html table

I have a table which gets dynamically populated by the results of a search query:
echo '<table class="table">';
if ($num==0) echo "<tr><td>Sorry, no items found.</td></tr>";
else {
echo '<tr> <th>Nr.</th> <th>Name</th>';
echo '<th>Description</th> <th>Image</th>';
$lf = 1;
while ($dsatz = mysql_fetch_assoc($res))
{
echo '<tr>';
echo "<td>$lf</td>";
echo '<td>' . $dsatz["name"] . '</td>';
echo '<td>' . $dsatz["description"] . '</td>';
echo '<td><img src="' . $dsatz['image'] . '" style="height:100px; width:auto" /></td>';
echo '</tr>';
$lf = $lf + 1;
}
}
echo '</table>';
The result is a table of items. Now what I would like to do is give the user the possibility to hide any row by a single click or, if not possible, by checking boxes and hiting a second Hide(delete) button at the and of the table. The rows must not be deleted from the database only hidden from view.
Any ideas how I could do this?
Thx
Seb
///////////////////////////// EDIT ////////////////////////////////////////////
Thx for the Input!
Here is what worked for me:
In table:
echo "<td><input type='checkbox' name='hide_cand' style='float:right' id='hide_cand' onclick=' return hideRow(this)'/></td>";
script:
function hideRow(checkbox)
{
if(confirm('This action can not be undone, are you sure you want to delete this item from the list?'))
{
checkbox.parentNode.parentNode.style.display = "none";
return true;
}
return false;
}
Thx for your help!

Basically, you want something like this:
$('.table').on('click','tr',function(){
$(this).hide();
});
If you wish to add checkbox inside each row:
$('.table').on('change','tr :checkbox',function(){
$(this).closest('tr').hide(); //no need here to check for checkbox state
});

Think the far most easy would be :
$('.table tr').click(function() {
$(this).hide();
});

Try something like this
$("#tableID").delegate("td", "click", function() {
$(this).closest("tr").hide();
});