Here are three tables that I need to sync together.
-Table 1 is People (name, email etc)
-Table 2 is Cars (brand, color etc)
-Table 3 is Ads (One ad containing info from Table 1 and Table 2)
What I basically want is for "TABLE 1" to be able to search for data from "TABLE 2". When the data is selected I want data from both TABLE 1 and TABLE 2 to be entered into TABLE 3.
When a user is logged in he should be able to search for a products in a search field and choose one product - THIS IS DONE AND WORKS.
The problem is that I don't know how to take the search result, in this example it would be a car. And via a submit button create an AD and enter data in TABLE 3 with the name and email from TABLE 1 and the car model and color from TABLE 2.
Here is the CODE for the FORM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP Live MySQL Database Search</title>
<style type="text/css">
body{
font-family: Arail, sans-serif;
}
/* Formatting search box */
.search-box{
width: 300px;
position: relative;
display: inline-block;
font-size: 14px;
}
.search-box input[type="text"]{
height: 32px;
padding: 5px 10px;
border: 1px solid #CCCCCC;
font-size: 14px;
}
.result{
position: absolute;
z-index: 999;
top: 100%;
left: 0;
}
.search-box input[type="text"], .result{
width: 100%;
box-sizing: border-box;
}
/* Formatting result items */
.result p{
margin: 0;
padding: 7px 10px;
border: 1px solid #CCCCCC;
border-top: none;
cursor: pointer;
}
.result p:hover{
background: #f2f2f2;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.search-box input[type="text"]').on("keyup input", function(){
/* Get input value on change */
var inputVal = $(this).val();
var resultDropdown = $(this).siblings(".result");
if(inputVal.length){
$.get("adsToDb.php", {term: inputVal}).done(function(data){
// Display the returned data in browser
resultDropdown.html(data);
});
} else{
resultDropdown.empty();
}
});
// Set search input value on click of result item
$(document).on("click", ".result p", function(){
$(this).parents(".search-box").find('input[type="text"]').val($(this).text());
$(this).parent(".result").empty();
});
});
</script>
</head>
<br>
<br>
<p>Search the product you want to sell</p>
<body>
<div class="search-box">
<input type="text" autocomplete="off" placeholder="Search product..." />
<div class="result"></div>
</div>
</body>
<br>
<br>
<br>
<br>
<br>
<br>
<form action="createAd.php" method="post">
Name: <input type="text" name="name"><br>
<input type="submit" name="fields" value="sell this product" />
<input type="hidden" name="fieldsCount" value="<?php echo $fields+1 ?>" />
</form>
</html>
HERE IS THE CODE FOR THE DB SEARCH
<?php
/* Attempt MySQL server connection. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
try{
$pdo = new PDO("mysql:host=localhost;dbname=DB", "", "");
// Set the PDO error mode to exception
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e){
die("ERROR: Could not connect. " . $e->getMessage());
}
// Attempt search query execution
try{
if(isset($_REQUEST['term'])){
// create prepared statement
$sql = "SELECT * FROM products WHERE product_name LIKE :term";
$stmt = $pdo->prepare($sql);
$term = $_REQUEST['term'] . '%';
// bind parameters to statement
$stmt->bindParam(':term', $term);
// execute the prepared statement
$stmt->execute();
if($stmt->rowCount() > 0){
while($row = $stmt->fetch()){
echo "<p>" . $row['product_name'] . "</p>";
}
} else{
echo "<p>No matches found";
}
}
} catch(PDOException $e){
die("ERROR: Could not able to execute $sql. " . $e->getMessage());
}
// Close connection
unset($pdo);
?>
You can use a hidden field which holds the id of the car inside the forloop of the search result and once user click on button to add to Ad table, already you have the loggedIn User ID and can get from the hidden field the car_id
<form action="createAd.php" method="post">
Name: <input type="text" name="name">
<input type="submit" name="fields" value="sell this product" />
<input type="hidden" name="fieldsCount" value="<?php echo $fields+1 ?>" />
**<input type="hidden" name="car_id" value="<?php echo $car_id ?>" />**
</form>
Related
Hello stack right now I am facing a problem I am unable to insert data in database through jQuery Ajax I have attached all related files Can anyone go through it I am new in php development.
**task.php**
<html>
<head>
<style type="text/css">
html, body {
margin: 5px;
padding: 5px;
background: #fff;
}
form {
border: 1px solid #999;
padding: 0.25em;
background: #EEE;
}
div {
padding-bottom: 0.25em;
}
/* essential */
label {
float: left;
width: 6em;
text-align: right;
padding-right: 0.5em;
}
input, textarea {
text-align: left;
width: 200px;
height:30px;
}
input.submit {
margin-left: 6.5em;
width: auto;
}
label, input.submit {
font: normal 0.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
}
</style>
<script src="jquery-3.3.1.js"></script>
<script src="insert.js"></script>
<script>
</script>
</head>
<body>
<h1>FORM</h1>
<form>
<div>
<label>Name:</label>
<input type="text" name="name" id="Name" />
</div>
<div>
<label>Age:</label>
<input type="text" name="age" id="age"/>
</div>
<div>
<label>Email Id:</label>
<input type="text" name="emailId" id="emailId"/>
</div>
<div>
<label>Password:</label>
<input type="text" name="password" id="pass"/>
</div>
<div>
<input type="submit" id="submit" name="submit" value="Submit" onclick="insertData()" />
</div>
</form>
</body>
</html>
This is my insert.php file where I have write all query related to insert my data.
**insert.php**
<?php
include("connection.php");
if(isset($_POST['submit']))
{
$Fname=$_POST["name"];
$Age=$_POST["age"];
$EmailId=$_POST["emailId"];
$Password=$_POST["password"];
$Insert = "INSERT INTO simpleform (Name, Age, Email_Id, Password)
VALUES ('.$Fname.', '.$Age.', '.$EmailId.', '.$Password.')";
$Query=mysqli_query($con, $Insert);
print_r($Insert);
if(!$Query)
{
echo mysqli_error();
}
else
{
echo "Successfully Inserted <br />";
}
}
?>
This is my insert.js file where I did all ajax related work.
**insert.js**
function insertData() {
debugger;
var name=$("#Name").val();
var age=$("#age").val();
var emailId=$("#emailId").val();
var pass=$("#pass").val();
debugger;
// AJAX code to send data to php file.
$.ajax({
type: "POST",
url: "kamalesh/insert.php",
data: {name:name,age:age,emailId:emailId,pass:pass},
dataType: "JSON",
success: function(data) {
alert("Data Inserted");
}
});
}
It looks like In your insert.php the if(isset($_POST['submit'])) is preventing the script from running when your insert.js function passes parameters to insert.php. When AJAX passes parameters to insert.php, the isset($_POST['submit']) will return false.
You will need to remove the if(isset($_POST['submit'])) from nsert.php. I will also suggest you to prevent the form from submitting and refreshing your page. Look into e.preventDefault.
Also for your $insert query you should remove the "." before and after each variable in the "VALUES". They are not needed.
This is my code
<?php
/* Attempt MySQL server connection. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
try {
$pdo = new PDO("mysql:host=localhost;dbname=hospital", "root", "");
// Set the PDO error mode to exception
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
die("ERROR: Could not connect. " . $e->getMessage());
}
// Attempt search query execution
try {
if (isset($_REQUEST['term'])) {
// create prepared statement
$sql = "SELECT am_first_name, am_middle_name,am_last_name FROM
admission_master WHERE am_ip_no LIKE :term";
$stmt = $pdo->prepare($sql);
$term = $_REQUEST['term'] . '%';
// bind parameters to statement
$stmt->bindParam(':term', $term);
// execute the prepared statement
$stmt->execute();
if ($stmt->rowCount() > 0) {
while ($row = $stmt->fetch()) {
// echo "<p>" . $row['am_ip_no'] . "</p>";
echo "<p>" . $row['am_first_name'] . "</p>";
echo "<p>" . $row['am_middle_name'] . "</p>";
echo "<p>" . $row['am_last_name'] . "</p>";
}
} else {
echo "<p>No matches found</p>";
}
}
} catch (PDOException $e) {
die("ERROR: Could not able to execute $sql. " . $e->getMessage());
}
// Close statement
unset($stmt);
// Close connection
unset($pdo);
?>
Font End Code Is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP Live MySQL Database Search</title>
<style type="text/css">
body{
font-family: Arail, sans-serif;
}
/* Formatting search box */
.search-box{
width: 300px;
position: relative;
display: inline-block;
font-size: 14px;
}
.search-box input[type="text"]{
height: 32px;
padding: 5px 10px;
border: 1px solid #CCCCCC;
font-size: 14px;
}
.result{
position: absolute;
z-index: 999;
top: 100%;
left: 0;
}
.search-box input[type="text"], .result{
width: 100%;
box-sizing: border-box;
}
/* Formatting result items */
.result p{
margin: 0;
padding: 7px 10px;
border: 1px solid #CCCCCC;
border-top: none;
cursor: pointer;
}
.result p:hover{
background: #f2f2f2;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#h input[type="text"]').on("keyup input", function () {
/* Get input value on change */
var inputVal = $(this).val();
var resultDropdown = $(this).siblings(".result");
if (inputVal.length) {
$.get("sqlsearch.php", {term: inputVal}).done(function (data) {
// Display the returned data in browser
resultDropdown.html(data);
});
} else {
resultDropdown.empty();
}
});
// Set search input value on click of result item
$(document).on("click", ".result p", function () {
$(this).parents(".search-
box").find('input[type="text"]').val($(this).text());
$(this).parents("#autoFill").find('input[type="text"]').val($(this).text());
$(this).parent(".result").empty();
});
});
</script>
</head>
<body>
<div class="search-box" id="h">
<input type="text" placeholder="Search ..." />
<div class="result"></div>
</div>
<div id="autoFill">
<input type="text" placeholder="name automatically ..." />
<div class="res"></div>
</div>
</body>
</html>
How To search name from the database using id from ajax and set that name to the next field in the form automatically this means ajax response.
I am developing a web application in PHP with a MySql database, and made a search suggestion box with ajax.
The problem is that I can select the suggestions with my mouse and it auto completes but when I try to auto complete it with my keyboard (select it with arrow up arrow down and pressing enter) it does nothing.
Is this a problem of my css, ajax or just html??? Could you please help with this, All help is appreciated, Thanks.
Here is my code :
Ajax
$term = mysqli_real_escape_string($link, $_REQUEST['term']); if(isset($term)){
// Attempt select query execution
$sql = "SELECT * FROM something WHERE name LIKE '" . $term . "%' LIMIT 4";
if($result = mysqli_query($link, $sql)){
if(mysqli_num_rows($result) > 0){
while($row = mysqli_fetch_array($result)){
echo "<p>" . $row['name'] . "</p>";
}
// Close result set
mysqli_free_result($result);
} else{
echo "<p>No Results</p>";
}
} else{
echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
} }
CSS
.result{ position: absolute;
z-index: 999;
top: 100%;
left: 0;
}
.search-box input[type="text"], .result{
width: 100%;
box-sizing: border-box;
}
/* Formatting result items */
.result p{
margin: 0;
padding: 7px 10px;
border: 0px solid #CCCCCC;
border-top: none;
cursor: pointer;
background: #ffffff;
}
.result p:hover{
background: #f2f2f2;
}
JAVASCRIPT
$(document).ready(function(){
$('.search-box input[type="text"]').on("keyup input", function(){
/* Get input value on change */
var inputVal = $(this).val();
var resultDropdown = $(this).siblings(".result");
if(inputVal.length){
$.get("something.php", {term: inputVal}).done(function(data){
// Display the returned data in browser
resultDropdown.html(data);
});
} else{
resultDropdown.empty();
}
});
// Set search input value on click of result item
$(document).on("click", ".result p", function(){
$(this).parents(".search-box").find('input[type="text"]').val($(this).text());
$(this).parent(".result").empty();
}); });
HTML
<form align=center method='POST' action='index.php?cmd=list-something'>
<h1 class="text-center">Search</h1>
<div class="form-group">
<div class="input-group search-box">
<input class="form-control" type="text" autocomplete="off" name="search" id="search" placeholder="Search"/>
<div class="result"></div>
<span class="input-group-btn">
<button class="btn btn-success" type="submit"><span class="glyphicon glyphicon-search" aria-hidden="true"><span style="margin-left:10px;">Pesquisar</span></button>
</span>
</span>
</div>
</div>
</form>
Please refer this Autocomplete library docs.
You can implement normal AJAX for fetching records and render those records using Autocomplete library.
I am creating a web page which Finding out and Listing the Doctors in a Given Area.
My both php scripts are as below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Live Doctor Search.</title>
<style type="text/css">
body{
font-family: Arail, sans-serif;
}
/* Formatting search box */
.search-box{
width: 300px;
position: relative;
display: inline-block;
font-size: 14px;
margin: 0 50%;
}
.search-box input[type="text"]{
height: 32px;
padding: 5px 10px;
border: 1px solid #CCCCCC;
font-size: 14px;
}
.result{
position: absolute;
z-index: 999;
top: 100%;
left: 0;
}
.search-box input[type="text"], .result{
width: 100%;
box-sizing: border-box;
}
/* Formatting result items */
.result p{
margin: 0;
padding: 7px 10px;
border: 1px solid #CCCCCC;
border-top: none;
cursor: pointer;
}
.result p:hover{
background: #f2f2f2;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.search-box input[type="text"]').on("keyup input", function(){
/* Get input value on change */
var term = $(this).val();
var resultDropdown = $(this).siblings(".result");
if(term.length){
$.get("backend-search.php", {query: term}).done(function(data){
// Display the returned data in browser
resultDropdown.html(data);
});
} else{
resultDropdown.empty();
}
});
// Set search input value on click of result item
$(document).on("click", ".result p", function(){
$(this).parents(".search-box").find('input[type="text"]').val($(this).text());
$(this).parent(".result").empty();
});
});
</script>
</head>
<body>
Select Your City:
<select name="city_nname">
<option value="Udaipur">Udaipur</option>
<option value="Jaipur">Jaipur</option>
<option value="Jodhpur">Jodhpur</option>
<option value="Sikar">Sikar</option>
<option value="Surat">Surat</option>
<option value="Ahmedabad">Ahmedabad</option>
<option value="badoda">badoda</option>
<option value="Pune">Pune</option>
<option value="Bangalore">Bangalore</option>
</select>
<div class="search-box">
<input type="text" autocomplete="off" placeholder="Search doctor..." />
<button type="submit" class="btn">Search</button>
<div class="result"></div>
</div>
</body>
</html>
The above code is my search_form.php. now I want to list out the the doctors name which are belongs to city_nname only.
Here is my php back end code
<?php
/* Attempt MySQL server connection. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
$link = mysqli_connect("localhost", "root", "", "demo_db");
// Check connection
if($link === false){
die("ERROR: Could not connect. " . mysqli_connect_error());
}
// Escape user inputs for security
$query = mysqli_real_escape_string($link, $_REQUEST['query']);
if(isset($query)){
// Attempt select query execution
$sql = "SELECT * FROM doctors WHERE doctor_name LIKE '" . $query . "%'";
if($result = mysqli_query($link, $sql)){
if(mysqli_num_rows($result) > 0){
while($row = mysqli_fetch_array($result)){
echo "<p>" . $row['doctor_name'] . "</p>";
}
// Close result set
mysqli_free_result($result);
} else{
echo "<p>No matches found for <b>$query</b></p>";
}
} else{
echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}
}
// close connection
mysqli_close($link);
?>
Now I want a mysql query that takes city_nname and doctor_name(from search box) and then give the list of doctors which are belongs to that city.
Please add lines which are comment by "// Add this line" and Modify lines which are comment by "// Modify this line"
search_form.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Live Doctor Search.</title>
<style type="text/css">
body{
font-family: Arail, sans-serif;
}
/* Formatting search box */
.search-box{
width: 300px;
position: relative;
display: inline-block;
font-size: 14px;
margin: 0 50%;
}
.search-box input[type="text"]{
height: 32px;
padding: 5px 10px;
border: 1px solid #CCCCCC;
font-size: 14px;
}
.result{
position: absolute;
z-index: 999;
top: 100%;
left: 0;
}
.search-box input[type="text"], .result{
width: 100%;
box-sizing: border-box;
}
/* Formatting result items */
.result p{
margin: 0;
padding: 7px 10px;
border: 1px solid #CCCCCC;
border-top: none;
cursor: pointer;
}
.result p:hover{
background: #f2f2f2;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.search-box input[type="text"]').on("keyup input", function(){
/* Get input value on change */
var term = $(this).val();
var city_nname = $("#city_nname").val(); // Add this line
var resultDropdown = $(this).siblings(".result");
if(term.length){
$.get("backend-search.php", {query: term, city:city_nname}).done(function(data){ // Modify this line
// Display the returned data in browser
resultDropdown.html(data);
});
} else{
resultDropdown.empty();
}
});
// Set search input value on click of result item
$(document).on("click", ".result p", function(){
$(this).parents(".search-box").find('input[type="text"]').val($(this).text());
$(this).parent(".result").empty();
});
});
</script>
</head>
<body>
Select Your City:
<select name="city_nname" id="city_nname"> <!-- Modify this line -->
<option value="Udaipur">Udaipur</option>
<option value="Jaipur">Jaipur</option>
<option value="Jodhpur">Jodhpur</option>
<option value="Sikar">Sikar</option>
<option value="Surat">Surat</option>
<option value="Ahmedabad">Ahmedabad</option>
<option value="badoda">badoda</option>
<option value="Pune">Pune</option>
<option value="Bangalore">Bangalore</option>
</select>
<div class="search-box">
<input type="text" autocomplete="off" placeholder="Search doctor..." />
<button type="submit" class="btn">Search</button>
<div class="result"></div>
</div>
</body>
</html>
backend-search.php
<?php
/* Attempt MySQL server connection. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
$link = mysqli_connect("localhost", "root", "", "bbtest");
// Check connection
if($link === false){
die("ERROR: Could not connect. " . mysqli_connect_error());
}
// Escape user inputs for security
$query = mysqli_real_escape_string($link, $_REQUEST['query']);
$city = mysqli_real_escape_string($link, $_REQUEST['city']); // Add this line
if(isset($query)){
// Attempt select query execution
$sql = "SELECT * FROM doctors WHERE doctor_name LIKE '" . $query . "%' AND city_nname='".$city."'"; // modify the table column name "city_nname" as like yours
if($result = mysqli_query($link, $sql)){
if(mysqli_num_rows($result) > 0){
while($row = mysqli_fetch_array($result)){
echo "<p>" . $row['doctor_name'] . "</p>";
}
// Close result set
mysqli_free_result($result);
} else{
echo "<p>No matches found for <b>$query</b></p>";
}
} else{
echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}
}
// close connection
mysqli_close($link);
?>
How about SELECT * FROM doctors WHERE doctor_name LIKE 'doctor_name%' AND city_nname='city_nname'? I can't quite get the trouble you're having in elaborating a solution.
I have made the HTML webpage and a search bar on my local machine, and am going to download XAMPP to host it locally.
The database will be on a VM and played through a hypervisor. I will be using the webpage and a single searchbar to look up names and associated devices with an 8 digit number on the device, called an asset ID.
A friend recommended PDO for a query language for the database, so would this prove better?
NOTE - database not yet operational or connected to. Just got the assignment yesterday.
HTML
<!DOCTYPE html>
<html>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
color: #FFFFFFFF;
}
img#bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#content {
position: relative;
z-index: 1;
text-align:center;
}
</style>
<head>
<title>Multigress Asset Management</title>
<!--[if IE 6]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
img#bg { position:absolute; z-index:-1; }
#content { position:static; }
</style>
<![endif]-->
</head>
<body>
<img src="F:\CAPSTONE PROJECT\background img.jpg" alt="background image" id="bg" />
<div id="content">
<h1>Multigress Asset Management</h1>
<h4>Search by First Name, Last Name, or Asset ID</h4>
<form action="" method="post">
<input type="text" name="data">
<input type="submit" value="Search">
</form>
<br />
<img src="F:\CAPSTONE PROJECT\Logo2.1.png" alt="Multigress Logo 2.1" width="200" height="100">
<h5>Copyright 2014-2017 | Date Last Updated: 4/27/2015</h5>
<h5>By viewing this page, you agree to the Terms & Conditions.</h5>
</div>
</body>
</html>
PHP
<?php
if(isset($_GET['data']) && $_GET['data']=='yes')
{
echo "<center><font color='red'>Comment Posted!</font></center>";
}
else
{
echo "<center><font color='red'>Username taken!</font></center>";
}
?>
Different stuff I'm playing around with:
$con=mysqli_connect("localhost","root","password","dtabasename");
$getUsers = $DBH->prepare("SELECT * FROM TABLE ORDER BY id ASC");
$getUsers->fetchAll();
In order to do so, you will need to generate a with an to send the data and then collect it into your PHP file.
HTML:
<form action="submit.php" method="post">
<input type="text" name="search" />
<input type="submit" value="Submit" />
</form>
PHP:
<?php
if(isset($_POST['search']){
//do database request here
$db=mysql_connect ("servername", "<username>", "<password>") or die ('I cannot connect to the database because: ' . mysql_error());
$sql="SELECT * FROM Search WHERE FirstName LIKE '%" . $name . "%' OR LastName LIKE '%" . $name ."%'";
}
?>
Step by Step tutorial:
http://www.webreference.com/programming/php/search/2.html
Hope it helps