异步显示表单元素

Question

I want to asynchronously show up the price on my form before it gets submitted. I have values saved on an array in a PHP file where the prices will be based on. I formulated the following code based on my research.

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;

How can I use the values selected from the form as used in (var url = 'subcategories.php?selected_bed_id=' + bed_id + '&selected_bath_id=' + bath_id + '&selected_frequency_id' + frequency_id;) to output the result on my HTML Id #estimated-price.

I do not know how to connect my php array with the chosen values. So for example, the user selects VALUE "1" for BEDS, VALUE "2" for BATHS and CHOOSES "WEEKLY" for FREQUENCY, it should OUTPUT PRICE "101". I'm apparently new to PHP and not very familiar with it yet. Can somebody help me on this? Thank you!

Answer 1

Your problem is that when you use getElementsByName you will get an array not a single element. So, I change the code to handle the array as follows:

Note your updatePrice function is ok. If your subcategories.php will return a value, then updatePrice will print it out into your estimate_price variable.

Update In the function updatePrice you are sending a GET request. So in your subcategories.php file you need to receive those variables using $_GET . Then do your calculation and print it out with echo .

Last Update Replace the values one with 'one' and weekly with 'weekly' because those are string variables if you use it without ' php will assume that is a constant.

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