Autocomplete Arrow Key Scroll - javascript

I am making a Ajax driven live search . But now I want to click the dropdown list to fill the html textbox. How can I modify my codes to include a function where the user can scroll through the results list using the up/down arrow keys. Here is the JavaScript code.
<script type="text/javascript">
function fill(Value) {
$('#name').val(Value);
$('#display').hide();
}
$(document).ready(function() {
$("#name").keyup(function() {
var name = $('#name').val();
if (name == "") {
$("#display").html("");
} else {
$.ajax({
type: "POST",
url: "ajax.php",
data: "name=" + name,
success: function(html) {
$("#display").html(html).show();
}
});
}
});
});
and here is the code in ajax.php page
if(isset($_POST['name'])) {
$name=trim($_POST['name']);
$query=mysqli_query($con,"SELECT * FROM mobile WHERE name LIKE '%$name%' LIMIT 0,5");
echo "<ul>";
while($query2=mysqli_fetch_array($query))
{ ?>
<div class="ajaxcontainer">
<li onclick='fill("<?php echo $query2[' name ']; ?>")'>
<a href="preview.php?id=<?php echo $query2['name']; ?>">
<div class="ajaximage">
<img src="<?php echo $query2['photo'];?>">
</div>
<div class="ajaxh1">
<h1><?php echo $query2['name']; ?></h1>
</div>
</a>
</li>
</div>
<?php } } ?>

good news.. after working 3 hours.. i got the solution to ur problem. Checkout the solution. let me know if you have any problems in this solution.I
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<style type="text/css">
ul{
position: absolute;
top: 5px;
left: 36px;
list-style: none;
}
li{
border: 1px solid grey;
width: 202px;
margin: 0px;
}
input{
width:200px;
}
</style>
<script>
function showHint(str){
if(str=="" || !str){
$("ul").empty();
return;
}
$.ajax({
type: "GET",
url: "gethint.php",
data: "q="+str,
success: function(html) {
var names = html.split(",");
var listItems ="";
var dropDown =$("#dropDown");
dropDown.innerHTML="";
$("ul").empty();
names.forEach(name =>{
var li = document.createElement("li");
li.appendChild(document.createTextNode(name));
dropDown.append(li);
$("li").click(function(){
$("#txt1").val($(this).text());
});
});
}
});
}
</script>
<h3>Start typing a name in the input field below:</h3>
<form action="">
<div style="position:relative">
First name: <input type="text" id="txt1" onkeyup="showHint(this.value)">
<ul id="dropDown"></ul>
</div>
</form>
</body>
</html>
This is my php file.
<?php
require("connection.php");
$sql ="SELECT name FROM users";
$a=array();
// OR $a=[];
$result=$conn->query($sql);
if($result->num_rows > 0){
while($row = $result->fetch_assoc()){
$a[]=$row["name"];
//echo $row["name"];
}
}
else{
echo "No data to generate suggestions";
}
// get the q parameter from URL
$q = $_REQUEST["q"];
$hint = "";
// lookup all hints from array if $q is different from ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= ", $name";
}
}
}
}
?>

Related

Ajax code not working in safari and firefox

