We Keep Coding

PHP and Javascript issue. Function return always the last value

I searched this website and couldn't find an answer.
I have a php page that display a dropdown list with 2 choices. When on change, a Javascript execute a function that opens a php page to update my database, sending the ID and another parameter with the URL. The problem is the ID value is always the same (the last of the list). Can you help me please, I am very new in PHP and Javascript. Thank you in advance. Here is the PHP code and the javascript:
<?php
$AvailabilityCondition = "1=1";
if ((isset($_POST["availabilityChoice"])) && ($_POST["availabilityChoice"] !== "All")){
$AvailabilityCondition = "rented = "."'".$_POST["availabilityChoice"]."'";
}
$rentalquery = "SELECT * FROM rentals WHERE $AvailabilityCondition ORDER BY region_name, rental_name";
if ($rentalresult = $link->query($rentalquery)) {
/* fetch associative array */
while ($rowrentals = $rentalresult->fetch_assoc()) {
$NumberOfResults = $rentalresult->num_rows;
?>
<!-- ************************* This display a table with a short rental description (Region name - Rental name)
****************************** with and EDIT link, a DELETE link and an AVAILABILITY selector. ******************* -->
<div align="center">
<table >
<tr >
<td width="300" >
<?php echo ($rowrentals["region_name"]).' - '.($rowrentals["rental_name"]).'<br/>'; ?>
</td>
<td width="50">
EDIT
</td>
<td width="100" align="right">
<!-- *********** This form display the actual availability state. On change, it updates the database **************** -->
<form name="updateAvailability" method=POST" class="form-horizontal" >
<select onChange="showSelected(this.value)" id ="availabilityChoice" name="availabilityChoice" style="width: auto">
<option value="No" <?php if (($rowrentals["rented"]) == "No") echo 'selected="selected"' ?>>Available</option>
<option value="Yes" <?php if (($rowrentals["rented"]) == "Yes") echo 'selected="selected"' ?>>Rented</option>
</select> <?php echo ($rowrentals["id"]) ?>
</form>
<script type="text/javascript">
function showSelected(val){
document.getElementById ('availabilityChoice').innerHTML = val;
window.location.replace("status-update.php?rented=" + val + "&id=<?php echo ($rowrentals["id"]) ?>");
}
</script>
<!-- **************************************************************************************************************** -->
</td>
<td>
!!! DELETE !!!
</td>
</tr>
</table>
</div>
<?php
}}
/* free result set */
$rentalresult->free();
/* close connection */
$link->close();
?>
<br/><br/>
<div align="center">
<b>Back to Managers Main Menu</b>
</div>
</body> ​
I just posted more of my PHP page. So you can see the query and the WHILE, where $rowrentals["id"] is coming from.
Here is also a screen capture of how the page looks like: screen capture
I echoed the $rowrentals["id"] under each availability dropdown.
But whatever row I chose to change the availability, it always pass Id=9, the last one. That is what confuses me.
Before the screen capture, all five rows where "Available". Then I selected "Rented" on the first row. The page updated and since Id always =9, you can see the last row "Rented".
The Javascript is working to retrieve the value of the selected item. Because it opens this page perfectly: status-update.php?rented=Yes&Id=9
But again, Id is always 9...

Try with this:
<script type="text/javascript">
function showSelected(val){
document.getElementById ('availabilityChoice').innerHTML = val;
window.location.replace("status-update.php?rented=" + val + "&id=<?php echo ($rowrentals['id']) ?>");
}
If showSelected javascript function inside a foreach/while loop you need to extract it from loop and send id+value at the same time to showSelected function.

