I am new so I apologize if I ask my question wrong. I have 3 drop down select boxes. The first allows you to select the width, the second is length and the third has the height. They have pre-selected values. Each value when selected is set to be changed to a width, length or height that is closest to. These are going to standard sizes saved in a database. After selection I can get the variable to change to the closest size but I cannot get them passed with AJAX. Here is the link to
<body onload="myFunction(),myFunction1(),myFunction3()">
<form name='myForm'>
<div class="wrapper">
<div align="center" class="one">
<p>Select the Width.</p>Width:
<select id="x" onchange="myFunction();">
<option value="10">10</option>
<option value="11">11</option>
<option value="12" selected>12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
</select>
</div>
<div align="center" class="two">
<p>Select the Length.</p>Length:
<select id="l" onchange="myFunction1();">
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21" selected>21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
</select>
</div>
<div align="center" class="three">
<p>Select the Height.</p>Height:
<select id="h" onchange="myFunction3();">
<option value="5" selected>5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<div align="center" class="four">
<p id="width"></p>
</div>
<div align="center" class="five">
<p>x</p>
</div>
<div align="center" class="six">
<p id="length"></p>
</div>
<div align="center" class="seven">
<p>x</p>
</div>
<div align="center" class="eight">
<p id="height"></p>
</div>
</div>
<div align="center" class="eigth">
<input type='button' onclick='ajaxFunction()' value='Query MySQL' />
</div>
</form>
<div id='ajaxDiv' align="center" class="eigth">Your result will display here</div>
</body>
This is my html above and here is the javascript below
function myFunction() {
var x = "";
x = document.getElementById("x").value;
if (x <= 12) {
x = 12;
} else if ((x > 12) && (x < 19)) {
x = 18;
} else if ((x > 18) && (x < 21)) {
x = 20;
} else if ((x > 20) && (x < 23)) {
x = 22;
} else if ((x > 22) && (x < 25)) {
x = 24;
} else if ((x > 24) && (x < 27)) {
x = 26;
} else if ((x > 26) && (x < 29)) {
x = 28;
} else if ((x > 28) && (x < 31)) {
x = 30;
}
document.getElementById("width").innerHTML = x;
}
function myFunction1() {
var l = "length";
l = document.getElementById("l").value;
if (l <= 21) {
l = 21;
} else if ((l > 21) && (l < 27)) {
l = 26;
} else if ((l > 26) && (l < 32)) {
l = 31;
} else if ((l > 31) && (l < 37)) {
l = 36;
} else if ((l > 36) && (l < 42)) {
l = 41;
} else if ((l > 41) && (l < 47)) {
l = 46;
} else if ((l > 46) && (l < 52)) {
l = 51;
} else if ((l > 51) && (l < 57)) {
l = 56;
}
document.getElementById("length").innerHTML = l;
}
function myFunction3() {
var h = "";
h = document.getElementById("h").value;
document.getElementById("height").innerHTML = h;
}
//Browser Support Code
function ajaxFunction() {
var ajaxRequest; // The variable that makes Ajax possible!
try {
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e) {
// Internet Explorer Browsers
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data
// sent from the server and will update
// div section in the same page.
ajaxRequest.onreadystatechange = function () {
if (ajaxRequest.readyState == 4) {
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
// Now get the value from user and pass it to
// server script.
var width = document.getElementById('width').value;
var length = document.getElementById('length').value;
var height = document.getElementById('height').value;
var queryString = "?width=" + width;
queryString += "&length=" + length + "&height=" + height;
ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
ajaxRequest.send(null);
}
Here is the fiddle link http://jsfiddle.net/steven27030/fNWEJ/47/
I am trying to make it so i can pull a price from the database with these 3 variables input by the user.
Here is the PHP code i will using with this.
<?php
$dbhost = "localhost";
$dbuser = "dbusername";
$dbpass = "dbpassword";
$dbname = "dbname";
//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass);
//Select Database
mysql_select_db($dbname) or die(mysql_error());
// Retrieve data from Query String
$width = $_GET['width'];
$length = $_GET['length'];
$height = $_GET['height'];
//build query
$query = "SELECT price FROM ajax_example WHERE width = '$width' AND length = '$length'
AND height ='$height'";
//Execute query
$qry_result = mysql_query($query) or die(mysql_error());
//Build Result String
$display_string = "<table>";
$display_string .= "<tr>";
$display_string .= "<th>Price</th>";
$display_string .= "</tr>";
// Insert a new row in the table for each person returned
while($row = mysql_fetch_array($qry_result)){
$display_string .= "<tr>";
$display_string .= "<td>$row[price]</td>";
$display_string .= "</tr>";
}
echo "Query: " . $query . "<br />";
$display_string .= "</table>";
echo $display_string;
?>
Again I hope somebody can tell me what I'm doing wrong.
