Question

我是新人，所以如果我提出错误的话，我会道歉。我有3个下拉选择框。第一个允许您选择宽度，第二个是长度，第三个是高度。他们有预先选择的价值观。选择时的每个值都设置为更改为最接近的宽度，长度或高度。这些将转换为保存在数据库中的标准大小。选择后，我可以将变量更改为最接近的大小，但我无法通过AJAX传递它们。这是

的链接

<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>

这是我上面的html，这里是下面的javascript

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);
 }

这是小提琴链接http://jsfiddle.net/steven27030/fNWEJ/47/

我正在努力做到这一点，所以我可以用这些用户输入的3个变量从数据库中提取价格。

以下是我将使用的PHP代码。

 <?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;
    ?>

我希望有人能告诉我我做错了什么。

Answer 1

你得到了错误财产的价值。而不是：

var width = document.getElementById('width').value;

就是这样：

var width = document.getElementById('width').innerHTML;

在函数中更改后将变量传递给ajax

1 个答案: