ive been stuck with this for almost a week,
ive been trying to add multiple rows to a section of my form without reloading the page,
i cloned the fields and put them in an array but the problem is the dates, it can't be placed in an array ... can anybody help me out, it would be much appreciated ... thanks.
here is my code:
index.php
<DIV id="mainContent_pnlEmploymentHistory">
<form id="form1" name="form1" method="post" action="value.php">
<TABLE id="dataTable">
<TBODY>
<TR>
<TD style="width: 310px; height: 20px; text-align: center;">Name of Employer</TD>
<TD style="width: 430px; height: 20px; text-align: center;"> Employer Address</TD>
<TD style="width: 150px; height: 20px; text-align: center;">FROM</TD>
<TD style="width: 150px; height: 20px; text-align: center;">TO</TD></TR>
<TR class="row_to_clone_fw_emp">
<TD style="width: 310px; height: 20px; text-align: center;"><label>
<input type="text" id="fwemployer" name="fwemployer[]" style="width:300px"/>
</label></TD>
<TD style="width: 430px; height: 20px; text-align: center;">
<input type="text" id="fwempaddress" name="fwempaddress[]" style="width:100%"/></TD>
<TD style="width: 150px; height: 20px; text-align: center;">
<?php
include('calendar/classes/tc_calendar.php');
$date3_default = "2013-10-14";
$date4_default = "2013-10-20";
$myCalendar = new tc_calendar("datefrom", true, false);
$myCalendar->setIcon("calendar/images/iconCalendar.gif");
$myCalendar->setDate(date('d', strtotime($date3_default))
, date('m', strtotime($date3_default))
, date('Y', strtotime($date3_default)));
$myCalendar->setPath("calendar/");
$myCalendar->setYearInterval(1970, 2020);
$myCalendar->setAlignment('left', 'bottom');
$myCalendar->setDatePair('datefrom', 'dateto', $date4_default);
$myCalendar->writeScript();
?>
</TD>
<TD style="width: 150px; height: 20px; text-align: center;">
<?php
$date3_default = "2013-10-14";
$date4_default = "2013-10-20";
$myCalendar = new tc_calendar("dateto", true, false);
$myCalendar->setIcon("calendar/images/iconCalendar.gif");
$myCalendar->setDate(date('d', strtotime($date4_default))
, date('m', strtotime($date4_default))
, date('Y', strtotime($date4_default)));
$myCalendar->setPath("calendar/");
$myCalendar->setYearInterval(1970, 2020);
$myCalendar->setAlignment('left', 'bottom');
$myCalendar->setDatePair('datefrom', 'dateto', $date3_default);
$myCalendar->writeScript();
?>
</TD>
</TR>
</TBODY>
</TABLE>
<input type="submit" name="Submit" value="Submit" />
</form>
<INPUT type="button" value="Add Row" onclick="addRowfwemp(); return false;"/>
</DIV>
the function called onclick is this:
function addRowfwemp() {
/* Declare variables */
var elements, templateRow, rowCount, row, className, newRow, element;
var i, s, t;
/* Get and count all "tr" elements with class="row". The last one will
* be serve as a template. */
if (!document.getElementsByTagName)
return false; /* DOM not supported */
elements = document.getElementsByTagName("tr");
templateRow = null;
rowCount = 0;
for (i = 0; i < elements.length; i++) {
row = elements.item(i);
/* Get the "class" attribute of the row. */
className = null;
if (row.getAttribute)
className = row.getAttribute('class')
if (className == null && row.attributes) { // MSIE 5
/* getAttribute('class') always returns null on MSIE 5, and
* row.attributes doesn't work on Firefox 1.0. Go figure. */
className = row.attributes['class'];
if (className && typeof(className) == 'object' && className.value) {
// MSIE 6
className = className.value;
}
}
/* This is not one of the rows we're looking for. Move along. */
if (className != "row_to_clone_fw_emp")
continue;
/* This *is* a row we're looking for. */
templateRow = row;
rowCount++;
}
if (templateRow == null)
return false; /* Couldn't find a template row. */
/* Make a copy of the template row */
newRow = templateRow.cloneNode(true);
/* Change the form variables e.g. price[x] -> price[rowCount] */
elements = newRow.getElementsByTagName("input");
for (i = 0; i < elements.length; i++) {
element = elements.item(i);
s = null;
s = element.getAttribute("name");
if (s == null)
continue;
t = s.split("[");
if (t.length < 2)
continue;
s = t[0] + "[" + rowCount.toString() + "]";
element.setAttribute("name", s);
element.value = "";
}
/* Add the newly-created row to the table */
templateRow.parentNode.appendChild(newRow);
return true;
}
i am using this date picker for my script:
i am using the "Date Pair Example" on belows link.
http://www.triconsole.com/php/calendar_datepicker.php
thank u very much in advance ...
Related
I dont know whats wrong with the code , when i search from march 3 - march 12 , the march 12 transaction does not show.
Thank you very much , this would help me a lot.
What I want is to show the march 12 transaction , like the e.g. given below .
I want it to show transactions from this date , to the date chosen.
E.G.
This is where I input it
Picture 1
March 3-12 Sample
Picture 2
March 3-13 Sample
Picture 3
This is my code
<head>
<script>
$(function() {
$( "#tabs" ).tabs();
$('a[rel*=facebox]').facebox();
$( ".datepicker" ).datepicker();
});
$(document).ready(function(){
// Write on keyup event of keyword input element
$("#searchme").keyup(function(){
// When value of the input is not blank
if( $(this).val() != "")
{
// Show only matching TR, hide rest of them
$("#searchTbl tbody>tr").hide();
$("#searchTbl td:contains-ci('" + $(this).val() + "')").parent("tr").show();
}
else
{
// When there is no input or clean again, show everything back
$("#searchTbl tbody>tr").show();
}
});
});
// jQuery expression for case-insensitive filter
$.extend($.expr[":"],
{
"contains-ci": function(elem, i, match, array)
{
return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
</script>
<script>
function goBack() {
window.history.back();
}
</script>
<?php include('session.php'); ?>
<?php include('header.php'); ?>
<?php include('navbar.php'); ?>
<style>
.logo1 {
position: absolute;
right: 45%;
font-family: ""Lucida Console", Monaco, monospace";
top: 0%;
width: 80%;
background-color:#F8F8FF;
color: black;
text-align: center;
}
h3{
font-size:20px;
font-family: "Arial";
}
table {
width:60%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: center;
}
#media print {
#page { margin: 0; }
body { margin: 1cm; }
#printPageButton {
display: none;
}
#e{
display:none;
}
.footer {
position: fixed;
left: 0;
font-family: ""Lucida Console", Monaco, monospace";
bottom: 0;
width: 100%;
background-color:#F8F8FF;
color: black;
text-align: center;
}
}
</style>
<?php
if(isset($_POST['salesbtn'])) {
$from = date('Y-m-d', strtotime($_POST['dayfrom']))." 00:00:01";
$to = date('Y-m-d', strtotime($_POST['dayto']))." 23:59:59";
?>
</head>
<body>
<div style="height:50px;"></div>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-0">
<br><img src="../upload/logo.jpg" class="logo1" style="height:50px; width:50px;" ><br>
<center><h1>Inventory Report</h1><h3> From (<?php echo $from; ?>) To (<?php echo $to; ?>)</h3>
<br>
<button id="printPageButton" class="btn btn-primary" onClick="window.print();">Print</button>
<button id="e" class="btn btn-primary" onclick="goBack()">Back</button>
<br><br>
<table width="100%" cellspacing="0" cellpadding="0" style="font-family:Arial Narrow, Arial,sans-serif; font-size:15px;" border="1">
<tr>
<th width="25%"><div align="center"><strong> Date </strong></div></th>
<th width="20%"><div align="center"><strong> User</strong></div></th>
<th width="20%"><div align="center"><strong>Action</strong></div></th>
<th width="20%"><div align="center"><strong>Product Name</strong></div></th>
<th width="20%"><div align="center"><strong>Quantity </strong></div></th>
</tr>
<?php
$iq=mysqli_query($conn,"select * from inventory left join product on product.productid=inventory.productid where inventory_date BETWEEN CAST('$from' AS DATE) AND CAST('$to' AS DATE) order by inventory_date desc ");
while($iqrow=mysqli_fetch_array($iq)){
?>
<tr>
<td class="hidden"></td>
<td><?php echo date('M d, Y h:i A',strtotime($iqrow['inventory_date'])); ?></td>
<td>
<?php
$u=mysqli_query($conn,"select * from `user` left join customer on customer.userid=user.userid left join supplier on supplier.userid=user.userid where user.userid='".$iqrow['userid']."'");
$urow=mysqli_fetch_array($u);
if($urow['access']==1){
echo "Admin";
}
elseif($urow['access']==2){
echo $urow['customer_name'];
}
else{
echo $urow['company_name'];
}
?>
</td>
<td align="right"><?php echo $iqrow['action']; ?></td>
<td align="right"><?php echo $iqrow['product_name']; ?></td>
<td align="right"><?php echo $iqrow['quantity']; ?></td>
</tr>
<?php
} }
?>
</tr> </td>
</br> </br>
<td style="color:red;" align="center"> Total:<?php
try {
require ("conn.php");
$stmt = $conn->prepare("SELECT SUM(sales_total) as 'test' FROM sales WHERE sales_date BETWEEN '$from' AND '$to'");
$stmt->execute();
$row=$stmt->fetch(PDO::FETCH_ASSOC);
echo $row['test'];
}
catch(PDOException $e) {
echo 'ERROR: ' . $e->getMessage();
}
?>
</table>
</div>
</div>
</div>
<?php include('script.php'); ?>
<?php include('modal.php'); ?>
<?php include('add_modal.php'); ?>
<script src="custom.js"></script>
The problem is occurring because you are casting your $to value as a DATE, which implies a TIME portion of 00:00:00. The BETWEEN then fails because '2018-03-12 11:31:25' is not <= '2018-03-12 00:00:00'
Changing the CAST of $to to a DATETIME should fix the problem. i.e.
$iq=mysqli_query($conn,"select * from inventory left join product on product.productid=inventory.productid where inventory_date BETWEEN CAST('$from' AS DATE) AND CAST('$to' AS DATETIME) order by inventory_date desc ");
The date range picker won't work properly in my inventory report, but for the sales report it works properly.
E.g. From 2018-03-07 to 2018-03-08, the 2018-03-08 does not show in the report.
Picture of the report:
Here is my code
<head>
<script>
$(function() {
$( "#tabs" ).tabs();
$('a[rel*=facebox]').facebox();
$( ".datepicker" ).datepicker();
});
$(document).ready(function(){
// Write on keyup event of keyword input element
$("#searchme").keyup(function(){
// When value of the input is not blank
if( $(this).val() != "")
{
// Show only matching TR, hide rest of them
$("#searchTbl tbody>tr").hide();
$("#searchTbl td:contains-ci('" + $(this).val() + "')").parent("tr").show();
}
else
{
// When there is no input or clean again, show everything back
$("#searchTbl tbody>tr").show();
}
});
});
// jQuery expression for case-insensitive filter
$.extend($.expr[":"],
{
"contains-ci": function(elem, i, match, array)
{
return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
</script>
<script>
function goBack() {
window.history.back();
}
</script>
<?php include('session.php'); ?>
<?php include('header.php'); ?>
<?php include('navbar.php'); ?>
<style>
.logo1 {
position: absolute;
right: 45%;
font-family: ""Lucida Console", Monaco, monospace";
top: 0%;
width: 80%;
background-color:#F8F8FF;
color: black;
text-align: center;
}
h3{
font-size:20px;
font-family: "Arial";
}
table {
width:60%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: center;
}
#media print {
#page { margin: 0; }
body { margin: 1cm; }
#printPageButton {
display: none;
}
#e{
display:none;
}
.footer {
position: fixed;
left: 0;
font-family: ""Lucida Console", Monaco, monospace";
bottom: 0;
width: 100%;
background-color:#F8F8FF;
color: black;
text-align: center;
}
}
</style>
<?php
if(isset($_POST['salesbtn'])) {
$from=$_POST['dayfrom'];
$to=$_POST['dayto'];
?>
</head>
<body>
<div style="height:50px;"></div>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-0">
<br><img src="../upload/logo.jpg" class="logo1" style="height:50px; width:50px;" ><br>
<center><h1>Inventory Report</h1><h3> From (<?php echo $from; ?>) To (<?php echo $to; ?>)</h3>
<br>
<button id="printPageButton" class="btn btn-primary" onClick="window.print();">Print</button>
<button id="e" class="btn btn-primary" onclick="goBack()">Back</button>
<br><br>
<table width="100%" cellspacing="0" cellpadding="0" style="font-family:Arial Narrow, Arial,sans-serif; font-size:15px;" border="1">
<tr>
<th width="25%"><div align="center"><strong> Date </strong></div></th>
<th width="20%"><div align="center"><strong> User</strong></div></th>
<th width="20%"><div align="center"><strong>Action</strong></div></th>
<th width="20%"><div align="center"><strong>Product Name</strong></div></th>
<th width="20%"><div align="center"><strong>Quantity </strong></div></th>
</tr>
<?php
$iq=mysqli_query($conn,"select * from inventory left join product on product.productid=inventory.productid where inventory_date BETWEEN CAST('$from' AS DATE) AND CAST('$to' AS DATE) order by inventory_date desc ");
while($iqrow=mysqli_fetch_array($iq)){
?>
<tr>
<td class="hidden"></td>
<td><?php echo date('M d, Y h:i A',strtotime($iqrow['inventory_date'])); ?></td>
<td>
<?php
$u=mysqli_query($conn,"select * from `user` left join customer on customer.userid=user.userid left join supplier on supplier.userid=user.userid where user.userid='".$iqrow['userid']."'");
$urow=mysqli_fetch_array($u);
if($urow['access']==1){
echo "Admin";
}
elseif($urow['access']==2){
echo $urow['customer_name'];
}
else{
echo $urow['company_name'];
}
?>
</td>
<td align="right"><?php echo $iqrow['action']; ?></td>
<td align="right"><?php echo $iqrow['product_name']; ?></td>
<td align="right"><?php echo $iqrow['quantity']; ?></td>
</tr>
<?php
} }
?>
</tr> </td>
</table>
</div>
</div>
</div>
<?php include('script.php'); ?>
<?php include('modal.php'); ?>
<?php include('add_modal.php'); ?>
<script src="custom.js"></script>
EDITED:
This is my inventory.php
In here the user can input the range date from , to .
I dont know if this will help you guys.
I just want to know why it does not work well.
The problem is when i input 2018-03-08 - 2018-03-08 , the march 7 shows up but the march 8 wont show up.
<form action="total_inventory.php" method="post">
From: <input type="text" class="datepicker" placeholder="E.G.(2018-01-14)" name="dayfrom" required pattern="[0-9]{4}+[0-9]+[0-9]"> To: <input type="text" class="datepicker" placeholder="E.G.(2018-02-11)" name="dayto" required pattern="[0-9]{4}+[0-9]+[0-9]">
<input type="submit" value="Show Report" name="salesbtn" ></form>
EDITED:
Here is my inventory table
INVENTORY DATA TABLE
UPDATED:
This is the output , still does not show the transaction from march 7
Sample Updated
There is time also in your table so you have to search with time. means your from should be d-m-Y 00:00:01 and your to should be d-m-Y 23:59:59
Updated : concat your date variables like this.
// Assume `$_POST['dayfrom'] = 03/15/2018;`
// Assume `$_POST['dayto'] = 03/31/2018;`
$from = date('Y-m-d', strtotime($_POST['dayfrom']))." 00:00:01";
$to = date('Y-m-d', strtotime($_POST['dayto']))." 23:59:59";
echo $from; // if date is `03/15/2018` output like `2018-03-15 00:00:01`
echo $to; // if date is `03/31/2018` output like `2018-03-31 23:59:59`
// NOTE: check your date format is like this or not, then run the SQL query.
Updated Query:
$iq=mysqli_query($conn,"select * from inventory left join product on product.productid=inventory.productid where ( inventory_date BETWEEN CAST('$from' AS DATE) AND CAST('$to' AS DATE) ) order by inventory_date desc ");
I am creating a shopping cart using session which is working, Now I am making the quantity part I mean User can increase the product quantity and decrease the quantity and according to that the total amount will display on screen without refresh the page.
I just need when the user clicked on Plus sign then the amount will change as per quantity.
<?php echo $product['qty'];?> I am getting this value from my session
Any idea how can I do this?
I also added same code in https://jsfiddle.net/Narendra2015/uLx0912t/
/*increase the product qty*/
$(".ddd").on("click", function () {
var $button = $(this),
$input = $button.closest('.sp-quantity').find("input.quntity-input");
var oldValue = $input.val(),
newVal;
if ($.trim($button.text()) == "+") {
newVal = parseFloat(oldValue) + 1;
} else {
// Don't allow decrementing below zero
if (oldValue > 1) {
newVal = parseFloat(oldValue) - 1;
} else {
newVal = 1;
}
}
$input.val(newVal);
});
Second code after suggested Mr.A. Iglesias
$('a.ddd').click(function() {
var $productContainer = $(this).closest('div.sp-quantity');
var $pro_list = $(this).closest('tr.pro-list');
var productPrice = parseInt($pro_list.find('span.price_cal').text());
var $quantityInput = $productContainer.find('input.quntity-input');
var newQuantity = parseInt($quantityInput.val()) + parseInt($(this).data('multi'));
if (newQuantity>= 0) {
// Refresh quantity input.
$quantityInput.val(newQuantity);
// Refresh total div.
var currentChange = productPrice*parseInt($(this).data('multi'));
var total = parseInt($('div#total').text());
$('div#total').text(total + currentChange);
}
});
Css
.sp-quantity {
width:124px;
height:42px;
float: left;
}
.sp-minus {
width:40px;
height:40px;
border:1px solid #e1e1e1;
float:left;
text-align:center;
}
.sp-input {
width:40px;
height:40px;
border:1px solid #e1e1e1;
border-left:0px solid black;
float:left;
}
.sp-plus {
width:40px;
height:40px;
border:1px solid #e1e1e1;
border-left:0px solid #e1e1e1;
float:left;
text-align:center;
}
.sp-input input {
width:30px;
height:34px;
text-align:center;
border: none;
}
.sp-input input:focus {
border:1px solid #e1e1e1;
border: none;
}
.sp-minus a, .sp-plus a {
display: block;
width: 100%;
height: 100%;
padding-top: 5px;
}
HTMl
<?php if(!empty($_SESSION['products'])):
foreach($_SESSION['products'] as $key=>$product):?>
<tbody>
<tr class="pro-list">
<td>
<div class="ordered-product cf">
<div class="pro-img">
<img src="admin/images/products/<?php echo $product['p_images'];?>" alt=" prodcut image">
</div>
<div class="pro-detail-name">
<h3><?php echo $product['p_name'];?></h3>
</div>
<?php
$p_delete=$product['p_id'];
//$decrypted_delete_id = decryptIt($p_delete);
$encrypted_user_id = encryptIt($p_delete);
$delete_product_id=urlencode($encrypted_user_id);
?>
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</td>
<td>£<span id="price_cal"><?php echo $product['p_currentprice'];?></span></td>
<td>
<div class="sp-quantity">
<div class="sp-minus fff"><a class="ddd" href="javascript:void(0)" data-multi="-1">-</a></div>
<div class="sp-input">
<input type="text" class="quntity-input" value="<?php echo $product['qty'];?>" />
</div>
<div class="sp-plus fff"><a class="ddd" href="javascript:void(0)" data-multi="1">+</a></div>
</div>
</td>
<?php $single_total = $product['qty']*$product['p_currentprice'];?>
<td class='total_amount' data-price='£<?php echo $single_total;?>'>£<?php echo $single_total;?></td>
</tr>
<?php $total = $total+$single_total;
$_SESSION['total_cost']=$total;
endforeach;?>
<tr class="pro-list">
<td></td>
<td></td>
<td><span>Subtotal</span></td>
<td>£<?php $_SESSION['total_cost']=$total;echo $total;?></td>
<!-- <td><span>Shiping Cost</span></td>
<td><i class="fa fa-fighter-jet" aria-hidden="true"></i>£<?php echo $total;?></td> -->
</tr>
<tr class="pro-list">
<td></td>
<td></td>
<td><span>Total Cost</span></td>
<td>£<?php echo $total;?></td>
</tr>
</tbody>
<?php endif;?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
for total amount, I added this in the script.
// Refresh total div.
var subtotal_amount = subtotal_amount+lineTotal;
$pro_list.find('td.subtotal_amount').data('price','£'+subtotal_amount).html('£'+subtotal_amount);
HTML inside <tr class="pro-list">
<td class='subtotal_amount' data-price='£<?php echo $total;?>'>£<?php echo $total;?></td>
First you can put your product price and the total amount inside of div with a class or id, to make them easy to select, something like...
<?php $product=10;?>
<div class="sp-quantity">
<div class="product-price"><?=$product?></div>
<div class="sp-minus fff"><a class="ddd" href="javascript:void(0)" data-multi="-1">-</a></div>
<div class="sp-input">
<input type="text" class="quntity-input" value="<?php echo $product['qty'];?>" />
</div>
<div class="sp-plus fff"><a class="ddd" href="javascript:void(0)" data-multi="1">+</a></div>
</div>
<?php
$single_total = $product['qty']*$product;
echo $total = $total + $single_total;
?>
<div id="total"><?=$total?></div>
Then, refresh its values anytime you change the quantity of a product...
$('a.ddd').click(function() {
var $productContainer = $(this).closest('div.sp-quantity');
var productPrice = parseInt($productContainer.find('div.product-price').text());
var $quantityInput = $productContainer.find('input.quntity-input');
var newQuantity = parseInt($quantityInput.val()) + parseInt($(this).data('multi'));
if (newQuantity>= 0) {
// Refresh quantity input.
$quantityInput.val(newQuantity);
// Refresh total div.
var currentChange = productPrice*parseInt($(this).data('multi'));
var total = parseInt($('div#total').text());
$('div#total').text(total + currentChange);
}
});
I hope it helps
I'm not sure to really understand, but the total amount corresponds to total price (depended on product's quantity), isn't it ?
If I'm right, I think the better way is to display the total amount in a 'div' tag (for example) containing an attribute 'data-total' with the product's price.
Then, in JS, you can access to attribute's data and update the total with the price and the quantity.
Something like that:
<div class='total_amount' data-price='<?php echo $product['price']?>' >
0
</div>
And then update your JS file as:
$(".ddd").on("click", function () {
var $button = $(this),
$input = $button.closest('.sp-quantity').find("input.quntity-input");
var oldValue = $input.val(),
newVal;
if ($.trim($button.text()) == "+") {
newVal = parseFloat(oldValue) + 1;
} else {
// Don't allow decrementing below zero
if (oldValue > 1) {
newVal = parseFloat(oldValue) - 1;
} else {
newVal = 1;
}
}
$input.val(newVal);
var price = $('.total_amount').data('price');
$('.total_amount').html(price * newVal);
});
Hope it will help you :)
PS: Sorry for my English, I'm French :P
sorry about my English, but I need some help. I'm trying to make a cascade typeahead based on manufacturers and models of cars. here is the code I have (all this code I used from examples I get from webs, I'm a beginner in web programming.
nuevo_coche.php:
...
.marcas,.modelos {
background-color:#fff;
font:8pt helvetica;
color:#000;
width:250px;
border-color:#696969;
border-style :solid;
border-width :1px;
height:15pt;
}
.tt-dropdown-menu {
font:8pt helvetica;
width: 250px;
margin-top: 5px;
padding: 8px 12px;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
color: #000;
background-color: #e0ffff;
}
</style>
<script language="javascript">
$(document).ready(function() {
$('input.marcas').typeahead({
name: 'marcas',
remote : './marcas.php?query=%QUERY'
});
$('input.modelos').typeahead({
name: 'modelos',
remote : './modelos.php?query=%QUERY&nombremarca=' + $('input.marcas').val()
});
})
function cancelar() {
location.href="index.php";
}
...
<tr>
<td width="15%">Marca</td>
<td width="43%"><input id="marcas" type="text" name="marcas" size="20" class="marcas" placeholder="Introduce marca"></td>
</tr>
<tr>
<td width="15%">Modelo</td>
<td width="43%"><input id="modelos" type="text" name="modelos" size="20" class="modelos" placeholder="Introduce Modelo"></td>
...
marcas.php:
include ("../conectar.php");
if (isset($_REQUEST['query'])) {
$query = $_REQUEST['query'];
$sql = mysql_query ("SELECT * FROM marcas WHERE nombremarca LIKE '%{$query}%'");
$array = array();
while ($row = mysql_fetch_assoc($sql)) {
$array[] = $row['nombremarca'];
}
echo json_encode ($array); //Return the JSON Array
}
modelos.php
include ("../conectar.php");
if (isset($_REQUEST['query'])) {
$query = $_REQUEST['query'];
$nombremarca = $_REQUEST['nombremarca'];
$sel_marcas="SELECT * FROM marcas WHERE nombremarca='$nombremarca'";
$rs_marcas=mysql_query($sel_marcas);
$codmarca=mysql_result($rs_marcas,0,"codmarca");
$sql = mysql_query ("SELECT * FROM modelos WHERE nombremodelo LIKE '%{$query}%' AND codmarca='$codmarca'");
$array = array();
while ($row = mysql_fetch_assoc($sql)) {
$array[] = $row['nombremodelo'];
}
echo json_encode ($array); //Return the JSON Array
}
If I put in the line -- remote : './modelos.php?query=%QUERY&nombremarca=Ford' -- (for example), it works fine, but I dont know how to do it. thanks a lot in advance.
It depends on the type of input.marcas. I think you want something like:
$('input.modelos').typeahead({
name: 'modelos',
remote: './modelos.php?query=%QUERY&nombremarca=' + $('input.marcas').val()
});
If the parameter is evaluated at the start then $('input.marcas').val() will appear to be fixed so you will have to find a way of making it call a function to get the result.
All the documentation is here so there will be something in there to help you.
https://github.com/twitter/typeahead.js
Well I've got a solution, maybe is not de best way to do it but it works:
function lanzarmarca() {
if (document.getElementById("var").value == 0) {
$('input.marcas').typeahead({
name: 'marcas',
remote : './marcas.php?query=%QUERY'
});
document.getElementById("marcas").focus();
}
if (document.getElementById("var").value == 1) {
focus();
}
}
function lanzarmodelo() {
$('input.modelos').typeahead({
name: 'modelos',
remote : './modelos.php?query=%QUERY&nombremarca=' + $('input.marcas').val()
});
document.getElementById("modelos").focus();
document.getElementById("var").value=1;
}
function focus() {
if (document.getElementById("var").value == 1) {
document.getElementById("marcas").value = "";
document.getElementById("var").value=0;
window.location.reload();
}
}
function load() {
with (document.getElementById("marcas")) {
selectionStart = selectionEnd = value.length;
focus();
}
}
</script>
</head>
<body onload="load()">
...
<tr>
<td width="15%">Marca</td>
<td width="43%"><input id="marcas" type="text" class="cajaGrande" name="marcas" size="20" class="marcas" placeholder="Introduce marca" onkeypress="lanzarmarca()"><input id="var" type="hidden" name="var" value="0"></td>
</tr>
<tr>
<td width="15%">Modelo</td>
<td width="43%"><input id="modelos" type="text" name="modelos" size="20" class="modelos" placeholder="Introduce Modelo" onkeypress="lanzarmodelo()"></td>
I've tried to use onfocus instead of onkeypress but the typeahead script breaks, or typeahead.destroy o input.marcas.val() reset with ""... but nothing of this works fine.
Hope it help or someone find a better way to do this.
Thank's a lot for your help David, it really help me.
I've created a "calender"-like table that updates its content via a list located in a .PHP file. It works fine, but I'd like to be able to style it better. I would like to have the text which is currently appearing in "contentContainer" under the table, appear in the cell it belongs to. As of now, if I move the div into $calender, it loads only in the first cell.
I'd also like for the row to break at 7 columns.
<script type="text/javascript">
var request;
showEvents = function(caller){
request = new XMLHttpRequest();
request.open("GET", "getevents.php?id="+caller.id, true);
request.onreadystatechange = updatePage(caller.id);
request.send(null);
};
function updatePage(elemId){
if(request.readyState == 4){
var data = request.responseText;
document.getElementById(elemId).innerHTML="<span>"+data+"</span>"
}
}
</script>
<style>
table {
width: 700px;
}
td {
border: 1px solid;
min-width: 100px;
height: 100px;
vertical-align: text-top;
text-align: right;
box-sizing:border-box;
padding: 5px;
}
</style>
</head><body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<th colspan="31" scope="col">Calender</th>
</tr>
<tr>
<?php
$calendar="";
for($i=1;$i<=31;$i++){
$calendar .= "<td id='".$i."' onclick='showEvents(this)'><a href='#' id='".$i."'>".$i."</a> </td>";
if (($i % 7) == 0) $calendar .= '</tr><tr>';
}
echo $calendar;
?>
</tr>
</table>
<div id="contentContainer"></div>
</body>
</html>
To get the 7 days across you're looking for, I would put this in the for loop:
if (($i % 7) == 0) $calendar .= '</tr><tr>';
As for where your events pop up in the table, make sure you pass the cell's id from showEvents to updatePage:
request.onreadystatechange = updatePage(caller.id);
…
function updatePage(elemId){
…
document.getElementById(elemId).innerHTML="<span>"+data+"</span>"
That should get you there. And to make this even more complete, I would make use of the PHP date/time functions to properly set each date in its correct place on the calendar.
Update:
I've worked on it a bit and here's what I've got. For some reason, unbeknownst to me, javascript doesn't like the two functions to be separated. That's fixed, and I've also added a day of week spacer. Here's the result:
<script type="text/javascript">
var showEvents = function(caller){
request = new XMLHttpRequest();
request.open("GET", "getevents.php?id="+caller.id, true);
request.onreadystatechange = function () {
if(request.readyState == 4){
var data = request.responseText;
document.getElementById(caller.id).innerHTML="<span>"+data+"</span>"
}
}
request.send();
};
</script>
<style>
table {
width: 700px;
border-collapse: collapse;
}
td {
border: 1px solid;
min-width: 100px;
height: 100px;
vertical-align: text-top;
text-align: right;
box-sizing:border-box;
padding: 5px;
}
</style>
</head><body>
<table>
<tr>
<th colspan="7">Calendar</th>
</tr>
<tr>
<?php
$calendar="";
$n = 0;
$month = strtotime("2012-10-01"); // Always the first of the month
$start = date('N', $month);
$days = date('t',$month);
for($i=1;$i<=$days;$i++){
$n++;
if ($n <= $start) { // '<=': week starts on Sunday; '<': week starts on Monday
$calendar .= "<td> </td>";
$i--;
} else {
$calendar .= "<td id='{$i}' onclick='showEvents(this); return false;'><a href='#' id='{$i}'>{$i}</a></td>";
}
if (($n % 7) == 0) $calendar .= '</tr><tr>';
}
echo $calendar;
?>
</tr>
</table>
<div id="contentContainer"></div>
</body>
</html>