Develop Reference

how to avoid refresh on a dropdown menu

when I use a drop down menu to select a quantity on a e-commerece based cart app, the drop down menu refresh to 1 after making the necesari changes on the variables.
the cart will change the quantity for the item and the price acordingly BUT will refresh itself and show 1 despite of the change on the rest of the variables.
here is my code:
<table class="table">
<tbody>
<tr>
<th></th>
<th>ITEM NAME</th>
<th>QUANTITY</th>
<th>UNIT PRICE</th>
<th>ITEMS TOTAL</th>
</tr>
<?php
foreach ($_SESSION["shopping_cart"] as $product){
?>
<tr>
<td>
<img src='<?php echo $product["image"]; ?>' width="90" height="80" />
</td>
<td><?php echo $product["name"]; ?><br />
<form method='post' action=''>
<input type='hidden' name='code' value="<?php echo $product["code"]; ?>"
/>
<input type='hidden' name='action' value="remove" />
<button type='submit' class='remove'>Remover</button>
</form>
</td>
<td>
<form method='post' action=''>
<input type='hidden' name='code' value="<?php echo $product["code"]; ?>"
/>
<input type='hidden' name='action' value="change" />
<select name='quantity' class='quantity' onChange="this.form.submit()">
<option <?php if($product["quantity"]==1) echo "selected";?>
value="1">1</option>
<option <?php if($product["quantity"]==2) echo "selected";?>
value="2">2</option>
<option <?php if($product["quantity"]==3) echo "selected";?>
value="3">3</option>
<option <?php if($product["quantity"]==4) echo "selected";?>
value="4">4</option>
<option <?php if($product["quantity"]==5) echo "selected";?>
value="5">5</option>
</select>
</form>
</td>
<td><?php echo "R$".$product["price"]; ?></td>
<td><?php echo "R$".$product["price"]*$product["quantity"]; ?></td>
</tr>
<?php
$total_price += ($product["price"]*$product["quantity"]);
}
?>
<tr>
<td id="td_tot" colspan="5" align="right">
<strong>TOTAL: <?php echo "R$".$total_price; ?></strong>
</td>
</tr>
</tbody>
</table>
and here is the head section:
$status="";
if (isset($_POST['action']) && $_POST['action']=="remove"){
if(!empty($_SESSION["shopping_cart"])) {
foreach($_SESSION["shopping_cart"] as $key => $value) {
if($_POST["code"] == $key){
unset($_SESSION["shopping_cart"][$key]);
$status = "<div class='box' style='color:red;'>
Produto Removido</div>";
}
if(empty($_SESSION["shopping_cart"]))
unset($_SESSION["shopping_cart"]);
}
}
}
if (isset($_POST['action']) && $_POST['action']=="change"){
foreach($_SESSION["shopping_cart"] as &$value){
if($value['code'] === $_POST["code"]){
$value['quantity'] = $_POST["quantity"];
break;
}
}
}
?>
I need to make it stay showing the last selection instead and after several tries and looking out on internet for an answer I only can rely on this comunity to help me.
thank you.

Replace onChange to onBlur.
It will not update unless click outside of select menu.

Because of Sending over the wire via HTTP, everything is a string, you have to use == instead of ===. See php operator here

How to calculate the rest of the inputs

