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.
Related
I have made a form that users can click to add news rows.
<?php
include('session.php');
?>
<?php
$ItemID = "ItemID";
$ItemName = "ItemName";
$UnitPrice = "UnitPrice";
$sql = "SELECT ItemID,ItemName,UnitPrice FROM Item";
$result = $db->query($sql);
?>
<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">
<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>
<form action="addsales.php" method="POST">
<tr id='addr0'>
<td>
<input type="text" name='itemid' placeholder='ItemID' class="form-control"/>
</select>
</td>
<td>
<input type="text" name='amount' placeholder='Amount' class="form-control"/>
</td>
</tr>
<tr id='addr1'></tr>
</form>
</tbody>
</table>
</div>
</div>
<button id="add_row" class="w3-button w3-black w3-round-large" style="position: absolute; right: 130px;">New row</button>
<button class="w3-button w3-black w3-round-large">Save</button>
</div>
<script type="text/javascript">
$(document).ready(function() {
var i = 1;
$("#add_row").click(function() {
$('#addr'+(i-1)).find('input').attr('disabled',true);
$('#addr' + i).html("<td><input name='itemid" + i + "' placeholder='ItemID' class='form-control input-md'/></td><td><input type='text' name='amount" + i + "' placeholder='Amount' class='form-control input-md'/></td>");
$('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
i++;
});
});
</script>
</body>
</html>
What I want to do is to change the itemid field to a drop down list that comes from a database query. I have managed to do it for the first row field. But, the problem I encoutered later is that I do not know how to make the list appear again on the new rows that I inserted using javascript. I have tried to somhow display the list using javascript but it did not work. Unfortunately I have deleted those code and are left with the snippet that I included.
Thank you for your time.
I am trying to create a form where the user can click on a button that will create a blank row at the bottom of the table. They can click this button for as many rows as they want to add. For some reason, when I click on the button I created, it goes back to my index.php page instead of just adding the row to the current page. Here is some of the code. Please let me know if there is more information that I should be adding here.
Thank you
JavaScript:
function new_line() {
var t = document.getElementById("desc_table");
var rows = t.getElementsByTagName("tr");
var r = rows[rows.length - 1];
var x = rows[1].cloneNode(true);
x.style.display = "";
r.parentNode.insertBefore(x, r);
}
<?php include 'connect.php'; ?>
<!DOCTYPE xhtml>
<html>
<head>
<style type="text/css"><?php //include'css\file.css';?></style>
<script type="text/javascript" src="js/new_line.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<body>
<button id="home" onclick="home_btn()">Home</button>
<title>New Estimate</title>
<h1>New Estimate</h1>
<?php
$sql = $conn->prepare('SELECT * FROM entire_info');
$sql -> execute();
$result = $sql ->get_result();
if ($result->num_rows!=0) {
$entire_info=$result->fetch_assoc();
}
else{
echo'Cannot find company information<br>';
}
?>
<form>
<table id="estimate_table">
<tr>
<td>
<?php
echo '<h1>'.$entire_info['name'].'</h1><br>'.
$entire_info['str_address'].'<br>'.
$entire_info['city'].', '.$entire_info['province'].' '.$entire_info['postal']
.'<br>Phone:'.$entire_info['phone'].'<br>Fax:'.$entire_info['fax'].'<br>'.$entire_info['email'].'<br>';
?>
<br>
</td>
<td colspan="3" style="text-align: right;"><?php echo '<h1>Estimate</h1>'; ?></td>
</tr>
<tr>
<td>
<table>
<tr>
<td style="vertical-align: top;">
For:<br>
<select name="estimate_for">
<?php
$sql = $conn->prepare('SELECT * FROM company');
$sql -> execute();
$result = $sql ->get_result();
if ($result->num_rows>0) {
while ($row=$result->fetch_assoc()) {
$company_name = $row['company'];
echo '<option value="'.$company_name.'">'.$company_name.'</option>';
}
}
else{
echo'Cannot find company information<br>';
}
?>
</select>
</td>
<td>
Job:<br> <textarea name="job_name" style="width: 200px ! important;" style="height: 30px ! important;"></textarea>
</td>
</tr>
</table>
</td>
<td colspan="3" style="text-align: right;">
Invoice#: <br>
Date: <input type="text" name="estimate_date" value="<?php echo date('M d, Y'); ?>">
</td>
</tr>
</table>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<table id="desc_table">
<tr>
<td><font><br><h3>Description</h3></font></td>
<td><font><h3>Hours</h3></font></td>
<td><font><h3>Rate</h3></font></td>
<td><font><h3>Amount</h3></font></td>
</tr>
<tr>
<td ><textarea name="description" style="width: 400px" style="height: 100px ! important;"></textarea></td>
<td> <input type="text" name="hours"></td>
<td> <input type="text" name="rate"></td>
<td><input type="text" name="amount"></td>
<td>
<button onclick="new_line();">+</button>
</td>
</tr>
<tr>
<td colspan="3" style="text-align: right;"><h3>Subtotal</h3></td>
<td><input type="text" name="subtotal"></td>
</tr>
<tr>
<td colspan="3" style="text-align: right;"><h3>GST (#87221 2410)
</h3></td>
<td><input type="text" name="gst"></td>
</tr>
<tr>
<td colspan="3" style="text-align: right;"><h3>Total</h3></td>
<td><input type="text" name="subtotal"></td>
</tr>
</table>
</form>
</head>
</body>
</html>
Your button is inside a <form> so by default it will behave like a submit button.
You have to set its type to a normal button by adding the type attribute:
<button onclick="new_line();" type="button">+</button>
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 some code, see:
<script>
$$.ready(function() {
// Profile Dialog
$( "#user-dialog" ).dialog({
autoOpen: false,
modal: true,
width: 400,
open: function(){ $(this).parent().css('overflow', 'visible'); $$.utils.forms.resize() }
}).find('button.submit').click(function(){
var $el = $(this).parents('.ui-dialog-content');
if ($el.validate().form()) {
$el.dialog('close');
}
}).end().find('button.cancel').click(function(){
var $el = $(this).parents('.ui-dialog-content');
$el.find('form')[0].reset();
$el.dialog('close');;
});
$('#user-table').on('click', '.open-user-dialog', function(){
$( "#user-dialog" ).dialog( "open" );
return false;
});
});
</script>
<table id="user-table">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>action</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT id,user_name FROM users";
if ($result = $verbindung->query($sql)) {
while ($row = $result->fetch_assoc()) {
?>
<tr>
<td><?php echo $row["id"];?></td>
<td><?php echo $row["user_name"];?></td>
<td>
<button class="open-user-dialog"><img src="img/icons/packs/fugue/16x16/bullet_go.png"/> view</button>
</td>
</tr>
<?php }} ?>
</tbody>
</table>
<div style="display: none;" id="user-dialog" title="user view">
<form action="">
<div class="row">
<label>
<strong>User details</strong>
</label>
<div>
<input type="text" id="user_id" value="<?php echo $id; ?>">
<input type="text" id="user_name" value="<?php echo $user_name; ?>">
</div>
</div>
</form>
<div class="actions">
<div class="left">
<button class="grey cancel">cancel</button>
</div>
<div class="right">
<input id="submit" onclick="userFunction()" type="button" value="go">
</div>
</div>
</div>
How i get my details from table to my jquery dialog?
the dialog is working fine, but i dont get the values $row['id'] and $row['user_name'] to display in my jquery dialog.
What I also try, I do not get the data in my dialog to be able to process them further.
How i can pass $row['id'] and $row['user_name'] for each line to my dialog?
Can someone Help me?
Firstly you add Php code in Php tags.You don't write if and while in php.
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>action</th>
</tr>
</thead>
<tbody>
<?php
if ($result = $verbindung->query($sql)) {
while ($row = $result->fetch_assoc()) {
?>
<tr>
<td><?php echo $row["id"];?></td>
<td><?php echo $row["user_name"];?></td>
<td>
<button class="open-user-dialog"><img src="img/icons/packs/fugue/16x16/bullet_go.png"/> view</button>
</td>
</tr>
<?php }} ?>
</tbody>
</table>
<div style="display: none;" id="user-dialog" title="user view">
<form action="">
<div class="row">
<label>
<strong>User details</strong>
</label>
<div>
<input type="text" id="user_id" value="<?php echo $id; ?>">
<input type="text" id="user_name" value="<?php echo $user_name; ?>">
</div>
</div>
</form>
<div class="actions">
<div class="left">
<button class="grey cancel">cancel</button>
</div>
<div class="right">
<input id="submit" onclick="userFunction()" type="button" value="go">
</div>
</div>
try this
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.