フォーム要素が非同期に表示される

Question

フォームを非同期的に表示して、フォームが送信される前に表示します。価格はPHPファイルの配列に保存されています。私は私の研究に基づいて次のコードを策定しました。 （VAR URL =「subcategories.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; 

？ selected_bed_id = '+ bed_id +' & selected_bath_id = '+ bath_id +' & selected_frequency_id '+ frequency_id;）を使用して、結果をHTML ID＃推定価格に出力します。

PHPの配列を選択した値に接続する方法がわかりません。たとえば、ユーザーはBEDSの場合は「1」、BATHSの場合は「2」、FREQUENCYの場合は「WEEKLY」を選択すると、「101」を出力する必要があります。私は明らかにPHPには新しく、それにはあまり慣れていません。誰か助けてくれますか？ありがとうございました！

Answer 1

getElementsByNameを使用すると、1つの要素ではなく配列が得られます。したがって、配列を次のように処理するようにコードを変更します。

updatePrice機能はokです。 subcategories.phpが値を返す場合は、updatePriceがestimate_price変数に出力されます。機能updatePriceあなたがGETリクエストを送信するには

更新 。したがって、subcategories.phpファイルでは、$_GETを使用してこれらの変数を受け取る必要があります。計算を行い、echoでそれを印刷します。

最終更新 ものは、あなたが' PHPなしでそれを使用する場合には一定であると仮定します文字列変数であるため、'one'と'weekly'と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>