Resultaat door een selectbox

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Kees Mulder

Kees Mulder

14/03/2022 11:45:10
Quote Anchor link
Ik heb onderstaande script en dat werkt goed. Alleen nu moet je een id in een input veld zetten en dan haalt hij de informatie op. Alleen zou ik het input veld graag vervangen door een selectbox. Maar dat krijg ik niet voor elkaar.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<html>

<head>
    <script src=
        "https://code.jquery.com/jquery-3.2.1.min.js">
    </script>

    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
        type="text/javascript">
    </script>
    
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
</head>

<body>
    <div class="container">
        <h1>GeeksForGeeks</h1>
        <div class="row">
            <div class="col-lg-6">
                <div class="form-group">
                    <label>User Id</label>
                    <input type='text' name="user_id"
                        id='user_id' class='form-control'
                        placeholder='Enter user id'
                        onkeyup="GetDetail(this.value)" value="">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6">
                <div class="form-group">
                    <label>First Name:</label>
                    <input type="text" name="first_name"
                        id="first_name" class="form-control"
                        placeholder='First Name'
                        value="">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6">
                <div class="form-group">
                    <label>Last Name:</label>
                    <input type="text" name="last_name"
                        id="last_name" class="form-control"
                        placeholder='Last Name'
                        value="">
                </div>
            </div>
        </div>
    </div>
    <script>

        // onkeyup event will occur when the user
        // release the key and calls the function
        // assigned to this event
        function GetDetail(str) {
            if (str.length == 0) {
                document.getElementById("first_name").value = "";
                document.getElementById("last_name").value = "";
                return;
            }
            else {

                // Creates a new XMLHttpRequest object
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.onreadystatechange = function () {

                    // Defines a function to be called when
                    // the readyState property changes
                    if (this.readyState == 4 &&
                            this.status == 200) {
                        
                        // Typical action to be performed
                        // when the document is ready
                        var myObj = JSON.parse(this.responseText);

                        // Returns the response data as a
                        // string and store this array in
                        // a variable assign the value
                        // received to first name input field
                        
                        document.getElementById
                            ("first_name").value = myObj[0];
                        
                        // Assign the value received to
                        // last name input field
                        document.getElementById(
                            "last_name").value = myObj[1];
                    }
                };

                // xhttp.open("GET", "filename", true);
                xmlhttp.open("GET", "gfg.php?user_id=" + str, true);
                
                // Sends the request to the server
                xmlhttp.send();
            }
        }
    </script>
</body>

</html>


En dan het ophalen:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?php

// Get the user id
$user_id = $_REQUEST['user_id'];

// Database connection
$con = mysqli_connect("localhost", "root", "", "gfg");

if ($user_id !== "") {
    
    // Get corresponding first name and
    // last name for that user id    
    $query = mysqli_query($con, "SELECT first_name,
    last_name FROM userdata WHERE user_id='$user_id'");

    $row = mysqli_fetch_array($query);

    // Get the first name
    $first_name = $row["first_name"];

    // Get the first name
    $last_name = $row["last_name"];
}

// Store it in a array
$result = array("$first_name", "$last_name");

// Send in JSON encoded form
$myJSON = json_encode($result);
echo $myJSON;
?>


De selectbox zou dan er moeten uitzien als:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
<select class="form-control" name="user_id" id="user_id">
<option value="1">Piet</option>
<option value="2">Kees</option>
<option value="3">Jan</option>
<option value="4">Wouter</option>
<option value="5">Willem</option>
</select>
Gewijzigd op 14/03/2022 11:47:22 door Kees Mulder
 
PHP hulp

PHP hulp

21/11/2024 21:28:38
 
- Ariën -
Beheerder

- Ariën -

14/03/2022 11:50:47
Quote Anchor link
Wat lukt er niet aan?
Heb je al je $_POST array in beeld gebracht met print_r() ?

PS: Hopelijk ben je je bewust van SQL-injection.
 
Adoptive Solution

Adoptive Solution

14/03/2022 12:31:21
Quote Anchor link
Vervang de input van de user_id door dit :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
<select class="form-control" name="user_id" id="user_id">
    <option>Kies een naam</option>
    <option value="1">Piet</option>
    <option value="2">Kees</option>
    <option value="3">Jan</option>
    <option value="4">Wouter</option>
    <option value="5">Willem</option>
</select>


En het script door dit :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
$(document).ready(function(){
    $('#user_id').on('change',function(){
        var user_id = $(this).val();
        if(user_id){
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    var myObj = JSON.parse(this.responseText);
                    document.getElementById("first_name").value = myObj[0];
                    document.getElementById("last_name").value  = myObj[1];
                }
            }
        };
    xmlhttp.open("GET", "gfg.php?user_id=" + user_id, true);
    xmlhttp.send();
    });
});
</script>


Kwam het voorbeeld hier tegen :

https://www.codexworld.com/dynamic-dependent-select-box-using-jquery-ajax-php/
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.