Ajax event listener display search from database

Hi,

This is an addition to the code below, as at this point it works perfectly, but have added an extra option for the user to search for hotels in our database.

Up until today the user could simply start typing in the search box and the search will display hotels according to the region they are typing, as that is what is asked of them.

But what we have added in now is 2 radio buttons that give the user an option to either search by resort or hotel, and what I need help with the code below is how to check which radio button has been chosen and then how to tailor the search.

<form name="myForm" 
<input type="radio" name="choice" value="resort" checked> Resort <input type="radio" name="choice" value="hotel"> Hotel
<input type="text" onkeyup="ajaxFunction(this.value);" name="username" class="text"/>
</form>

<script type="text/javascript">
function ajaxFunction(str) {
var httpxml;
try
{
httpxml=new XMLHttpRequest();
}
catch (e)
{
try
{
httpxml=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
  {
  httpxml=new ActiveXObject("Microsoft.XMLHTTP");
  }
catch (e)
   {
     alert("Your browser does not support AJAX!");
    return false;
    }
   }
 }
function stateChanged() 
 {
if(httpxml.readyState==4)
  {
document.getElementById("displayDiv").innerHTML=httpxml.responseText;
document.getElementById("msg").style.display='none';
  }
 }
var url="ajax-search-demock.php";
url=url+"?txt="+str;
url=url+"&sid="+Math.random();
httpxml.onreadystatechange=stateChanged;
httpxml.open("GET",url,true);
httpxml.send(null);
document.getElementById("msg").innerHTML="Please Wait ...";
document.getElementById("msg").style.display='inline';
document.getElementById("displayDiv").style.display='block';
 }
</script>

$msg="";
if(strlen($in)>0 and strlen($in) <20 ){
$sql="select Nom_Hot, IdType_Hot, Id_Hot, IdRsrt_Hot, Dir_Hot, IdCat_Hot, Act_Hot from tbl_hotels LEFT JOIN tbl_resorts ON (tbl_resorts.Id_Rsrt=tbl_hotels.IdRsrt_Hot) where tbl_resorts.Nom_Rsrt like '%$in%' AND   Act_Hot=1" ;
foreach ($dbo->query($sql) as $nt) {

$msg2="";
$int=$nt['IdCat_Hot'];
if (in_array($nt['IdCat_Hot'], array(6, 7))) {
 } else {
if($int>0) { $k=0; while($k<$int) {$msg2.="<img src='site_images/orange_Star_Transparent.png' width='11' height='10' style='vertical-align:1px;' alt='gold star' />"; $k++; } } }

$msg .="<a href='hotel.php?hotel_ID=$nt[Id_Hot]&amp;Type=$nt[IdType_Hot]&amp;Resort=$nt[IdRsrt_Hot]'      title='$nt[Nom_Hot]' class='result_Link' style='width:100%; clear:both;'><span style='text-decoration:underline; color:#E17411'>$nt[Nom_Hot]</span> <img src='images/address_Icon_2.png' height='19px' style='vertical-align:-3px;' /> $nt[Dir_Hot] &nbsp;$msg2</a><br/>";
}}
echo $msg;

This is the most important bit, where you either search for resort which it is below or it changes to search within the hotel name field

where tbl_resorts.Nom_Rsrt like '%$in%' AND   Act_Hot=1

But on thinking about it the whole select php bit needs to change for one or the other, you couldn’t just simply change the field sorry, the hotel search is a lot easier than the resort search.

Ideally if the user skips from one radio button to the other the search starts again and possibly the text they have already entered goes away to allow them to put anew search in, quite complicated to make it work seamlessly

I made a bit of progress, and seems to work quite well. When the user changes the radio button the results clear and they get a message that they have changed their selection and to start again.

<form name="myForm">
<input type="radio" name="rdio" value="resort" checked> Resort <input type="radio" name="rdio" value="hotel"> Hotel
<input type="text"
onkeyup="ajaxFunction(this.value);" name="username" placeholder="Cancun, Barcelona, Phuket, London..." style="width:370px; height:27px;" class="text"/>
<div id="displayDiv" style="margin-top:5px; padding-top:5px;"></div>
</form>

