Hidden Textarea Options Showing with Other Options When Submitted - javascript

I have made a request PHP form with many select options. One of the select options is name employee to which one of its text area i pre-typed text and selected type="hidden" as shown in form. The problem is when I submit the form request from another select option for example if I select option IT Request from the form and fill its input and submit it & when I get results in HTML email I also get the hidden text area texts that were pre type for Employee select option and it also shows with the tv request details
Also, how can I submit the HTML table in form? Right now I’m doing double work. First, create the hide/show table for users to see and same time I a have hidden text area containing the same data so when the user selects an option from hide/show HTML table it’s submitted it sends the same text pre typed to email
See the image attached i sent a example request from the working form. It is mixing two options. I sent a IT Request and it is mixing the Employee Hidden Textarea
function EmployeeGroup() {
var groups = document.getElementById("groups"); {
var ITRequest = document.getElementById("ITRequest");
ITRequest.style.display = groups.value == "IT" ? "block" : "none";
} {
var Employee = document.getElementById("Employee");
Employee.style.display = groups.value == "EmpGM" ? "block" : "none";
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="testbox">
<form name="frmContact" id="frmContact" method="post" action="" enctype="multipart/form-data" class="p-3">
<div class="form-group">
<label>Select a Category</label>
<select id="groups" name="groups" class="form-control w-100" required onchange="EmployeeGroup()">
<option value="">--Select an option--</option>
<option value="ITRequest">IT Request</option>
<option value="Employee">New Hire</option>
</select>
</div>
<div class="form-group" id="EmpGM">
<h2>Requestor's Information</h2>
<div class="row">
<div class="col-6">
<label for="userReqEmp">Requestor Name</label>
<input type="text" class="form-control w-100" id="userReqEmp" name="userReqEmp" placeholder="Type Here...">
</div>
<div class="col-6">
<label for="userNameEmp">Full Name</label>
<input type="text" class="form-control w-100" id="userNameEmp" name="userNameEmp" placeholder="Type Here...">
</div>
<div class="col-6">
<label for="userComEmp">Comments (Optional)</label>
<textarea type="text" class="form-control w-100" id="userComEmp" name="userComEmp" rows="7" placeholder="Type Here..."></textarea>
</div>
<div class="col-6">
<div class="row">
<label class="col-12" for="userEIDEmp">Employee ID</label>
</div>
<div class="row">
<div class="col-12">
<input type="text" class="form-control w-100" id="userEIDEmp" name="userEIDEmp" placeholder="Type Here...">
</div>
</div>
<div class="row">
<label class="col-12" for="userOIDEmp">One ID</label>
</div>
<div class="row">
<div class="col-12">
<input type="text" class="form-control w-100" id="userOIDEmp" name="userOIDEmp" placeholder="Type Here...">
</div>
</div>
<div class="row">
<label class="col-12" for="userDateEmp">Start Date</label>
</div>
<div class="row">
<div class="col-12">
<input type="date" class="form-control w-100" id="userDateEmp" name="userDateEmp" placeholder="Type Here...">
</div>
</div>
</div>
<div class="col-6">
<!--GM Group -->
<textarea style="visibility:hidden;" class="textarea" id="acc_GMGroup" name="acc_GMGroup" rows="5">
<u>Domain Group Access:</u>
All Access Folders
<u>Distribution List:</u>
All Manager Emails
<u>Additional Access</u>
VPN Non-Standard
</textarea>
</div>
<div class="col-6">
<div class="row">
<label class="col-12">Select Department</label>
</div>
<div class="row">
<div class="col-12">
<select id="groups" name="groups" class="form-control w-100">
<option selected value="">Select an option</option>
<option value="GM">GM</option>
<option value="AGM">AGM</option>
</select>
</div>
</div>
<br>
<!-- GM -->
<div class="row">
<div class="col-12" id="groups_GM" name="groups_GM" style="display: none;">
<h2>DC GM Group</h2>
<table class="tb">
<tr>
<th>Domain Group Access</th>
</tr>
<tr>
<td>All Access Folders</td>
</tr>
<tr>
<th>Distribution List</th>
</tr>
<tr>
<td>All Manager Emails</td>
</tr>
<tr>
<th>Additional Access</th>
</tr>
<tr>
<td>VPN Non-Standard</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- General IT Request -->
<div class="form-group" id="IT">
<h2>IT Service Request</h2>
<div class="row">
<div class="col-6">
<label for="userITRequest">Requestor Name</label>
<input type="text" class="form-control w-100" id="userITRequest" name="userITRequest" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label>Select your Department</label>
<select id="groups" name="groups" class="form-control w-100">
<option selected value="">Select an option</option>
<option value="HR">HR</option>
<option value="MPB">MPB</option>
<option value="Management">Management</option>
</select>
</div>
<br><br>
<div class="col-12">
<label for="userITSubject">Subject</label>
<input type="text" class="form-control w-100" id="userITSubject" name="userITSubject" placeholder="Type Here...">
</div>
<br><br>
<div class="col-12">
<label for="userITMessage">Messages</label>
<textarea type="text" class="form-control w-100" id="userITMessage" name="userITMessage" rows="7" placeholder="Type Here..."></textarea>
</div>
<br><br>
<div class="col-12">
<label for="myfile"><strong>Choose a file to upload</strong></label>
<input type="file" id="myfile" name="myfile">
</div>
</div>
</div>
</form>
</div>
$userEmpReq = clean($_POST["userReqEmp"]);
$userEmpName = clean($_POST["userNameEmp"]);
$userEmpDate = clean($_POST["userDateEmp"]);
$userEmpEID = clean($_POST["userEIDEmp"]);
$userEmpOID = clean($_POST["userOIDEmp"]);
isset($_POST["groups"]) ? $groupNew = clean($_POST["groups"]) : $groupNew = "";
$usersGMGroup = nl2br($_POST["acc_GMGroup"]); // DC GM Group -- $usersGMGroup = nl2br($_POST["acc_GMGroup"]);
$usersAGMGroup = nl2br($_POST["acc_AGMGroup"]);
isset($_POST["select-9"]) ? $select9 = clean($_POST["select-9"]) : $select9 = "";
$userEmpManger = clean($_POST["userManagerEmp"]);
$userEmpCom = clean($_POST["userComEmp"]);

Related

Add Third Select Drop Down and Auto Populate Based on Selection

I have made a request form for my group to make it easier for them to request for help desk. At the moment I have two dropdowns - I have the main request dropdown when the user selects from the first dropdown selection it goes to the second dropdown selection for the user to select. I want to add the third dropdown so when the user selects from the second dropdown it opens more selection in the third dropdown based on what category the user has selected for the Second dropdown.
How can i add third select option and then show the input for the selection
$(function() {
// on page load wrap all select-2 options in span so they cannot be selected without specifying select-1
$('#select-2 option:not([selected])').wrap('<span/>');
});
// when select-1 is changed, hide all options that do not have the class corresponding to the value of select-1
$('#select-1').change(function() {
$('#select-2 span > option').unwrap();
console.log($('#select-1'));
$('#select-2 option:not(.' + $('#select-1').val() + ', [selected])').wrap('<span/>');
//console.log($('#select-2').val());
});
$('#select-2').trigger('change');
$(document).ready(function() {
$("#otherFieldGroupNewacc").hide();
$("#otherFieldGroupMod").hide();
$("#otherFieldGroupRes").hide();
$("#otherFieldGroupRem").hide()
});
//----------------------------------Second Dropdown----------------------------------------------//
$(function() {
$("#select-2").change(function() {
if ($(this).val() == "AS400 New Account") { //AS400 New Account //
$("#otherFieldGroupNewacc").show();
$('#otherFieldGroupNewacc').attr('required', '');
} else {
$("#otherFieldGroupNewacc").hide();
$('#otherFieldGroupNewacc').removeAttr('required');
}
if ($(this).val() == "Modify Account") { //AS400 Modify Account //
$("#otherFieldGroupMod").show();
} else {
$("#otherFieldGroupMod").hide();
}
if ($(this).val() == "Reset Password") { //AS400 Reinstate Account //
$("#otherFieldGroupRes").show();
} else {
$("#otherFieldGroupRes").hide();
}
if ($(this).val() == "Remove Password") { //AS400 Remove Account //
$("#otherFieldGroupRem").show();
} else {
$("#otherFieldGroupRem").hide();
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label>Request Type</label>
<select id="select-1" name="select-1" class="form-control w-100" required>
<option selected value="">--Select an option--</option>
<option value="AS400">AS400</option>
<!-- "option-1" -->
<option value="EETV">EETV</option>
<!-- "option-2" -->
<option value="Outlook">Outlook</option>
<!-- "option-3" -->
<option value="Windows">Windows</option>
<!-- "option-4" -->
</select>
<br/>
<label>Choose a Sub-Category</label>
<select id="select-2" name="select-2" class="form-control w-100" required>
<option selected value="">--Select an option--</option>
<option value="AS400 New Account" class="AS400">New Account</option>
<!-- "option-1a" -->
<option value="Modify Account" class="EETV">Modify Account</option>
<!-- "option-1b" -->
<option value="Reset Password" class="Outlook">Reset Password</option>
<!-- "option-1c" -->
<option value="Remove Password" class="Windows">Remove Account</option>
<!-- "option-1d" -->
</select>
</div>
<hr>
<!--AS400 New Account-->
<div class="form-group" id="otherFieldGroupNewacc">
<h2>AS400 New Account</h2>
<hr>
<div class="row">
<div class="col-6">
<label for="userRequestor">Full Name</label>
<input type="text" class="form-control w-100" id="userRequestor" name="userRequestor" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userTM">Beneficiary (Full Name)</label>
<input type="text" class="form-control w-100" id="userTM" name="userTM" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userEmployee">Employee ID</label>
<input type="text" class="form-control w-100" id="userEmployee" name="userEmployee" placeholder="Type Here...">
</div>
<br>
<div class="col-6">
<label for="selectJob">New Job Category</label>
<select id="selectJob" name="selectJob" class="form-control w-100" placeholder="*Click in box for Job Category List*">
<option disabled selected value="">Select an option</option>
<option value="NO CHANGE">NO CHANGE</option>
<option value="ADMCLK = Admin Clerk">ADMCLK = Admin Clerk</option>
<option value="ADMCLK+ = Admin Clerk w/ Manual Book">ADMCLK+ = Admin Clerk w/ Manual Book</option>
<option value="ADMMGR = Admin MGR w/ Manual Book">ADMMGR = Admin MGR w/ Manual Book</option>
</select>
</div>
<br>
<div class="col-6">
<label for="userNewAS400">New AS400 ID</label>
<input type="text" class="form-control w-100" id="userNewAS400" name="userNewAS400" placeholder="Type Here...">
</div>
</div>
</div>
<!--Modify AS400 Account-->
<div class="form-group" id="otherFieldGroupMod">
<h2>AS400 Modify Account</h2>
<hr>
<div class="row">
<div class="col-6">
<label for="userRequestorMod">Requester (Full Name)</label>
<input type="text" class="form-control w-100" id="userRequestorMod" name="userRequestorMod" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userTMMod">Beneficiary (Full Name)</label>
<input type="text" class="form-control w-100" id="userTMMod" name="userTMMod" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userEmployeeMod">Employee ID</label>
<input type="text" class="form-control w-100" id="userEmployeeMod" name="userEmployeeMod" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userAS400Mod">AS400 ID</label>
<input type="text" class="form-control w-100" id="userAS400Mod" name="userAS400Mod" placeholder="Type Here...">
</div>
<br>
<div class="col-6">
<label for="selectJobsMod">New Job Category</label>
<select id="selectJobsMod" name="selectJobsMod" class="form-control w-100" placeholder="*Click in box for Job Category List*">
<option disabled selected value="">Select an option</option>
<option value="NO CHANGE">NO CHANGE</option>
<option value="ADMCLK = Admin Clerk">ADMCLK = Admin Clerk</option>
<option value="ADMCLK+ = Admin Clerk w/ Manual Book">ADMCLK+ = Admin Clerk w/ Manual Book</option>
<option value="ADMMGR = Admin MGR w/ Manual Book">ADMMGR = Admin MGR w/ Manual Book</option>
<option value="DCM = DC Manager">DCM = DC Manager</option>
<option value="FM IN = Inbound Funtion Manager">FM IN = Inbound Funtion Manager</option>
</select>
</div>
<br>
<div class="col-6">
<label for="userNewAS400Mod">New AS400 ID <strong>***Leave Blank If No Change***</strong></label>
<input type="text" class="form-control w-100" id="userNewAS400Mod" name="userNewAS400Mod" placeholder="Type Here...">
</div>
</div>
</div>
<!--Reinstate AS400 Account-->
<div class="form-group" id="otherFieldGroupRes">
<h2>AS400 Reinstate Password</h2>
<hr>
<div class="row">
<div class="col-6">
<label for="userRequestorRe">Requester (Full Name)</label>
<input type="text" class="form-control w-100" id="userRequestorRe" name="userRequestorRe" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userTMRe">Beneficiary (Full Name)</label>
<input type="text" class="form-control w-100" id="userTMRe" name="userTMRe" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userEmployeeRe">Employee ID</label>
<input type="text" class="form-control w-100" id="userEmployeeRe" name="userEmployeeRe" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userAS400Re">AS400 ID</label>
<input type="text" class="form-control w-100" id="userAS400Re" name="userAS400Re" placeholder="Type Here...">
</div>
</div>
</div>
<!--Remove AS400 Account-->
<div class="form-group" id="otherFieldGroupRem">
<h2>AS400 Remove Account</h2>
<hr>
<div class="row">
<div class="col-6">
<label for="userRequestorRes">Requester (Full Name)</label>
<input type="text" class="form-control w-100" id="userRequestorRes" name="userRequestorRes" placeholder="Type Here...">
</div>
<br>
<div class="col-6">
<label for="userTMRes">Terminated TM (Full Name)</label>
<input type="text" class="form-control w-100" id="userTMRes" name="userTMRes" placeholder="Type Here...">
</div>
<br>
<div class="col-6">
<label for="userEmployeeRes">Employee ID</label>
<input type="text" class="form-control w-100" id="userEmployeeRes" name="userEmployeeRes" placeholder="Type Here...">
</div>
<br>
<div class="col-6">
<label for="userAS400Res">AS400 ID</label>
<input type="text" class="form-control w-100" id="userAS400Res" name="userAS400Res" placeholder="Type Here...">
</div>
<br>
<div class="col-6">
<label for="hideInputRes">Reason</label>
<input type="text" class="form-control w-100" id="hideInputRes" name="hideInputRes" title="Example: Fired, Retired, Leave of Absence, etc..." placeholder="Type Here...">
</div>
</div>
</div>

I am getting an error 'MultiValueDictKeyError' at /store/AddProduct' . how do I solve it without using request.POST.get()

I am getting an error 'MultiValueDictKeyError' at /store/AddProduct' 'desc' in Django project.
I search for the solution on the internet and I end up on request.POST.get() but I want to know why it giving me an error, I tried request.POST['desc'] before and it's work for my user login project. why now it's giving error
here is my system info:
Django Version: 3.0.4
Python Version: 3.8.2
here is view.py
from django.shortcuts import render
from .models import Gender, Category, SubCategory, Product, Company
db_gender = Gender.objects.all()
db_category = Category.objects.all()
db_subCategory = SubCategory.objects.all()
db_product = Product.objects.all()
db_company = Company.objects.all()
def add_product(request):
if request.method == 'POST' :
name = request.POST['name']
descp = request.POST['desc']
price = request.POST['price']
offer_valid = request.POST['offer_valid']
offer_value = request.POST['offer_value']
company = request.POST['company']
quantity = request.POST['quntity']
category = request.POST['category']
sub_category = request.POST['sub_category']
size = request.POST['size']
color = request.POST['color']
return render(request, 'checkout.html', {'db_category': db_category, 'db_subcategory': db_subCategory})
else:
return render(request, 'checkout.html', {'db_category': db_category, 'db_subcategory': db_subCategory})
it's not showing error for name = request.POST['name'] & company = request.POST['company'][here is a image]1
but it's showing errror for all fields
here is my checkout.html file
i downloaded this template file from https://colorlib.com/wp/template/estore/
<section class="checkout_area section_padding">
<div class="container">
<div class="billing_details">
<div class="row">
<div class="col-lg-8">
<h3>Product Details</h3>
<form class="row contact_form" action="add_product" method='POST'>
{% csrf_token %}
<div class="col-md-12 form-group p_star">
<input type="text" class="form-control" name="name">
<span class="placeholder" data-placeholder="Product Name"></span>
</div>
<div class="col-md-12 form-group p_star">
<input type="text" class="form-control" name="desc">
<span class="placeholder" data-placeholder="Describtion"></span>
</div>
<div class="col-md-3 form-group p_star">
<span class="placeholder" data-placeholder="Image"></span>
</div>
<div class="col-md-9 form-group ">
<input type="file" class="form-control" id="image" name="image" accept="image/*" />
</div>
<div class="col-md-12 form-group p_star">
<input type="text" class="form-control" id="company" name="company" />
<span class="placeholder" data-placeholder="Company Name"></span>
</div>
<div class="col-md-12 form-group p_star">
<select class="country_select" name='category' size="4">
<option value="1" disabled selected>Category</option>
{% for cat in db_category%}
<option value="2">{{cat.name}}</option>
{% endfor %}
</select>
</div>
<div class="col-md-12 form-group p_star">
<select class="country_select" name='sub_category' size="4">
<option value="1" disabled selected>Sub-Category</option>
{% for subcat in db_subcategory%}
<option value="2">{{subcat.name}}</option>
{% endfor %}
</select>
</div>
<div class="col-md-3 form-group p_star">
<input type="text" class="form-control" id="quntity" name="quntity" />
<span class="placeholder" data-placeholder="Quntity"></span>
</div>
<div class="col-md-3 form-group p_star">
<select class="country_select" name="size" size="3">
<option value="1" disabled selected>Size</option>
<option value="2">Country</option>
<option value="3">Country</option>
<option value="4">Country</option>
<option value="5">Country</option>
<option value="6">Country</option>
</select>
</div>
<div class="col-md-3 form-group p_star">
<select class="country_select" name="color">
<option value="1" disabled selected>Color</option>
<option value="2">Country</option>
<option value="4">Country</option>
</select>
</div>
<div class="col-md-12 form-group">
<div class="creat_account">
<input type="checkbox" id="offer_valid" name="offer_valid" />
<label for="f-option3">Offer Valid</label>
</div>
</div>
<div class="col-md-6 form-group p_star">
<input type="text" class="form-control" id="price" name="price" />
<span class="placeholder" data-placeholder="Price"></span>
</div>
<div class="col-md-6 form-group ">
<input type="text" placeholder="Offer Value" class="form-control" id="offer_value" name="offer_value" />
</div>
<div class="col-md-12 form-group ">
<button type="submit" value="submit" class="btn_3">
Submit
</button>
</div>
</form>
</div>
<div class="col-lg-4">
<div class="order_box">
<h2>Your Order</h2>
</div>
</div>
</div>
</div>
</div>
</section>
It works in my another login template which I downloaded from the same website
here view.py for login
from django.shortcuts import render, redirect
from django.contrib.auth.models import User, auth
def login(request):
if request.method == 'POST':
username = request.POST['username']
password = request.POST['password']
user = auth.authenticate(username=username, password=password)
if user is not None:
auth.login(request, user)
print('Login succesfuly')
return redirect('/')
else:
print('user does not exist')
return redirect('/')
else:
return render(request, 'login.html')
here login.html
<form class="row contact_form" action="login" method='POST' novalidate="novalidate">
{% csrf_token %}
<div class="col-md-12 form-group p_star">
<input type="text" class="form-control" id="Username" name="username" value=""
placeholder="Username">
</div>
<div class="col-md-12 form-group p_star">
<input type="password" class="form-control" id="password" name="password" value=""
placeholder="Password">
</div>
<div class="col-md-12 form-group">
<div class="creat_account d-flex align-items-center">
<input type="checkbox" id="f-option" name="selector">
<label for="f-option">Remember me</label>
</div>
<button type="submit" value="submit" class="btn_3">
log in
</button>
</div>
</form>
it works fine here same code
So I just want to know why this is happening.

how do I get a value if I click on one of the divs that have been appended?

I have a data that will be posted to a form but there is data that I can't take how to retrieve the "excess bag amount" so I can post it?
this is my controller
function getAirlinesById(idAirlines) {
$.ajax({
dataType: 'json',
type: "POST",
url: '{{route('get-baggage-airlines')}}',
data:"airlines_id="+idAirlines,
success: function(response){
console.log(response);
$("#baggageAirline").empty();
for(let i=0;i<response.length;i++){
let category = response[i].baggage.category;
switch(category) {
case 1:
category = "KG";
break;
case 2:
category = "PCS";
break;
};
$("#baggageAirline").append('<div class="col-3 list-baggage"><img src="{{asset("assets/image/baggage.png")}}" alt="" width="80px"><p class="baggage-amount">'+response[i].baggage.max_range+' '+category+'</p><input type="checkbox"><p class="text-center">'+response[i].currency_symbol+' '+response[i].price_in_SGD+'</p></div>');
}
}
});
}
I have tried to get the selected bag amount for me to post to a form, but the bag amount and price are not sent
$post = array(
"AIRLINES_ID" =>$input['airlines'],
"AIRLINES_NAME" =>$input['airlinesName'],
"AIRPORT_ID" =>$input['departure'],
"AIRPORT_NAME" =>$input['departureName'],
"FLIGHT_NO" =>$input['code'],
"PNR_TICKET" =>$input['pnr_ticket'],
"BAG_AMOUNT" =>$input['baggage-airlines'],
"PRICE" =>$input['price'],
"DEPARTURE_DATE" =>$input['date'],
"DEPARTURE_TIME" =>$input['time'],
"MEMBER_ID" => $id
);
this is the html form for me to post to the controller
<form action="{{route('book-baggage-post')}}" method="POST" id="formPostBaggage">
#csrf
<div class="container-fluid">
<div class="row">
<div class="col-12">
<label for=""><p class="mb-0">Airlines</p></label>
<select id="airlines_id" name="airlines" onchange="getName(this.options[this.selectedIndex].getAttribute('data-name'))" class="select2-input-custome" required>
<option value=""></option>
</select>
<input type="hidden" name="airlinesName" id="airlinesName">
</div>
<div class="col-12">
<p>Flight No</p>
</div>
<div class="col-4">
<div class="form-group">
<select class="form-control" name="code" id="codeAirline" style="background-color:#dcdcdc;">
<option value="disable"></option>
</select>
</div>
</div>
<div class="col-8 pl-0">
<div class="form-group">
<input type="text" class="form-control" name="flight_no" id="" placeholder="Flight No" style="background-color:#dcdcdc;">
</div>
</div>
<div class="col-12 clearfix">
<label for=""><p class="mb-0">Departure airport</p></label>
<select id="departure" name="departure" onchange="getNameDeparture(this.options[this.selectedIndex].getAttribute('data-name'))" class="select2-input-custome" required>
<option value=""></option>
</select>
<input type="hidden" name="departureName" id="departureName">
</div>
<div class="col-12">
<div class="form-group">
<label for="">PNR/Ticket No</label>
<input type="text" class="form-control"name="pnr_ticket" id="" placeholder="PNR/Ticket No" style="background-color:#dcdcdc;" required>
</div>
</div>
<div class="col-12">
<p>Departure Date Time</p>
</div>
<div class="col-6">
<div class="form-group">
<input type="text" class="form-control" name="date" id="datepicker" placeholder="Date" style="background-color:#dcdcdc;" required>
</div>
</div>
<div class="col-6">
<div class="form-group">
<input type="text" class="form-control" name="time" id="timepicker" placeholder="Time" style="background-color:#dcdcdc;" required>
</div>
</div>
<div class="col-12">
<p>Excess Bag Amount Required</p>
<div class="row" id="baggageAirline">
</div>
</div>
<div class="col-12">
<br>
<center>
<a href="{{route('passanger')}}">
<button type="submit" class="btn btn-default btn-book btn-block">
<p class="mb-0">NEXT</p>
</button>
</a>
</center>
</div>
</div>
</div>
</form>

how to hide data combobox dropdown when clicked

I have a form consisting of some text fields and combo box. I have a combo box that contains the data classroom, the data in the combo box I take from the database. problems = if the data 1 in the combo box in klic then the data 1 will be hidden. when it wants further data fed the data 1 remain hidden. but the data 1 hidden is determined by the expiration date
FORM ADD CLASSROOM
<div class="row">
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading"><svg class="glyph stroked email"><use xlink:href=""></use></svg>Add Training Form</div>
<div class="panel-body">
<form action="add.php" method="POST" enctype="multipart/form-data">
<fieldset>
<!-- Training Name -->
<div class="form-group">
<label class="col-md-3 control-label" for="name">Training Name</label>
<div class="col-md-9">
<input id="name" name="name" required="required" type="text" placeholder="Tulis Nama Training" class="form-control">
</div>
</div>
<br><br>
<!-- Class Room -->
<div class="form-group">
<label class="col-md-3 control-label" for="name">Class Room</label>
<div class="col-md-9">
<select name="room" class="form-control input-sm" value=" ">
<option value="-1" selected="selected" disabled="disabled" >-Ruang Kelas-</option>
<?php
include 'admin/connection.php';
// query untuk menampilkan semua Classroom dari tabel
$query = "SELECT * FROM classroom";
$hasil = mysql_query($query);
while ($data = mysql_fetch_array($hasil))
{
echo "<option value='".$data['nama']."'>".$data['nama']."</option>";
}
?>
<option value="Other">Other</option>
</select>
</div>
</div>
<br><br>
<!-- Instructor -->
<div class="form-group" onsubmit="return validasicombobox">
<label class="col-md-3 control-label" for="name">Instructor</label>
<div class="col-md-9">
<select id="instruc" name="instructor" class="form-control input-sm" value=" ">
<option value="-1" selected="selected" disabled="disabled" >-Instructor-</option>
<?php
include 'admin/connection.php';
// query untuk menampilkan semua Classroom dari tabel
$query = "SELECT * FROM instruk";
$hasil = mysql_query($query);
while ($data = mysql_fetch_array($hasil))
{
echo "<option value='".$data['nama']."'>".$data['nama']."</option>";
}
?>
<option value="Other">Other</option>
</select>
</div>
</div>
<br><br>
<!-- Time -->
<div class="form-group">
<label class="col-md-3 control-label" for="name">Time</label>
<div class="col-md-9">
<input id="time" name="time" type="text" required="required" placeholder="Tulis Waktu Training" class="form-control">
</div>
</div>
<br><br>
<!-- Start Date -->
<div class="form-group">
<label class="col-md-3 control-label" for="name">Start Date</label>
<div class="col-md-9">
<input id="start_date" name="start_date" required="required" type="date" class="form-control">
</div>
</div>
<br><br>
<!-- End Date -->
<div class="form-group">
<label class="col-md-3 control-label" for="name">End Date</label>
<div class="col-md-9">
<input id="end_date" name="end_date" required="required" type="date" class="form-control">
</div>
</div>
<br><br>
<!-- Type -->
<div class="form-group">
<label class="col-md-3 control-label" for="name">Type</label>
<div class="col-md-9">
<select name="type" class="form-control input-sm">
<option value="-1" selected="selected" disabled="disabled" >-Tipe Training-</option>
<option value="Basic">Basic</option>
<option value="Type">Type</option>
</select>
</div>
</div>
<br><br>
<!-- Remark -->
<div class="form-group">
<label class="col-md-3 control-label" for="name">Remark</label>
<div class="col-md-9">
<textarea name="remark" class="form-control" rows="3"></textarea>
</div>
</div>
<br><br>
<!-- Form actions -->
<div class="form-group">
<div class="col-md-12 widget-right">
<button type="submit" value="submit" name ="submit" class="btn btn-default btn-md pull-right" onclick="return confirm('Are you sure want to add this data?');">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div> <!--/.main-->

Fill the form with the HTTP response

This is the HTML form of a hospital, of which the fields has to be filled using an API GET call when the page is loaded.
I am using HTML, Javascript, AngularJS, and my API is coded in java.
I could fill all the input fields via GET request API, except the select.
My problem is in select the option in the form based on the API response . There are 4 select tags in the form, which are co-related.
Here is the HTML code:
<form role="form">
<div class="form-group">
<label class="control-label">Name of Hospital</label>
<input type="text" class="form-control" id="name" ng-model="hospital.name" required="true">
<!-- <p class="help-block">Name of the hospital</p> -->
</div>
<div class="form-group">
<label>Address</label>
<textarea class="form-control" rows="3" ng-model="hospital.address" id="address"></textarea>
<!-- <p class="help-block">Address of the hospital</p> -->
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label>Country</label>
<select class="form-control" id="countries" onchange="countries(this.value)" ng-model="hospital.countryItemSelected">
<option ng-repeat="country in countries" value="{{country.id}}">{{country.name}}</option>
</select>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>State</label>
<select class="form-control" id="states" onchange="states(this.value)" ng-model="hospital.stateItemSelected">
<option ng-repeat="state in states" value="{{state.id}}">{{state.name}}</option>
</select>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>City</label>
<select class="form-control" id="cities" onchange="cities(this.value)" ng-model="hospital.cityItemSelected">
<option ng-repeat="city in cities" value="{{city.id}}">{{city.name}}</option>
</select>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Locality</label>
<select class="form-control" id="localities" onchange="localities(this.value)" ng-model="hospital.localityItemSelected">
<option ng-repeat="locality in localities" value="{{locality.id}}">{{locality.name}}</option>
</select>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>PIN</label>
<input type="text" class="form-control" id="pin" ng-model="hospital.pin">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>General Timings</label>
<input type="text" class="form-control" id="generalTimings" ng-model="hospital.timings">
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label>Website</label>
<input type="text" class="form-control" id="website" ng-model="hospital.website">
<!-- <textarea class="form-control" rows="6"></textarea> -->
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label>Email ID</label>
<input type="email" class="form-control" id="emailID" required="true" ng-model="hospital.emial">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Mobile No.</label>
<input type="text" class="form-control" id="mobile" required="true" ng-model="hospital.mobile">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label>Phone No.</label>
<input type="text" class="form-control" id="phone" ng-model="hospital.phone">
</div>
</div>
</div>
<button type="submit" class="btn btn-primary" id="formSubmit" disabled>Save</button>
Country options is loaded during page load, via API call, he gets respective states of that country. By choosing a state, he gets the respective cities, and same with the locality. Again this happens via API call.
This is the API call which is made to get the result.
All other input fields are filled, except the select ones.
hospital.countryItemSelected = response.data.success_Result.hospital.country;
hospital.stateItemSelected = response.data.success_Result.hospital.state;
hospital.cityItemSelected = response.data.success_Result.hospital.city;
hospital.localityItemSelected = response.data.success_Result.hospital.locality;
I get the names of country, state, city, locality in this result.
On load of page, the select options with respect to these result has to be selected, with all other fields.
The names of each select field is stored in different tables.
How to solve this problem of selecting the items ?? Is there a need to get the ID's of these names to solve this problem ??
There is an option to edit the the details in the form as well. So, the select options are loaded via GET APIs.

Categories