Resultaat door een selectbox

Door Kees Mulder op 14-03-2022 11:45 gewijzigd op 14-03-2022 11:47

1.805 views

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.


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


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


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