Thank you everybody. I found my answer. I added a counter, so this create a different function name for each database Id.
Here is the code:
$rentalquery = "SELECT * FROM rentals WHERE $AvailabilityCondition ORDER BY region_name, rental_name";
$counter =0;
if ($rentalresult = $link->query($rentalquery)) {
/* fetch associative array */
while ($rowrentals = $rentalresult->fetch_assoc()) {
$NumberOfResults = $rentalresult->num_rows;
$counter = $counter+1;
?>
<!-- ************************* This display a table with a short rental description (Region name - Rental name)
****************************** with and EDIT link, a DELETE link and an AVAILABILITY selector. ******************* -->
<div align="center">
<table >
<tr >
<td width="300" >
<?php echo ($rowrentals["region_name"]).' - '.($rowrentals["rental_name"]).'<br/>'; ?>
</td>
<td width="50">
EDIT
</td>
<td width="100" align="right">
<!-- *********** This form display the actual availability state. On change, it updates the database **************** -->
<form name="updateAvailability<?php echo $counter ?>" method=POST" class="form-horizontal" >
<select onChange="showSelected<?php echo $counter ;?>(this.value)" id ="availabilityChoice<?php echo $counter ?>" name="availabilityChoice<?php echo $counter ?>" style="width: auto">
<option value="No" <?php if (($rowrentals["rented"]) == "No") echo 'selected="selected"' ?>>Available</option>
<option value="Yes" <?php if (($rowrentals["rented"]) == "Yes") echo 'selected="selected"' ?>>Rented</option>
</select>
</form>
<script type="text/javascript">
function showSelected<?php echo $counter ;?>(val){
document.getElementById ('availabilityChoice<?php echo $counter ;?>').innerHTML = val;
window.location.replace("status-update.php?rented=" + val + "&id=<?php echo ($rowrentals["id"]) ?>");
}
</script> ​

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.

Pass button value as variable of an upload file

I am quite new to javascript and i need some guidance. I have a table that displays some data, the source code of the table is this.
function user_clients_table_storagefolder() {
$con = mysql_connect("localhost","root",'');
if(!$con){
die("Cannot Connect" . mysql_error());
}
mysql_select_db("client_app",$con);
$get_user_clients = "SELECT `ID`,`Name`,`SurName`,`storagefolder` FROM `clients` ";
$clients = mysql_query($get_user_clients,$con);
echo "<table class=table table-condensed>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>SurName</th>
<th>Recipient</th>
</tr>
</thead>";
while($record = mysql_fetch_array($clients)){
echo "<action=pushnotification.php method=post>";
echo "<tr>";
echo "<td>".$record['ID']." </td>";
echo "<td>".$record['Name']." </td>";
echo "<td>".$record['SurName']." </td>";
echo "<td>"."<button type=button id=contact class=btn btn-primary value=".$record['Name'].">Primary</button></td>";
echo "</tr>";
}
echo "</table>";
mysql_close();
//function that is used to display the table of all the clients and fetch back the storagefolder of each user
}
Every table row has a button in the last column that has a different value. When i click any of the buttons a pop up form is displayed asking to upload a file. The source code of the form is the following:
<div id="contactForm">
<p><h4><font color="white"><i>First Choose the clients and then the file which will be uploaded in order to proced</i></font></h4></2>
<p> </p>
<input type="file" class="upload" name="onstorage" id="upload_file" size="50" name="icon" onchange="loadFile(this);" >
<hr>
<div id="myProgress">
<div id="myBar"></div>
</div>
</div>
The code that launches the pop up is the following:
<script>
$(function() {
// contact form animations
$('#contact').click(function() {
$('#contactForm').fadeToggle();
})
$(document).mouseup(function (e) {
var container = $("#contactForm");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.fadeOut();
}
});
});
</script>
Each time i choose a different file to upload the function loadfile() is called that is sending the input value that i have upload.My question is, how can i also pass the value of the button that has been pressed in the same function?
Can someone please help me?
Thanks in Regards

PHP programmatically navigate to new form using post [duplicate]

This question already has answers here:
PHP Redirect with POST data
(13 answers)
Closed 5 years ago.
I'm fairly new to PHP. I have a form that a user is filling in with various details (start date, end date, etc), called purchaseLicence.php. When it is submitted, the form action reloads itself to use PHP to validate the data.
If validation is passed, I want it to navigate to purchaseLicence2.php using the post method, as though the form had originally posted directly to purchaseLicence2.php.
I don't mind involving Javascript to do this, and I'm guess that it would need to be involved as it will end up looking at a different form to the one it would otherwise expect to be on.
This is my current purchaseLicence.php, the problem I get is that both purchaseLicence2.php and purchaseLicence.php are rendered after the form has been posted, and the browser is still pointing to purchaseLicence.php, rather that purchaseLicence2.php.
<?php
include_once('php/strings.php');
include_once('php/sprocs.php');
include_once('php/dates.php');
$encounteredValidationError = false;
$navigateAway=false ;
if (isset($_POST['process']))
{
if ($_POST['process'] == 1)
{
// if here, form has been posted
$ProductCode = $_POST['ProductCode'];
$StartDate = $_POST['StartDate'];
$EndDate = $_POST['EndDateHidden'];
// standardise the date formats to ISO8601
$StartDate = date("Y-m-d", strtotime($StartDate));
$EndDate = date("Y-m-d", strtotime($EndDate));
echo "<descriptive>" . PHP_EOL;
echo "ProductCode:" . $ProductCode . "<br/>" . PHP_EOL;
echo "StartDate:" . $StartDate . "<br/>" . PHP_EOL;
echo "EndDate:" . $EndDate . "<br/>" . PHP_EOL;
echo "</descriptive>" . PHP_EOL;
// validation to happen here
if (!$encounteredValidationError)
{
// so we're happy with the values. The form has just reloaded, so we need to put these back from $_POST into the input fields, so
// that we can call NavigateToPurchaseLicence2(), which will get them out of the input fields and post them to purchaseLicence2.php
// What a faff!
$data = array('ProductCode'=>$ProductCode, 'StartDate'=>$StartDate, 'EndDate'=>$EndDate);
$options = array(
'http'=>array(
'header' => "Content-type: application/x-www-form-urlencoded\r\n",
'method' => 'POST',
'content' => http_build_query($data)
)
);
$context = stream_context_create($options);
$result = file_get_contents('purchaseLicence2.php', false, $context);
if ($result === FALSE) { /* Handle error */ }
var_dump($result);
}
else
{
// hilite errors in the form here, how? form is not yet loaded
}
}
}
?>
</head>
<body>
<form method="post" action="purchaseLicence.php" id="form1">
<input type="hidden" name="process" value="1">
<table border=0 width=800px align=left style="margin: 0px auto;">
<tr> <!-- Product > -->
<td style="vertical-align:top" width="500px" bgcolor="lightgray"><descriptive>Product</descriptive></td>
<td width="500px" bgcolor="lightgray">
<?php
// creates a dropdown of products
OutputSelectFromSQL("SELECT * FROM Product ORDER BY Description", "ProductCode", "ProductCode", "Description", "");
?>
</td>
</tr>
<tr> <!-- Licence Period -->
<td style="vertical-align:top" width="500px" bgcolor="lightgray"><descriptive>Licence Period</descriptive></td>
<td width="500px" bgcolor="lightgray"><descriptive>1 year</descriptive></td>
</tr>
<tr> <!-- Start Date -->
<td style="vertical-align:top" width="500px" bgcolor="lightgray"><descriptive>Start/End Dates</descriptive></td>
<td width="500px" bgcolor="lightgray">
<input type="date" style="font-family:verdana;font-size:12px;" name="StartDate" id="StartDate" onchange="updateEndDate(this.value);"></input>
<descriptive> to <a id="EndDate"></a></descriptive>
<input type="hidden" name="EndDateHidden" id="EndDateHidden"></input> <!-- this is used so we can post the end date to $_POST -->
</td>
</tr>
<tr> <!-- Next > -->
<td style="vertical-align:top" width="500px" bgcolor="lightgray"><descriptive></descriptive></td>
<td width="500px" bgcolor="lightgray" align="right"><input type="submit" value="Next"></input></td>
</tr>
</table>
</form>
</body>
A simple example for a standard pattern to follow would be really useful.

I suggest you use $_SESSION to hold state between your forms, below is a very crude example, with 1 field on the first form which if good (numeric) , the entire form state is set into the session, then redirects to the second form to fill out additional fields. Very simple but you get the idea.
dataentry1.php
<?php
session_start();
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// define form state
$form = [
'value' => $_POST,
'error' => []
];
// validate a_field
if (empty($form['value']['a_field'])) {
$form['error']['a_field'] = 'a_field is a required field!';
} elseif (!is_numeric($form['value']['a_field'])) {
$form['error']['a_field'] = 'a_field should be a number!';
}
// all good
if (empty($form['error'])) {
$_SESSION['form'] = $form;
exit(header('Location: dataentry2.php'));
}
}
?>
<?= (!empty($form['error']['global']) ? $form['error']['global'] : null) ?>
<form action="/dataentry1.php" method="post">
<lable>a_field:</lable>
<input type="text" name="a_field" value="<?= (isset($form['value']['a_field']) ? htmlentities($form['value']['a_field']) : null) ?>">
<?= (!empty($form['error']['a_field']) ? '<br>'.$form['error']['a_field'] : null) ?>
<br>
<input type="submit" value="Submit">
</form>
dataentry2.php - requires the previous form to be filled out.
<?php
session_start();
// set form into scope from session
if (!empty($_SESSION['form'])) {
$form = $_SESSION['form'];
} else {
$_SESSION['form']['error']['global'] = 'You must fill out dataentry1 form first';
exit(header('Location: dataentry1.php'));
}
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// define form state
$form = [
'value' => array_merge($form['value'], $_POST),
'error' => []
];
// validate a_field
if (empty($form['value']['b_field'])) {
$form['error']['b_field'] = 'b_field is a required field!';
} elseif (!is_numeric($form['value']['b_field'])) {
$form['error']['b_field'] = 'b_field should be a number!';
}
// all good
if (empty($form['error'])) {
exit('Do something cool!');
}
}
?>
<form action="/dataentry2.php" method="post">
<lable>a_field:</lable>
<input type="text" name="a_field" value="<?= (isset($form['value']['a_field']) ? htmlentities($form['value']['a_field']) : null) ?>" readonly="readonly">
<?= (!empty($form['error']['a_field']) ? '<br>'.$form['error']['a_field'] : null) ?>
<lable>b_field:</lable>
<input type="text" name="b_field" value="<?= (isset($form['value']['b_field']) ? htmlentities($form['value']['b_field']) : null) ?>">
<?= (!empty($form['error']['b_field']) ? '<br>'.$form['error']['b_field'] : null) ?>
<br>
<input type="submit" value="Submit">
</form>