Ajax code for language switching from database is not working in safari and Firefox, but its perfectly working on chrome and edge. Safari doesn't respond to ajax call but in firefox it only work after a lot of attempts to change language.
My code is
<?php
session_start();
if($_SESSION)
{
$bid=$_SESSION['latest'];
}
else
{
$bid=1;
}
?>
<select name="sources" id="language_id" onclick="" onchange="location.reload();langchange();">
<?php
$language = mysqli_query($link, "select * from language_reference");
while ($lang = mysqli_fetch_array($language)) {
?>
<option value="<?php echo $lang['lang_id']; ?>"
<?php
if($lang['lang_id']==$bid)
{
echo 'selected="selected"' ;
}
?>
><?php echo $lang['lang_name']; ?>
</option>
<?php } ?>
</select>
<div class="row" >
<?php
$result = mysqli_query($link, "SELECT * FROM category AS c INNER JOIN category_language AS cl ON c.id=cl.category_id where parent_id IS NULL && lang_id='1' ");
$var = 0;
while ($row = mysqli_fetch_array($result))
{
?>
<div class="col-md-3 col-sm-3 col-xs-6 hvr-shrink" style="position: relative; margin-top: 50px;">
<a href="#" style="text-decoration: none;">
<div>
<img src="admin/uploads/category/<?php echo $row['cat_home_image']; ?>" class="img-responsive center-block" width="50px" />
<p class="category-caption" style="padding-top: 20px; text-align: center;" id="cat_desc<?php echo $var; ?>"></p>
</div>
</a>
</div>
<?php
$var++;
}
?>
ajax script
<script>
function langchange() {
var language_id = $('#language_id').val();
$.ajax({
type: "POST",
url: "ajax_lang_change.php",
data: "id=" + language_id,
success: function (value)
{
var data = value.split("|_,_|");
for (var i = 0; i < data.length; i++) {
$("#cat_desc" + i).html(data[i]);
}
}
});
$.ajax({
type: "POST",
url: "ajax_get_session.php",
data: "bid=" + language_id,
success: function (value) {
var data = value;
}
});
}
$(window).ready(function () {
langchange()
});
</script>
php script to get data from db
ajax_lang_change.php
<?php
include 'db_connect.php';
$id = $_POST['id'];
$result = mysqli_query($link, "SELECT * FROM category AS c INNER JOIN category_language AS cl ON c.id=cl.category_id where parent_id IS NULL && lang_id='$id'");
while($row=mysqli_fetch_array($result))
{
echo $row['category_description']."|_,_|";
}
?>
ajax_get_session.php
<?php
include 'db_connect.php';
session_start();
$bid = $_POST['bid'];
$_SESSION['latest']=$bid;
if(isset($_SESSION['latest']))
{
echo 'success';
}
else
{
echo 'failed';
}
?>
is there anyway to solve this problem? should I have to write ajax script for various browsers?

Session working accurately on localhost but not working on live server

