So I'm currently working on an invoicing tool which works fine however what im looking to do is to increment the data inserted within the within every new row added. Once that's done, i then want to be able to grab all of that data and submit it to the MySQL database using php. Does anybody know how this is done?
I've never studied Jquery if im honest so I wouldn't know where to start. Thanks
<html lang="en">
<head>
<meta charset="utf-8">
<title>Invoce Report</title>
<style type="text/css">
form{
margin: 20px 0;
}
form input, button{
padding: 5px;
}
table{
width: 100%;
margin-bottom: 20px;
border-collapse: collapse;
}
table, th, td{
border: 1px solid #cdcdcd;
}
table th, table td{
padding: 10px;
text-align: left;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".add-row").click(function(){
var name = $("#name").val();
var variants = $("#variants").val();
var markup = "<tr><td><input type='checkbox' name='record'></td><td name>" + name + "</td><td>" + variants + "</td></tr>";
$("table tbody").append(markup);
});
// Find and remove selected table rows
$(".delete-row").click(function(){
$("table tbody").find('input[name="record"]').each(function(){
if($(this).is(":checked")){
$(this).parents("tr").remove();
}
});
});
});
</script>
</head>
<?php
$mg = "mg";
$cb = "Classic Tobacco - 10ml";
$sh = "Sahara Tobacco - 10ml";
$ed = "Energy Drink - 10ml";
?>
<body>
<form id="invoice" action="invoicereg.php" method="POST">
<select id="name" name="name">
<option value="<?php echo $cb; ?>">Aramax Classic Tobacco</option>
<option value="<?php echo $sh; ?>">Aramax Sahara</option>
<option value="<?php echo $ed; ?>">Aramax Energy Drink</option>
</select>
<select id="variants" placeholder="Variants - If Applicable">
<option></option>
<option value="3<?php echo $mg; ?>">3mg</option>
<option value="6<?php echo $mg; ?>">6mg</option>
<option value="12<?php echo $mg; ?>">12mg</option>
<input type="button" class="add-row" value="Add Row">
</form>
<table>
<thead>
<tr>
<th>Select</th>
<th>Product</th>
<th>Variant - If Applicable</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<button type="button" class="delete-row">Delete Row</button><br><br>
<input type="submit" form="invoice">
</body>
</html>
Didn't test que jquery part, but this seems to lack the field in the form you want after submit. In the:
var markup = "<tr><td><input type='checkbox' name='record'></td><td name>" + name + "</td><td>" + variants + "</td></tr>";
You need to include the data you need to submit in the form. example:
var markup = '<tr><td><input type="checkbox" name="record"></td><td name><input type="hidden" name="values[]" value="' + name + ' ' +variants+ '" >' + name + '</td><td>' + variants + '</td></tr>';
After submit, in $_POST you get the value in array $_POST['values'].
Don't forget to check isset, it could be submitted with any value. And proper escape values to sql.
Related
Hi there i am trying to create a screen in php.
in which i select scenario and the screen displayed accordingly.
but i am stuck in a simple problem that my simple select query is not working
which is
$deptQuery = "Select * from mcb_department";
echo mysql_real_escape_string($deptQuery);
mysql_query($deptQuery) or die("adfasdf");
in same code if change the table name it just work fine, also this table is created in the db as well with the same name i have shared.
here is my complete code.
<?php
include "include/conn.php";
include "include/session.php";
if(isset($_SESSION['logged_user']) && $_SESSION['logged_user'] != '99999'){
header('location: login.php');
}
$query = mysql_query("select curdate() as todayDate");
$show = mysql_fetch_array($query);
if(isset($show)){
$todayDate= $show['todayDate'];
}
$group[] = array();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta Content="no-cache, no-store, must-revalidate" http-Equiv="Cache-Control" />
<meta Content="no-cache" http-Equiv="Pragma" />
<meta Content="0" http-Equiv="Expires" />
<link href="styles/style.css" type="text/css" rel="stylesheet" />
<link href="styles/popupstyle.css" type="text/css" rel="stylesheet" />
<link href="styles/ts.css" type="text/css" rel="stylesheet" />
<link href="styles/calendar.css" type="text/css" rel="stylesheet" />
<style>
table {
font-family: arial;
border-collapse: collapse;
width: 100%;
font-size: 11px;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 3px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body >
</body>
<select id='select_opt'>
<option> Select Assigment </option>
<option value="1"> assign quiz to all Employees </option>
<option value="2"> assign quiz to Sapcific Group </option>
<option value="3"> assign quiz to Sapcific Department </option>
<option value="4"> assign quiz to Sapcific Employee </option>
</select>
<!-- all Users -->
<div id='allUsers' style='margin-left:20px; margin-top: 20px; width: 50%; height:100px; display: none;' >
<form action="" mathod="post">
<select>
<option value=""> select Quiz</option>
</select>
<input type="submit" >
</form>
</div>
<!-- group -->
<div id='group' style='margin-left:20px; margin-top: 20px; width: 50%; height:100px; display: none;' >
<form action='group_assigment.php' mathod="post">
<table>
<tr>
<th>All <input type="checkbox"> </th>
<th>Group Name</th>
<th>Group Code</th>
</tr>
<?php
$group[] = array();
$groupQuery = "Select * from mcb_groups";
$query = mysql_query($groupQuery);
?>
<tr>
<?php if($query){
while($group = mysql_fetch_array($query)){
?>
<td><input type="checkbox" value="<?php echo $group['group_name']; ?>"></td>
<td><?php echo $group['group_name']; ?></td>
<td><?php echo $group['group_code']; ?></td>
</tr>
<?php }
} else{ echo "";} ?>
</table>
</form>
</div>
<!--
####################################
department
####################################
-->
<div id='Department' style='margin-left:20px; margin-top: 20px; width: 50%; height:100px; display: none;' >
<form action='group_assigment.php' mathod="post">
<table>
<tr>
<th>all <input type="checkbox"> </th>
<th>name</th>
<th>code</th>
<th>group</th>
</tr>
<tr>
<?php
$deptQuery = "Select * from mcb_department";
echo mysql_real_escape_string($deptQuery);
mysql_query($deptQuery);
?>
<td><input type="checkbox"></td>
<td>code</td>
<td>name</td>
<td>group</td>
</tr>
</table>
<input type="submit" >
</form>
</div>
<!--
####################################
Employee
####################################
-->
<div id='employee' style='margin-left:20px; margin-top: 20px; width: 50%; height:100px; display: none;' >
<form action="" mathod="post">
<label>employee id : </label><input type="text" >
<input type="submit" >
</form>
</div>
<script language="javascript" type="text/javascript">
var elem = document.getElementById("select_opt");
elem.onchange = function(){
console.log("yes i am running");
if( document.getElementById("select_opt").value == "1" ){
document.getElementById("allUsers").style.display = "Block";
document.getElementById("group").style.display = "none";
document.getElementById("Department").style.display = "none";
document.getElementById("employee").style.display = "none";
}
else if( document.getElementById("select_opt").value == "2" ){
document.getElementById("group").style.display = "Block";
document.getElementById("allUsers").style.display = "none";
document.getElementById("Department").style.display = "none";
document.getElementById("employee").style.display = "none";
}
else if( document.getElementById("select_opt").value == "3" ){
document.getElementById("Department").style.display = "block";
document.getElementById("group").style.display = "none";
document.getElementById("allUsers").style.display = "none";
document.getElementById("employee").style.display = "none";
}
else if( document.getElementById("select_opt").value == "4" ){
document.getElementById("employee").style.display = "block";
document.getElementById("Department").style.display = "none";
document.getElementById("group").style.display = "none";
document.getElementById("allUsers").style.display = "none";
}
else{
}
};
</script>
</
html>
regard,
Shafee jan
in same code if change the table name it just work fine
Then I would make sure you're connected to the right database. It's surprisingly common for developers to have multiple versions of their database, either on different MySQL instances or else on the same instance under a different schema name. Then they get mixed up, connecting to one database with MySQL Workbench while their app is connecting to a different database.
I would advise that you temporarily add a query to your page to run SHOW TABLES and then dump the result of that query to the log, to confirm that the mcb_department table is present in the database that your PHP script is connected to.
$deptQuery = "Select * from mcb_department";
echo mysql_real_escape_string($deptQuery);
mysql_query($deptQuery);
Where's your error checking? You need to check the return value of mysql_query() every time you run a query, so if there's a problem, you output the error message to your log. Only this way can you start to solve some of these problems.
$result = mysql_query($deptQuery);
if (!$result) {
trigger_error("Error in file " . __FILE__ . " near line " . __LINE__
. " for query $deptQuery: " . mysql_error());
die("Database error");
}
PS: The advice of some commenters that mysql_* functions are deprecated is true, but probably irrelevant to your question. Folks who focus on the API, when you have said the API is working, are just being pedantic.
I have an input, in which a code is entered and filled the table below with information from mysql optenida, the question is that I want every time a code is entered, the table all the data is added (without deleting the previous ). I got the idea to do with Ajax, but do not know where to start. So you see there is an easier way that I'm not seeing (finding on google). I do not like to add this data to a table, I would like it to be temporarily (until the table is confirmed, will be added to the db).
Any ideas?
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
table {
width:100%;
border: 1px solid black;
border-collapse: collapse;
}
td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<form action="index.php" method="post">
<input type="text" name="input_codigo" placeholder="Codigo del producto" autocomplete="off" autofocus required><br><br>
</form>
<table>
<tr>
<td><b>Codigo</b></td>
<td><b>Descripcion</b></td>
<td><b>Precio</b></td>
<td><b>Cantidad</b></td>
<td><b>Importe</b></td>
</tr>
<?php
session_start();
error_reporting(E_ALL ^ E_NOTICE);
require ("conectar.php");
$_SESSION["codigo"] = $_POST["input_codigo"];
$sql = "SELECT * FROM $tabla WHERE codigo = ".$_SESSION['codigo']."";
$result = $conexion->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "
<tr>
<td>".$row["codigo"]."</td>
<td>".$row["descripcion"]."</td>
<td>$".$row["venta"]."</td>
<td><input type='number' name='cantidad' value='1' min='1' max='5'></td>
<td>$".$row["venta"]."</td>
</tr>
";
}
} else {
echo "";
}
$conexion->close();
?>
</table>
</body>
</html>
Maybe something like this i write below.
Added jQuery and Ajax request to get the data and then add it to the table.
Changed the PHP a little so that the main HTML is not returned if it is and AJAX request.
Hope it works for you (i didnt test it).
<?php
session_start();
error_reporting(E_ALL ^ E_NOTICE);
$bAjaxRequest = false;
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$bAjaxRequest = true;
}
// if not and ajax request deliver the complete HTML
if(!$bAjaxRequest) {
?>
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
table {
width:100%;
border: 1px solid black;
border-collapse: collapse;
}
td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<form action="index.php" method="post" id="frmQuery" name="frmQuery">
<input type="text" name="input_codigo" id="input_codigo" placeholder="Codigo del producto" autocomplete="off" autofocus required><br><br>
</form>
<table id="tblData" name="tblData">
<tr>
<td><b>Codigo</b></td>
<td><b>Descripcion</b></td>
<td><b>Precio</b></td>
<td><b>Cantidad</b></td>
<td><b>Importe</b></td>
</tr>
<?php
} // end if(!$bAjaxRequest) {
// we are always going to return the TR's or ""
require ("conectar.php");
// ALWAYS, BUT ALWAYS VERIFY/VALIDATE USER INPUT!!!
$_SESSION["codigo"] = mysql_real_escape_string($_POST["input_codigo"]); // for example
$sql = "SELECT * FROM $tabla WHERE codigo = ".$_SESSION['codigo']."";
$result = $conexion->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "
<tr>
<td>".$row["codigo"]."</td>
<td>".$row["descripcion"]."</td>
<td>$".$row["venta"]."</td>
<td><input type='number' name='cantidad' value='1' min='1' max='5'></td>
<td>$".$row["venta"]."</td>
</tr>
";
}
} else {
echo "";
}
$conexion->close();
// if not and ajax request deliver the complete HTML
if(!$bAjaxRequest) { ?>
</table>
<script type="text/javascript">
function loadData(codigo) {
$.post( "index.php", { input_codigo: codigo }, function( data ) {
$("#tblData").append(data);
});
}
$(function() {
// jQuery POST are never cached, but if you change to GET you'll need this next line
//$.ajaxSetup ({ cache: false });
$("#frmQuery").submit(function(e) {
e.preventDefault();
loadData($("#input_codigo").val());
});
});
</script>
</body>
</html>
<?php
}
?>
Im trying to build a tow truck fare calculator, I found a script on here earlier, I modified it and it seems to be calculating fine, But now I need to add a drop down to it and calculate based on what selected.
Saying it quick, I need to know what we towing, if it is a car, the rate is 1.10 per mile made, If a van the rate is 1.30 per mile made and so on...
How do I take whats selected in drop down and calculate the fare?
I have litle php skills, so any comment appreciated.
<?php
session_start();
$rate = 1.10;
$fix = 75;
$callout = 65;
//}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Taxi Fare Calculation using PHP with GOOGLE MAPS API V3</title>
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px;
font-family:tahoma;
font-size:8pt;
}
#total {
font-size:large;
text-align:center;
font-family:Georgia, “Times New Roman”, Times, serif;
color:#990000;
margin:5px 0 10px 0;
font-size:12px;
width:374px;
}
input {
margin:5px 0px;
font-family:tahoma;
font-size:8pt;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
//<![CDATA[
var map = null;
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var Dublin = new google.maps.LatLng(53.349805,-6.260310);
var mapOptions = {
center : Dublin,
zoom : 4,
minZoom : 3,
streetViewControl : false,
mapTypeId : google.maps.MapTypeId.ROADMAP,
zoomControlOptions : {style:google.maps.ZoomControlStyle.MEDIUM}
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
//Find From location
var fromText = document.getElementById('start');
var fromAuto = new google.maps.places.Autocomplete(fromText);
fromAuto.bindTo('bounds', map);
//Find To location
var toText = document.getElementById('end');
var toAuto = new google.maps.places.Autocomplete(toText);
toAuto.bindTo('bounds', map);
//
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directions-panel'));
/*var control = document.getElementById('control');
control.style.display = 'block';
map.controls[google.maps.ControlPosition.TOP].push(control);*/
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
computeTotalDistance(response);
}
});
}
function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value;
}
total = total / 1000;
/*Start Calculating Distance Fair*/
if (16>total){
var cost = <?php echo $fix; ?>;
}
else if (17<total && 700>total)
{
var cost = ((total * <?php echo $rate; ?>) + (<?php echo $callout; ?>));
}
var fare = cost;
var fare = Math.round(fare*100)/100;
/*Distance Fair Calculation Ends*/
document.getElementById("total").innerHTML = "Total Distance = " + total + " km and FARE = $" + fare;
}
function auto() {
var input = document.getElementById[('start'), ('end')];
var types
var options = {
types: [],
componentRestrictions: {country: ["IE"]}
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onLoad="initialize()">
<table width="380px" border="2" cellpadding="0" cellspacing="0" bordercolor="#FF9F0F" style="border-collapse:collapse">
<tr>
<td bgcolor="#FFFF99" style="padding:5px;">
<table width="375px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div id="map_canvas" style="width: 374px; height: 300px; border: solid 1px #336699"></div></td>
</tr>
<tr>
<td><div id="form" style="width:374px; text-align:center; border: solid 1px #336699; background:#d1e1e4;">
From:
<input type="text" id="start" size="60px" name="start" placeholder="Enter Location From">
<br />
To:
<input size="60px" type="text" id="end" name="end" placeholder="Enter Destination ">
<input type="button" value="Calculate" onClick="calcRoute();">
<div id="total"></div>
</div></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Thanks
You could start from this...
<form action="process.php" method='post'>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit" />
</form>
Then in process.php $_POST['cars'] would be equal to whatever was submitted. Then just add another dropdown with something like <select name="prices"> and get $_POST['prices']
I am having two drop down lists on a html page. The data is coming from a mysql database and contains information like latitude, longitude and address. The user selects one item from the drop down and clicks on submit.
At this stage, I want to display a google map and put a marker at the latitude and longitude. Then, when the user selects the option from second drop down, I want to just add a marker on that map.
Currently, I am able to load the map once he clicks the submit from first drop down but all the options I tried to drop the pins are not working.
Here is the code I have achieved till now:
<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
require_once('auth.php');
include ('LoginConfig.php');
include ('FetchAgentDetails.php');
include ('FetchDeliveryDetails.php');
?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Delivery Management System</title>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA0Rm5aK0BYu1f_TzhjkG97cchHHlQfrQY&sensor=false">
</script>
<style type="text/css">
html {height:100%}
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<style type="text/css">
<!--
.style1 {
font-size: 20px;
font-weight: bold;
}
-->
</style>
<style type="text/css">
table.collection {width:250px;border:2px solid black;border-style: outset;border-collapse:collapse;}
table.collection tr {background-color:#fff; border-bottom: 1px #99b solid;padding:10px;}
table.collection tr:hover {background-color:#ffe;}
table.collection td {display:table-cell;border-bottom: 1px #99b solid; padding:10px;}
table.collection td a {text-decoration:none; display:table-row; padding:0px; height:100%;}
</style>
</head>
<body bgcolor="#8E8E38"
<div style="clear: right;">
<p align="left" class="style1">Welcome Delivery Manager! </p>
<img style="position: absolute; top: 0; right: 0;" src="./Images/logo.jpg" alt="Company Logo" width="90" height="60" align="middle"></img>
</div>
<p align="left">Home</p>
<hr></hr>
<!-- START Main Wrap -->
<form method="post">
<fieldset>
<div style="clear: left;float:left;">
<label for="deliveryList">Delivery Items:</label>
<select name="deliveryList" id="deliveryList">
<option value="Select delivery item" selected="selected">Select delivery item</option>
<?php
$deliveryHandler = new FetchDeliveryDetails();
$itemNameArray = $deliveryHandler->getItemNames();
foreach ($itemNameArray as $innerArray) {
if (is_array($innerArray)) {
$value = $innerArray['itemName'];
echo "<option value=\"$value\"";
if (isset($_POST['deliveryList']) && $_POST['deliveryList'] == $value)
echo 'selected';
echo ">" . $value . "</option>\n";
}
}
?>
</select>
<input type="submit" name="submit" id="submit" value="Submit"/>
</div>
<div style="clear: right;float:right;">
<label for="agentList">Avaliable Agent:</label>
<select name="agentList" id="agentList">
<option value="" selected="selected">Select agent to assign</option>
<?php
$agentHandler = new FetchAgentDetails();
$agentNameArray = $agentHandler->getAgentNames();
foreach ($agentNameArray as $innerArray) {
if (is_array($innerArray)) {
$agentId = $innerArray['agentId'];
$firstNameValue = $innerArray['firstname'];
$lastNameValue = $innerArray['lastname'];
$fullName = $firstNameValue . ' ' . $lastNameValue;
echo "<option value=\"$agentId\">$fullName</option>\n";
}
}
?>
</select>
<input type="submit" name="agentSubmit" id="agentSubmit" value="Check Location"/>
</div>
</fieldset>
</form>
<?php
if (isset($_POST['deliveryList'])) {
$selectedItemName = $_POST['deliveryList'];
$deliveryHander = new FetchDeliveryDetails();
$itemDetailsArray = $deliveryHander->getAllDeliveryDetails($selectedItemName);
foreach ($itemDetailsArray as $valuesArray) {
$itemNameValue = $valuesArray['itemName'];
$itemDescriptionValue = $valuesArray['itemDescription'];
$ownerFirstname = $valuesArray['firstName'];
$ownerLastname = $valuesArray['lastName'];
$dateAdded = $valuesArray['dateAdded'];
$deliveryDate = $valuesArray['deliveryDate'];
$deliveryAddress = $valuesArray['deliveryAddress'];
$deliveryLatitude = $valuesArray['deliveryLatitude'];
$deliveryLongitude = $valuesArray['deliveryLongitude'];
$assignedAgent = $valuesArray['assignedAgentId'];
if ($assignedAgent == 0) {
$assignedAgent = "-";
}
echo "<table border=\"1\" align=\"left\" class =\"collection\">\n";
echo "<tr>\n";
echo "<td >Item Name:<b>$itemNameValue</td>\n";
echo "</tr>\n";
echo "<tr>\n";
echo "<td>Item Description: <b>$itemDescriptionValue</td>\n";
echo "</tr>\n";
echo "<tr>\n";
echo "<td>Owner Name: <b>$ownerFirstname $ownerLastname</td>\n";
echo "</tr>\n";
echo "<tr>\n";
echo "<td>Date Added: <b>$dateAdded</td>\n";
echo "</tr>\n";
echo "<tr>";
echo "<td>Delivery Date: <b>$deliveryDate</td>";
echo "</tr>";
echo "<tr>";
echo "<td>Delivery Address: <b>$deliveryAddress</td>";
echo "</tr>";
echo "<tr>";
echo "<td>Assigned Agent: <b>$assignedAgent</td>";
echo "</tr>";
echo "</table>";
echo "<div id=\"googleMap\" style=\"width:500px;height:380px;\"></div>";
}
}
if (isset($_POST['agentList'])) {
}
?>
</body>
</html>
I almost forgot, this is my first PHP application, in fact my first web application. So please go easy on me. Point out other errors also, but please stick to the question.
Ok got it working by using iframe :) and a bit of php
Reference:
http://www.youtube.com/watch?v=HTm-3Cduafw
echo "<iframe style =\"display: block;
width: 800px;
padding-top: 2px;
height: 400px;
margin: 0 auto;
border: 0;\" width=\"425\" height=\"350\" align=\"center\" frameborder=\"0\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\"
src=\"https://maps.google.com/maps?f=d&source=s_d&saddr=$agent_map_url&
daddr=$map_url&hl=en&z=10&t=m&mra=ls&ie=UTF8&output=embed\"></iframe><br/>";
I'm trying to dynamically load a form that will is populated from the number of rows in a sql data base. The data returns a hex color, name, and price. I want to display the color and the name to the user within the form and on the POST, I want to send the price attached to that specific color. I've spent all day trying to figure this out.
Any help would be greatly appreciated!
EDIT: (here's what I have so far
Here's an example of what I have :http://hruska-schuman.com/test2/feedback_form.php
Code:
$query = "SELECT
`name`,
img,
price
FROM `gutter`";
try
{
$stmt = $db->prepare($query);
$stmt->execute();
}
catch(PDOException $ex)
{
die("Failed to run query: " . $ex->getMessage());
}
$rows = $stmt->fetchAll();
$form =
'<ol id="selectable" name="selectable">';
foreach($rows as $row):
$prices[] = htmlentities($row['price'], ENT_QUOTES, 'UTF-8');
$form .= '<li class="ui-widget-content" style="background:#'.htmlentities($row['img'], ENT_QUOTES, 'UTF-8').'">'.htmlentities($row['name'], ENT_QUOTES, 'UTF-8').' Price: '.htmlentities($row['price'], ENT_QUOTES, 'UTF-8').'</li>';
endforeach;
$form .=' </ol>';
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hruska Gutter Estimator</title>
<link rel="stylesheet" href="../extras/selecttable/development-bundle/themes/base/jquery.ui.all.css">
<script src="../extras/selecttable/development-bundle/jquery-1.9.1.js"></script>
<script src="../extras/selecttable/development-bundle/ui/jquery.ui.core.js"></script>
<script src="../extras/selecttable/development-bundle/ui/jquery.ui.widget.js"></script>
<script src="../extras/selecttable/development-bundle/ui/jquery.ui.mouse.js"></script>
<script src="../extras/selecttable/development-bundle/ui/jquery.ui.selectable.js"></script>
<link rel="stylesheet" href="../extras/selecttable/development-bundle/demos/demos.css">
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #000000; }
#selectable .ui-selected { background: #000000; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<SCRIPT type="text/javascript">
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
</SCRIPT>
<script type="text/javascript">
$(function() {
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
result.append( "" + ( index + 1) );
return index;
});
}
});
});
</script>
</head>
<body>
<h1>New Gutter Estimator!</h1>
<form action="sendmail.php" method="post">
<table>
<tr>
<td>Gutter Color:</td>
<td>
<?php echo $form; ?>
<span id="select-result" name="result">none</span>
<span id="select-result" name="price"><?php echo $prices; ?></span>
</td>
</tr>
<tr>
<td>Board Feet:</td>
<td>
<input type="txtChar" onkeypress="return isNumberKey(event)" name="spouts" value="" maxlength="120" />
</td>
</tr>
<tr>
<td>Number of Spouts:</td>
<td>
<input type="txtChar" onkeypress="return isNumberKey(event)" name="board_feet" value="" maxlength="120" />
</td>
</tr>
<tr>
<td>E-mail to Recieve Estimate:</td>
<td>
<input type="text" name="email_address" value="" maxlength="120" />
</td>
</tr>
<tr>
<td>Additional Comments:</td>
<td>
<textarea rows="10" cols="50" name="comments"></textarea>
</td>
</tr>
<tr><td> </td>
<td>
<input type="submit" value="Get Your Free Estimate!" />
</td>
</tr>
</table>
</form>
</body>
</html>
Using JQuery UI select table: http://jqueryui.com/selectable/
I just don't know how to get get the selected index and post "$prices[selectedIndex]"
You should use a custom attribute (like data- attribute) to your color elements.
$form .= '<li class="ui-widget-content" style="background:#'.
htmlentities($row['img'], ENT_QUOTES, 'UTF-8').'"
data-price=".$row['price'].">'.
htmlentities($row['name'], ENT_QUOTES, 'UTF-8').
' Price: '.htmlentities($row['price'], ENT_QUOTES, 'UTF-8').
'</li>
so then in your js you can do something like this:
$(function() {
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var price = $( "#selectable li" ).attr('data-price');
result.append( "" + ( price ) );
// or you can set it directly to an input / hidden input
$('#price-input').val(price);
return price;
});
}
});
});
Where #price-input could be a hidden input into the form:
<input type="hidden" name="selectedPrice" />
Of course you could also use radio inputs for this.