異步顯示錶單元素

Question

我想在提交之前異步顯示錶單上的價格。我將數值保存在數組中的價格將基於的PHP文件中。我根據我的研究制定了以下代碼。

HTML

<form> 
<select id="beds-input-select"> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
<option value="5">5</option> 
<option value="6">6</option> 
</select> 

<select id="bath-input-select"> 
<option value="1.0">1</option><option value="1.5">1.5</option> 
<option value="2.0">2</option><option value="2.5">2.5</option> 
<option value="3.0">3</option><option value="3.5">3.5</option> 
<option value="4.0">4</option><option value="4.5">4.5</option> 
<option value="5.0">5</option><option value="5.5">5.5</option> 
<option value="6.0">6</option> 
</select> 

<div id="frequency-options"> 
<input type="radio" name="frequency" id="one" checked="checked"> 
<label for="one">One Time Cleaning</label> 

<input type="radio" name="frequency" id="weekly"> 
<label for="weekly">Weekly Cleaning</label> 

<input type="radio" name="frequency" id="biweekly"> 
<label for="biweekly">Bi-Weekly Cleaning</label> 
<input type="radio" name="frequency" id="monthly"> 
<label for="monthly">Monthly Cleaning</label> 
</div> 

<h5>Pay Only</h5> 
<div class="estimated-price-div">$<span id="estimated-price">0</span></div> 
<p><input type="submit" value="Schedule An Appointment Now!" class="estimate-submit"></p> 
</form> 

JAVASCRIPT

function updatePrice() { 
var bed_select = document.getElementById("beds-input-select"); 
var bath_select = document.getElementById("bath-input-select"); 
var frequency_options = document.getElementsByName("frequency"); 

var estimate_price = document.getElementById("estimated-price"); 

var bed_id = bed_select.options[bed_select.selectedIndex].value; 
var bath_id = bath_select.options[bath_select.selectedIndex].value; 
var frequency_id = frequency_options.checked[frequency_options.selectedIndex].value; 

var url = 'subcategories.php?selected_bed_id=' + bed_id + '&selected_bath_id=' + bath_id + '&selected_frequency_id' + frequency_id; 

var xhr = new XMLHttpRequest(); 
xhr.open('GET', url, true); 
xhr.onreadystatechange = function() { 
    if(xhr.readyState == 4 && xhr.status == 200) { 
     estimate_price.innerHTML = xhr.responseText; 
    } 
} 
xhr.send(); 
} 

var bed_select = document.getElementById("beds-input-select"); 
bed_select.addEventListener("change", updatePrice); 

var bath_select = document.getElementById("bath-input-select"); 
bath_select.addEventListener("change", updatePrice); 

var frequency_options = document.getElementsByName("frequency"); 
frequency_options.addEventListener("change", updatePrice); 

PHP

$pricing = [ 
['frequency' => one, 'beds' => 1 , 'baths' => 1 , 'price' => 90], 
['frequency' => one, 'beds' => 1 , 'baths' => 1.5 , 'price' => 113], 
['frequency' => one, 'beds' => 1 , 'baths' => 2 , 'price' => 113], 
['frequency' => one, 'beds' => 1 , 'baths' => 2.5 , 'price' => 135], 
['frequency' => one, 'beds' => 1 , 'baths' => 3 , 'price' => 135], 
['frequency' => one, 'beds' => 1 , 'baths' => 3.5 , 'price' => 158], 
['frequency' => one, 'beds' => 1 , 'baths' => 4 , 'price' => 158], 
['frequency' => one, 'beds' => 1 , 'baths' => 4.5 , 'price' => 180], 
['frequency' => one, 'beds' => 1 , 'baths' => 5 , 'price' => 180], 
['frequency' => one, 'beds' => 1 , 'baths' => 5.5 , 'price' => 203], 
['frequency' => one, 'beds' => 1 , 'baths' => 6 , 'price' => 203], 

['frequency' => weekly, 'beds' => 1 , 'baths' => 1 , 'price' => 81], 
['frequency' => weekly, 'beds' => 1 , 'baths' => 1.5 , 'price' => 101], 
['frequency' => weekly, 'beds' => 1 , 'baths' => 2 , 'price' => 101], 
['frequency' => weekly, 'beds' => 1 , 'baths' => 2.5 , 'price' => 122], 
['frequency' => weekly, 'beds' => 1 , 'baths' => 3 , 'price' => 122], 
['frequency' => weekly, 'beds' => 1 , 'baths' => 3.5 , 'price' => 142], 
['frequency' => weekly, 'beds' => 1 , 'baths' => 4 , 'price' => 142], 
['frequency' => weekly, 'beds' => 1 , 'baths' => 4.5 , 'price' => 162], 
['frequency' => weekly, 'beds' => 1 , 'baths' => 5 , 'price' => 162], 
['frequency' => weekly, 'beds' => 1 , 'baths' => 5.5 , 'price' => 182], 
['frequency' => weekly, 'beds' => 1 , 'baths' => 6 , 'price' => 182] 
]; 