How to select all checkbox and get value in jquery

In foreach loop there is checkbox for each row.
Code As Bellow.
foreach($rpd_records as $rpd_newslater_records)
{
$rp_ne_value = maybe_unserialize($rpd_newslater_records->meta_value); ?>
<tr>
<input type="hidden" class="rpd_meta_id" name="rpd_meta_id" value="<?php echo $rp_ne_records->meta_id; ?>">
<td><input type="checkbox"></td>
<td><?php echo $rp_ne_value['product_id']; ?></td>
<td> <div class="send_mail_btn" style="display: inline;">
Send</div></td>
</tr>
<?php
} ?>
<button type="button" id="sendAll" class="main"><span class="sub"></span> Send All </button>
What I should : when i click on SendAll Button then its all checkbox are selected and get each of Row Hidden Value using Jquery.
Can you suggest me.
Thanks.

This will help you;
$("#sendAll").click(function(e) {
$(":checkbox").attr("checked", true);
var values = $('input.rpd_meta_id[type="hidden"]').map(function(){
return this.value;
}).get();
alert(values);
});

You can
1) traverse to closest tr element
2) find hidden input in it.
3) use .map() and get jquery object of all hidden input values
4) convert to array using .get()
$('#sendAll').click(function(){
var inputcheckboxes = $('input:checked').attr("checked", true);
var hiddenValForChecked = inputcheckboxes.find('.rpd_meta_id').map(function(){
return this.value;
}).get();
console.log(hiddenValForChecked);
});
Here hiddenValForChecked represents array of values of hidden fields.