I have a table and I am calculating the difference of hours but only first row of the table calculates me. and I have a method where created a new table is if the date is different
$(document).ready(function() {
getHrs();
});
function getHrs()
{
hstart=$('#horaInicio').val();
hend=$('#horaTermino').val();
hr1 = (hstart).split(":");
hr2 = (hend).split(":");
hrstart=(hr1[0]);
minstart=(hr1[1]);
hrend=(hr2[0]);
minend=(hr2[1]);
totalstart=parseInt((hrstart*60)) + parseInt(minstart);
totalend=parseInt(hrend*60) + parseInt(minend);
rsthr=(totalstart - totalend);
total=(rsthr / 60).toFixed(2);
$('#resultado').val(total);
}
here my table, I create a table for each different day.
<?php if ($seguimientos): ?>
<?php $fechas = array();
foreach ($seguimientos as $seguimiento) {
$fechas[$seguimiento-> fecha][] = $seguimiento;
}
?>
<?php foreach ($fechas as $fecha): ?>
<table class="table table-hover">
<thead>
<tr>
<th>Fecha</th>
<th>Orden</th>
</tr>
</thead>
<?php foreach ($fecha as $seguimiento): ?>
<tr>
<td>
<?php echo $seguimiento-> fecha; ?>
</td>
<td>
<?php echo $seguimiento-> horaInicio; ?>
<input type="hidden" id="horaInicio" value=" echo $seguimiento-> horaInicio;">
</td>
<td>
<?php echo $seguimiento-> horaFin; ?>
<input type="hidden" id="horaInicio" value=" echo $seguimiento-> horaFin;">
</td>
<td>
<input type="text" id="resultado" value="" readonly>
</td>
</tr>
<?php endforeach; ?>
</table>
<?php endforeach; ?>
<?php endif; ?>
could be the problem the ID must be unique

Yes, that is the problem, try not to use id's but rather data attributes, or classes.
like this: <input type="hidden" data-start="horaInicio" value=" echo $seguimiento-> horaInicio;">
Then your selector becomes: hstart=$('[data-start]').val(); And the same for the other input.

How to get the value in Textbox from database depends on dropdown list without submit button

I want to get the text box value from database depends upon the dropdownlist values without using submit button .Now I have three dropdown list on my code.how can i write the javascript for three dropdown
<div align="center">
<table>
<thead>
<th>Product</th>
<th>Quantity</th>
<th>Rate</th>
<th>Amount</th>
</thead>
<tbody>
<tr id="addrow">
<td>
<?php
$selectproduct=mysql_query("select productname from items");
$itemname=mysql_fetch_array($selectproduct);
?>
<select name="item[]" id="item">
<?php
$i=0;
while($itemname=mysql_fetch_array($selectproduct))
{
?>
<option value="<?php echo $itemname['productname'];?>"><?php echo $itemname['productname'];?></option>
<?php
$i++;
}
?>
</td>
<?php
// $amount=mysql_query("select Amount from items where Productname='$productname' ");
// $totalamount=mysql_fetch_array($amount);
?>
<td><input class="qty" type="text" name="qty[]"></td>
<td><input class="price" type="text" name="price[]"></td>
<td><input type="text" class="output" name="output[]"></td>
</tr>
<tr >
<td>
<?php
$selectproduct=mysql_query("select productname from items");
$itemname=mysql_fetch_array($selectproduct);
?>
<select name="item[]" id="item">
<?php
$i=0;
while($itemname=mysql_fetch_array($selectproduct))
{
?>
<option value="<?php echo $itemname['productname'];?>"><?php echo $itemname['productname'];?></option>
<?php
$i++;
}
?>
</td>
<td><input class="qty" type="text" name="qty[]"></td>
<td><input class="price" type="text" name="price[]"></td>
<td><input type="text" class="output" name="output[]"></td>
</tr>
<tr>
<td>
<?php
$selectproduct=mysql_query("select productname from items");
$itemname=mysql_fetch_array($selectproduct);
?>
<select name="item[]" id="item">
<?php
$i=0;
while($itemname=mysql_fetch_array($selectproduct))
{
?>
<option value="<?php echo $itemname['productname'];?>"><?php echo $itemname['productname'];?></option>
<?php
$i++;
}
?>
</td>
<td><input class="qty" type="text" name="qty[]"></td>
<td><input class="price" type="text" name="price[]"></td>
<td><input type="text" class="output" name="output[]"></td>
</tr>
</table>
<div id="grand">
Total Amount:<input type="text" name="gran" id="gran">
</div>
</tr>
<tr >
<td colspan="4">
<center><input type="submit" name="submit"></center>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
<script type="text/javascript">
$(document).ready(function() {
$(".price").keyup(function() {
var grandTotal = 0;
$("input[name='qty[]']").each(function (index) {
var qty = $("input[name='qty[]']").eq(index).val();
var price = $("input[name='price[]']").eq(index).val();
var output = parseInt(qty) * parseInt(price);
if (!isNaN(output)) {
$("input[name='output[]']").eq(index).val(output);
grandTotal = parseInt(grandTotal) + parseInt(output);
$('#gran').val(grandTotal);
}
});
});
});
</script>

