Incorrect Data Being Saved From AJAX Drop Down Menus
Question
I've been trying to sort out an issue I have with how one of my fields of data is being saved to a mySQL database. The issue I have is that instead of the text value being saved, the 'id' for the text value is being saved and I've no idea why.
The field is called 'detectorname' and the text value for this is selected via a drop down menu, which in turn, opens a second drop down menu called searchheadname. Both drop down menus are populated via PHP and AJAX scripts and show the correct text values when being selected by the user.
I appreciate that I haven't included any code, there is an awful lot and I have to admit I wasn't sure which sections would be of use.
I just wondered whether someone could perhaps help me out with this please and let me know which parts of the code they would like me to post.
UPDATE
HTML Form & AJAX Script
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Location</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css"
type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
<script type="text/javascript" src="js/addfindstolocation.js"></script>
<script type="text/javascript" language="javascript">
<!--
function savedata() {
var userid = document.getElementById("userid").value;
var locationid = document.getElementById("locationid").value;
var searchheadid = document.getElementById("searchheadid").value;
var additionalcomments = document.getElementById("additionalcomments").value;
var url = "addfindstolocationsave.php?userid=" + userid + "&locationid=" + locationid + "&searchheadid=" + searchheadid + "&additionalcomments=" + additionalcomments;
downloadUrl(url, function(data, responseCode) {
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
//-->
</script>
<script type="text/javascript" language="javascript">
$(function() {
$( "#dateoftrip" ).datepicker({
dateFormat:'dd/mm/yy',
showOn: 'button',
buttonText: 'Select Date...'});
});
</script>
<script type="text/javascript">
function AjaxFunction(detectorid)
{
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;
}
}
}
function stateck()
{
if(httpxml.readyState==4)
{
var myarray=eval(httpxml.responseText);
// Before adding new we must remove previously loaded elements
for(j=document.addfindstolocation.searchheads.options.length-1;j>=0;j--)
{
document.addfindstolocation.searchheads.remove(j);
}
for (i=0;i<myarray.length;i++)
{
var optn = document.createElement("OPTION");
optn.text = myarray[i];
optn.value = myarray[i];
document.addfindstolocation.searchheads.options.add(optn);
}
}
}
var url="searchheaddetails.php";
url=url+"?detectorid="+detectorid;
url=url+"&sid="+Math.random();
httpxml.onreadystatechange=stateck;
httpxml.open("GET",url,true);
httpxml.send(null);
}
</script>
</head>
<body>
<form name="addfindstolocation" method='POST'>
<p><label></label>
</p>
<p align="left">
<input name="userid" type="text" id="userid" value="1"/>
<input name="locationid" type="text" id="locationid" value="2"/>
<br />
</p>
<div>
<label>
<div align="left">Click on the map to place the marker for the find that has been made and drag until the precise location has been found. </div>
</div>
<p align="left"><label>Find OSGB36 Latitude Co-ordinate<br />
</label>
</p>
<div>
<div align="left">
<input name="findosgb36lat" type="text" id="findosgb36lat" size="20" />
</div>
</div>
<p align="left"><label>Find OSGB36 Longitude Co-ordinate<br />
</label>
</p>
<div>
<div align="left">
<input name="findosgb36lon" type="text" id="findosgb36lon" size="20" />
</div>
</div>
<p align="left"><label>Date of Trip<br />
</label>
</p>
<div>
<div align="left">
<input name="dateoftrip" type="text" id="dateoftrip" size="10" />
</div>
</div>
<p align="left"><label>Find Category</label> </p>
<div>
<div align="left">
<?php
mysql_connect("hostname", "username", "password") or die("Connection Failed");
mysql_select_db("dbname")or die("Connection Failed");
$query = "SELECT * FROM findcategories";
$result = mysql_query($query);
?>
<select name="findcategory" id="findcategory">
<option value=''>Select One</option>
<?php
while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {
?>
<option value="<?php echo $line['findcategory'];?>"> <?php echo $line['findcategory'];?> </option>
<?php
}
?>
</select>
</div>
<p align="left">
<label>Find Name<br />
</label>
</p>
<div>
<div align="left">
<input name="findname" type="text" id="findname" size="35" />
</div>
</div>
<p align="left">
<label>Find Description<br />
</label>
</p>
<div>
<div align="left">
<input name="finddescription" type="text" id="finddescription" size="150" />
</div>
</div>
<p align="left"><label></label>
<label>Detector Used</label></p>
<div>
<div align="left">
<select name=detectors id="detectorid" onchange="AjaxFunction(this.value);">
<option value=''>Select One</option>
<?
require "phpfile.php";// connection to database
$q=mysql_query("SELECT * from detectors WHERE userid='1'ORDER BY 'detectorname' ASC");
while($n=mysql_fetch_array($q)){
echo "<option value=$n[detectorid]>$n[detectorname]</option>";
}
?>
</select>
</div>
</div>
<p align="left">
<label></label>
<label>Search Head Used</label></p>
<div>
<div align="left">
<select name=searchheads id="searchheadid">
</select>
</div>
</div>
<p align="left">
<label>Detector Settings</label>
<label><br />
</label>
</p>
<div>
<div align="left">
<textarea name="detectorsettings" cols="50" rows="12" id="detectorsettings"></textarea>
</div>
</div>
<p align="left">
<label>PAS Ref. (if known)<br />
</label>
</p>
<div>
<div align="left">
<input name="pasref" type="text" id="pasref" size="9" />
</div>
</div>
<p align="left"><label>Additional Comments</label>
</p>
<div>
<div align="left">
<textarea name="additionalcomments" cols="50" rows="12" id="additionalcomments"></textarea>
</div>
</div>
<p align="left"><br />
<label></label>
</p>
<p align="left">
<input name="submit" type="submit" onclick="MM_callJS('savedata()')" value="Submit" />
</form>
<div id="map"></div>
</body>
</html>
**'Searchheadetails.php' File (Called in file above)**
<?
$detectorid=$_GET['detectorid'];
require "config.php";
$q=mysql_query("SELECT * FROM searchheads WHERE detectorid='$detectorid' ORDER BY 'searchheadname' ASC");
echo mysql_error();
$myarray=array();
$str="";
while($nt=mysql_fetch_array($q)){
$str=$str . "\"$nt[searchheadname]\"".",";
}
$str=substr($str,0,(strLen($str)-1)); // Removing the last char , from the string
echo "new Array($str)";
?>
1 answers
solution1
0 2011-08-23 14:53:01
I would try changing the detectorid to detectorname in one line of the code below:
<div>
<div align="left">
<select name=detectors id="detectorid" onchange="AjaxFunction(this.value);">
<option value=''>Select One</option>
<?
require "phpfile.php";// connection to database
$q=mysql_query("SELECT * from detectors
WHERE userid='1'ORDER BY 'detectorname' ASC");
while($n=mysql_fetch_array($q)){
echo "<option value=$n[detectorname]>$n[detectorname]</option>";
//***I changed the line above*** TODO:Remove this comment
}
?>
</select>
</div>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Ajax with 2 drop down menus
Ajax, multiple drop down menus
Sort and retrieve data with drop down menus in php
PHP Drop Down Menus
Dependable Drop Down Menus
Dynamic drop down menus
dynamic drop down menus
Filling drop down lists with ajax from the same data table
Getting value from multiple drop down menus in PHP
Dynamically populated drop-down menus from database
Related Tags