文章/答案/技术大牛

发布

社区首页 >问答首页 >异步显示窗体元素

问异步显示窗体元素
EN

Stack Overflow用户

提问于 2017-03-27 03:45:38

回答 1查看 47关注 0票数 0

在提交表单之前，我希望异步显示表单上的价格。我的值保存在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 #估测价格的结果。

我不知道如何将我的php数组与选定的值连接起来。例如，用户选择值"1“表示床，值值"2”用于洗澡，选择“每周”作为频率，则应该输出价格"101“。显然，我对PHP并不熟悉，而且还不太熟悉它。有人能帮我吗？谢谢!

ajax

javascript

php

html

arrays

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-03-27 04:28:13

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

，注意，，你的updatePrice函数没问题。如果您的subcategories.php将返回一个值，则updatePrice将将其打印到estimate_price变量中。

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

Last将值one替换为'one'，weekly替换为'weekly'，因为如果不使用'，则这些都是字符串变量。

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43037623

复制

相似问题

问异步显示窗体元素
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问异步显示窗体元素EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问异步显示窗体元素
EN