Ajax-request-with-multiple-select-box-conditions

PHP
1

First of all let me say that I’m just starting to learn, as a hobby, the basics of Web development: html, css, javascript and php.

I’m trying to implement a Web page with a database query and have encountered some dificulties:

If someone could enlighten me on which way to proceed it would be much appreciated.

I don’t want you to write the whole code for me but yes show me some hints and clues.

I have a table with Id, items, price1, price2, and price3.

After a lot of searching I managed to load all the items dynamicaly on a select list and show (price1) on a div with an on change event based on the item selected with an ajax call.

Now I need to update this price div based on two other select lists: one with 3 values (a,b,c) and the other one with (yes or no).

If select list 2 is (a) and select list 3 is (yes) the price to be displayed is (price2); If select list 2 is (b) and select list 3 is (yes) the price to be displayed is (price3) and if select list 3 option is (no) than wich ever price was loaded must be dobled. All with ajax and regardless to the order of selections.

Hope I made myself clear. I can load my code if needed.

Thanks in advance. Vasco

2

Hi vascommdias, welcome to the forum.

Sorry, but not completely, at least to me. The best I can gather in terms of logic is.

If 2-A and true then res = p2
If 2-B and true then res = p3
If 2-A and false then res = p * 2
If 2-B and false then res = p * 2

Seeing the “if else” code you have so far should help

3

Thanks for the reply.
You got the logic right.
So far I only have working the ajax call to display price1 based on item select list.
Do I have to build one ajax call for each of the other select lists?
Do I make the if conditions in the js file or in the server side php?
Thanks again.

4

I don’t have any if conditions yet.
I’ll try to post what I have so far.
Thank you

5

This is what I have so far:

Ajax.php

<?php
db connection variables


if(!isset($_GET['id'])){
    echo json_encode(array('success' => false, 'price_1' => '', 'message' => 'no id given'));
    exit;
}

try {
    $conn = new PDO("mysql:host=$servername;dbname=test", $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    trigger_error("Connection failed: " . $e->getMessage());
    echo json_encode(array('success' => false, 'price_1' => '', 'message' => 'shit happened' . $e->getMessage()));
    exit;
}

$stmt = $conn->prepare("SELECT price_1 FROM table WHERE id = ?");
$stmt->execute(array($_GET['id']));
$result = $stmt->fetch(PDO::FETCH_ASSOC);

if($result === false){
    trigger_error('Query failed: ' . $conn->errorInfo());
    echo json_encode(array('success' => false, 'price_1' => '', 'message' => 'shit happened'));
    exit;
} else {
    echo json_encode(array('success' => true, 'price_1' => $result['price_1'], 'message' => ''));
    exit;
}

index.php

<?php
Connection Variables
try {
    $conn = new PDO("mysql:host=$servername;dbname=test;charset=UTF8", $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    trigger_error("Connection failed: " . $e->getMessage());
}
$query = "SELECT `id`, `items`, `price_1` FROM `table`";
$rows = $conn->query($query)->fetchAll(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html>
    <head>

       <script>
            function getPrice(id){
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function() {
                    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
                        var jsonObj = JSON.parse(xmlhttp.responseText);
                        if(jsonObj.success === true){
                            document.getElementById("price_1").value = jsonObj.price_1;
                        }else{
                            document.getElementById("price_1").innerHTML = jsonObj.message;
                        }
                    }
                };
                xmlhttp.open("GET", "ajax.php?id=" + id, true);
                xmlhttp.send();
            }
        </script>
    </head>
<body>



<div>

<h3>GET A QUOTE</h3>



    Item:
    <br>
    <select name="price" id="priceSelect" onchange="getPrice(this.value)">
        <option>Please select:</option>
    <?php foreach ($rows as $row): ?>
        <option value="<?= $row['id'] ?>"><?= $row['items'] ?></option>
    <?php endforeach; ?>
    </select>
    <br>

    size:
    <br>
<select name="price" id="sizeselectSelect" onchange="sizePrice(this.value)">
        <option>Please select:</option>
        <option value="1">size1</option>
        <option value="2">size2</option>
        <option value="3">size3</option>
    </select>

<br>
        double:
        <br>
        <select name="bouble" id="doubleprice" onchange="lastprice(this.value)">
        <option>Please select:</option>
        <option value="yes">Yes</option>
        <option value="no">No</option>
    </select>
<br>
<br>
Total price:

    <input type="text" name="price_1[]" value="" id="price_1">&euro; 
    <p id="error"></p>


</body>
</html>
6

I’m not big on Ajax, but I’d think you could call the same browser code, which would then assemble the settings of all the selections to pass them in to the PHP code. In fact as the data coming back relies on all settings, I would imagine you’d have to do it that way. Or possibly you could return price2 and price3, and have the JS function that executes on return decide which one to display, and whether or not to double it. I think it would be neater to do that on the server side, but that’s just me.

7

Thank you for your sugestion.
I’ll try that.

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.