I recommand you to use jQuery for start. It is easier to manipulate the DOM.
Follow a tutorial and then, attach a callback on the change event on your dropdown menus, then in the callback get the values for your menu in an ajax call, then generate the html (the option tags) and update your select.
The Ajax call and the html update can be done with jQuery, but you can do it by yourself in pure Javascript as well.

You'll need to use AJAX calls from JS. AJAX has to send and receive data from php script. Simple AJAX tutorial: https://www.w3schools.com/js/js_ajax_php.asp

unable to submit form data using ajax?

i am very new to php and have no idea of javascript, have done all js work using tutorials.Also tried to use existing solutions from stackoverflow, but no success !
What i am trying to do is trying to update database values using 'submit' button on the basis of values called from 'select option'.
Problem is that no data is getting updated in DB after i click on submit button (on viewtest.php), I have also tried to add the 'update.php' to form action.
Here's the screenshot of viewtest.php
here's my code:
viewtest.php
<form method="POST" action="">
<table border="1px"><tr> <td>
<select required name="tstname" id="test" onChange="fetch_ques()">
<option> Select Test Name</option>
<?php
$res=mysqli_query($connection,"select * from test_detail");
while($row=mysqli_fetch_array($res))
{
?>
<option value="<?php echo $row["test_name"]; ?>">
<?php echo
$row["test_name"]; echo' - - ['. $row['test_category'].']'; ?> </option>
<?php
}
?>
</select>
</div>
<td>
<div id="qnos"><select></select></div></td></tr>
<tr><td colspan="2" align="center">
<input type="submit" name="btnSubmit" id="vform" value="Update Question"> </td></tr>
</form>
</table>
<div id="ques"></div>
<script type="text/javascript">
function fetch_ques()
{
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","getq.php?
tstnm="+document.getElementById("test").value,false); // function id
xmlhttp.send(null);
document.getElementById("qnos").innerHTML=xmlhttp.responseText; // div id
}
function display_ques()
{
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","displayq.php?
qnos="+document.getElementById("quesdd").value,false);
xmlhttp.send(null);
document.getElementById("ques").innerHTML=xmlhttp.responseText;
}
</script>
<script type="text/javascript">
$(document).ready(function()
{
$("#vform").submit(); (function()
// document.getElementById("vform").submit();(function()
{
location.href='update.php?
qno='+$("#quesno").val()+'&qn='+$("#ques").val()+'&c1='+$("#a1").val()+'&c2='+$
("#a2").val()+'&c3'+$("#a3").val()+'&c4='+$("#a4").val()+'&cr='+$("#cr").val();
});
});
</script>
<?php
if(isset($_GET['st']) && $_GET['st'] !== "")
{
echo"updated";
}
else echo "Error: ".mysqli_errno();
?>
displayq.php //Used to fetch data in select menu
<?php
include '../connect.php';
$quesno=$_GET["qnos"];
if($quesno!="")
{
$qry=mysqli_query($connection,"select * from quesadd where quesid='$quesno'");
echo "<table name='ques'>";
while($ftc=mysqli_fetch_array($qry))
{
?>
<form method="POST" action="">
<table name="ques">
<tr><td align="center" colspan="2"> <!-- // Comment <input type="submit" name="submit" id="upq" value="Update Question">--></td> </tr>
<tr> <td align="center"> <b> Question : <input type="text" id="quesno" value="<?php echo $ftc["quesid"];?>" disabled></b></td>
<td> <textarea name="ques" id="ques" cols="100" rows="3" placeholder="Please Input The Question Here !"> <?php echo $ftc['ques'];?></textarea> </td> </tr>
<tr> <td width="25%" align="center" colspan="2"> <br> <b>Choices</b> </td> </tr>
<tr> <td align="center" colspan="2"><b>1.</b> <input type="text" id="a1" name="a1" value="<?php echo $ftc['c1'];?>"> </td> </tr>
<tr> <td align="center" colspan="2"><b>2.</b> <input type="text" id="a2" size="20px" name="a2" value="<?php echo $ftc['c2'];?>"> </td> </tr>
<tr> <td align="center" colspan="2"><b>3.</b> <input type="text" id="a3" size="20px" name="a3" value="<?php echo $ftc['c3'];?>"> </td> </tr>
<tr> <td align="center" colspan="2"><b>4.</b> <input type="text" id="a4" size="20px" name="a4" value="<?php echo $ftc['c4'];?>"> </td> </tr>
<tr> <td align="center" colspan="2"><b><font color="maroon">Correct Answer</font></b> <input type="text" size="20px" id="cr" name="correct" value="<?php echo $ftc['answer'];?>"> </td> </tr>
</table>
</form>
<?php
}
echo "</table>";
}
?>
</tr> </td>
</table>
</form>
update.php //Used to update question by getting values from 'viewtest.php'
<?php
include '../connect.php';
$qn=$_GET['qno'];
$qname=$GET['qn'];
$a1=$GET['c1'];
$a2=$GET['c2'];
$a3=$GET['c3'];
$a4=$GET['c4'];
$acr=$GET['cr'];
$update=mysqli_query($connection,"update quesadd SET ques='$qname',
c1='$a1',c2='$a2',c3='$a3',c4='$a4',answer='$acr' where quesid='$qn' ");
if($update==true)
{
header('location:viewtest.php?st=true');
}
?>

I can see multiple problems, don't know if all the problems will go away but it will help.
$("#vform").submit(); (function()
The line above says if a <form> with the id="vform" has been submitted, execute this function. Your form does not have an id so it will never trigger. One other problem is that the function is not part of the trigger. It should be something like
$("#vform").submit(function()
The complete code could look like:
<script type="text/javascript">
$(document).ready(function(){
$("#vform").submit(function(e){
e.preventDefault();
location.href='update.php?qno='+$("#quesno").val()+'&qn='+$("#ques").val()+'&c1='+$("#a1").val()+'&c2='+$("#a2").val()+'&c3'+$("#a3").val()+'&c4='+$("#a4").val()+'&cr='+$("#cr").val();
return false;
});
});
</script>

Use AJAX to submit your form and refresh/redirect the page with javascript.
viewtest.php
<?php
include '../connect.php';
?>
<form method="POST" action="">
<table border="1px">
<tr>
<td>
<select required name="tstname" onchange="display_ques()" id="test">
<option> Select Test Name</option>
<?php
$res = mysqli_query($connection, "select * from test_detail");
while ($row = mysqli_fetch_array($res)) {
?>
<option value="<?php echo $row["test_id"]; ?>">
<?php echo
$row["test_name"];
echo ' - - [' . $row['test_category'] . ']'; ?> </option>
<?php
}
?>
</select>
</td>
<td>
<div id="qnos">
<select>
<!-- put code here for showing question id/number -->
</select></div>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="btnSubmit" id="vform" value="Update Question"></td>
</tr>
</table>
</form>
<div id="ques"></div>
<h1 id="status"></h1>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
function display_ques() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("ques").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "displayq.php?qnos=" + document.getElementById("test").value, true);
xmlhttp.send(null);
}
function fetch_ques() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "getq.php?tstnm = " + document.getElementById("test").value, false); // function id
xmlhttp.send(null);
document.getElementById("qnos").innerHTML = xmlhttp.responseText; // div id
}
$(document).ready(function () {
$('#vform').on('click', function (e) {
e.preventDefault();
var data = $('form#update').serialize();
$.post('update.php', data, function (response) {
// response is the data returned from php echo json_encode(['results' => true/false]), from update.php
var res = JSON.parse(response);
if (res.results == true) {
$('#status').html('Data was updated');
} else {
$('#status').html('Error occured while trying to update data.');
console.log(response);
}
});
});
});
</script>
I have given your form and id to be able to serialize it using jQuery and I have also added a hidden input to hold the id of the current question.
displayq.php
<?php
include '../connect.php';
$quesno = $_GET["qnos"];
if($quesno != "") : ?>
<form id="update" method="POST" action=""> <!-- added an id to the form -->
<table name="ques">
<?php
$qry = mysqli_query($connection,"select * from quesadd where quesid='$quesno'");
while($ftc = mysqli_fetch_array($qry)) : ?>
<tr><td align="center" colspan="2"> <!-- // Comment <input type="submit" name="submit" id="upq" value="Update Question">--></td> </tr>
<tr> <td align="center"> <b> Question : <input type="text" id="quesno" value="<?php echo $ftc["quesid"];?>" disabled></b></td>
<td> <textarea name="ques" id="ques" cols="100" rows="3" placeholder="Please Input The Question Here !"> <?php echo $ftc['ques'];?></textarea> </td> </tr>
<!-- added this hidden input to hold the question number -->
<input type="text" id="quesno" name="quesno" value="<?php echo $ftc["quesid"];?>" hidden>
<tr> <td width="25%" align="center" colspan="2"> <br> <b>Choices</b> </td> </tr>
<tr> <td align="center" colspan="2"><b>1.</b> <input type="text" id="a1" name="a1" value="<?php echo $ftc['c1'];?>"> </td> </tr>
<tr> <td align="center" colspan="2"><b>2.</b> <input type="text" id="a2" size="20px" name="a2" value="<?php echo $ftc['c2'];?>"> </td> </tr>
<tr> <td align="center" colspan="2"><b>3.</b> <input type="text" id="a3" size="20px" name="a3" value="<?php echo $ftc['c3'];?>"> </td> </tr>
<tr> <td align="center" colspan="2"><b>4.</b> <input type="text" id="a4" size="20px" name="a4" value="<?php echo $ftc['c4'];?>"> </td> </tr>
<tr> <td align="center" colspan="2"><b><font color="maroon">Correct Answer</font></b> <input type="text" size="20px" id="cr" name="correct" value="<?php echo $ftc['answer'];?>"> </td> </tr>
<?php endwhile; ?>
</table>
</form>
<?php endif; ?>
Then in your update.php you can access the values using $_POST
<?php
include '../connect.php';
$qn = trim($_POST['quesno']);
$qname = trim($_POST['ques']);
$a1 = trim($_POST['a1']);
$a2 = trim($_POST['a2']);
$a3 = trim($_POST['a3']);
$a4 = trim($_POST['a4']);
$acr = trim($_POST['correct']);
$sql = "update quesadd SET ques='$qname', c1='$a1',c2='$a2',c3='$a3',c4='$a4',answer='$acr' where quesid='$qn'";
if (mysqli_query($connection, $sql)) {
// returning data to jQuery, as response
// jQuery will parse this as json {results: true}
echo json_encode(['results' => true]);
} else {
// returning data to jQuery, as response
// jQuery will parse this as json {results: false}
echo json_encode(['results' => false]);
}

