function some_name() {
if (document.getElementById('first').checked)
document.getElementById('second').checked=true;
else
document.getElementById('second').checked=false;
}
<?php
$idno = $vt->veriTemizle($_GET['idno']);
$rest = $vt->sqlSorgu("Select * From rest ");
foreach($vt->fetch_assocAll() as $rest){
echo '
<input type="checkbox" name="option1[]" onclick="some_name();" id="first" value="'.$rest["price"].'" />
<input type="hidden" name="extra[]" onclick="some_name();" id="second" value="'.$rest["productname"].'-'.$rest["price"].' " />
';
}
?>
is a code I have been trying to do for a long time.
I have to select another one when the checkboxes listed above are clicked.
The first record listed is working, others are not
You can generate IDs for all checkboxes like and solve the problem like this
<script>
function some_name( i) {
console.log(i);
if (document.getElementById('first'+i).checked)
document.getElementById('second'+i).checked=true;
else
document.getElementById('second'+i).checked=false;
}
</script>
<?php
$row['price'] = 100;
$row['productname'] = "ABC";
$arr[] = $row;
$row['price'] = 1001;
$row['productname'] = "asd";
$arr[] = $row;
$row['price'] = 1002;
$row['productname'] = "ABC2";
$arr[] = $row;
$row['price'] = 1003;
$row['productname'] = "ABC1";
$arr[] = $row;
$i=0;
foreach($arr as $rest){
echo '
<input type="checkbox" name="option1[]" onclick="some_name('.$i.');" id="first'.$i.'" value="'.$rest["price"].'" />
<input type="checkbox" name="extra[]" onclick="some_name('.$i.');" id="second'.$i.'" value="'.$rest["productname"].'-'.$rest["price"].' " />
';
$i++;
}
?>
Related
My Code is:
<form method="POST" action="" style="margin-top: 30px;">
<div class="form-group" style="display: inline-block;">
<label for="Name" class="label-control" >Device Price</label>
<input type="text" name="price" class="form-control">
</div>
<div class="row" style="margin-bottom: 20px;">
<div class="col-md-3">
<?php
$r = 0;
$sql = "SELECT * FROM Subscribes ";
$result = $db->query($sql);
while ($row = $result->fetch_assoc()) {
if ($r == 5) {
echo "</div><div class='col-md-3'>";
$r = 0;
}
$r++;
$p = $row['price'];
echo "<label style='font-size: 16px; margin: 20px;'>";
echo "<input name='checkbox[]' type='checkbox' ";
echo "value=" . $p . " >" . $row['sub_name'];
if ($p == 0) {
echo "<label style='color:#f00'> Free </label>";
}
echo "</label>";
}
?>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group" style="margin-left: 35%;">
<button class="btn btn-info" name="sum" style="font-size: 24px;">TOTAL</button>
<label style="margin-left: 6%; font-size: 24px;">
<?php
if (isset($_POST['sum'])) {
$price = $_POST['price'];
$price = $price + $price * .52;
$total = $price;
if (!empty($_POST['checkbox'])) {
foreach ($_POST['checkbox'] as $value) {
$total = $total + $value;
}
}
echo $total;
}
?></label>
</div>
</div>
</div>
You can put a checked property to a checkbox:<input type="checkbox" checked>"
In your case, you have to check the POST data in the first block aswell and add the checked property to checkboxes that have been submitted.
echo "<input name='checkbox[]' type='checkbox' ";
echo "value=" . $p;
//if value is in the array of submitted checkboxes, add the checked property
if(array_search($p ,$_POST["checkbox"]) >= 0) echo "checked";
echo ">" . $row['sub_name'];
You can almost just check posted value to see if checked[$r] is on, but in the case where the user leaves some of the boxes unchecked, those don't get posted.
So, you need a way to identify each checkbox. You could do this by naming them like this when you echo them:
$id = $row['id']; // or whatever your id is
echo "<input name='checkbox[$id][]' type='checkbox' value=$p >"
Now, when the user submits the form, you know exactly which checkboxes should be checked. So you can simply add the checked attributed when you render them:
echo "<input name='checkbox[$id][]' type='checkbox' value=$p $checked>"
So altogether:
<?php
$r = 0;
$sql = "SELECT * FROM Subscribes ";
$result = $db->query($sql);
while ($row = $result->fetch_assoc()) {
if ($r == 5) {
echo "</div><div class='col-md-3'>";
$r = 0;
}
$r++;
$p = $row['price'];
$id = $row['id'];
$checked = null;
if(array_key_exists('checkbox', $_POST) && array_key_exists($id, $_POST['checkbox']){
$checked = "checked";
}
echo "<label style='font-size: 16px; margin: 20px;'>";
echo "<input name='checkbox[$id][]' type='checkbox' value=$p $checked>" . $row['sub_name'];
if ($p == 0) {
echo "<label style='color:#f00'> Free </label>";
}
echo "</label>";
}
?>
I have a multi-page form for customizing some sort of product. The radio buttons are dynamically generated based on the values from the database. What I want to happen is prevent the form from shifting to the next page if the required radio button groups doesn't have a selected value. I have tried JQuery validation plugin:
$('#customize-form').validate({ // initialize plugin
ignore:":not(:visible)",
rules: {
shape: { required:true },
size: { required:true },
tier: { required:true },
flavors: { required:true },
}
});
Now this part here shows the next page. Works perfectly except the fact that valid() seems to always return true and it goes to the next page.
// Next button click action
btnnext.click(function(){
if(current < widget.length){
// Check validation
if($("#customize-form").valid())
{
widget.show();
widget.not(':eq('+(current++)+')').hide();
}
}
hideButtons(current); //hides buttons which are not needed such as the submit button if it's not the end of the form
})
Here is how I generate the radio buttons dynamically:
<div id=step1 class='options step'>
<section class=section-title>Shape</section>
<?php
include('connect_db.php');
$query = $dbc->prepare("SELECT * FROM product_shape_t");
$query->execute();
$result = $query->get_result();
$total = mysqli_num_rows($result);
while($row = mysqli_fetch_array($result, MYSQL_ASSOC)){
echo '<ul class="radios">';
echo '<li>';
echo '<input type="radio" name="shape" id="'.$row['ShapeName'].'">';
echo '<label for="'.$row['ShapeName'].'">'.$row['ShapeName'].'</label>';
echo '</li>';
echo '</ul>';
}
?>
</div>
Here is the full html:
<html>
<head>
</head>
<body>
<form method=POST id=customize-form action ="">
<div id=step1 class='options step'>
<?php
include('connect_db.php');
$query = $dbc->prepare("SELECT MAX(CustomizedProductID) as 'Max ID' FROM customized_products_t");
$query->execute();
$result = $query->get_result();
$total = mysqli_num_rows($result);
while($row = mysqli_fetch_array($result, MYSQL_ASSOC)){
$custom_id = $row['Max ID'] + 1;
echo "<label class=custom_id style='display:none'>".$custom_id."</label>";
}
?>
<section class=section-title>Shape</section>
<?php
include('connect_db.php');
$query = $dbc->prepare("SELECT * FROM product_shape_t");
$query->execute();
$result = $query->get_result();
$total = mysqli_num_rows($result);
while($row = mysqli_fetch_array($result, MYSQL_ASSOC)){
echo '<ul class="radios">';
echo '<li>';
echo '<input type="radio" name="shape" id="'.$row['ShapeName'].'">';
echo '<label for="'.$row['ShapeName'].'">'.$row['ShapeName'].'</label>';
echo '</li>';
echo '</ul>';
}
?>
<section class=section-title>Size</section>
<?php
include('connect_db.php');
$query = $dbc->prepare("SELECT * FROM product_size_t");
$query->execute();
$result = $query->get_result();
$total = mysqli_num_rows($result);
while($row = mysqli_fetch_array($result, MYSQL_ASSOC)){
echo '<ul class="radios">';
echo '<li>';
echo '<input type="radio" name="size" id="'.$row['SizeName'].'">';
echo '<label for="'.$row['SizeName'].'">'.$row['SizeName'].'</label><br />';
echo '<label for="'.$row['SizeDesc'].'">'.$row['SizeDesc'].'</label>';
echo '</li>';
echo '</ul>';
}
?>
<section class=section-title>Tier</section>
<?php
include('connect_db.php');
$query = $dbc->prepare("SELECT * FROM product_tier_t");
$query->execute();
$result = $query->get_result();
$total = mysqli_num_rows($result);
while($row = mysqli_fetch_array($result, MYSQL_ASSOC)){
echo '<ul class="radios">';
echo '<li>';
echo '<input type="radio" name="tier" id="'.$row['TierName'].'">';
echo '<label for="'.$row['TierName'].'">'.$row['TierName'].'</label><br />';
echo '</li>';
echo '</ul>';
}
?>
</div>
<div id=step2 class='options step'>
<section class=section-title>Flavor</section>
<?php
include('connect_db.php');
$query = $dbc->prepare("SELECT * FROM product_flavor_t");
$query->execute();
$result = $query->get_result();
$total = mysqli_num_rows($result);
while($row = mysqli_fetch_array($result, MYSQL_ASSOC)){
echo '<ul class="radios">';
echo '<li>';
echo '<input type="checkbox" name="flavors" id="'.$row['FlavorName'].'">';
echo '<label for="'.$row['FlavorName'].'">'.$row['FlavorName'].'</label><br />';
echo '</li>';
echo '</ul>';
}
?>
<section class=section-title>Sides (Optional)</section>
<?php
include('connect_db.php');
$query = $dbc->prepare("SELECT g.IngredientID, g.IngredientsName FROM ingredients_t g JOIN inventory_t i ON g.IngredientID = i.IngredientsID JOIN ingredient_type_t t ON t.IngTypeID = i.IngredientTypeID WHERE t.IngTypeName='sides'");
$query->execute();
$result = $query->get_result();
$total = mysqli_num_rows($result);
while($row = mysqli_fetch_array($result, MYSQL_ASSOC)){
echo '<ul class="radios">';
echo '<li>';
echo '<input type="checkbox" name="ingredients" id="'.$row['IngredientsName'].'">';
echo '<label for="'.$row['IngredientsName'].'">'.$row['IngredientsName'].'</label><br />';
echo '</li>';
echo '</ul>';
}
?>
<section class=section-title>Template (Optional)</section>
<?php include('get_templates.php');?>
</div>
<div id=step3 class='options step'>
<section class=section-title>Image (Optional)</section>
<div class=image-display><img src="" width="100" style="display:none;" /></div>
<?php
echo '<form method=post enctype=multipart/form-data>
<section style="margin-bottom:10px">
<label class="paragraph-font2 full-width">Attach an image:</label>
</section>
<section style="margin-bottom:15px">
<input class="paragraph-font2 full-width" type=file name=uploaded_img id=uploaded_img accept="image/*">
</form>';
?>
</div>
<div id=step4 class='options step'>
<section class=section-title>Writings (Optional)</section>
<?php
echo '<form method=post>
<section class=add-notes>
<textarea id=writings class="lightfields-base lighttxtarea-regular" maxlength="250" placeholder="Do we have to write something on the cake?"></textarea>
</section>
</form>';
?>
<div class=separator-div></div>
<section class=section-title>Additional notes (Optional)</section>
<?php
echo '<form method=post>
<section class=add-notes>
<textarea id=additional class="lightfields-base lighttxtarea-medium" maxlength="999"></textarea>
</section>
</form>';
?>
</div>
<div id=step5 class='options step'>
<section class=section-title>Check your cake</section>
<div id=final_image class=final-image-display><img src="" width="100" style="display:none;" /></div>
<div class=details>
<label><span class=desc>Shape: </span><span id=shape></span></label>
<label><span class=desc>Size: </span><span id=size></span></label>
<label><span class=desc>Flavor: </span><span id=flavor></span></label>
<label><span class=desc>Sides/Mix-ins: </span><span id=sides></span></label>
<label><span class=desc>Writings: </span><span id=write></span></label>
<label><span class=desc>Additional notes: </span><span id=add_notes></span></label>
</div>
</div>
<div class=button-separator>
<label>
<button class='btn btn-info action next'>Next <span class='glyphicon glyphicon-arrow-right'></span></button>
</label>
<label>
<button class='btn btn-info action submit'>Add to cart <span class='glyphicon glyphicon-arrow-right'></span></button>
</label>
<label>
<button class='btn btn-info action back'><span class='glyphicon glyphicon-arrow-left'></span> Back</button>
</label>
</div>
</form>
</body>
</html>
<script>
$(document).ready(function(){
var current = 1;
widget = $(".step");
btnnext = $(".next");
btnback = $(".back");
btnsubmit = $(".submit");
// Init buttons and UI
widget.not(':eq(0)').hide();
hideButtons(current);
$('#customize-form').validate({ // initialize plugin
ignore:":not(:visible)",
rules: {
shape: { required:true },
size: { required:true },
tier: { required:true },
flavors: { required:true },
}
});
// Next button click action
btnnext.click(function(){
if(current < widget.length){
// Check validation
if($("#customize-form").valid())
{
widget.show();
widget.not(':eq('+(current++)+')').hide();
$('#step'+(current-1)).removeClass('active');
$('#step'+(current-1)).addClass('complete');
$('#step'+current).removeClass('disabled');
$('#step'+current).addClass('active');
//This part gets the values chosen to be displayed on page 5
/*if(current == 5)
{
var shape = $('input[type=radio][name=shape]:checked').attr('id');
var size = $('input[type=radio][name=size]:checked').attr('id');
var tier = $('input[type=radio][name=tier]:checked').attr('id');
var flavors = [];
$("input[name=flavors]:checked").each(function()
{
flavors.push($(this).attr('id'));
});
var sides = [];
$("input[name=ingredients]:checked").each(function()
{
sides.push($(this).attr('id'));
});
var writings = $(this).find('#writings').val();
var additional = $(this).find('#additional').val();
document.getElementById("shape").innerHTML=shape;
document.getElementById("size").innerHTML=size;
var flav;
for (var i=0; i<flavors.length; i++) {
flav += flavors[i];
}
document.getElementById("flavor").innerHTML=flavors;
document.getElementById("sides").innerHTML=sides;
document.getElementById("write").innerHTML=writings;
document.getElementById("add_notes").innerHTML=additional;
}*/
}
}
hideButtons(current);
})
// Back button click action
btnback.click(function(){
if(current > 1){
current = current - 2;
if(current < widget.length){
widget.show();
widget.not(':eq('+(current++)+')').hide();
//This part adjusts the steps bar
/*$('#step'+current).removeClass('complete');
$('#step'+current).addClass('active');
$('#step'+(current+1)).removeClass('active');
$('#step'+(current+1)).addClass('disabled');*/
}
}
hideButtons(current);
})
btnsubmit.click(function(){
if($("#customize-form").valid())
{
var id = $(this).find('.custom_id').text();
var quantity = 1;
window.location.href = "add_custom_to_cart.php?id=" + id + "&quantity=" + quantity;
return false;
}
})
$('#uploaded_img').change( function(event) {
$(".image-display img").fadeIn("fast").attr('src',URL.createObjectURL(event.target.files[0]));
var image_name = $(this).attr('src',URL.createObjectURL(event.target.files[0]));
document.getElementById('final_image').src = image_name;
});
$('.select-template').on('click', function(e){
var temp_id = $('.temp_id').text();
$.ajax({
type: 'POST',
url: 'add_selected_temp.php',
data: {
template: temp_id
}
});
});
$().maxlength();
});
// Hide buttons according to the current step
hideButtons = function(current){
var limit = parseInt(widget.length);
$(".action").hide();
if(current < limit) btnnext.show();
if(current > 1) btnback.show();
if (current == limit) {
btnnext.hide();
btnsubmit.show();
}
}
</script>
Am I doing something wrong or should I use an alternative solution? Thank you.
I have solved the problem by making a custom validation. There seems to be a problem with my markup that's why JQuery validation plugin won't apply. Here is my custom validation.
btnnext.click(function(){
if(current < widget.length){
// Check validation
var empty = true;
if(current == 1)
{
if($("input[name='shape']:checked").val() &&
$("input[name='tier']:checked").val() &&
$("input[name='tier']:checked").val())
{
empty = false;
}
}
if(current == 2)
{
if($("input[name='flavors']:checked").val())
{
empty = false;
}
}
if(current == 3)
{
if(document.getElementById("uploaded_img").files.length != 0)
{
empty = false;
}
}
if(current == 4)
{
if($("#writings").val())
{
empty = false;
}
}
if(current == 5)
{
empty = false;
}
if(!empty)
{
widget.show();
widget.not(':eq('+(current++)+')').hide();
//only gets values to be display on page 5 please ignore
/*if(current == 5)
{
var shape = $('input[type=radio][name=shape]:checked').attr('id');
var size = $('input[type=radio][name=size]:checked').attr('id');
var tier = $('input[type=radio][name=tier]:checked').attr('id');
var flavors = [];
$("input[name=flavors]:checked").each(function()
{
flavors.push($(this).attr('id'));
});
var sides = [];
$("input[name=ingredients]:checked").each(function()
{
sides.push($(this).attr('id'));
});
var writings = $("#writings").val()
var additional =$("#additional").val();
document.getElementById("shape").innerHTML=shape;
document.getElementById("size").innerHTML=size;
var flav;
for (var i=0; i<flavors.length; i++) {
flav += flavors[i];
}
document.getElementById("flavor").innerHTML=flavors;
document.getElementById("sides").innerHTML=sides;
document.getElementById("write").innerHTML=writings;
document.getElementById("add_notes").innerHTML=additional;
}*/
}
}
hideButtons(current);
})
I want to give credit to OffirPe'er for all the help and heads up about possible markup conflict.
I have search everywhere and learn that input tag can have an array name attribute like writing name="mark_delete[ ]" as array PHP post by form. But what I'm struggling of is the javascript part (I only use simple javascript anyway) to work.
I have 3 input name: prize[ ], quantity[ ], total[ ];
I want the total get the prize times the quantity.
The prize is fixed
The quantity is where the user's input
The total is read only.
Using onchange in input tag with array name
The 2 code show below work successfully in PHP:
Sample code 1 (using foreach): *You may skip this code
<?php
//delete_account.php
session_start();
if (isset($_SESSION['login_user'])) {
include("dbconn.php");
if (isset($_POST['delete']) && $_POST['mark_delete'] > 0) {
$mark_delete = $_POST['mark_delete'];
foreach ($mark_delete as $x) {
$sql = "UPDATE account SET status = 0 WHERE id_number = '$x'"; //status change to 0 as inactive instead of deleting the row data
mysqli_query($conn, $sql);
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Delete Account</title>
</head>
<body>
<h1>Restaurant Management Information System</h1>
<h3>Mark the accounts that you want to delete and press the delete button...</h3>
<div>
<button>Menu</button>
<button>Add New Item</button>
<button>View Activity Log</button>
<button>Logout</button>
</div>
<div>
<form action="delete_account.php" method="post">
<?php
$sql = "SELECT * FROM account ORDER BY last_name, first_name";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
echo "<ol>";
while ($row = mysqli_fetch_assoc($result)) {
if ($row['status'] == 1) { //display account with status value of 1 as active
echo "<li>";
echo "<input type='checkbox' name='mark_delete[]' value='" . $row['id_number'] . "' />";
echo $row['last_name'] . ", " . $row['first_name'] . "</li>";
}
}
echo "</ol>";
}
else
echo "No account existed...";
?>
<input type="submit" name="delete" value="Delete" />
</form>
</div>
</body>
</html>
<?php
}
else {
header("Location: home.php");
exit();
}
mysqli_close($conn);
?>
Sample code 2 (using while / mysqli_fetch_assoc()): *You may skip this code
<?php
//items.php
session_start();
if (isset($_SESSION['login_user'])) {
include("dbconn.php");
if (isset($_POST['add_stocks'])) {
$amount_add = $_POST['amount_add'];
$sql = "SELECT item_id, stock FROM items";
$result = mysqli_query($conn, $sql);
if (!empty($amount_add)) {
$x = 0;
while ($row = mysqli_fetch_assoc($result)) {
if (is_int((int)$amount_add[$x])) {
$stock = $row['stock'] + $amount_add[$x];
$sql = "UPDATE items SET stock = '$stock' WHERE item_id = '$row[item_id]'";
mysqli_query($conn, $sql);
}
$x++;
}
}
}
else if (isset($_POST['add_new'])) {
$stock = $_POST['stock'];
if (empty($stock))
$stock = 0;
if (is_int((int)$stock)) {
$sql = "INSERT INTO items (item_name, prize, stock) VALUES ('$_POST[item_name]', '$_POST[prize]', '$stock')";
mysqli_query($conn, $sql);
}
}
else if (isset($_POST['item_delete'])) {
$item_delete = $_POST['item_delete'];
$x = 0;
while (!isset($item_delete[$x]))
$x++;
$sql = "DELETE FROM items WHERE item_id = '$item_delete[$x]'";
mysqli_query($conn, $sql);
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Add Items</title>
</head>
<body>
<h1>Restaurant Management Information System</h1>
<h3>Restock some items or add a new one...</h3>
<div>
<button>Menu</button>
<button>View Activity Log</button>
<button>Logout</button>
<button>Delete an Account</button>
</div>
<div>
<form action="items.php" method="post">
<div>
<input type="submit" name="add_stocks" value="Add Stocks" onclick="return confirm('Add new stock. Apply?')" />
</div>
<table border="1">
<?php
$sql = "SELECT * FROM items";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
?>
<tr>
<th>ID</th>
<th>Name</th>
<th>Prize</th>
<th>Stock</th>
<th>Add Stocks</th>
<th>Action</th>
</tr>
<?php
while ($row = mysqli_fetch_assoc($result)) {
echo "<tr>";
echo "<td>" . $row['item_id'] . "</td>";
echo "<td>" . $row['item_name'] . "</td>";
echo "<td>" . $row['prize'] . "</td>";
echo "<td>" . $row['stock'] . "</td>";
echo "<td><input type='text' name='amount_add[]' /></td>";
echo "<td><button type='submit' name='item_delete[]' value='" . $row['item_id'] . "' onclick='return confirm(\"You are about to delete < " . $row['item_name'] . " >. Are you sure?\")' />Delete</button></td>";
echo "</tr>";
}
}
else {
echo "<tr>";
echo "<td>No item existed...</td>";
echo "</tr>";
}
?>
</table>
</form>
<form action="items.php" method="post" id="item_table">
<label>Item Name:</label>
<input type="text" name="item_name" placeholder="Name" required="required" />
<label>Item Prize</label>
<input type="text" name="prize" placeholder="Prize" required="required" />
<label>Stock</label>
<input type="text" name="stock" />
<input type="submit" name="add_new" value="Add New Item" onclick="return confirm('Add new item. Apply?')" />
</form>
</div>
</body>
</html>
<?php
}
else {
header("Location: home.php");
exit();
}
mysqli_close($conn);
?>
The 2 codes above works in PHP posting the < tagname name=" name[ ] >
Now the real code: Image (the Total Prize didn't display, why? Sorry, I'm not really good at javascript)
<?php
session_start();
if (isset($_SESSION['login_user'])) {
include("dbconn.php");
/*{
code here
}*/
?>
<!DOCTYPE html>
<html>
<head>
<title>Order</title>
</head>
<body>
<h1>Restaurant Management Information System</h1>
<h3>Choose an amount of items to stock for order...</h3>
<div>
<button>Add New Item</button>
<button>View Activity Log</button>
<button>Logout</button>
<button>Delete an Account</button>
</div>
<div>
<form action="order.php" method="post">
<table border="1">
<div>
<input type="submit" name="order_items" value="Order" onclick="return confirm('Confirm order?')" />
</div>
<?php
$sql = "SELECT * FROM items";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
?>
<tr>
<th>ID</th>
<th>Name</th>
<th>Prize</th>
<th>Stock</th>
<th>Order Qty</th>
<th>Total Prize</th>
</tr>
<?php
while ($row = mysqli_fetch_assoc($result)) {
echo "<tr>";
echo "<td>" . $row['item_id'] . "</td>";
echo "<td>" . $row['item_name'] . "</td>";
echo "<td>" . $row['prize'] . "<input type='hidden' name='prize[]' value='" . $row['prize'] . "' /></td>";
echo "<td>" . $row['stock'] . "</td>";
echo "<td><input type='text' name='quantity[]' onchange='total_prize()' value='0' /></td>"; //not working!
echo "<td><input type='text' name='total[]' readonly /></td>";
echo "</tr>";
}
}
else
echo "No item to display...";
?>
</table>
</form>
<script>
int x = 0; //initialize var only once
function total_prize() { //this function will be call many times
document.getElementByName("total")[x].value = document.getElementByName("prize")[x].value * document.getElementByName("quantity")[x].value;
x++;
}
</script>
</div>
</body>
</html>
<?php
}
else {
header("Location: home.php");
exit();
}
mysqli_close($conn);
?>
Just focus on:
while ($row = mysqli_fetch_assoc($result)) {
echo "<tr>";
echo "<td>" . $row['item_id'] . "</td>";
echo "<td>" . $row['item_name'] . "</td>";
echo "<td>" . $row['prize'] . "<input type='hidden' name='prize[]' value='" . $row['prize'] . "' /></td>";
echo "<td>" . $row['stock'] . "</td>";
echo "<td><input type='text' name='quantity[]' onchange='total_prize()' value='0' /></td>"; //not working!
echo "<td><input type='text' name='total[]' readonly /></td>";
echo "</tr>";
...
<script>
int x = 0; //initialize var only once
function total_prize() { //this function will be call many times
document.getElementByName("total")[x].value = document.getElementByName("prize")[x].value * document.getElementByName("quantity")[x].value;
x++;
}
</script>
Thank you!
In your code, whenever a quantity[] is changed, it'll update only 1 item, means when you change the value on 4th quantity[](which is quantity[3]), it still get prize[0] and quantity[0]'s value, and then put the compute result to total[0], and if you now want to change that, you will end up change the value to total[1] and so on...
The problem is that you only want to change nth elements that you're currently playing with, but a static number x can't help you with that, as it only able to ref to 1 index, and it changes when function calls, it won't have a desired behavior.
Solution:
Give some index information to your total_prize function, like give it the current index.
function total_prize(index) {
var prize = document.getElementsByName('prize[]').item(index);
var quanity = document.getElementsByName('quanity[]').item(index);
var total = document.getElementsByName('total[]').item(index);
// If any of the dom element not exist, do nothing.
if (prize === null || quanity === null || total === null) {
return;
}
total.value = strToNumber(prize.value) * strToNumber(quanity.value);
}
function strToNumber(str) {
var num = parseInt(str, 10);
return isNaN(num) ? 0 : num;
}
<input type="hidden" name="prize[]" value="1"/>
<input type="hidden" name="prize[]" value="2"/>
<input type="hidden" name="prize[]" value="3"/>
<input type="hidden" name="prize[]" value="4"/>
Q1<input type="text" name="quanity[]" onchange="total_prize(0)"/><br/>
Q2<input type="text" name="quanity[]" onchange="total_prize(1)"/><br/>
Q3<input type="text" name="quanity[]" onchange="total_prize(2)"/><br/>
Q4<input type="text" name="quanity[]" onchange="total_prize(3)"/><br/>
T1<input type="text" name="total[]" /><br/>
T2<input type="text" name="total[]" /><br/>
T3<input type="text" name="total[]" /><br/>
T4<input type="text" name="total[]" /><br/>
Or use the same function without any given info, but loop through all elements and update all of their value each time the function is called.
function total_prize() {
var prizes = document.getElementsByName('prize[]');
var quanities = document.getElementsByName('quanity[]');
var totals = document.getElementsByName('total[]');
// Use the length that is shortest.
var length = Math.min(prizes.length, quanities.length, totals.length);
var index, price, quanity;
for (index = 0; index < length; index += 1) {
if (quanities[index].value.length === 0) {
totals[index].value = '';
} else {
price = strToNumber(prizes[index].value);
quanity = strToNumber(quanities[index].value);
totals[index].value = price * quanity;
}
}
}
function strToNumber(str) {
var num = parseInt(str, 10);
return isNaN(num) ? 0 : num;
}
<input type="hidden" name="prize[]" value="1"/>
<input type="hidden" name="prize[]" value="2"/>
<input type="hidden" name="prize[]" value="3"/>
<input type="hidden" name="prize[]" value="4"/>
Q1<input type="text" name="quanity[]" onchange="total_prize()"/><br/>
Q2<input type="text" name="quanity[]" onchange="total_prize()"/><br/>
Q3<input type="text" name="quanity[]" onchange="total_prize()"/><br/>
Q4<input type="text" name="quanity[]" onchange="total_prize()"/><br/>
T1<input type="text" name="total[]" /><br/>
T2<input type="text" name="total[]" /><br/>
T3<input type="text" name="total[]" /><br/>
T4<input type="text" name="total[]" /><br/>
Here is an image of what I'm trying to accomplish -
Example of my Database Table -
My goal is to get a similar product to the product that is currently displaying without refreshing the page. I am trying to find similar products is by using check boxes.
I first got the id using $_GET['id'] which should be equal to one of the values in my table.
I then used PDO Fetch to get the product name, brand, quanity and price of that particular id and store it as a string.
What I need help with is using JQuery/AJAX to get the checkboxes that are checked and then send the information to a PHP file that would check if filter results match with any data from the table.
How can I do this?
This is my product.php file
<?php
require ('includes/db.php');
$id = $_GET['id']; //Getting the ID in URL. ex products.php?id=12
$stmt = $handler->prepare("SELECT * FROM products WHERE id = '$id' ");
$result = $stmt->execute(array());
$products = $stmt->fetch(PDO::FETCH_ASSOC);
$prod_name = $products['prod_name']; //Product Name
$brand = $products['brand']; //Product Brand
$quantity = $products['quantity']; //Product Quantity
$calories = $products['calories']; //Product Calories
$price = $products['price']; //Product Price
?>
<!DOCTYPE html>
<html>
<head>
<title><?php echo "$brand $prod_name"; ?></title>
</head>
<body>
<h1><?php echo $prod_name; ?></h1>
<br />
<p>Brand = <?php echo " $brand"; ?></p>
<p>Quantity = <?php echo " $quantity"; ?></p>
<p>Calories = <?php echo " $calories"; ?></p>
<p>Price = <?php echo " $price"; ?></p>
<br />
<p style="text-align: center;">Find Similar Products</p>
<form>
<div class="checkboxes">
<label>
<input name="brand" type="checkbox" value="<?php echo $brand; ?>">
<span>Brand</span> <!--Brand Checkbox-->
</label>
</div>
<div class="checkboxes">
<label>
<input name="quanitity" type="checkbox" value="<?php echo $quantity; ?>">
<span>Quantity</span> <!--Quantity Checkbox-->
</label>
</div>
<div class="checkboxes">
<label>
<input name="calories" type="checkbox" value="<?php echo $calories; ?>">
<span>Calories</span> <!--Calories Checkbox-->
</label>
</div>
<div class="checkboxes">
<label>
<input name="price" type="checkbox" value="<?php echo $price; ?>">
<span>Price</span> <!--Price Checkbox-->
</label>
</div>
</form>
</body>
</html>
I managed to solve this out, glad I didn't give up.
My product.php File
<?php
require ('/db.php');
$id = $_GET['id']; //Getting the ID in URL. ex products.php?id=12
$stmt = $handler->prepare("SELECT * FROM products WHERE id = '$id' ");
$result = $stmt->execute(array());
$products = $stmt->fetch(PDO::FETCH_ASSOC);
$prod_name = $products['prod_name']; //Product Name
$brand = $products['brand']; //Product Brand
$quantity = $products['quantity']; //Product Quantity
$calories = $products['calories']; //Product Calories
$price = $products['price']; //Product Price
?>
<!DOCTYPE html>
<html>
<head>
<title><?php echo "$brand $prod_name"; ?></title>
</head>
<body>
<h1><?php echo $prod_name; ?></h1>
<br />
<p>Brand = <?php echo " $brand"; ?></p>
<p>Quantity = <?php echo " $quantity"; ?></p>
<p>Calories = <?php echo " $calories"; ?></p>
<p>Price = <?php echo " $price"; ?></p>
<br />
<p style="text-align: center;">Find Similar Products</p>
<form method="post" action="">
<div class="checkboxes">
<label>
<input name="brand" type="checkbox" value="<?php echo $brand; ?>">
<span>Brand</span> <!--Brand Checkbox-->
</label>
</div>
<div class="checkboxes">
<label>
<input name="quanitity" type="checkbox" value="<?php echo $quantity; ?>">
<span>Quantity</span> <!--Quantity Checkbox-->
</label>
</div>
<div class="checkboxes">
<label>
<input name="calories" type="checkbox" value="<?php echo $calories; ?>">
<span>Calories</span> <!--Calories Checkbox-->
</label>
</div>
<div class="checkboxes">
<label>
<input name="price" type="checkbox" value="<?php echo $price; ?>">
<span>Price</span> <!--Price Checkbox-->
</label>
</div>
</form>
<div class="filter_container">
<div style="clear:both;"></div>
</div>
<script type="text/javascript" src="/js/filter.js"></script>
<input name="prod_name" value="<?php echo $prod_name ?>" style="display:none;"/>
<!--Hidden product name-->
</body>
</html>
Here is my JS File
$(document).ready(function() {
function showValues() {
var brand;
var quantity;
var calories;
var price;
//Gets product name
var prod_name = $('input[name="prod_name"]').val();
//Gets brand
if($('input[name="brand"]').is(':checked'))
{brand = $('input[name="brand"]').val();} else {brand = ""}
//Gets quantity
if($('input[name="quantity"]').is(':checked'))
{quantity = $('input[name="quantity"]').val();} else {quantity = ""}
//Gets calories
if($('input[name="calories"]').is(':checked'))
{calories = $('input[name="calories"]').val();} else {calories = ""}
//Gets price
if($('input[name="price"]').is(':checked'))
{price = $('input[name="price"]').val();} else {price = ""}
$.ajax({
type: "POST",
url: "/query.php",
data: {'brand':brand, 'quantity':quantity, 'calories':calories, 'prod_name':prod_name},
cache: false,
success: function(data){
$('.filter_container').html(data)
}
});
}
//Call function when checkbox is clicked
$("input[type='checkbox']").on( "click", showValues );
//Remove checked when checkbox is checked
$(".checkboxes").click(function(){
$(this).removeAttr('checked');
showValues();
});
});
Here is my PHP File
<?php
include('/db.php');
$prod_name = $_POST['prod_name'];
$Cbrand = $_POST['brand'];
$Cquantity = $_POST['quantity'];
$Ccalories = $_POST['calories'];
$Cprice = $_POST['price'];
if(!empty($Cbrand))
{
$data1 = "brand = '$Cbrand' AND";
}else{
$data1 = "";
}
if(!empty($Cquantity))
{
$data2 = "quantity = '$Cquantity' AND";
}else{
$data2 = "";
}
if(!empty($Ccalories))
{
$data3 = "calories = '$Ccalories' AND";
}else{
$data3 = "";
}
if(!empty($Cprice))
{
$data4 = "price = '$Cprice'";
}else{
$data4 = "";
}
$main_string = "WHERE $data1 $data2 $data3 $data4"; //All details
$stringAnd = "AND"; //And
$main_string = trim($main_string); //Remove whitespaces from the beginning and end of the main string
$endAnd = substr($main_string, -3); //Gets the AND at the end
if($stringAnd == $endAnd)
{
$main_string = substr($main_string, 0, -3);
}else if($main_string == "WHERE"){
$main_string = "";
}
else{
$main_string = "WHERE $data1 $data2 $data3 $data4";
}
if($main_string == ""){ //Doesn't show all the products
}else{
$sql = "SELECT COUNT(*) FROM products $main_string";
if ($res = $handler->query($sql)) {
/* Check the number of rows that match the SELECT statement */
if ($res->fetchColumn() > 0) {
$sql = "SELECT * FROM products $main_string";
foreach ($handler->query($sql) as $pro) {
if(($pro['prod_name'] == $prod_name) && ($res->fetchColumn() < 2))
{
//The product currently being displayed is blank when using the filter
}
else{
?>
<!------------------------------------------------------------------------------------------------------------------------------------------------->
<div class="form-result">
<td><?=strtoupper($pro['brand']) + " " + strtoupper($pro['prod_name']); ?></td>
</div>
<!------------------------------------------------------------------------------------------------------------------------------------------------->
<?php
}
}
} /* No rows matched -- do something else */
else {
?>
<div align="center"><h2 style="font-family:'Arial Black', Gadget, sans-serif;font-size:30px;color:#0099FF;">No Results with this filter</h2></div>
<?php
}
}
}
$handler = null;
$res = null;
?>
I have form 1st page(test.php) as follows
<form method="post" action="newtest.php">
<input name="product[]" type="checkbox" value="1" <?php if(in_array("1", $session_products)) echo "checked='checked'"; ?> alt="1607.00" />
<input name="product[]" type="checkbox" value="2" <?php if(in_array("2", $session_products)) echo "checked='checked'"; ?> alt="1848.00" />
<input name="product[]" type="checkbox" value="3" <?php if(in_array("3", $session_products)) echo "checked='checked'"; ?> alt="180.00" />
<input name="product[]" type="checkbox" value="4" <?php if(in_array("4", $session_products)) echo "checked='checked'"; ?> alt="650.00" />
<input name="product[]" type="checkbox" value="5" <?php if(in_array("5", $session_products)) echo "checked='checked'"; ?> alt="495.00" />
<div class="ph-float">
<input type="submit" name="button" value="Checkout >>" class="ph-button ph-btn-green fm-submit" disabled="true" >
</div>
</form>
Based on checkbox selection am displaying Book name,Amount and total in a table as follows(newtest.php)
(Remember am not using data base, these values are not comming from data base instad am taking these values from
product array as specified below)
<?php
$product = array();
$product[1] = array('name' => "Text Book of Human Anatomy by B.D.Chaurasiavol 6th edition Vol -I Vol-II Vol-III.", 'price' => 1607);
$product[2] = array('name' => "Nettars Atlas of Anatomy", 'price' => 1848);
$product[3] = array('name' => "Genera Anatomy by B.D.Chaurasia", 'price' => 180);
$product[4] = array('name' => "Inderbir Singh Embryology 10th edition ", 'price' => 650);
$product[5] = array('name' => "Inderbir Singh Histology ", 'price' => 495);
if(isset($_POST['button']))
{
$first = array();
$second = array();
foreach ($_POST['product'] as $pId)
{
$first[] = $product[$pId]['name'];
$second[] = $product[$pId]['price'];
}
$bookauthor = count($first);
$bookprice = count($second);
$max = ($bookauthor > $bookprice ? $bookauthor : $bookprice);
echo '<br />';
echo '<i style="font-color:#000000;font-weight:bold;text-decoration:underline;font-size:21px; padding-left:110px;margin-top:10px"> List of books you have selected:</i>';
echo '<table>';
echo '<tr>';
echo '<th style="text-align: center">SL No.</th>';
echo "<th>Book Name</th>";
echo "<th>Amount in INR</th>";
echo "<th>Action</th>";
echo '</tr>';
$count = 0;
for ($i = 0; $i < $max; $i++)
{
$count++;
echo '<tr>';
echo "<td style='text-align: center'>{$count}</td>";
echo "<td>{$first[$i]}</td>";
echo "<td>{$second[$i]}</td>";
echo "<td><a href='#'><i style='color:#F5F5F5;background:#D52020'>REMOVE</i> </a></td>";
echo '</tr>';
}
$total = array_sum($second);
echo '<tr>';
echo "<td colspan='2' style='font-weight:bold;font-size:14px'>Total Amount</td>";
echo "<td style='font-weight:bold;font-size:14px;'>{$total}</td>";
echo "</tr>";
echo '</table>';
}
?>
I want to remove particular row from table when i click on REMOVE link displaying in a same row, how to achive this?
link is ok or should i have to use button.If any one write some code may helpfull as am new webie...
Thanks in advance.
$('i').click(function(){
$(this).parent('a').parent('td').parent('tr').remove();
});
The row is deleted but as clicking makes you follow the link, it's immediately restored when the page is refreshed.
Add return false; or event.preventDefault(); at the end of the callback to prevent the default behavior :
$(document).ready(function() {
$("#favoriteFoodTable .deleteLink").on("click",function() {
var tr = $(this).closest('tr');
tr.css("background-color","#FF3700");
tr.fadeOut(400, function(){
tr.remove();
});
return false;
});
});