$(document).ready(function(){
    console.log("parsed");
    $("input[name='rdio']").change(function() {
        console.log("changed");
        if ($("input[name='rdio']:checked").val() == 'resort')
            $("#displayDiv").text("Search has been changed to 'Resort', re-start your search</span>");
        else if ($("input[name='rdio']:checked").val() == 'hotel')
            $("#displayDiv").text("Search has been changed to 'Hotel', re-start your search");
    });
});

I suppose what I need to try and work out now is when the radio button is selected how that value can pass through to the php so I can tailor the choice of select script

I think I’ve managed to get it to the final part where I need to send the radio button choice to be picked up by the php, so I have the following code, but my addition which is this

url=url+"&radio="+genderValue;

Is causing the whole thing to break.

$('input[name="rdio"]').change(function(){
var genderValue = this.value
})

var url="ajax-search-demock.php";
url=url+"?txt="+str;
url=url+"&radio="+genderValue;
url=url+"&sid="+Math.random();
httpxml.onreadystatechange=stateChanged;
httpxml.open("GET",url,true);
httpxml.send(null);
document.getElementById("msg").innerHTML="Please Wait ...";
document.getElementById("msg").style.display='inline';
document.getElementById("displayDiv").style.display='block';
  }

Then on the php page

$radioB=$_GET['radio'];

Is that a typo rdio rather than radio ?

no I know what you mean though, but no that’s correct.

Everything else is fine, its now that I need to capture what radio button has been selected and then to be able to pass that through with the url string and then pick it up in the php page.

There something with adding that variable to the url string that’s causing the whole url string to fail, I’m not sure why as I maybe doing something that’s isn’t allowed.

But I have created a var called genderValue which holds the value of what radio button is selected as below.

$('input[name="rdio"]').change(function(){
var genderValue = this.value
})

Then I’m sending the values to the external php page, and what I intend to do is use the radio button value to decide which select clause to use.

var url="ajax-search-demock.php";
url=url+"?txt="+str+"";
url=url+"&radio="+genderValue;
url=url+"&sid="+Math.random();
httpxml.onreadystatechange=stateChanged;
httpxml.open("GET",url,true);
httpxml.send(null);

But as soon as I add url=url+“&radio=”+genderValue; it breaks.

haven’t a clue.

Or maybe its a case of doing something here directly where the radio buttons are using ajax, but again I’m not sure.

<form name="myForm"
<input type="radio" name="rdio" value="resort"> Resort <input type="radio" name="rdio" value="hotel"> Hotel
<input type="text"
onkeyup="ajaxFunction(this.value);" name="username" placeholder="Cancun, Barcelona, Phuket, London..."  class="text" id="myMessage" />
<div id="displayDiv"><div>
</form>

Or there is even this section where a message could be sent to the php file

$(document).ready(function(){
console.log("parsed");
$("input[name='rdio']").change(function() {
console.log("changed");
if ($("input[name='rdio']:checked").val() == 'resort')
$("#displayDiv").text("Oops! search has changed to 'Resort', re-start your search").css('background-color','#FC0').css('color','#000');
else if ($("input[name='rdio']:checked").val() == 'hotel')
$("#displayDiv").text("Oops! search has changed to 'Hotel', re-start your search").css('background-color','#FC0').css('color','#000');
});
});

I have managed to put some code together now without breaking anything as below.

