Hi I am trying to make a autocomplete function where I use a search field and write the first letters of the name of a company. the code vill search an online database for the company and there will be a list of suggestions. for example
company1 street1 zipcode etc.
company2 astreet2 zipcode etc.
company3 street1 zipcode etc.
I will click on one of the listed companies and it vill populate field1 with company1 field2 street field3 zipcode etc. but I cant make it. I dont reallt know how to do this and Im trying to learn and understand but this is too complex for me so I hope any of you guys can hekp me - thanks in advance.
This is how my code looks like so far.
main page:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="layout.css" rel="stylesheet" type="text/css">
<link href="menu.css" rel="stylesheet" type="text/css">
</head>
<style>
.kundsok {
border: 1px solid #a8d4b1;
background-color: #c6f7d0;
margin: 2px 0px;
padding: 40px;
border-radius: 4px;
}
#ftg-list {
float: center;
list-style: none;
margin- top: -3px;
padding: 0;
width: 190px;
}
#ftg-list li {
padding: 10px;
background: #f0f0f0;
border-bottom: #bbb9b9 1px solid;
}
#ftg-list li:hover {
background: #ece3d2;
cursor: pointer;
}
#search-box {
padding: 10px;
border: #a8d4b1 1px solid;
border-radius: 4px;
}
</style>
<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#search-box").keyup(function() {
$.ajax({
type: "POST",
url: "readkund_eniro.php",
data: 'keyword=' + $(this).val(),
beforeSend: function() {
$("#search-box").css("background", "#FFF url(LoaderIcon.gif) no-repeat 165 px ");
},
success: function(data) {
$("#suggesstion-box").show();
$("#suggesstion-box").html(data);
$("#search-box").css("background", "#FFF");
}
});
});
});
function selkund(val, val2) {
$("#search-box").val(val);
$("#foretag_name").val(val);
$("#stad").val(val2);
$("#suggesstion-box").hide();
}
</script>
<body>
<div id="sidlayout">
<div id="content">
<?php include "menukunder.php"; ?>
<div class="kundsok">
<center>
<input type="text" id="search-box" name ="search-box" placeholder="kund" >
<div id="suggesstion-box"></div>
</form>
<h1></h1>
<H3></H3>
<center>
<form action="sida3ka.php" method="post">
<fieldset>
<label title="Skriv in företagets namn" for="foretag_name">Företag:</label>
<input type="text" name="foretag_name" id="foretag_name">
<label title="Skriv in stad" for="stad">Stad:</label>
<input type="text" name="stad" id="stad">
</fieldset>
</form>
</div>
</div>
</body>
</html>
on the other page called readkund_eniro.php the code looks like this
$url = 'https://api.eniro.com/cs/search/basic?profile=Martens&key=3653823918839001013&country=se&version=1.1.3&search_word
=' . $_POST["keyword"] . '&geo_area=stockholm';
$response = file_get_contents($url);
$json = json_decode($response, true);
if(!empty($json)) {
?>
<ul id="ftg-list">
<?php
foreach($json['adverts'] as $ftg) {
?>
<li onClick="selkund('<?php
echo $ftg["companyInfo"]['companyName'];
echo $ftg["address"]['streetName'];
?>');"><?php
echo $ftg["companyInfo"]['companyName'];
?>
</li>
<?php
}
?>
</ul>
<?php
}
I the database respons will be
$ftg["companyInfo"]['companyName']
$ftg["address"]['streetName']
$ftg["address"]['postCode']
and so on. thanks again
Best regards Johan
i think there is problem in API url at readkund_eniro.php file. can you please try with as below.
$url = "https://api.eniro.com/cs/search/basic?profile=Martens&key=3653823918839001013&country=se&version=1.1.3&search_word=".$_POST['keyword']."&geo_area=stockholm";
another thing i found with your response text inside
<li onClick="selkund('<?php echo $ftg["companyInfo"]['companyName'];?>', '<?php echo $ftg["address"]['streetName'];?>');"><?php
echo $ftg["companyInfo"]['companyName']. ', '. $ftg["address"]['streetName'].', '. $ftg["address"]['postCode'] ;
?>
</li>
Related
This works good with out a loop but with a loop the first one works but the second one can't set a PHP session value like the first one so how can I get the loop copy to work like the first one meaning being able to set a PHP session value.
*NOTE: THIS IS NOT A HTML FORM THIS IS COSTUME CODE THAT me and my friend MADE FROM a tutorial THAT ACTS LIKE A FORM TO SET A SESSION VALUE.*
tutorial source: https://www.formget.com/submit-form-using-ajax-php-and-jquery/#
I don't want to use a form don't ask me why it's personal so how can I fix this where the loop copy can also set a session value of a session variable i'm saying this because only the first one is able to do that and the second one can't set a session value like the first one.
.gif Screenshot
code
submit_session.php
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>Simulated Form</title>
<meta name="viewport" content="width=device-width">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
//This section converts the HTML id's in the form div into form values
$(document).ready(function(){
$("#execute").click(function(){
var execute= $("#execute").val();
var name= $("#name").val();
var age= $("#age").val();
var dataString = 'execute='+ execute + '&name='+ name + '&age='+ age;
//AJAX code to submit the simulated form.
$.ajax({
type: "POST",
url: "submit_session.php",
data: dataString
});
});
});
</script>
<style>
.form {
background-color: gold;
width: 200px;
margin: auto;
border-radius: 5px;
padding-top: 5px;
}
.set-value{
background: blue;
padding: 1px 4px;
text-decoration: none;
border: 1px solid gray;
color: white;
margin: auto;
display: block;
width: 100px;
text-align: center;
border-radius: 5px;
}
.name-input {
margin: auto;
display: block;
}
.age-input {
margin: auto;
display: block;
}
</style>
</head>
<body>
<?php
//Generate more than one copy of the simulated form
for ($loop = 0; $loop <= 1; $loop++) {
?>
<br>
<!--The simulated form-->
<div class="form">
<p style='text-align: center;'>Simulated form</p>
<input type="text" id="name" class='name-input' required="required" placeholder='Name' autocomplete="off">
<br>
<input type="text" id="age" class='age-input' required="required" placeholder='Age' autocomplete="off">
<br>
<!-- Simulated form submit button -->
<a class="set-value" id="execute" href="view-session-values.php">Set value</a>
<br>
</div>
<?php
echo $loop;
}
//Set session values from a simulated form
if(isset($_POST['execute'])){
$name = $_POST['name'];
$age = $_POST['age'];
if($check=1){
$_SESSION['name']=$name;
$_SESSION['age']=$age;
echo "<script>window.open('_self')</script>";
}
}
?>
</body>
</html>
view-session-values.php
<?php
session_start();
$name = $_SESSION['name'];
$age = $_SESSION['age'];
?>
<!DOCTYPE html>
<html>
<head>
<style>
#set-new-session-value {
background-color: black;
color: white;
padding: 5px 5px;
text-decoration: none;
border-radius: 5px;
}
#destroy-session-value{
background-color: black;
color: white;
padding: 5px 5px;
text-decoration: none;
border-radius: 5px;
}
</style>
</head>
<body>
<!--This section is based on choosing session options -->
<br>
<a id='set-new-session-value' href="submit_session">Set new session value</a>
<a id='destroy-session-value' href="destroy_session.php">Destroy session value</a>
<br>
<!--This section is where the set session values are shown-->
<p><?php echo $name; ?></p
<p><?php echo $age; ?></p>
</body>
</html>
I'm having problems with this webcam plugin.
I can access the camera and thake the picture, however, cannot save it. When I click to record (Guardar Foto) it has no action
I'm going to show my code here.
My View
<html>
<head>
<title>WebCam</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
#content{
margin: 0 auto;
width: 1000px;
position: relative;
}
.fotografia{
width: 320px;
height: 240px;
border: 20px solid #333;
background: #eee;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
position: relative;
margin-top: 50px;
margin-bottom: 50px;
}
.marca {
z-index: 2;
position: absolute;
color: #eee;
font-size: 10px;
bottom: -16px;
left: 152px;
}
#obturador,#guardarFoto{
padding: 10px;
border: 1px solid;
background-color: #444;
color: #fff;
cursor: pointer;
margin-left: 50px;
}
</style>
</head>
<body>
<div id="content">
<div style="float:left;width:50%">
<div id="webcam" class="fotografia">
<span class="marca">tutoriales.com</span>
</div>
</div>
<div style="float:left;width:50%">
<div id="say-cheese-snapshots" class="fotografia">
<span class="marca">Snapshots</span>
</div>
</div>
<div style="clear:both"></div>
<div style="float:left;width:50%">
<span id="obturador">Tomar foto</span>
</div>
<div style="float:left;width:50%">
<span id="guardarFoto">Guardar Foto</span>
</div>
<div class="fotografia">
<img id="fotoGuardada" src="" style="display:none" />
<span class="marca">Foto Armazenada</span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="<?php echo base_url() ?>assets/js/say-cheese.js"></script>
<script type="text/javascript">
var img=null;
var sayCheese = new SayCheese('#webcam',{snapshots: true});
sayCheese.start();
$('#obturador').bind('click', function(e){
sayCheese.takeSnapshot(320,240);
return false;
})
sayCheese.on('snapshot', function(snapshot){
img = document.createElement('img');
$(img).on('load', function(){
$('#say-cheese-snapshots').html(img);
});
img.src = snapshot.toDataURL('image/png');
});
$('#guardarFoto').bind('click', function(){
var src = img.src;
data = {
src: src
}
$.ajax({
url: '<?php echo base_url() ?>webcam/ajax',
data: data,
type: 'post',
sucess: function(respuesta) {
$('#fotoGuardada').attr('src', respuesta).show(500);
}
});
});
</script>
</body>
Now my Model
<?php
class Fotos_model extends CI_Model{
public function gravarFoto($foto) {
return $this->db->insert('fotos',array('foto'=>$foto));
}
public function getLastFoto() {
return $this->db->order_by('id','desc')->get('fotos')->row()->foto;
}
}
And my Controller
<?php
class Webcam extends CI_Controller{
public function __construct() {
parent::__construct();
$this->load->model(array('Fotos_model'));
}
public function index() {
$this->load->view('webcam/index_view');
}
public function ajax () {
$src = $this->input->post('src');
$this->Fotos_model->gravarFoto($src);
$foto = $this->Fotos_model->getLastFoto();
$this->output->set_output ($foto);
}
}
Syntax error: You are missing a semicolon at the end of
data = {src: src}
Should be
data = {src: src};
Your error is because field id must to be: key & autoincrement:
I am having a bit of trouble getting a search function working using ajax to bring up results as the user types in a name.
This is the site in question (you can click view all to see what is searchable)
http://ra-yon.com/beta/Test_sites/HFE/admin/contact.php
The query in action
http://ra-yon.com/beta/Test_sites/HFE/include/queryc.php?query=ra-yon&clause=email
The code in question
<html>
<head>
<style type="text/css">
body
{
background:black;
color:black;
width:100%;
}
#center
{
width:90%;
height:110%;
background:white;
margin:0 auto;
text-align:center;
color:black;
}
#insert{
background:navy; color:white; font-family:impact; font-size:18px;width:170px; height:170px; border-radius:50%;
margin:0 auto;
float: left; margin-left: 100px;
top:200px;
position: relative;
}
#insert:hover
{
background:white;
color:navy;
}
label
{width:150px;}
td
{
border:solid 2px black;
max-width: 250px;
text-align: center;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function sendPHP(){
$('#table,#table2').css('display','none');
var query = $('#searchname').attr('value');
var clause = $('#searchclause').attr('value');
$.ajax({
url: '../include/queryc.php?,
type: 'POST',
data: "query="+query+"&clause="+clause,
dataType: 'html',
success:
function(data) {
$(data).appendTo('#table');
}
});
return false;
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script></head>
<body>
<h4 style="float:right; color:blue; position: relative; left:-100px;" id="goback"> Go back? </h4>
<div id="center">
<div id="queryform1" >
View All?
<span style="color:black;">search</span> <input type='text' onKeyUp="sendPHP();" name='searchname' id="searchname" />
<span style="color:black;">search by</span> <select name="searchclause" id="searchclause">
<option value="name">Name</option>
<option value="email">Email Address</option>
<option value="subject">Subject</option>
<option value="date">Date</option>
</select>
Download file?
<div id="table2" style="display: none; margin: 0 auto; position: relative; top:40px; max-width:700px;">
<div id="viewall">
<?php
include '../include/include.php';
$sql = 'select * from contactus' ;
//print_r($sql);
$result=mysql_query($sql);
?>
<table>
<tbody>
<th>Name</th><th>Email</th><th>Subject</th><th style="width:200px;">Message</th><th>Date</th>
<tr>
<?php
while ($client = mysql_fetch_array($result, MYSQL_ASSOC)){
echo "
<tr>
<td >".$client[name]."</td>
<td >".$client[email]."</td>
<td >".$client[subject]."</td>
<td >".$client[message]."</td>
<td >".$client[date]."</td>
</tr>";
} ?>
</tbody></table>
</div></div><div id="table">TestTestTest</div>
</div></div>
</body>
</html>
Its a bit messy right now, I am planning on cleaning it up after I get it working.
Thank you all so much!
Checked your code in Console. Your function is failing. You are missing a single quote here:
url: '../include/queryc.php?',
I use Google Chrome's Console as well as the Console found in the Firbug extension for Mozilla Firefox. They both are invaluable in helping sort out the minor issues
It's my first day here, I thought you guys could help me. So, I'm working on this kind of chatting service for a friend. I want it to auto update anything inside the div tags that has an id of messages. I tried adding some javascript and stuff from other posts, but they just made it worse. So, if anyone could fix it and comment, or give me suggestions. I want it as soon as someone posted something, it updates the posts in the div tags with the id of messages.
<?php
session_start();
if(!isset($_SESSION['username']))
{
header("Location: /index.php");
}
?>
<html>
<head>
<title>
House Email System
</title>
<style>
body
{
background: #383838;
font-family: Arial;
color: #444444;
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -150px;
}
form
{
background: #ffffff;
width: 270px;
border-radius: 15px;
box-shadow: 3px 3px 6px 1px #303030;
}
input
{
margin-left: 15px;
}
p
{
margin-left: 15px;
}
error
{
padding:2px 4px;
margin:0px;
border:solid 1px #FBD3C6;
background:#FDE4E1;
color:#CB4721;
font-size:14px;
font-weight:bold;
}
div
{
background: #f0f0f0;
}
hr
{
color: #d0d0d0;
background-color: #d0d0d0;
height: 3px;
border: 0px;
}
username
{
margin-left: 5px;
}
message
{
margin-left: 10px;
}
</style>
</head>
<body>
<?php
$connect = mysql_connect("localhost", "root", "*******");
mysql_select_db("*******");
$username = $_SESSION['username'];
$message = $_POST['message'];
$submit = $_POST['submit'];
if($submit)
{
if($message)
{
mysql_query("INSERT INTO messages VALUES('', '$username', '$message')");
}
else
{
?>
<center>
<error>Please enter a message to send.</error> <br />
</center>
<br />
<?php
}
}
?>
<form action="active.php" method="POST">
<br />
<p>Message</p>
<input type="text" name="message" /> <br />
<br />
<input type="submit" name="submit" value="Submit" /> <br />
<br />
<?php
$query = mysql_query("SELECT * FROM messages ORDER BY id DESC");
$num_rows = mysql_num_rows($query);
if($num_rows > 0)
{
while($row = mysql_fetch_assoc($query))
{
$username = $row['username'];
$message = $row['message'];
?>
<div id="messages">
<br /> <username><b><?php echo $username; ?></b></username>
<hr />
<message><?php echo $message; ?></message> <br />
<br /> </div> <br />
<?php
}
}
else
{
?>
<center>
<error>There are no messages to display.</error> <br />
</center>
<br />
<?php
}
?>
</form>
</body>
</html>
I hope you guys can help me, thank you.
First create a page message.php as:
<?php
session_start();
?>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#submit').click(function()
{
//alert("hello");
// ss=document.getElementById("message").value;
$.ajax({
type : 'POST',
url : 'active.php',
data: {
messages :$('#message').val()
},
success : function(data){
$('#messages').html(data);
}
});
});
});
</script>
<title>
House Email System
</title>
<style>
body
{
background: #383838;
font-family: Arial;
color: #444444;
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -150px;
}
form
{
background: #ffffff;
width: 270px;
border-radius: 15px;
box-shadow: 3px 3px 6px 1px #303030;
}
input
{
margin-left: 15px;
}
p
{
margin-left: 15px;
}
error
{
padding:2px 4px;
margin:0px;
border:solid 1px #FBD3C6;
background:#FDE4E1;
color:#CB4721;
font-size:14px;
font-weight:bold;
}
div
{
background: #f0f0f0;
}
hr
{
color: #d0d0d0;
background-color: #d0d0d0;
height: 3px;
border: 0px;
}
username
{
margin-left: 5px;
}
message
{
margin-left: 10px;
}
</style>
</head>
<body>
<center>
<error>Please enter a message to send.</error> <br />
</center>
<br />
<form action="active.php" method="POST">
<br />
<p>Message</p>
<input type="text" name="message" id="message" /> <br />
<br />
<input type="button" id="submit" name="submit" value="Submit" /> <br />
</form>
<br />
<div id="messages">
</div>
</body>
</html>
<script language="JavaScript"><!--
// v3 compatible:
function doSomething() {
// do something here...
$.ajax({
type : 'POST',
url : 'active.php',
data: {
messages :$('#message').val()
},
success : function(data){
$('#messages').html(data);
}
});
setTimeout('doSomething()',3000);
}
setInterval('doSomething()',3000);
//--></script>
Then Create a page active.php as
<?php
session_start();
$connect = mysql_connect("localhost", "root", "");
mysql_select_db("test");
$username=$_SESSION['username'];
$message=$_POST['messages'];
if($message!="")
{
mysql_query("INSERT INTO messages VALUES('', '$username', '$message')");
}
$query = mysql_query("SELECT * FROM messages ORDER BY id DESC limit 1,0");
$num_rows = mysql_num_rows($query);
if($num_rows > 0)
{
while($row = mysql_fetch_assoc($query))
{
$username = $row['username'];
$message = $row['message'];
?>
<div>
<br /> <username><b><?php echo $username; ?></b></username>
<hr />
<message><?php echo $message; ?></message> <br />
<br /> </div>
<br />
<?php
}
}
else
{
echo"No message to show";
}
?>
This is very general chat.Now you need to change it according to your requirements.
I want it as soon as someone posted something, it updates the posts in the div tags with the id of messages.
You will have to use javacript for that part. Everything else can be done with PHP and MySQL.
I watched great youtube tutorial the other day on how to do this. Its is a "quick and dirty" solution but should give you something to build on. http://www.youtube.com/watch?v=FyXeOX-uYMc
When the user is hovering on a radio button/its label i want to display another radio button, that user can also select but if mouse moves the 2nd radio button hides again. i have found this last jquery snipet that shows choices while hovering on link tag
http://www.stylesfirst.com/coding/easy-show-hide-with-jquery/
<html>
<head>
<style type="text/css">
p.trigger {
padding: 0 0 0 20px;
margin: 0 0 5px 0;
background: url(plusminus.jpg) no-repeat;
height: 15px;
font-size: 14px;
font-weight: bold;
float:left;
}
p.trigger a {
color: #474747;
text-decoration: none;
display: block;
cursor:pointer;
}
p.trigger a:hover {
color: #ff4b43;
}
p.active {
background-position: left bottom;
}
.toggle_container {
margin: 0 0 5px;
padding: 0;
overflow: hidden;
clear: both;
}
.toggle_container .block {
padding: 0px 0px 0px 15px;
}
</style>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery('.toggle_container').hide();
jQuery('p.trigger').hover(function(){
jQuery(this).toggleClass('active').next().toggle('slow');
});
});
</script>
</head>
<body>
<p class="trigger"><a>Click here</a></p>
<div class="toggle_container">
<div class="block">
<input id='element_1_1' name='element_1' class='element radio' type='radio' value='8'/>
<label class='choice' for='element_1_1'>Somewhere in the middle</label>
</div>
</div>
</body>
</html>
The easiest answer would be, if you could afford it, put both <input type="radio"/>s under a <div/> and control hovering behavior on that <div/>. This is commonly done with menus for the very same purpose.
Plus if you target new browsers, you can leave jQuery out of this - it can be done with any browser that understands the :hover pseudo-class on non-<a/>s.
Here's a sample page demonstrating both options.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#radios').hover(
function() { $('#radios').addClass('hover'); },
function() { $('#radios').removeClass('hover'); }
);
});
</script>
<style type="text/css">
/* option 1 - jquery + css, for older browsers */
#div-radio2 {
display: none;
}
.hover #div-radio2 {
display: block;
}
/* option 2 - no jquery, plain css, if you target only new browsers */
#radios:hover #div-radio2 {
display: block;
}
</style>
</head>
<body>
<div id="radios">
<div id="div-radio1"><input type="radio" id="radio1" /><label for="radio1">Radio 1</label></div>
<div id="div-radio2"><input type="radio" id="radio2" /><label for="radio2">Radio 2</label></div>
</div>
</body>
</html>
Are you looking for something like this
http://jsfiddle.net/HezZa/