异步显示表单元素

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 = '子类别.php？selected_bed_id=' + bed_id + '&selected_bath_id=' + bath_id + '&selected_frequency_id' + frequency_id;(以 #estimated 价格输出我的 HTML ID 上的结果。

我不知道如何将我的 php 数组与所选值连接起来。因此，例如，用户为床选择值"1"，为浴室选择值"2"，为频率选择"每周"，它应该输出价格"101"。我显然是PHP的新手，还不是很熟悉。有人可以帮助我吗？谢谢！

Answer 1

你的问题是当你使用getElementsByName时，你会得到一个数组而不是一个元素。因此，我更改代码以处理数组，如下所示：

请注意，您的updatePrice函数正常。如果您的subcategories.php将返回一个值，则updatePrice会将其打印到estimate_price变量中。

更新在函数updatePrice中，您要发送GET请求。因此，在您的subcategories.php文件中，您需要使用 $_GET 接收这些变量。然后进行计算并用echo打印出来。

最后更新将one的值替换为 'one'，weekly替换为 'weekly'，因为如果您在不使用的情况下使用它，这些是字符串变量' 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>