I have a admin panel for login. I have created a login page with php,
html, java script. I used session to pass user to next page. This working perfectly on my localhost. But on live server i am getting problem, its showing me "loged in successfully" popup and redirecting back to login page. When i print session on localhost its showing me session value but on live server its empty. I have searched so many answers and tried same but still it's not working. Please help and thank you for your time and consideration.
My live server is Apache HTTP Server Version 2.2
My connection file db.php is
<?php
/*Default time zone ,to be able to send mail */
date_default_timezone_set('Asia/Kolkata');
//connect database
$con = mysqli_connect ("localhost","rootuser","password","testdbname"); //host, username, password, database name
//database connect error
if (mysqli_connect_errno())
{
echo "Failed to connect to MySql: " . mysqli_connect_errno();
}
?>
login.php file is
<?php
session_start();
include("includes/db.php");
if(isset($_SESSION['mysesiuid']))
{
header('Location: index.php?alreadyin');
//echo "<script>window.location.assign('index.php?alreadyin')</script>";
}
else
{
?>
<script src="assets/js/validate/jquery.js" type="text/javascript"></script>
<script>
//login script
$(document).ready(function() {
var mazalagna_login_email1 = 1;
var mazalagna_login_email2 = 1;
var mazalagna_login_email3 = 1;
var mazalagna_login_password = 1;
$("#main_login_submit").click(function(){
//password
if($("#mazalagna_pass").val() == ''){
$("#mazalagna_pass").css("border","1px solid red");
$("#mazalagna_password_error").show();
mazalagna_login_password = 1;
}else{
if($("#mazalagna_pass").val().length < 6){
$("#mazalagna_pass").css("border","1px solid red");
$("#mazalagna_password_length_error_longform").show();
$("#mazalagna_password_error").hide();
mazalagna_login_password = 1;
}else{
$("#mazalagna_pass").css("border","1px solid green");
$("#mazalagna_password_length_error_longform").hide();
$("#mazalagna_password_error").hide();
mazalagna_login_password = 0;
}
}
//email
var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")#(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
var validateMazalagnaEmail = pattern.test($("#mazalagna_email").val());
if($("#mazalagna_email").val() == ''){
$("#mazalagna_email").css("border","1px solid red");
$("#mazalagna_email_error").show();
mazalagna_login_email1 = 1;
}else{
$("#mazalagna_email").css("border","1px solid green");
$("#mazalagna_email_error").hide();
mazalagna_login_email1 = 0;
}
if(!validateMazalagnaEmail){
$("#mazalagna_email").css("border","1px solid red");
$("#mazalagna_email_error").show();
mazalagna_login_email2 = 1;
}else{
$("#mazalagna_email").css("border","1px solid green");
$("#mazalagna_email_error").hide();
mazalagna_login_email2 = 0;
}
if(validateMazalagnaEmail){
$.ajax({
type: "POST",
cache: false,
url: "php/ajax_email_exist.php",
data: { email: $("#mazalagna_email").val()},
success: function (data)
{
if(data != 1){
$("#mazalagna_email").css("border","1px solid green");
$("#mazalagna_exist_email_error").hide();
mazalagna_login_email3 = 0;
}else{
$("#mazalagna_email").css("border","1px solid red");
$("#mazalagna_exist_email_error").show();
mazalagna_login_email3 = 1;
}
if(mazalagna_login_email1 == 0 && mazalagna_login_email2 == 0 && mazalagna_login_email3 == 0 && mazalagna_login_password == 0 ){
$.ajax({
type: "POST",
cache: false,
url: "main_login.php",
data: {
username1: $("#mazalagna_email").val(),
password1: $("#mazalagna_pass").val()
},
success: function (data)
{
alert(data);
//alert("Welcome! You have loged in successfully!");
window.location.replace("index.php");
}
});
}
}
});
}
//edit value
$(".regval").click(function(){
var id = "#"+$(this).attr("id");
var errorId = "#"+$(this).attr("id")+"_error";
$(id).css("border","1px solid #a39e9e");
$(errorId).hide();
});
});
});
</script>
<strong> Enter Details To Login </strong>
<!-- <form role="form" action="" method="post"> -->
<div class="form-group input-group">
<span class="input-group-addon"><i class="fa fa-tag" ></i></span>
<input type="text" id="mazalagna_email" name="mazalagna_email" class="form-control regval" placeholder="Your Username" required />
</div>
<div id="mazalagna_email_error" style="display:none; margin-top:-12px; margin-bottom:12px; text-align:center; color:red; font-size:12px;">Please enter valid Email</div>
<div id="mazalagna_exist_email_error" style="display:none; margin-top:-12px; margin-bottom:12px; text-align:center; color:red; font-size:12px;">Your email id is not registered.</div>
<div class="form-group input-group">
<span class="input-group-addon"><i class="fa fa-lock" ></i></span>
<input type="password" id="mazalagna_pass" name="mazalagna_pass" class="form-control regval" placeholder="Your Password" required />
</div>
<div id="mazalagna_password_error" style="display:none; margin-top:-12px; margin-bottom:12px; text-align:center; color:red; font-size:12px;">Please enter your password</div>
<div id="mazalagna_password_length_error_longform" style="display:none; margin-top:-12px; margin-bottom:12px; text-align:center; color:red; font-size:12px;">Enter min 6 character password</div>
<button type="submit" id="main_login_submit" name="main_login_submit" class="btn btn-primary ">Login Now</button>
<hr />
<!-- </form> -->
<?php } // top else close here ?>
My main_login.php file is
<?php
//connect database
session_start();
require_once 'includes/db.php';
global $con;
$user_email = trim($_POST['username1']);
$user_password = trim($_POST['password1']);
$password = mysqli_real_escape_string($con, md5($user_password));
$res = $con->query("SELECT * FROM useradmins WHERE email='$user_email' AND password='$password'");
$row = $res->fetch_assoc();
$uid = $row['admin_id'];
$name = $row['name'];
$useremail = $row['email'];
$pass = $row['password'];
if($useremail==$user_email && $pass==$password){
$_SESSION['mysesi']=$name;
$_SESSION['mysesiuid']=$useremail;
echo "Loged in successfully.";
//update status and login time
date_default_timezone_set('Asia/Kolkata');
$date_email = date('F j, Y h:i A');
$date = date('Y-m-d H:i:s');
$user = $_SESSION['mysesiuid'];
$ip = $_SERVER['REMOTE_ADDR'];
$httpref = $_SERVER['HTTP_REFERER'];
$httpagent = $_SERVER['HTTP_USER_AGENT'];
$update_last_login="UPDATE useradmins SET admin_status='ONLINE',active_ip_address='$ip',admin_last_login='$date' WHERE admin_id='$user'";
$update_last_login = mysqli_query($con, $update_last_login);
}
else{
echo "Unable to login.";
}
?>
index.php file is
<?php
session_start();
require_once 'includes/db.php';
if(!isset($_SESSION['mysesiuid']))
{
header('Location: login.php');
exit;
}
else
{
?>
<h1>hi success</h1>
<?php } ?> <!-- top else statement close here -->

