I have been trying to dynamically add a new dropdown list form using javascript. I have no idea how I should proceed with it. What I have rightnow is a html form page with a javascript that allows me to add a new row of text input form. html Form
Here is my current code for this page.
<?php
include('session.php');
?>
<?php
$ItemID = "ItemID";
$ItemName = "ItemName";
$UnitPrice = "UnitPrice";
$sql = "SELECT ItemID,ItemName,UnitPrice FROM Item";
$result = $db->query($sql);
$sql2 ="SELECT BranchID,BranchLocation FROM Branch";
$result2 = $db->query($sql2);
$sql4 ="SELECT MemberID FROM Membership";
$result4 = $db->query($sql4);
?>
<html>
<head>
<title>Add Sales</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="text-center">
<h1>Add new Sales Record</h1>
</div>
<div class="container">
<button class="w3-button w3-black w3-round-large">Back</button>
</div>
<div class="container" align="right">
<table class="table-sm">
<tbody>
<tr class="table-primar">
<th scope="col" style="padding-right: 50px;">ItemID</th>
<th scope="col" style="padding-right: 50px">ItemName</th>
<th scope="col">UnitPrice</th>
</tr>
<?php
while($rows = $result->fetch_assoc()) {
?>
<tr class="contents">
<td><?php echo $rows[$ItemID]; ?></td>
<td><?php echo $rows[$ItemName]; ?></td>
<td><?php echo $rows[$UnitPrice]; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<hr>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<form action="addsales.php" method="post">
<table class="">
<table class="table table-bordered table-hover">
<thead>
<tr >
<th class="text-center">
Branch ID
</th>
<th class="text-center">
MemberID
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select name="branchid">
<option selected></option>
<?php
while($rows2 = $result2->fetch_assoc()){
?>
<option value="<?php echo $rows2["BranchID"];?>"><?php echo $rows2["BranchLocation"];?></option>
<?php
}
?>
</select>
</td>
<input type="hidden" value="<?php echo $login_session; ?>" name='employeeid' class="form-control"/>
<td>
<select name="memberid">
<option selected></option>
<?php
while($rows4 = $result4->fetch_assoc()){
?>
<option value="<?php echo $rows4["MemberID"];?>"><?php echo $rows4["MemberID"];?></option>
<?php
}
?>
</select>
</td>
</tr>
</tbody>
</table>
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">
ItemID
</th>
<th class="text-center">
Amount
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
<input type="text" maxlength ="10" name='item[0][itemid]' placeholder='ItemID' class="form-control"/>
</td>
<td>
<input type="number" name='item[0][amount]' placeholder='Amount' class="form-control"/>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
<input class="w3-button w3-black w3-round-large" type="submit" name='submit' value="Submit"/>
</form>
<button id="add_row" class="w3-button w3-black w3-round-large" style="position: absolute; right: 20px;">New row</button>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var i = 1;
$("#add_row").click(function() {
$('#addr' + i).html("<td><input name='item["+i+"][itemid]' placeholder='ItemID' maxlength='10' class='form-control input-md'/></td><td><input type='text' name='item["+i+"][amount]' placeholder='Amount' class='form-control input-md'/></td>");
$('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
i++;
});
});
</script>
</body>
</html>
I want to change the javascript code so that instead of adding a new text input form, it will add a select form with options from the database. Something similar to this.
<td>
<select name="memberid">
<option selected></option>
<?php
while($rows4 = $result4->fetch_assoc()){
?>
<option value="<?php echo $rows4["MemberID"];?>"><?php echo $rows4["MemberID"];?></option>
<?php
}
?>
</select>
</td>
I am really new to all this php and javascript, so my code may look a bit off. Thank you for your help in advance.
<div class="col-md-6 hidden-xm hidden-sm">
<div class="col-md-12 hidden-xm"><h3>ההזמנה שלך</h3></div>
<div class="col-md-12 hidden-xm">
<div class="table-responsive hidden-xm">
<table class="table table-default">
<thead>
<tr>
<th class="text-right">סה"כ</th>
<th class="text-right">מוצר</th>
</tr>
</thead>
<tbody>
<?php
$totalPrice = 0;
$arr = [];
foreach($_SESSION['cart'] as $product){
$productDetails = get_product($product['id']);
array_push($arr,$product['amount']." x".$productDetails->get_name());
$totalPrice+= $productDetails->get_price()*$product['amount'];
?>
<tr>
<td class="text-right"> <?php echo $productDetails->get_price()*$product['amount']; ?>$</td>
<td class="text-right"><?php echo $productDetails->get_name()." <b>".$product['amount']."x</b>"; ?></td>
</tr>
<?php };?>
<tr>
<td class="total_price">משלוח</td>
<td>9$</td>
</tr>
<tr>
<td class="text-right total_price">סה"כ</td>
<td class="text-right"> <?php echo $totalPrice+9 ?>$</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12 hidden-xm text-right"> אחריות מלאה על המוצרים ל-28 יום</div>
<input type="hidden" name="products" value="<?php echo implode("<br>",$arr) ?>">
<div class="text-left">
<input type="submit" name="submit" class="btn btn-lg btn-pay" value="שליחת הזמנה">
</div>
</div>
</div>
I've tried for pretty long time to find out why the : hidden-xm/hidden-sm not working for me. Can someone tell me what am i doing wrong?
also I want to notice that this div is inside a bigger container but I want to hide it if its at a mobile point of view.
I'ts hidden-xs instead of hidden-xm
<table id="tbl" class = "table table-striped table-bordered" style="border-top:0px;">
<thead>
<tr>
<th></th>
<th><p style="text-align:center;">Answered</p></th>
<th><p style="text-align:center;">Post</p></th>
<th><p style="text-align:center;">Views</p></th>
</tr>
</thead>
<tbody>
<?php
$res = $db->viewquestion();
$ask_id= '';
foreach ($res as $key => $value) {
$ask_id = $value['iask_id'];
?>
<tr>
<td>
<div align="left" width="400">
<?php echo '<a href="askpriest?iask_title='.$value['iask_title'].'">'?>
<img src="./<?php echo $value['image']; ?>" style="border-radius:50%;float:left" width="20%" height="20%" class="pull-left">
<h5><strong class="font-1-2" style="color:#59960b;border-radius:50%;float:left"><?php echo $value['iask_title']?></strong></h5>
<br><p class="font-1-2" style="color:#000000;border-radius:50%;font-size:12px;float:left">by:<?php echo $value['firstname'].' '.$value['lastname'].' '. $value['date_send'].'<br> in '.$value['iask_topic'] ?> </p>
</a>
</div>
</td>
<td>
<?php
if($value['iask_answered']==1){
?>
<p align="center" style="padding-top:20px;"><span class="fa fa-check" style="color:#59960b;"></span></p>
<?php
}else{
?>
<p align="center" style="padding-top:20px;font-size:30px;"><span style="color:#59960b;"></span></p>
<?php
}
?>
</td>
<td>
<p class="font-1-5" style="padding-top:25px;text-align:center;" width="80"><?php echo $value['iask_post']?></p>
</td>
<td>
<p class="font-1-5" style="padding-top:25px;text-align:center;"><?php echo $value['iask_view']?> </p>
</td>
</div>
</tr>
<?php
}
?>
</tbody>
</table>
so i have this table and im trying to use the datatable js..
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src=" //code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#tbl').DataTable();
});
</script>
but unfortunately nothing happens on the table.. i tried searching on web and they said that the and should be equal.. so i tried to count how many is the and and they are equal.. i dont have any idea how to fix this since the only answer i get was to and should be equal.. hel
Your table has the id equal with "tbl" so the code should be
$(document).ready(function() {
$('#tbl').DataTable();
});
You can use jquery data-table like:
html:
<table id="data_table">
<thead>
<tr>
<th>Emp Code</th>
<th>First Name</th>
<th>Last Name</th>
<th>Mobile</th>
</tr>
</thead>
<tbody>
<!-- Dynamic Body -->
</tbody>
</table>
Jquery:
$(document).ready(function() {
var data = [];
data.push(
[1,"Sasha","Brenna","0800 1111"],
[2,"Sage","Mia","(01012) 405872"],
[3,"Chelsea","Allistair","076 0578 0265"],
[4,"Uta","Savannah","070 1247 5884"],
[5,"Remedios","Berk","0995 181 0007"],
[6,"Ruby","Wayne","0800 1111"],
[7,"Faith","Fredericka","(01709) 099879"],
[8,"Myra","Harrison","070 4241 9576"],
[9,"Drake","Miriam","0800 733635"],
[10,"Reed","Shannon","076 8597 5067"]
);
$('#data_table').DataTable( {
data: data,
});
});
Working Fiddle
I am attempting to implement the TableSort: http://tablesorter.com, then later I will be implementing the pagination.
However, nothing is appearing to happen after implementation. I follwed the steps on the tablesorter webpage.
Any suggestions?
<!DOCTYPE html>
<html>
<head>
<script src="/libs/js/jquery-3.1.1.js" type="text/javascript">
</script>
<script src="/libs/js/jquery-3.1.1.min.js" type="text/javascript">
</script>
<script src="/libs/js/jquery.tablesorter.js" type="text/javascript">
</script>
<script src="/libs/js/jquery.tablesorter.pager.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
</script>
<title></title>
</head>
<body>
<?php
$page_title = 'All Product';
require_once('includes/load.php');
// Checkin What level user has permission to view this page
page_require_level(2);
$products = join_product_table();
?><?php include_once('layouts/header.php'); ?>
<div class="row">
<div class="col-md-12">
<?php echo display_msg($msg); ?>
</div>
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading clearfix">
<div class="pull-right">
<a class="btn btn-primary" href="add_product.php">Add New</a>
</div>
</div>
<div class="panel-body">
<table class="table table-bordered" id="myTable">
<thead>
<tr>
<th class="text-center" style="width: 50px;">#</th>
<th>Photo</th>
<th>Product Title</th>
<th class="text-center" style="width: 10%;">Category</th>
<th class="text-center" style="width: 10%;">Instock</th><!--<th class="text-center" style="width: 10%;"> Buying Price </th>
<th class="text-center" style="width: 10%;"> Saleing Price </th>-->
<th class="text-center" style="width: 10%;">Product Added</th>
<th class="text-center" style="width: 100px;">Actions</th>
</tr>
</thead>
<tbody>
<?php foreach ($products as $product):?>
<tr>
<td class="text-center"><?php echo count_id();?></td>
<td><?php if($product['media_id'] === '0'): ?><img alt="" class="img-avatar" src="uploads/products/no_image.jpg"> <?php else: ?> <img alt="" class="img-avatar" src="uploads/products/%3C?php%20echo%20$product['image'];%20?%3E"> <?php endif; ?></td>
<td><?php echo remove_junk($product['name']); ?></td>
<td class="text-center"><?php echo remove_junk($product['categorie']); ?></td>
<td class="text-center"><?php echo remove_junk($product['quantity']); ?></td><!--<td class="text-center"> <?php echo remove_junk($product['buy_price']); ?></td>
<td class="text-center"> <?php echo remove_junk($product['sale_price']); ?></td>-->
<td class="text-center"><?php echo read_date($product['date']); ?></td>
<td class="text-center">
<div class="btn-group">
<a class="btn btn-info btn-xs" data-toggle="tooltip" href="edit_product.php?id=%3C?php%20echo%20(int)$product['id'];?%3E" title="Edit"><span class="glyphicon glyphicon-edit"></span></a> <a class="btn btn-danger btn-xs" data-toggle="tooltip" href="delete_product.php?id=%3C?php%20echo%20(int)$product['id'];?%3E" title="Delete"><span class="glyphicon glyphicon-trash"></span></a>
</div>
</td>
</tr><?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
</div><?php include_once('layouts/footer.php'); ?>
</body>
</html>
Resulting image with test data.
Edit, browser console:
I have been working to get this code working for a little while and finally got it to work by implementing two codes together. Except the formatting of it does not let my submit button work. My submit button acts a save by updating all data entered into the textboxes in a sql database. So this button is absolutely necessary. Please let me know what I'm doing wrong.
<?php
mysql_connect("localhost", "username", "password")or die("cannot connect");
mysql_select_db("databas")or die("cannot bselect DB");
$sql="SELECT * FROM test";
$result=mysql_query($sql);
// Count table rows
$count=mysql_num_rows($result);
?>
<html>
<head>
<link rel="shortcut icon" href="../../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="javafile.js"></script>
</head>
<body>
<div class="component">
<table class="overflow-y">
<thead>
<tr>
<th width="16%" align="center" id="box_header2" style='width:10%'><button class="logout">Log out</button> Name</th>
<th width="16%" align="center" id="box_header2" style='width:10%'>Job Code</th>
<th width="16%" align="center" id="box_header2" style='width:10%'>Date</th>
<th width="14%" align="center" id="box_header2" style='width:20%'>Address</th>
</tr>
</thead>
<tbody>
<tr>
<?php
while($rows=mysql_fetch_array($result)){
?>
<form action="update3.php" method="post" name="form1">
<tbody>
<tr>
<th>
<input name="name[]" type="text" id="Name" value="<? echo $rows['Name'];?>">
</th>
<td>
<input name="job[]" type="text" id="Job" value="<? echo $rows['Job']; ?>">
</td>
<td>
<input name="date[]" type="text" id="Date" value="<? echo $rows['Date']; ?>">
</td>
<td>
<input name="address[]" type="text" id="Address" value="<? echo $rows['Address']; ?>">
</td>
<td>
<input name="id[]" type="hidden" value="<? echo $rows['ID']; ?>">
</td>
</tr>
</tbody>
<?php
}
?>
<tr>
</tr>
</tbody>
<tbody>
<tr>
<td>
<input type="submit" name="Submit" value="Save">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</form>
</table>
<?php
mysql_close();
?>
try this hope it works for you :
<input name="name[]" type="text" id="Name" value='<?php echo $rows["uname"];?>'>
Please, put the <form> tag before the while loop, otherwise you'll have as many opened forms as rows in the query's result set.