javascript won't run inside php

I have the following php page,
which has a dropdown box and when the value closed is chosen it is meant to open a text box.
I have embdedded the javascript inside php but for some reason it is not working.
<?php
require_once "/var/www/users/user.php";
$user = new CHUser(2);
require_once "/var/www/template/template.php";
$template = new CHTemplate();
require_once "/var/www/ENGINEER/DisplayWIPOnLocation.php";
$BundleProgress= new CHWIPProgress();
$todays_date = date('Y-m-d H:i:s');
$ID = $_GET['id'];
//$ID = $_POST['ID'];
$ChurchNo = $_POST['ChurchNo'];
$SerialNo = $_POST['SerialNo'];
$MachineType= $_POST['MachineType'];
$Model = $_POST['Model'];
$Location= $_POST['Location'];
$Priority = $_POST['Priority'];
$Issue = $_POST['Issue'];
$Status = $_POST['Status'];
$Call_Opened = $_POST['Call_Opened'];
//echo "test component $Component";
$wip = $BundleProgress-> ListTicketById($_GET['id']);
foreach($wip as $x) {
$ChurchNo = $x['ChurchNo'];
$SerialNo = $x['SerialNo'];
$MachineType= $x['MachineType'];
$Model = $x['Model'];
$Location= $x['Location'];
$Priority = $x['Priority'];
$Issue = $x['Issue'];
$Status = $x['Status'];
$Call_Opened = $x['Call_Opened'];
$Operator = $x['Operator'];
$Engineer = $x['Engineer'];
$Notes = $x['Notes'];
}
$content .="
<html>
<head>
<title></title>
<script language='JavaScript' type='text/javascript'>
function ShowTB(obj,id){
txt=obj.options[obj.selectedIndex].text;
if (txt.match('Pending')){
document.getElementById(id).style.visibility='hidden';
}
if (txt.match('Closed')){
document.getElementById(id).style.visibility='visible';
}
}
</script>
</head>
<body>";
$content .="
<p><b>You are changing the status of call no: $ID </b></p>
<table>
<tr><td> <b>ChurchNo</b>:$ChurchNo </td> </tr>
<tr><td> <b>SerialNo</b>: $SerialNo</td> </tr>
<tr><td> <b>MachineType</b>: $MachineType</td> </tr>
<tr><td> <b>Model</b>: $Model </td> </tr>
<tr><td> <b>Location</b>:$Location </td> </tr>
<tr><td> <b>Priority</b>: $Priority </td> </tr>
<tr><td> <b>Issue</b>: $Issue </td> </tr>
<tr><td> <b>Status</b>: $Status </td> </tr>
<tr><td> <b>Date Opened</b>:$Call_Opened </td> </tr>
<tr><td> <b>Operator</b>:$Operator </td> </tr>
<tr><td> <b>Logged By</b>:$Engineer </td> </tr>
</table>
</br>
</br>
<table>
<form method='post' action='UpdateTicket2.php'>
<tr><td><b>Assign to: </b></td> <td> <select name='Assignedto'>
<option value='David'>David</option>
<option value='Ashley'>Ashley</option>
<option value='Pete'>Pete</option>
<option value='Mark'>Mark</option>
<option value='Rory'>Rory</option>
</select>
</td>
</tr>
";
$content .="
<tr><td><b>Status </b></td>
<td>
<select onchange=\"ShowTB(this,'Date');\" >
<option >Open</option>
<option >Closed</option>
<option >Pending</option>
</select>
<br>
<input id='Date' style='visibility:hidden;' >
</td>
<tr> ";
$content .="
<tr><td><b>Notes:</b></td><td><textarea name='Notes' cols='25' rows='5'>
$Notes
</textarea></td></tr>
<tr><td><b>Current Time: $todays_date</b></td></tr>
<tr><td><input type='hidden' name='ID' id='ID' value='$ID' /></td></tr>
<tr><td><input type='submit' name ='add'/></td></tr>
</form>
</table>
";
$content .="
</br>
<p> Warning.... </p>
<form action='delete.php' method='post'>
<input type='submit' value='Delete Record' />
<p><input type='hidden' name='ID' id='ID' value='$ID' /></p>
</form>";
$template->SetTag("content", $content);
echo $template->Display();
?>

For testing purposes:
comment all until your program begin in
/*
*/
$content .="
then change:
$template->SetTag("content", $content);
echo $template->Display();
for:
echo $content;
finally, inside the script tags write:
alert('Javascript is working');
I made it and got the program running. You problem is in the $template class, not in this code.
Cheers,