jquery live search not working [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
hii i am creating a live search like this http://demo.phpgang.com/live-search-php-mysql-jquery/ and i am having a small problem in code this
jQuery("#result").on("click",function(e){
var $clicked = $(e.target);
var $name = $clicked.find(\'.name\').html();
var decoded = $("<div/>").html($name).text();
$(\'#searchid\').val(decoded);
the codes are taken from here http://www.phpgang.com/how-to-integrate-live-search-in-php-and-mysql-with-jquery_309.html
Problem - The problem i am facing is that when i search something it shows results correctly but when i click on result then nothing happens i want that result in input box when i click it. thanks help needed
here is a complete code
index.php
<?php
$content ='<script type="text/javascript" src="jquery-1.8.0.min.js">
</script>
<script type="text/javascript">
$(function(){
$(".search").keyup(function()
{
var searchid = $(this).val();
var dataString = \'search=\'+ searchid;
if(searchid!=\'\')
{
$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
});
}return false;
});
jQuery("#result").live("click",function(e){
var $clicked = $(e.target);
var $name = $clicked.find(\'.name\').html();
var decoded = $("<div/>").html($name).text();
$(\'#searchid\').val(decoded);
});
jQuery(document).live("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search")){
jQuery("#result").fadeOut();
}
});
});
</script>
<style type="text/css">
.content{
width:900px;
margin:0 auto;
}
#searchid
{
width:500px;
border:solid 1px #000;
padding:10px;
font-size:14px;
}
#result
{
position:absolute;
width:500px;
padding:10px;
display:none;
margin-top:-1px;
border-top:0px;
overflow:hidden;
border:1px #CCC solid;
background-color: white;
}
.show
{
padding:1px;
font-size:15px;
height:50px;
}
.show:hover
{
background:#4c66a4;
color:#FFF;
cursor:pointer;
}
<div class="content">
<input type="text" class="search" id="searchid" placeholder="Search for
people" /><br />
<div id="result"></div>
</div>';
$pre = 1;
include("html.inc");
?>
search.php
<?php
include('db.php');
if($_POST)
{
$q = mysqli_real_escape_string($connection,$_POST['search']);
$strSQL_Result = mysqli_query($connection,"select id,name,email from seller
where name like '%$q%' or email like '%$q%' order by id LIMIT 5");
while($row=mysqli_fetch_array($strSQL_Result))
{
$username = $row['name'];
$email = $row['email'];
$b_username = '<strong>'.$q.'</strong>';
$b_email = '<strong>'.$q.'</strong>';
$final_username = str_ireplace($q, $b_username, $username);
$final_email = str_ireplace($q, $b_email, $email);
?>
<div class="show" align="left">
<span class="name"><?php echo $final_username; ?></span> <br/>
<?php echo $final_email; ?><br/>
</div>
<?php
}
}
?>
There are few issues with your code. Let's start with
var $name = $clicked.find(\'.name\').html();
Here . is not a valid operator for concatenation in JS. It is used in PHP. To concatenate strings, use +.
Secondly, using \'.name.\' as input to find option. I suppose that name is already a string? You don't need extra escaping of ' unless that is part of echo in PHP. Simply use ' to start a string.
Next is:
var decoded = $("<div/>").html($name).text();
<div/> is not a valid selector. Use div simply.
Check the jsfiddle here for fixed code from your link:
https://jsfiddle.net/1mss5xwj/1/

How to pass a value from Codeigniter's form_hidden to javascript?

I want to pass the value of my form_hidden from the view to a javascript function.
VIEW:
<?php echo validation_errors(); ?>
<?php
$mode = (isset($is_editing))? 'disabled' : 'disabled';
$client_name = (isset($is_editing))? $clientcontent->client_name : NULL;
$process = (isset($is_editing))? 'Edit' : 'Add';
$form_action = (isset($is_editing))? 'client/update_client/' . $id : 'client/create_client';
?>
<style type="text/css">
.check_exists
{
margin-top: 4px;
margin-left: 9px;
position: absolute;
width: 16px;
height: 16px;
}
</style>
<?php echo form_open($form_action, 'id="frm" class="form-horizontal" style="margin: 0;"'); ?>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title"><?php echo $process ?> Client</h4>
</div>
<div class="span6" style="padding-top:20px;padding-bottom:10px;">
<!-- Project Content Fields -->
<div class="control-group">
<p class="control-label">Client Name*</p>
<div class="controls">
<?php echo form_input('client_name', $client_name, 'id="client_name" style="height: 30px;"'); ?><span id="client_verify" class="check_exists" ></span>
</div>
</div>
<?php echo form_hidden('old_name',$client_name); ?>
</div>
<?php echo form_close(); ?>
<script type="text/javascript">
$(document).ready(function()
{
check_client("#client_name", "<?php echo base_url(); ?>client/check_availability", "#client_verify", "#old_name");
})
// </script>
Javascript File:
function check_client( id, url, spanid, old)
{
var oldname = $(old).val();
$('body').on('keyup', id, function(){
if($(id).val().length >= 3)
{
var newname = $(id).val();
console.info("The new name is " + newname + ":old name is" + oldname);
$.ajax({
url : url,
data : {client_name : $(id).val()},
type : 'POST',
success : function(data){
if( data.is_available == 0 ){ // Here
//start fading the messagebox
$(spanid).css({ "background-image": "url('http://localhost/mapmces_3.4.2/assets/img/no.png')" });
$(spanid).attr( "title", "Already Exists" );
available = false;
}else if( data.is_available ){ // Here the json response
//start fading the messagebox
$(spanid).css({ "background-image": "url('http://localhost/mapmces_3.4.2/assets/img/yes.png')" });
$(spanid).attr( "title", "Available" );
available = true;
}else{
alert("Some error occured! Check Console");
console.error(data.reason);
}
}
});
}
else
{
$(spanid).css({ "background-image": "none" });
}
});
}
Everything works fine. No errors are displayed by firebug. The function also works, but i want to add another validation which is checking if the oldname = newname. The function is able to get the value of the newname but it can't get the value of oldname which is from form_hidden.
Please tell me what I'm doing wrong. Many thanks!
What I would do is load the script in. after that, in your html, create some script tags and echo your form-hidden to a variable.
ex.
<script src='main.js'></script>
<script>
var hello=<?php echo form_Hidden; ?>;
thisIsAFunction(hello);
</script>
</body>
</html>
Just changed
<script type="text/javascript">
$(document).ready(function()
{
check_client("#client_name", "<?php echo base_url(); ?>client/check_availability", "#client_verify", "#old_name");
})
</script>
into
<script type="text/javascript">
var old_name = "<?php echo $client_name; ?>";
$(document).ready(function()
{
check_client("#client_name", "<?php echo base_url(); ?>client/check_availability", "#client_verify",old_name);
})
</script>

Adding a page with ajax in wordpress

I'm stuck with my codes for 2 weeks already. I want to have a page with 2 dropdowns. The first DD will show all 'states' from my database and the second DD should be based on the 1st DD's value. I think my codes are OK but the problem is the integration with wordpress itself. Is there any codes/functions/etc needed for a page to be read as ajax?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>None</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function parseResponse(adminResponse,nList){
var nText = adminResponse.getElementsByTagName('optionText');
var nVal = adminResponse.getElementsByTagName('optionVal');
nList.options.length = 1;
for (i=0; i<nText.length; i++)
{
var nOption = document.createElement('option');
nOption.appendChild(document.createTextNode(nText[i].firstChild.data));
nOption.value = nVal[i].firstChild.data;
nList.appendChild(nOption);
}
}
function update(nVal,nList,getFile){
var adminRequest = window.XMLHttpRequest ? new XMLHttpRequest()
: window.ActiveXObject
? new ActiveXObject("Microsoft.XMLHTTP")
: null;
adminRequest.onreadystatechange = function()
{
if (adminRequest.readyState == 4)
{
if (adminRequest.status == 200)
{
var adminResponse = adminRequest.responseXML;
parseResponse(adminResponse,nList);
}
else {
alert('Error ' + getFile + ' --- ' + adminRequest.statusText);
}
}
}
var infoStr = "?choice="+nVal;
adminRequest.open("GET", getFile + infoStr, true);
adminRequest.send(null);
}
function init(){
var nForm = document.forms[0];
nForm['state'].onchange = function()
{
if (this.value != "")
{
update(this.value,nForm['city'],'<?php echo get_template_directory_uri(); ?>/updateGroup.php');
}
}
}
navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);
</script>
<style type="text/css">
body {background-color: #eae3c6; margin-top: 60px;}
form {width: 430px; margin: auto;}
fieldset {width: 410px; background-color: #f0fff0; border: 1px solid #87ceeb;}
legend {font-family: times; font-size: 14pt; color: #00008b; background-color: #87ceeb;
padding-left: 3px; padding-right: 3px ; margin-bottom:5px;}
select {font-family: tahoma; font-size: 10pt; width: 160px; margin-left: 35px; margin-bottom: 10px;}
</style>
</head><?php /* Template Name: Practice */
?>
<body>
<?php
global $wpdb;
$query = "SELECT * FROM zipcode GROUP BY FULLSTATE ASC";
$result = mysql_query($query) or die(mysql_error());
while($row = mysql_fetch_array($result,MYSQL_ASSOC))
{
$dd .= "<option value='".$row['STATE']."'>".$row['FULLSTATE']."</option>";
}
?>
<form action="">
<fieldset>
<legend>Form</legend>
<select name="state">
<option value="">Select State</option>
<?php echo $dd; ?>
</select>
<select name="city" onchange="alert(this.value)">
<option value=""> Make a selection </option>
</select>
</fieldset>
</form>
</body>
</html>
First, I pasted those codes in notepad++ and saved it as practice.php. Uploaded it to my wordpress theme directory. Typing http://www.site.com/practice.php shows 'page not found' so i went to wordpress dashboard and created a new page -> assigned the template named 'practice'. typed http://www.site.com/practice.php again and it works.
<?php
$choice = $_GET['choice'];
$xml = "<?xml version='1.0' ?><options>";
global $wpdb;
$query = "SELECT * FROM zipcode WHERE STATE = '$choice'";
$result = #mysql_query($query);
$num = #mysql_num_rows($result);
if ($result && $num > 0)
{
while ($row = mysql_fetch_array($result,MYSQL_ASSOC))
{
$xml .= "<optionText>" . $row['CITY'] . "</optionText><optionVal>" . $row['CITY'] . "</optionVal>";
}
}
$xml .= "</options>";
#mysql_free_result($result);
#mysql_close();
header("Content-Type: text/xml");
echo $xml;
?>
Ok so next i created a page with the codes above and named it updateGroup.php. uploaded it on wordpress theme directory.
Tested my codes and...I can't get it to work!! :(
Please i need help. should i add get_header and get_footer for my reference page? or do i need to configure something in wordpress to recognize my ajax?

Categories