I'm unable to retrieve from my phpMyAdmin database using php code while i load the map api which uses javascript.
It only load the map javascript. I have some data stored in my database. Any help is appreciated. Thanks!
The end result must be both(my database data & the map api) able to load at the same time onto the screen.
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>Routes Available</th>
<th>Map Direction</th>
<th>Preferred Routes</th>
</tr>
<tr>
<td><div id="sidebar">
<form name="form1" method="get" action="" onSubmit = "getDirections( this.from.value, this.to.value, this.mode.value ); return false;">
<p>
<label style="width:50px;display:inline-block;">From:</label>
<input type="text" size="34" name="from" value=""/>
</p>
<p>
<label style="width:50px;display:inline-block;">To:</label>
<input type="text" size="34" name="to" value=""/>
</p>
<p>
<label style="width:50px;display:inline-block;">Via:</label>
<select disabled name="mode" disabled>
<option value="c">Car</option>
</select>
<input type="submit" name="submit" value="Get Directions" style="margin-left:25px"/>
</p>
</form>
<?php
//PHP CODE STARTS HERE
if(isset($_GET['submit'])){
$db_name="carpool";
$con = mysql_connect("localhost","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db($db_name, $con);
$from=mysql_real_escape_string($_GET['from']);
$to=mysql_real_escape_string($_GET['to']);
$query_for_result=mysql_query("
SELECT *
FROM routedetails
WHERE `from` LIKE '%".$from."%'
AND `to` LIKE '%".$to."%'
");
echo "<table border=1 width=510>";
echo "<tr>";
echo "<td>";
echo "<h2>From: Search Results</h2><ol>";
$data_fetch=mysql_fetch_assoc($query_for_result);
while($data_fetch=mysql_fetch_assoc($query_for_result))
{
echo "<li>";
foreach($data_fetch as $row => $value){
echo "$row - $value<br />";
}
echo "</li><hr/>";
}
echo "</tr>";
echo "</td>";
echo "</table>";
echo "</ol>";
mysql_close();
}
?>
<div></td>
<td><div id="map" style="width:600px;height:600px;margin-right:20px;float:left;"></div></td>
<td><div id="panel"></div>
<script type="text/javascript" src="http://gothere.sg/jsapi?sensor=false"></script>
<script type="text/javascript">
gothere.load("maps");
//var directions;
function initialize() {
if (GBrowserIsCompatible()) {
// Create the Gothere map object.
var map = new GMap2(document.getElementById("map"));
// Set the center of the map.
map.setCenter(new GLatLng(1.362083, 103.819836), 11);
// Add zoom controls on the top left of the map.
map.addControl(new GSmallMapControl());
// Add a scale bar at the bottom left of the map.
map.addControl(new GScaleControl());
// directions.load("from: Changi Airport to: Orchard Road");
}
directions = new GDirections(map, document.getElementById("panel"));
}
function getDirections(from, to, mode) {
var travelMode;
directions.load("from: " + from + " to: " + to, {travelMode: travelMode});
}
gothere.setOnLoadCallback(initialize);
</script></td>
</tr>
</table>
</body>
</html>
You have invalid html code, you are opening your ordered list <ol> inside a cell <td><h2>...</h2><ol>, but closing it outside table </table></ol>, and you are closing your cell after your row </tr></td>. Your output code currently looks like this -
<table border=1 width=510>
<tr>
<td>
<h2>From: Search Results</h2>
<ol>
<li>$row - $value<br /></li>
<hr/>
</tr>
</td>
</table>
</ol>
Also, try removing $data_fetch=mysql_fetch_assoc($query_for_result); as it is a duplicate of the next line while($data_fetch=mysql_fetch_assoc($query_for_result))
Related
I have a dynamic table in a form, where depending on the user Input rows will be added to the table. Table column have Id, Name, Types of games(Dynamic list fetched from DB Table).
Now when user enters any number in No. of Students field and click on Load Games button, I am expecting that table should expand to that many rows so that user can insert the data in fields.
Its working as well but the problem is third field of the table is containing a list. and I am unable to understand how to populate the list for game_id field in every row of the table.
Code
<?php
$db = new PDO("sqlite:c:/sqlite/games.db");
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$query_game = $db->prepare("select distinct games as di from outdoor_games;");
$query_game->execute();
$data = $query_game->fetchAll();
?>
<!DOCTYPE html>
<html>
<head>
<title>Access form</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script language="JavaScript"> </script>
</head>
<body>
<form action="<?php $_SERVER['PHP_SELF'];?>" method="post">
<h2 style="text-align:center;">Test Form</h2>
<fieldset style="width: 1000px;">
<legend><b> Source Profile</b></legend>
<TABLE id="STable" width="350px" border="1">
<tr>
<th bgcolor="WHITESMOKE">Student_ide</th>
<th bgcolor="WHITESMOKE">Student_Name</th>
<th bgcolor="WHITESMOKE">Game Id </th>
</tr>
<TR>
<td><input type= "text" name= "Stu_Id[]" value=1 /> </td>
<td><input type= "text" name= "Stu_Name[]" /> </td>
<td><select name= "Game_id[]" />
<option value=""><b>Games</b></option>
<?php foreach ($data as $row){echo '<option value="' . $row['di'] . '">' . $row ['di'] . '</option>';} ?>
</select>
</tr>
</td>
</TR></TABLE></br>
<label>No. of Students <input type= "text" id="s_cnt" name= "d_Count"></label>
<button type="button" class='loadgames' >Load Games</button>
<input type="submit" name ="add_SP" value ="Add Student Info" style="float: right;" /> </br> </br>
</fieldset ></br> </br>
<input type="submit" name ="exit" value ="EXIT" />
</form>
<script>
$(".loadgames").on('click',function(){
var num = $("#s_cnt").val();
$("#STable tr").slice(2).remove();
for (var i = 2; i <= num; i++)
{
var data = "<tr><td><input type='text' id='Stu_Id"+i+"' class='Stu_Id' name='Stu_Id[]' value = "+i+" /></td><td><input type='text' id='Stu_Name"+i+"' name='Stu_Name[]' /></td> <td><select name= 'Game_id[]' /><option value=""><b>Games</b></option>"+<?php foreach ($data as $row){echo '<option value="' . $row['di'] . '">' . $row ['di'] . '</option>';} ?>+"</select></tr>";
$("#STable").append(data);
}
});
</script>
</body>
</html>
I could achieve the same with following jquery code :
$(".loadgames").on('click',function()
{
var num = $("#s_cnt").val();
$("#STable tr").slice(2).remove();
for (var i = 2; i <= num; i++)
{
var data = "<tr><td><input type='text' id='Stu_Id"+i+"' class='Stu_Id' name='Stu_Id[]' value = "+i+"></td><td><input type='text' id='Stu_Name"+i+"' name='Stu_Name[]'/></td><td><select name='Game_id[]'><option value='null'>Games</option><?php foreach ($data as $row){echo "<option value=".$row['di'] . ">" .$row['di']. "</option>";}?></select></td></tr>";
$("#STable").append(data);
}
});
Only after first execution table is displayed and also outs_print.php file is displayed in new tab when again executed outward_print.php file is displayed in same tab.
I want table(outs_print.php file) to be displayed in new tab after button is clicked.
<!doctype html>
<body>
<form name="out_print" action="out_print.php" method="post">
<table class="table_1">
<tr><td><label>Date Range From</label></td>
<td><input type="date" name="from" /></td>
<td><label>To</label></td>
<td><input type="date" name="to"/></td></tr>
<tr><td><label>Name</label></td>
<td><input type="text" name="name" /></td></tr></table>
<input type="submit" name="submit" value="Search" onclick="myFunction();" class="button3"/>
<script>
function myFunction()
{
document.out_print.action = "outs_print.php";
document.out_print.submit();
}
</script>
</form>
</body>
</html>
outs_print.php
<?php
$connection = mysql_connect("localhost", "root", "");
$db = mysql_select_db("prs", $connection);
if(isset($_POST['submit'])){
$name = $_POST['name'];
$from = $_POST['from'];
$to = $_POST['to'];
if($name !=''||$from !=''||$to !='')
{
?>
<html>
<body>
<table border="1" bordercolor="#d6d6d6" class="tabl">
<thead bgcolor="#FAFAFA">
<tr>
<th>No</th>
<th>Date</th>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM out WHERE (date between '$from' and '$to') AND (name = '$name')";
$records=mysql_query($sql);
while($out=mysql_fetch_assoc($records))
{
echo "<tr>";
echo "<td>".$out['no']."</td>";
echo "<td>".$out['date']."</td>";
echo "<td>".$out['name']."</td>";
echo "<td>".$out['price']."</td>";
echo "</tr>";
}
?>
<script type="text/javascript">
alert("Okay");
var win = window.open("out_print.php", "out_print.php");
win.focus();
</script>
<?php
}
}
?>
</tbody>
</table>
</body>
</html>
The other answers here are on the right track, but target="_blank" will create a new tab/window with each form submission.
If you want a new tab/window to be launched on the first submission of the form, and any subsequent submissions of the form to return their result in the tab/window which was created on the first submission, giving the target a name will do that.
<form name="out_print" method="post" action="out_print.php" target="out_print_response">
....
http://www.w3schools.com/tags/att_form_target.asp
Just add target="_blank" to the form element :)
http://www.w3schools.com/tags/tag_form.asp
add target="_blank" like this:
<form name="out_print" action="out_print.php" method="post" target="_blank">
target attribute in form specifies where to display the response that is received after submitting the form. target="_blank" display the response in new tab.
Hope this helps.
subjects
course
chapters
I want to add 2 dynamic dropdown lists, one is for subjects, and one is for course. When I select subject, courses which is added to that subject should be loaded in the course dropdown list, and then add chapters to that courses.
How do I do that?
Any help would be appreciated.
Here is my code:
<div class="content-form-inner">
<div id="page-heading">Enter the details</div>
<div class="form_loader" id="thisFormLoader"></div>
<div id="error_message"></div>
<form name="thisForm" id="thisForm" action="editchapters.php?mode=<?php echo $_REQUEST['mode']; ?>&id=<?php echo $id; ?>" method="post" enctype="multipart/form-data">
<table border="0" cellpadding="0" cellspacing="0" id="id-form" >
<tr>
<th valign="top" style="width:0%"><span class="required">*</span>Subject</th>
<td style="width: 0%">
<select name="subject_name" class="select-form required " style="color:#000 !important;width:200px !important">
<option value="">Select</option>
<?php
$sql = "select * from mock_subject ";
$res = mysqli_query($dbhandle,$sql);
$numrows =mysqli_num_rows($res);
echo mysql_error();
if($numrows){
while($obj = mysqli_fetch_object($res)){
if($obj->status == 1){
if($subject == $obj->id){
echo '<option value="'.$obj->id.'" selected>'.($obj->subject_name).'</option>';
}
else{
echo '<option value="'.$obj->id.'">'.($obj->subject_name).'</option>';
}
}
}
}
?>
</select>
</td>
<td style="width: 0%;">
<div id="subject_id-error" class="error-inner"></div>
</td>
<td></td>
</tr>
<tr>
<th valign="top" style="width:0%"><span class="required">*</span>Course</th>
<td style="width: 0%">
<select name="course_name" class="select-form required " style="color:#000 !important;width:200px !important">
<option value="">Select</option>
<?php
$sql = "select * from mock_course ";
$res = mysqli_query($dbhandle,$sql);
$numrows =mysqli_num_rows($res);
echo mysql_error();
if($numrows){
while($obj = mysqli_fetch_object($res)){
if($obj->status == 1){
if($course == $obj->id){
echo '<option value="'.$obj->id.'" selected>'.($obj->course_name).'</option>';
}
else{
echo '<option value="'.$obj->id.'">'.($obj->course_name).'</option>';
}
}
}
}
?>
</select>
</td>
<td style="width: 0%;">
<div id="course_id-error" class="error-inner"></div>
</td>
<td></td>
</tr>
<tr>
<th><span class="required">*</span>Chapter</th>
<td><input type="text" name="chapter_name" class="inp-form required" value="<?php echo $chapter;?>" style="color:#000 !important;"></td>
<td>
<div></div>
</td>
</tr>
<tr>
<th> </th>
<td valign="top"><input type="submit" name="submit_button" value="<?php echo $mode=="edit"? "Update" : "Add" ?>" class="form-submit" />
<input type="reset" value="Reset" class="form-reset" />
</tr>
</table>
</form>
<div class="clear"></div>
</div>
One possible solution would, if your data set is comparatively small. Load all the data on page load, and use jquery to get value of dropdown, and based on that formulate the values for the other drop downs.
Second Solution would be to us AJAX and call data from your database for every action. and print using Angular.
I've attached a sample code for that.
This is my_script.js
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$(document).ready(function(){
callSetTimeout();
});
function callSetTimeout(){
setTimeout(function(){
update();
callSetTimeout();
},200);
}
function update(){
$http.get("http://localhost/WhatsOnYourMInd/db.php")
.success(function (response) {$scope.names = response.records;});
}
});
This is for db.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "mind";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT * FROM data";
$result = $conn->query($sql);
$jsonString=array();
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
array_push($jsonString,array('id' =>$row['id'],'name' =>$row['name'],'message' =>$row['message']));
}
echo json_encode(array("records"=>$jsonString));
} else {
echo "0 results";
}
$conn->close();
?>
This is for index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Whats on your Mind</title>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<ul id="ajax"></ul>
<div ng-app="myApp" ng-controller="customersCtrl">
<ol>
<li ng-repeat="x in names">
{{ 'Id:'+x.id + ' Name:' + x.name +' Message:'+x.message}}
</li>
</ol>
</div>
<script src="my_script.js"></script>
</body>
</html>
Easiest way of creating dynamic dropdown is by using jquery inside the head tag.
Give onchange() event and guide the data to another page using jquery code, and then link 2 dropdowns. The code I did is like this, which I felt is the easiest way for dynamic dropdowns.
jquery which I included is
<script>
function ajaxDrp(data){
$.ajax({
method: "POST",
url: "chapterDropdown.php",
data: {
id: data
}
}).success(function(data) {
$('#selectCourse').empty();
$('#selectCourse').append(data);
});
}
</script>
#selectCourse is the id I have given to the other dropdown which have to be in sync with the first dropdown.
The given url in the jquery is the path where data of first dropdown is getting collected. In my case, the code is like this:
<?php
$id = $_REQUEST['id'];
$query = "SELECT * FROM `your table name` WHERE subject_id = " . $id;
$result = mysqli_query($dbhandle,$query);
$count = 0;
$option`enter code here` = '';
while($row = mysqli_fetch_assoc($result)) {
$option .= '<option
value="'.$row['id'].'">'.$row['course_name'].'</option>';
}
echo $option;
?>
I have a php application that fetches the requests from mysql database and displays them for further approval. The form is fetched from send_req.php and is displayed inside the div on showrequests.php. This is the code for send_req.php
<table style="border:0;border-color:transparent">
<tr style="background-color:lightblue">
<td>Product ID</td>
<td>Name</td>
<td>Quantity</td>
<td><input type="checkbox" name="selectAll" /></td>
<td>Authorized Quantity</td>
</tr>
<form method="post" action="send_req.php">
<?php
$reqNum = $_POST['rId'];
echo "<h3>Request # $reqNum</h3>";
$showReqs = mysql_query("Select * from request where request_number='".$reqNum."' and status=0");
while($resultA = mysql_fetch_array($showReqs))
{
$rBy = $resultA['requested_by'];
$rTime = $resultA['request_time'];
$rId = $resultA['id'];
$pId = $resultA['product_id'];
$getPrName = mysql_query("select name from products where id='$pId'");
$prN = mysql_fetch_array($getPrName);
$prName = $prN['name'];
$rQuantity = $resultA['requested_quantity'];
$status = $resultA['status'];
?>
<tr>
<input type="hidden" name="rId[]" value="<?php echo $rId; ?>"/>
<td style="background-color:orange"><input type="text" name="prId[]" value="<?php echo $pId; ?>" readonly="readonly" style="border:0px"/></td>
<td style="background-color:orange"><input type="text" name="prName[]" value="<?php echo $prName; ?>" readonly="readonly" style="border:0px"/></td>
<td style="background-color:orange"><input type="text" name="quantity[]" value="<?php echo $rQuantity; ?>" readonly="readonly" style="border:0px"/></td>
<td style="background-color:orange"></td>
<td><input type="text" name="pQuantity[]" /></td>
</tr>
<?php }
?>
<tr>
<td></td>
<td></td>
<td></td>
<input type="hidden" name="rNum" value="<?php echo $reqNum; ?>" />
<td></td>
<td><input type="submit" name="submitReq" value="Send" id="submit_req" style="backgroundColor:Transparent;border:0;color:blue;width:100;"/></td>
</tr>
</form>
</table>
<?php
echo "Requested By:$rBy at ".substr($rTime,11,18)." ".substr($rTime,0,10);
?>
This is the showrequests.php page
<html>
<head>
<script type="text/javascript">
function getRequest(ob)
{
var id = ob.id;
if(window.XMLHttpRequest)
{
ajaxOb = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
ajaxOb = new ActiveXObject("Microsoft.XMLHTTP");
}
ajaxOb.open("POST", "send_req.php");
ajaxOb.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajaxOb.send("rId=" + id);
ajaxOb.onreadystatechange = function()
{
if(ajaxOb.readyState == 4)
{
if(ajaxOb.status == 200)
{
document.getElementById("showTable").innerHTML = ajaxOb.responseText;
}
}
}
}
</script>
</head>
<body>
<?php
$mysql_con = mysql_connect("localhost","root","") or die("Could not connect ".mysql_error());
$mysql_db = mysql_select_db("cart",$mysql_con) or die("Unable to select db ".mysql_error());
echo "<h2 align='center'>Pending Requests</h2>";
$showReq = mysql_query("Select distinct(request_number) as rNums from request where status=0");
?>
<div style="float:left;margin-right:15px;">
<br/>
<?php
while($result = mysql_fetch_array($showReq))
{
$rNum = $result['rNums'];
?>
<input type="button" name="fetchReq" id="<?php echo $rNum; ?>" value="<?php echo "Request # $rNum"; ?>" style="margin-bottom:5px;backgroundColor:Transparent;border:0;color:blue;width:100;text-Decoration:underline" onclick="getRequest(this)"/>
<?php
echo "<br/>";
}
?>
</div>
<div id="showTable" style="float: left">
</div>
</body>
</html>
My problem now is that everything works fine in chrome and IE but the form is not submitted when i click the submit button in firefox. I am using firefox 20.0.1. Update: I have removed the html,head and body tags from send_req.php
still not working
form is not allowed inside table. Please see also
Form inside a table
Regards,
Michael
Reminder : the structure of an HTML document is :
<!-- No div before html tag -->
<!DOCTYPE html> <!-- Doctype for HTML5 ; use whatever doctype you need -->
<html>
<head>
</head>
<!-- No div before body tag -->
<body>
<!-- Divs only belongs here -->
</body>
</html>
<!-- No div after html tag -->
If you don't follow this basic structure, you're forcing the browser to interpret your invalid code (+ quirks mode when you don't provide a doctype).
Some browser guess well what you tried to do, others don't, as Firefox might.
Please use a HTML validator as W3's validator to check your syntax.
I am trying to use a jquery to have text boxes and little pluses and minuses to add and delete them when required. It displays the data from MySQL but you can't delete them and you can only add them
Here is a link to a webpage i am using
http://adamlisik.co.uk/epq2/models/certificate.php?certid=250631166
I want to find a way that the text boxes that are displayed with the data from db can be deleted
<script type="text/javascript">
$(document).ready(function(){
// tworzymy zmienną i, wykorzystamy ją do identyfikowania wierszy
// ustawiamy jej wartość 2, ponieważ jeden wiersz jest już w tabeli
var i = 2;
// tworzymy zmienną szablonWiersza i wczytujemy do niej szablon z textarea #szablon
var szablonWiersza = jQuery.format($("#szablon").val());
// tworzymy funkcję, która dodaje szablon do właściwej tabeli
function dodajWiersz() {
var ii = i++;
// dodajemy wiersz do właściwej tabeli
$(szablonWiersza(ii)).appendTo("#listaOsob tbody");
// Nowy wiersz jest już widoczny.
// Każdy element nowego wiersza posiada swoje id
// tr na id: wiersz_2, ikona minus ma id: usunOsobe_2
// Do nowo dodanej ikony - dodajmy zdarzenie.
// W momencie kliknięcia minusa, wiersz zostanie usunięty.
$("#usunOsobe_" + ii).click(function(){
$("#wiersz_" + ii).remove();
});
}
// do przycisku #dodajOsobe dodajemy zdarzenie,
// kliknięcie na przycisk plus wywoła fukcję dodajWiersz
$("#dodajOsobe").click(dodajWiersz);
});
</script>
<h1>Sixth form baccaluraureate</h1>
<div id="content">
<textarea id="szablon" style="display:none;" cols="1" rows="1">
<tr id="wiersz_{0}">
<td><input type="text" name="name[]" ></td>
<td><input type="text" name="hours[]"></td>
<td><input type="hidden" name="certificate_id[]"value="<?php echo $table2[0][2]; ?>">
<td><img src="http://antczak.org/source/dynamic_forms/12.png" id="usunOsobe_{0}" alt="usun"></td>
</tr>
</textarea>
<!-- Właściwa tabela -->
<h4>activities form</h4>
<form action="update_certificate.php" method="post">
<!-- do not delete student is!!!! because we need it in confirm_cert.php-->
<input type="hidden" name="student_id" value="<?php echo $row[0] ?>" /> <br />
<input type="hidden" name="student_id2" value="<?php echo $row[3] ?>" /> <br />
<input type="hidden" name="certificate_number" value="<?php echo $certificate_name; ?>" />
<br/>
<table id="listaOsob">
<thead>
<tr>
<th>Activity name</th>
<th>Hours</th>
</tr>
</thead>
<tbody>
<tr>
<?php
$a=0;
while($a<sizeof($table2)){
echo "<tr><td><input type='text' name='name[]' value='".$table2[$a][0]."'></td>";
echo "<td><input type='text' name='hours[]' value='".$table2[$a][1]."'></td>";
echo "<td><input type='hidden' name='certificate_id[]' value='".$table2[$a][2]."'></td>";
#echo $a;
if ($a==0){
echo "<td><img src='../view/11.png' id='dodajOsobe' alt='dodaj'></td></tr>";
}else{
echo "<td><img src='../view/12.png' id='usunOsobe_{0}' alt='usun'></td></tr>";
}
$a++;
}
?>
</tr>
</tbody>
</table>
<input type="submit" value="Submit" />
</form>
</div>
Perhaps you could use the jQuery .remove() function.
http://api.jquery.com/remove/