CODEWITHSUNDEEP
javascriptphphtmlmysqlsql
Pascal
Pascal

Reputation: 467

Load sql data after making a choose out a select box?

I have a question. I want to achieve something, however, I have never done this so unfortunately I do not know how to handle this.

In my screen I fill a dropdown box with names from a sql db. Now I would like, as soon as a name is chosen from that dropdown that the other data be loaded such as, for example, min and max values. I would like to use these values ​​to, for example, be able to give limits to input fields. So as soon as an entry field falls outside of the loaded values, the entry field then turns red. However, I would like to use this without the submit button of the form being pressed.

Is this possible ? if so can someone help me with this?

The code i use to fill my selectbox is this.:

<td>
    <div class="controls">
        <select name="prod" id="employee" onclick="updateBottomValue(this.value);" onchange="mys1()" style="width: 245px;">
            <option value="" disabled selected="selected[]" multiple="multiple">Selecteer Product</option>
            <?php
            $pdo = Database::connect();
            $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
            $sql = "SELECT * FROM specsv1 where RActive = 'y' order by RNaam";
            $q = $pdo->prepare($sql);
            $q->execute(array($Id,$RNaam));
            Database::disconnect();
            while ($row = $q->fetch(PDO::FETCH_ASSOC)) {
                echo "<option value='" . $row['Id'] . "'>" . $row['RNaam'] . "</option>";
            } 
            ?>
        </select>

        <?php if (!empty($ProductError)): ?>
            <span class="help-inline"><?php echo $ProductError;?></span>
        <?php endif; ?>
    </div>

    <span id="selectedValue"></span>
    <input STYLE="width: 6em" name="rrss" type="text"  id='rrss'>
</td>

The code i have to get the selected name is this.:

<script>
    function updateBottomValue(selectedvalue) {
        document.getElementById("selectedValue").innerHTML=selectedvalue;
        document.getElementById('rrss').value = selectedvalue;
    }
</script>

Upvotes: 0

Views: 845

Answers (2)

dianeryanto
dianeryanto

Reputation: 600

Yap it is possible.

And maybe this example ajax for what you want, feel free to modify to fit your requirements.

function viewMinMax(value){

    if (value == 'a'){
        tempurl = "https://api.myjson.com/bins/dv40y";
    }else if (value == 'b'){
        tempurl = "https://api.myjson.com/bins/egjmq";
    }

    $.ajax({
        url: tempurl,
        type: "get", 
        dataType: "JSON",
        data: {}, //this is data you send to your server
        success: function(res)
        {   
            $('#info').show();
            document.getElementById("info").innerHTML = 'Your min value: ' + res.min + ', Your max value: ' + res.max;

            $('#min').val(res.min);
            $('#max').val(res.max);
        }
    })
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post">
    <select name="product_select" id="product_select" onchange="viewMinMax(this.value)">
        <option value="">Select Product</option>
        <option value="a">Product A</option>
        <option value="b">Product B</option>
    </select>

    <p id="info" style="display:none;"></p>

    <h3>Load the min & Max</h3>
    <label for="min">Min</label>
    <input type="text" name="min" id="min" value="">
    <br>

    <label for="max">Max</label>
    <input type="text" name="max" id="max" value="">
</form>

ignore the tempurl it can be change with your action to select data based on value to your DB.

Upvotes: 1

dearsina
dearsina

Reputation: 5202

Is it possible? Absolutely. There are a few ways of going about it. One easy way is to use jQuery to fire off what's called an AJAX call as soon as the dropdown value changes. The AJAX call your PHP script and get back some HTML that it will place wherever you want it on the screen.

It's a big subject, so difficult to give you exact answers, but google jquery ajax dropdown onchange and you should be able to get enough information to get you going. One of them is the following (there are many): jQuery Load form elements through ajax, from onchange event of drop down box

Upvotes: 0

Related Questions