$('input[name="rdio"]').change(function(){
var genderValue = this.value
//alert (genderValue)
$.ajax({
type: 'POST',
url: 'ajax-search-demock.php',
dataType: 'html',
data: {'radio' : genderValue},
success: function(){
alert("sent");
}
});

I have on the php file

if(isset($_POST['radio'])) { 
$radioB=$_POST['radio'];
echo $radioB;
} else {
echo 'fail';    
}

But I’m not getting the positive echo, only the ‘fail’ so its not working, but as this method works on other occasions, I’m guessing im not quite getting the ajax bit right, but I get the sent alert for success.

Was getting excited then that I had got it but that failed the same way too, it just doesn’t seem to be arriving on the external php page.

   var genderValue = this.value
   //alert (genderValue)
   var saveData = $.ajax({
   type: 'POST',
   url: 'ajax-search-demock.php?radio=saveData',
   dataType: "text",
   data: genderValue,
   success: function(data){
   //alert(genderValue);
   }

I don’t know what I’m doing wrong here, the code I’m using to send the variable seems fine but its not picking it up on the php page.

I cut it right down to this which looks fine to me again.

$('input[name="rdio"]').change(function(){
var genderValue = this.value
$.get("ajax-search-demock.php", {radio:genderValue} );
})

Then on the php side

$radioB=$_GET['radio'];
echo $radioB;

And nothing, well it seems to be nothing anyway.

I’m going to revert it back to how I had it as the alerts are working at least so I can see that that side seems to be working

$('input[name="rdio"]').change(function(){
var genderValue = this.value
//alert (genderValue)
$.ajax({
type: 'POST',
url: 'ajax-search-demock.php',
dataType: 'html',
data: {'radio' : genderValue},
success: function(){
alert("sent");
}
});

Sorry to keep posting but am changing where I’m going to try and post the value, and revert back to where I started, as it seems to work to pass the other values, but its getting the radio button value to the variable.

var url="ajax-search-demock.php";
url=url+"?txt="+str+"";
url=url+"&radio="+genderValue;
url=url+"&sid="+Math.random();
httpxml.onreadystatechange=stateChanged;
httpxml.open("GET",url,true);
httpxml.send(null);

if I do this about that code it works fine genderValue= “resort”

But that’s not how this works, its how do I get the value from the radio button to genderValue, which is causing all the problems.

So with the code below, could someone please see how I get the choice of radio button to the variable gendervalue so it can POST with the other info to the php page

<form name="myForm">
<input type="radio" name="rdio" value="resort" checked> Resort <input type="radio" name="rdio" value="hotel"> Hotel <input type="text"
onkeyup="ajaxFunction(this.value);" name="username" class="text" id="myMessage" />
<div id="displayDiv"></div>
</form>

<script type="text/javascript">
$(document).ready(function(){
console.log("parsed");
$("input[name='rdio']").change(function() {
console.log("changed");
if ($("input[name='rdio']:checked").val() == 'resort')
$("#displayDiv").text("Oops! search has changed to 'Resort', re-start your search").css('background-color','#FC0').css('color','#000');
else if ($("input[name='rdio']:checked").val() == 'hotel')
$("#displayDiv").text("Oops! search has changed to 'Hotel', re-start your search").css('background-color','#FC0').css('color','#000');
//alert (genderValue)
});
});

function ajaxFunction(str) {	
var httpxml;
try {
// Firefox, Opera 8.0+, Safari
  httpxml=new XMLHttpRequest();
   } catch (e) {
// Internet Explorer 
try {
  httpxml=new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
try {
  httpxml=new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e) {
  alert("Your browser does not support AJAX!");
  return false;
  }
    }
}

//genderValue= "resort"

var url="ajax-search-demock.php";
url=url+"?txt="+str+"";
url=url+"&radio="+genderValue;
url=url+"&sid="+Math.random();
httpxml.onreadystatechange=stateChanged;
httpxml.open("GET",url,true);
httpxml.send(null);
document.getElementById("msg").innerHTML="Please Wait ...";
document.getElementById("msg").style.display='inline';
document.getElementById("displayDiv").style.display='block';
 }
</script>

I need the php page to know what radio is selected on page load and when they change their selection, so hopefully I can get to the bottom of it soon, Ill carry on trying though.

Looks like I’ve got it

if ($("input[name='rdio']:checked").val() == 'resort')
genderValue= "resort"

if ($("input[name='rdio']:checked").val() == 'hotel')
genderValue= "hotel"

Will see if this works now on the php page to choose the select query

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.