//PASS VALUES from the selected bed_id, bath_id, frequency_id and output $result; 

echo $result; 

如何使用從表單中選擇的值作爲（VAR URL =「subcategories.php使用？ selected_bed_id ='+ bed_id +'& selected_bath_id ='+ bath_id +'& selected_frequency_id'+ frequency_id;）在我的HTML ID＃估計價格上輸出結果。我不知道如何連接我的PHP數組與選定的值。因此，例如，用戶爲BEDS選擇VALUE「1」，爲BATHS選擇VALUE「2」，爲頻率選擇「WEEKLY」，它應該輸出價格「101」。我顯然是PHP的新手，但對它還不是很熟悉。有人可以幫助我嗎？謝謝！

Answer 1

你的問題是，當你使用getElementsByName時，你會得到一個數組而不是單個元素。所以，我改變代碼來處理陣列如下：

注意你的updatePrice功能沒問題。如果您的subcategories.php將返回一個值，那麼updatePrice將打印出您的estimate_price變量。

更新 在功能updatePrice您發送GET請求。因此，在您的subcategories.php文件中，您需要使用$_GET來接收這些變量。然後做你的計算，並用echo打印出來。

最後更新 與'weekly'替換'one'和weekly值one，因爲這些都是字符串變量，如果你使用它，而' PHP會認爲是一個常數。

<?php 
    $pricing = [ 
    ['frequency' => 'one', 'beds' => 1 , 'baths' => 1 , 'price' => 90], 
    ['frequency' => 'one', 'beds' => 1 , 'baths' => 1.5 , 'price' => 113], 
    ['frequency' => 'one', 'beds' => 1 , 'baths' => 2 , 'price' => 113], 
    ['frequency' => 'one', 'beds' => 1 , 'baths' => 2.5 , 'price' => 135], 
    ['frequency' => 'one', 'beds' => 1 , 'baths' => 3 , 'price' => 135], 
    ['frequency' => 'one', 'beds' => 1 , 'baths' => 3.5 , 'price' => 158], 
    ['frequency' => 'one', 'beds' => 1 , 'baths' => 4 , 'price' => 158], 
    ['frequency' => 'one', 'beds' => 1 , 'baths' => 4.5 , 'price' => 180], 
    ['frequency' => 'one', 'beds' => 1 , 'baths' => 5 , 'price' => 180], 
    ['frequency' => 'one', 'beds' => 1 , 'baths' => 5.5 , 'price' => 203], 
    ['frequency' => 'one', 'beds' => 1 , 'baths' => 6 , 'price' => 203], 

    ['frequency' => 'weekly', 'beds' => 1 , 'baths' => 1 , 'price' => 81], 
    ['frequency' => 'weekly', 'beds' => 1 , 'baths' => 1.5 , 'price' => 101], 
    ['frequency' => 'weekly', 'beds' => 1 , 'baths' => 2 , 'price' => 101], 
    ['frequency' => 'weekly', 'beds' => 1 , 'baths' => 2.5 , 'price' => 122], 
    ['frequency' => 'weekly', 'beds' => 1 , 'baths' => 3 , 'price' => 122], 
    ['frequency' => 'weekly', 'beds' => 1 , 'baths' => 3.5 , 'price' => 142], 
    ['frequency' => 'weekly', 'beds' => 1 , 'baths' => 4 , 'price' => 142], 
    ['frequency' => 'weekly', 'beds' => 1 , 'baths' => 4.5 , 'price' => 162], 
    ['frequency' => 'weekly', 'beds' => 1 , 'baths' => 5 , 'price' => 162], 
    ['frequency' => 'weekly', 'beds' => 1 , 'baths' => 5.5 , 'price' => 182], 
    ['frequency' => 'weekly', 'beds' => 1 , 'baths' => 6 , 'price' => 182] 
    ]; 

    if($_GET['selected_bed_id'] && $_GET['selected_bath_id'] && $_GET['selected_frequency_id']) { 

     $selected_bed_id = $_GET['selected_bed_id']; 
     $selected_bath_id = $_GET['selected_bath_id']; 
     $selected_frequency_id = $_GET['selected_frequency_id']; 

     foreach($pricing as $element) { 
      if($element['frequency'] == $selected_frequency_id && 
      $element['beds'] == $selected_bed_id && 
      $element['baths'] == $selected_bath_id) { 
       echo $element['price']; 
       break; 
      } 
     } 
    } 

