dongwei6700
dongwei6700
2014-02-12 20:10

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

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.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • duanji5569 duanji5569 7年前

    you are getting the value of the wrong property. Instead of this:

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

    is this:

    var width = document.getElementById('width').innerHTML;
    
    点赞 评论 复制链接分享

相关推荐