I have the following text fields:
<input type="text" name="empid" id="empid" tabindex="1" onblur="getname()">
<input type="text" name="name" id="name" tabindex="2"/>
<input type="text" name="city" id="name" tabindex="3"/>
<input type="text" name="state" id="name" tabindex="4"/>
and database table is:
empid name city state
EMP471 BBB bbbbb cccccc
EMP444 AAA xxxx yyyyyy
I'm new to php. I found some code on internet to retrieve data. but its not working.
Ajax code is:
function getname() {
var id=$("#id").val();
$.ajax({
type:"post",
dataType:"text",
data:"id="+id,
url:"getinsdata.php",
success:function(response)
{
$("#name").val(response.name);
$("#city").val(response.city);
$("#state").val(response.state);
}
});
}
and php code is
<?php
include 'connection.php';
$id=$_POST['id'];
$id=$_POST['id'];
$query=mysql_query("select name,city,state from ins_master where id=$id");
$result=mysql_fetch_row($query);
echo $result[0];
exit;
?>
when we select the empid then the respective name, city, state should be shown in textboxes when onblur event fires in PHP using AJAX.
What are you trying to achieve? Send the datas and get the response according to a query? Get some datas?
I'd go
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</head>
<body>
<form id="test" method="POST">
<input type="text" id="name" required minlength="5" name="name"/>
<input type="password" id="pw" required name="pw"/>
<input id ="sub" type="submit"/>
</form>
<div id="answer"></div>
</body>
<script>
$("#sub").click(function(event){
event.preventDefault();
query = $.post({
url : 'check_ajax.php',
data : {'name': $('input[name=name]').val(), 'pw': $('#pw').val()},
});
query.done(function(response){
$('#answer').html(response);
});
});
</script>
This is check_ajax.php :
<?php
var_dump($_POST);
?>
in the second file but that's where you're supposed to do your query and insert/select
As people said we don't write code but give clues and since it's basics/fundamentals I can't help more cause you have to understand. Copy paste ain't a great idea
Try this html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
function getname(val) {
$.ajax({
url: 'getinsdata.php',
type: 'POST',
data: 'state_id='+val,
dataType: 'json',
success:function(data){
var len = data.length;
if(len > 0){
var id = data[0]['id'];
var name = data[0]['name'];
var city = data[0]['city'];
var state = data[0]['state'];
document.getElementById('name').value = name;
document.getElementById('city').value = city;
document.getElementById('state').value = state;
}
}
});
}
</script>
</head>
<body>
<form method="post">
<input type="text" name="empid" id="empid" tabindex="1" onblur="getname(this.value);">
<input type="text" name="name" id="name" tabindex="2"/>
<input type="text" name="city" id="city" tabindex="3"/>
<input type="text" name="state" id="state" tabindex="4"/>
</form>
</body>
</html>
and getinsdata.php is
<?php
include('connection.php');
$id = $_POST['state_id'];
$sql = "SELECT * FROM ins_master WHERE id='$id'";
$result = mysqli_query($conn,$sql);
$users_arr = array();
while( $row = mysqli_fetch_array($result) ){
$id = $row['id'];
$name = $row['name'];
$city = $row['city'];
$state = $row['state'];
$users_arr[] = array("id" => $id, "name" => $name, "city" => $city, "state" => $state);
}
// encoding array to json format
echo json_encode($users_arr);
exit;
?>
And your connection.php
<?php
$username = "";
$password = "";
$dbname = "";
$conn = mysqli_connect("localhost",$username,$password,$dbname);
if(!$conn){
die("Error in Connecation");
}
?>
put $dbname= your database name
Related
I am currently creating a form which will create an 'appointment or visit' to a doctors.
The form will consist of selecting Patient, Doctor, Condition, Medication and saving this (all of these are from separate tables) into a linked table using the id's as foreign keys.
But to do this form i am using Typeahead, it works when only using it once within the form, but once i add more than the once it stops working.
I am fairly new to PHP and learning so if im in the completely wrong place, guidance would be appreciated :)
My code is as follows.
Index.html
<html>
<head>
<title>Search</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="typeahead.min.js"></script>
<script>
$(document).ready(function(){
$('input.typeahead').typeahead({
name: 'patient',
remote:'search.php?patientkey=%QUERY',
limit : 10
});
});
$(document).ready(function(){
$('input.typeahead').typeahead({
name: 'doctor',
remote:'search.php?doctorkey=%QUERY',
limit : 10
});
});
$(document).ready(function(){
$('input.typeahead').typeahead({
name: 'con',
remote:'search.php?conkey=%QUERY',
limit : 10
});
});
$(document).ready(function(){
$('input.typeahead').typeahead({
name: 'med',
remote:'search.php?medkey=%QUERY',
limit : 10
});
});
</script>
</head>
<body>
<div class=".col-md-6">
<div class="panel panel-default">
<div class="bs-example">
<input type="text" name="patient" class="typeahead tt-query" autocomplete="on" spellcheck="on" placeholder="Type Patient Name">
<input type="text" name="doctor" class="typeahead tt-query" autocomplete="on" spellcheck="on" placeholder="Type Doctor Name">
<input type="text" name="con" class="typeahead tt-query" autocomplete="on" spellcheck="on" placeholder="Type Condition">
<input type="text" name="med" class="typeahead tt-query" autocomplete="on" spellcheck="on" placeholder="Type Medication">
</div>
</div>
</div>
</div>
</body>
</html>
search.php
<?php // Include config file < includes $db connection
include("$_SERVER[DOCUMENT_ROOT]/freddies/inc/config.php");
?>
<?php
$patientkey=$_GET['patientkey'];
$array = array();
$query=mysqli_query($db, "select * from patient where sName or FName LIKE '%{$patientkey}%'");
while($row=mysqli_fetch_assoc($query))
{
$array[] = $row['fName']." ".$row['sName'];
}
echo json_encode($array);
mysqli_close($db);
$doctorkey=$_GET['doctorkey'];
$array = array();
$query=mysqli_query($db, "select * from doctor where sName or FName LIKE '%{$doctorkey}%'");
while($row=mysqli_fetch_assoc($query))
{
$array[] = $row['fName']." ".$row['sName'];
}
echo json_encode($array);
mysqli_close($db);
$conkey=$_GET['conkey'];
$array = array();
$query=mysqli_query($db, "select * from med where con_name LIKE '%{$conkey}%'");
while($row=mysqli_fetch_assoc($query))
{
$array[] = $row['con_name'];
}
echo json_encode($array);
mysqli_close($db);
$medkey=$_GET['medkey'];
$array = array();
$query=mysqli_query($db, "select * from drugs where medication LIKE '%{$medkey}%'");
while($row=mysqli_fetch_assoc($query))
{
$array[] = $row['medication'];
}
echo json_encode($array);
mysqli_close($db);
?>
I'm trying to make a autocomplete with bootstrap, php and ajax.
My php code seems right here's the code:
<?php
$conn = pg_connect("host=y dbname=y user=y");
$data = array();
$keyword = strval($_POST['query']);
$search_param = "{$keyword}%";
$result = pg_query_params($conn, "select name from users_table where users_table.name like $1", array($search_param));
while($row = pg_fetch_row($result)) {array_push($data, $row[0]);}
echo json_encode($data);
$conn->close();
?>
And with a simple test making $search_param = '%S%'; this is my output from the php file:
["Steven","Sally","Sam","Susan"]
And this is my index.php file:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<br /><br />
<div class="container" style="width:600px;">
<h2 align="center">Autocomplete Textbox using Bootstrap Typeahead with Ajax PHP</h2>
<br /><br />
<label>Search Name</label>
<input type="text" name="name" id="name" class="form-control input-lg" autocomplete="off" placeholder="Type Name" />
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#name').typeahead({
source: function(query, result)
{
$.ajax({
url:"autoComplete.php",
method:"POST",
data:{query:query},
dataType:"json",
success:function(data)
{
result($.map(data, function(item){
return item;
}));
}
})
}
});
});
</script>
I followed this tutorial http://www.webslesson.info/2017/04/dynamic-autocomplete-search-using-bootstrap-typeahead-with-php-ajax.html
but my the autocomplete doesn't work at all and i can understand why. What's wrong?
Creating a register.html form where the user is prompt to enter a name, email and password, then clicks submit which triggers a php script to check is the email enter is already in use, and if it is not already in use, it places the users data in the appropriate fields in the table 'users-form' on mysql.
My issue is that AJAX isn't submitting the form. The javascript that states "Fill in empty fields" works fines. I don't know what I am doing wrong.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Reg Form</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div class="header">
<div>Register form</div>
</div>
<form action="">
<p> Enter name, email and password</p>
<label>Name :</label>
<input id="name" type="text">
<label>Email :</label>
<input id="email" type="text">
<label>Password :</label>
<input id="password" type="password">
<input id="submit" type="button" value="Submit">
</form>
//Internal Javascript
<script>
$(document).ready(function() {
$("#submit").click(function() {
var name = $("#name").val();
var email = $("#email").val();
var password = $("#password").val();
//success message when information is stored in database.
var dataString = 'name1=' + name + '&email1=' + email + '&password1=' + password;
if (name == '' || email == '' || password == '') {
alert("Fill in empty fields");
} else {
//submits form
$.ajax({
type: "POST",
url: "connect.php",
data: dataString,
cache: false,
success: function(result) {
alert(result);
}
});
}
return false;
});
});
</script>
</body>
</html>
AJAX connect.php:
<?php
$connection = mysql_connect("localhost", "root", ""); // Establishing Connection with Server..
$db = mysql_select_db("mydatabase", $connection); // Selecting Database
//Fetching Values from URL
$name2=$_POST['name1'];
$email2=$_POST['email1'];
$password2=$_POST['password1'];
//Insert query
$query = mysql_query("insert into users-form(name, email, password) values ('$name2', '$email2', '$password2')");
echo "Submitted!";
mysql_close($connection); // Connection Closed
?>
Any ideas? Thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Reg Form</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script src="js/theme.init.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
</head>
<body>
<div class="header">
<div>Register form</div>
</div>
<form action="" id="form">
<p> Enter name, email and password</p>
<label>Name :</label>
<input id="name" name="name1" type="text">
<label>Email :</label>
<input id="email" name="email1" type="text" required>
<label>Password :</label>
<input id="password" name="password1" type="password" required>
<input id="submit" type="button" value="Submit">
</form>
//Internal Javascript
<script type="text/javascript">
$(document).ready(function (e){
$("#form").on('submit',(function(e){
e.preventDefault();
$.ajax({
url: "connect.php ",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(result) {
alert(result);
}
});
return false
}));
});
</script>
</body>
</html>
Your javascript code is fine the problem is mysql has deprecated instead you can use mysqli so your connection could be something like this:
$con = mysqli_connect("localhost","username","password","dbname");
$name2=$_POST['name1'];
$email2=$_POST['email1'];
$password2=$_POST['password1'];
$query = mysqli_query($con, "insert into `users-form` (name, email, password) values ('$name2', '$email2', '$password2')");
if ($query) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($con);
}
I am sending state,city,zip code to ajax.php file. using jquery.
I am unable to get those values in response
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Jquery Ajax</title>
</head>
<body>
<!------------------------Jquery-------POST DATA----------------------------------------->
<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
-->
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#id-submit').click(function() {
var reg_state = $('#reg_state').val();
var reg_city = $('#reg_city').val();
var reg_zip = $('#reg_zip').val();
var dataString = 'reg_state='+ reg_state;
//alert(dataString);
$.ajax
({
type: "POST",
url: "ajax.php",
data: dataString,
cache: false,
success: function(data)
{
//$("#state").html(data);
alert(data);
}
});
});
});
</script>
<!------------------------Jquery-----------POST DATA END------------------------------------->
<form id="registration_form" action="" method="post">
<div id="state"></div>
<div class="reg-id">
<label>
<input placeholder="State:" type="text" tabindex="3" name="user_state" id="reg_state" value="">
</label>
</div>
<div class="reg-id">
<label>
<input placeholder="City:" type="text" tabindex="3" name="user_city" id="reg_city" value="">
</label>
</div>
<div class="reg-id-last">
<label>
<input placeholder="Zip/Postal:" type="text" tabindex="3" name="user_zip" id="reg_zip" value="">
</label>
</div>
<input type="submit" value="submit" tabindex="3" name="reg_btn" id="id-submit">
</div>
</form>
</body>
</html>
This is the ajax.php file , from where i need to send response, and make it visible in div id="state
<?php
if($_POST['reg_state'])
{
echo $_POST['reg_state'];
}
else{
echo 'nothing';
}
?>
Try create an object
var dataString = { reg_state: reg_state, reg_city: reg_city, reg_zip : reg_zip }
I believe your problem lies in the type=submit. Replacing this with type=button gives you the result you want.
I'm unsure why this is, but I'm guessing it type=submit gives extra functionality to the input. The page seems to reload after hitting the submit button.
ps. don't forget you actually need to click the button in order for the function to trigger. Hitting enter after filling out the input fields will do nothing.
When ever we use input['type']="submit" in form
we have to use
$('#id-submit').click(function(e) {
e.preventDefault();
}
Here is the full working code
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Jquery Ajax</title>
</head>
<body>
<!------------------------Jquery-------POST DATA----------------------------------------->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#id-submit').click(function(e) {
e.preventDefault();
var reg_state = $('#reg_state').val();
var reg_city = $('#reg_city').val();
var reg_zip = $('#reg_zip').val();
var dataString = { reg_state: reg_state, reg_city: reg_city, reg_zip : reg_zip }
//alert(dataString);
$.ajax
({
type: "POST",
url: "ajax_city.php",
data: dataString,
cache: false,
success: function(data)
{
$("#state").html(data);
// alert('hi');
}
});
});
});
</script>
<!------------------------Jquery-----------POST DATA END------------------------------------->
<form id="registration_form" action="" method="post">
<div id="state"></div>
<div class="reg-id">
<label>
<input placeholder="State:" type="text" tabindex="3" name="user_state" id="reg_state" value="">
</label>
</div>
<div class="reg-id">
<label>
<input placeholder="City:" type="text" tabindex="3" name="user_city" id="reg_city" value="">
</label>
</div>
<div class="reg-id-last">
<label>
<input placeholder="Zip/Postal:" type="text" tabindex="3" name="user_zip" id="reg_zip" value="">
</label>
</div>
<input type="submit" value="Response" tabindex="3" name="reg_btn" id="id-submit">
</div>
</form>
</body>
</html>
ajax_city.php
<?php
if($_POST['reg_state'])
{
echo 'STATE: '.$_POST['reg_state'].'<br/>';
echo 'CITY: '.$_POST['reg_city'].'<br/>';
echo 'ZIP: '.$_POST['reg_zip'].'<br/>';
}
else{
echo 'nothing to respond';
}
?>
I have a demo.html page, which contains two selections, the first one is "Type", and the second one is "Config", when I choose a certain type in the first selection, I want to use ajax to update the values in the second selection.
For example, Type may have values: VM, Server, DCA
and VM only has config "singe node", but DCA has Config "d0"-"d48". so if I select DCA in the first selection, I should have 49 options in the second one.
I searched online and did find some solutions, then I wrote some code by myself. The problem now is that whatever I select in the first selection, the second one will not be updated, it always return null.
Not sure where the prob is, the code looks fine :( Thanks for any help.
demo page
<html>
<head>
<meta charset="utf-8">
<title>Reservation System</title>
<link href="jquery/ui/css/sunny/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css">
<link href="jquery/datatables/css/mrbs-page.css" rel="stylesheet" type="text/css">
<link href="jquery/datatables/css/mrbs-table.css" rel="stylesheet" type="text/css">
<link href="jquery/datatables/css/ColReorder.css" rel="stylesheet" type="text/css">
<link href="jquery/datatables/css/ColVis.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/mrbs.css.php" type="text/css">
<link rel="stylesheet" media="print" href="css/mrbs-print.css.php" type="text/css">
<meta name="robots" content="noindex">
<script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery/ui/jquery-ui-1.8.22.custom.min.js"></script>
<script type="text/javascript" src="jquery/ui/jquery-ui-i18n.js"></script>
<script type="text/javascript" src="jquery/ui/jquery-ui-datepicker-en.js"></script>
<script type="text/javascript" src="jquery/ui/jquery-ui-datepicker-en-US.js"></script>
<script type="text/javascript" src="jquery/datatables/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="jquery/datatables/js/ColReorder.min.js"></script>
<script type="text/javascript">
var xmlhttp;
var url;
function createXMLHttpRequest() {
if (window.XMLHttpRequest)
xmlhttp = new XMLHttpRequest();
else
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
function showConfig(str) {
url = "getOptions.php?type="+str;
createXMLHttpRequest();
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
xmlhttp.onreadystatechange = function() {handleStateChange()};
}
function handleStateChange() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
var str = xmlhttp.responseText;
alert (url);
createConfig(str);
}
}
function createConfig(str) {
var configs = str;
var config = configs.split(",");
while (document.getElementById("config").options.lengt>0)
document.getElementById("config").options.remove(0);
for (var i=0; i<config.length; i++)
{
var ooption = document.createElement("option");
ooption.value = config[i];
ooption.text = config[i];
document.getElementById("config").add(ooption);
}
}
</script>
<form id="add_room" class="form_admin" action="add.php" method="post">
<fieldset>
<legend>Add DCA</legend>
<input type="hidden" name="type" value="room">
<input type="hidden" name="area" value="2">
<div>
<label for="room_name">Name:</label>
<input type="text" id="room_name" name="name" maxlength="50">
</div>
<div>
<label for="room_description">Description:</label>
<input type="text" id="room_description" name="description" maxlength="100">
</div>
<div>
<label for="room_type">Type:</label>
<select class="room_area_select" id="type_select" name="area" onchange="showConfig(this.value)"><option value="VM">VM</option><option value="Server">Server</option><option value="DCA-V1">DCA-V1</option><option value="DCA-V2">DCA-V2</option></select>
</div>
<div>
<label for = "config">config:</label>
<select id="config" ></select>
</div>
</fieldset>
</form>
getOptions.php file
<?php
$type = $_GET['type'];
echo $type;
$result = "";
if ($type == "DCA-V1") {
for ($i=0;$i<47;$++)
$result .= $i.",";
$result .= "48";
}
else if ($type == "Server")
$result .= "single node";
else if ($type == "VM") {
$result .= "single host";
}
echo $result;
?>
As you are already using jQuery in your page, I suggest jQuery's ajax option.
Following should work. Update it accordingly.
getOptions.php
<?php
$type = $_GET['type'];
$result = "";
if ($type == "DCA-V1") {
for ($i=0;$i<47;$i++)
$result .= $i.",";
$result .= "48";
} else if ($type == "Server") {
$result .= "single node";
} else if ($type == "VM") {
$result .= "single host";
}
echo $result;
?>
Demo Page
<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#type_select').change(function() {
//Get current item's value
var type = $(this).val();
$.ajax({
url : "getOptions.php?type=" + type,
success : function(data) {
var result, opts = "";
//We get comma separated data
result = data.split(',');
//Prepare options
for(var i = 0; i < result.length; i++) {
opts += "<option value='" + result[i] + "'>" + result[i] + "</option>";
}
//Populate second select
$('#config').html(opts);
},
error : function() {
alert("Error");
}
});
});
//By default populate options for currently selected item
$('#type_select').trigger('change');
});
</script>
</head>
<body>
<form id="add_room" class="form_admin" action="add.php" method="post">
<fieldset>
<legend>Add DCA</legend>
<input type="hidden" name="type" value="room">
<input type="hidden" name="area" value="2">
<div>
<label for="room_name">Name:</label>
<input type="text" id="room_name" name="name" maxlength="50">
</div>
<div>
<label for="room_description">Description:</label>
<input type="text" id="room_description" name="description" maxlength="100">
</div>
<div>
<label for="room_type">Type:</label>
<select class="room_area_select" id="type_select" name="area">
<option value="VM">VM</option>
<option value="Server">Server</option>
<option value="DCA-V1">DCA-V1</option>
<option value="DCA-V2">DCA-V2</option>
</select>
</div>
<div>
<label for = "config">config:</label>
<select id="config" ></select>
</div>
</fieldset>
</form>
</body>
</html>
Tried providing some comments.
Let us know if you need any help.