var bed_select = document.getElementById("beds-input-select"); 
 
bed_select.addEventListener("change", updatePrice); 
 

 
var bath_select = document.getElementById("bath-input-select"); 
 
bath_select.addEventListener("change", updatePrice); 
 

 
var frequency_options = document.getElementsByName("frequency"); 
 
frequency_options.forEach(function(element) { 
 
    // console.log(element); 
 
    element.addEventListener("change", updatePrice); 
 
}); 
 

 
function updatePrice() { 
 
    var estimate_price = document.getElementById("estimated-price"); 
 

 
    var bed_id = bed_select.options[bed_select.selectedIndex].value; 
 
    var bath_id = bath_select.options[bath_select.selectedIndex].value; 
 

 
    var radios = document.querySelectorAll('input[type="radio"]:checked'); 
 
    var frequency_id = radios.length > 0 ? radios[0].id : null; 
 

 
    var url = 'subcategories.php?selected_bed_id=' + bed_id + '&selected_bath_id=' + bath_id + '&selected_frequency_id=' + frequency_id; 
 
    
 
    alert(
 
    'selected_bed_id=' + bed_id + '\n'+ 
 
    'selected_bath_id=' + bath_id + '\n'+ 
 
    'selected_frequency_id=' + frequency_id + '\n'); 
 

 
    var xhr = new XMLHttpRequest(); 
 
    xhr.open('GET', url, true); 
 
    xhr.onreadystatechange = function() { 
 
    if (xhr.readyState == 4 && xhr.status == 200) { 
 
     estimate_price.innerHTML = xhr.responseText; 
 
    } 
 
    } 
 
    xhr.send(); 
 
}

<form> 
 
    <select id="beds-input-select"> 
 
<option value="1">1</option> 
 
<option value="2">2</option> 
 
<option value="3">3</option> 
 
<option value="4">4</option> 
 
<option value="5">5</option> 
 
<option value="6">6</option> 
 
</select> 
 

 
    <select id="bath-input-select"> 
 
<option value="1.0">1</option><option value="1.5">1.5</option> 
 
<option value="2.0">2</option><option value="2.5">2.5</option> 
 
<option value="3.0">3</option><option value="3.5">3.5</option> 
 
<option value="4.0">4</option><option value="4.5">4.5</option> 
 
<option value="5.0">5</option><option value="5.5">5.5</option> 
 
<option value="6.0">6</option> 
 
</select> 
 

 
    <div id="frequency-options"> 
 
    <input type="radio" name="frequency" id="one" checked="checked"> 
 
    <label for="one">One Time Cleaning</label> 
 

 
    <input type="radio" name="frequency" id="weekly"> 
 
    <label for="weekly">Weekly Cleaning</label> 
 

 
    <input type="radio" name="frequency" id="biweekly"> 
 
    <label for="biweekly">Bi-Weekly Cleaning</label> 
 
    <input type="radio" name="frequency" id="monthly"> 
 
    <label for="monthly">Monthly Cleaning</label> 
 
    </div> 
 

 
    <h5>Pay Only</h5> 
 
    <div class="estimated-price-div">$<span id="estimated-price">0</span></div> 
 
    <p><input type="submit" value="Schedule An Appointment Now!" class="estimate-submit"></p> 
 
</form>