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.
Related
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"]);
im looking from a laravel or html example of fill out a form with several drop-down lists.
Here is my case. I have these inputs-text name_customer, phone_customer, email_customer,
I would like that when I select the customer, the form fields are filled with the customer information:(name_customer, phone_customer, email_customer from de database).
This what i have done so far.
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label>N° Commande</label>
<input
type="text"
class="form-control"
v-model="num_order"
name="num_order"
/>
</div>
<div class="form-group">
<label>customer</label>
<div class="form-check form-check-inline mr-1">
<input
onclick="document.getElementById('select_customer').disabled=!this.checked;
document.getElementById('text_name').disabled=this.checked;
document.getElementById('text_Tel').disabled=this.checked;
document.getElementById('text_Email').disabled=this.checked;
document.getElementById('text_address').disabled=this.checked"
class="form-check-input"
id="inline-checkbox1"
type="checkbox"
value="check1"
v-model="num_order"
name="num_order"
/>
<label
class="form-check-label"
for="inline-checkbox1"
>Existant</label
>
<div class="col-md-8">
<select
class="form-control form-control-sm"
id="select_customer"
name="select_customer"
disabled
onclick="document.getElementById('inline-checkbox1').disabled=!this.checked;"
v-model="customers_id"
#change="getcustomers()"
>
<option disabled value="0">
Choisir un customer
</option>
<option
v-for="customer in customers"
v-bind:key="customer.id"
v-bind:value="customer.id"
name="customers_id"
>
{{ customer.name_customer }}
</option>
</select>
</div>
</div>
<input
type="text"
class="form-control"
id="text_name"
placeholder="Name"
v-model="name_customer"
name="name_customer"
/>
</div>
<div class="form-group">
<label>Phone</label>
<input
type="text"
class="form-control"
id="text_Tel"
placeholder="Phone"
/>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label>Adresse du customer</label>
<textarea
rows="4"
class="form-control"
id="text_address"
placeholder="Address"
>
</textarea>
</div>
<div class="form-group">
<label>Email</label>
<input
type="text"
class="form-control"
id="text_Email"
placeholder="Email"
/>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label>Libellé</label>
<input type="text" class="form-control" />
</div>
<div class="row">
<div class="col-sm-6">
<label>Date Commande</label>
<input type="date" class="form-control" />
</div>
<div class="col-sm-6">
<label>Date Validation</label>
<input type="date" class="form-control" />
</div>
</div>
</div>
</div>
Thank you in advance.
Hi i found the solution to my problem.
<select
class="form-control form-control-sm"
id="select_customer"
name="select_customer"
v-model="customers_id"
#change="getcustomers()"
>
<option disabled value="0">
Choose a customer
</option>
<option
v-for="customer in customers"
v-bind:key="customer.id"
v-bind:value="{
id: customer.id,
name_customer: customer.name_customer,
phone_customer: customer.phone_customer}"
name="customers_id"
>
{{ customer.name_customer }}
</option>
</select>
<div class="form-group">
<label>Name</label>
<input
type="text"
class="form-control"
id="text_name"
v-model="customers_id.name_customer"
/>
</div>
<div class="form-group">
<label>Téléphone</label>
<input
type="text"
class="form-control"
id="text_Tel"
v-model="customers_id.phone_customer"
/>
</div>
var app = new Vue({
el: '#app',
data: {
customers_id: '',
customers: []
}
})
Here is how you can, after a selection from a drop-down list, fill in the input fields, the data obtained from the database.
You can also consult the vuejs documentation on this subject. https://v2.vuejs.org/v2/guide/forms.html#Select
I wish to show the checkin and checkout input field based on multiple select days option. For example,
select the Monday and Tuesday will show the two checkin and checkout input field let users to fill the time range for selected days.
Here is my code.
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label>Active Days</label>
<ng-select [items]="days" name="days"
bindLabel="id"
autofocus
loadingText="Loading ..."
[multiple]=true
bindValue="id"
placeholder="Select Active Days"
[(ngModel)]="attendanceProfile.days">
</ng-select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Check In Time</label>
<input autocomplete="off" atp-time-picker type="text" class="form-control"
name="checkInTime"
id="checkInTime" [(ngModel)]="attendanceProfile.checkInTime.InTime"
placeholder="Select CheckIn Time"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Check Out Time</label>
<input autocomplete="off" atp-time-picker type="text" class="form-control"
name="checkOutTime"
id="checkOutTime" [(ngModel)]="attendanceProfile.checkOutTime"
placeholder="Select CheckOut Time"/>
</div>
</div>
</div>
If i really understand you need to show input fields only when somedays are selected, for this you need just to use ngIf condition like :
*ngIf="attendanceProfile?.days?.length"
Example :
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label>Active Days</label>
<ng-select [items]="days" name="days"
bindLabel="id"
autofocus
loadingText="Loading ..."
[multiple]=true
bindValue="id"
placeholder="Select Active Days"
[(ngModel)]="attendanceProfile.days">
</ng-select>
</div>
</div>
</div>
<div *ngIf="attendanceProfile?.days?.length" class="row">
<div class="col-md-6">
<div class="form-group">
<label>Check In Time</label>
<input autocomplete="off" atp-time-picker type="text" class="form-control"
name="checkInTime"
id="checkInTime" [(ngModel)]="attendanceProfile.checkInTime.InTime"
placeholder="Select CheckIn Time"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Check Out Time</label>
<input autocomplete="off" atp-time-picker type="text" class="form-control"
name="checkOutTime"
id="checkOutTime" [(ngModel)]="attendanceProfile.checkOutTime"
placeholder="Select CheckOut Time"/>
</div>
</div>
</div>
I'm creating a travel reimbursement form for work. We have 4 separate types of travel, so my plan was to have a button for each type, and when you click on the button the correct form appears within it's own <section> element. I'm using Bootstrap 4, and I have each form on my index.html file with a class of "d-none" so that none display on load.
In the mileage section of the form, I have a Font-Awesome plus and minus sign to add another row or delete a row. The problem I'm running in to is that my event listeners work fine with the first form listed in index.html. But it doesn't work at all on the second form.
Each form has a class of ".mileage-form". I know that you can't have separate HTML elements with the same ID, but I thought classes were ok. I know I can fix this issue by having the HTML rendered with JavaScript when the correct form button is clicked, instead of just unhiding the html, but I'm trying to understand WHY what I'm trying doesn't work.
The index.html looks as follows:
<!----------------------------- ITINERANT TRAVEL ----------------------------->
<section id="itinerant" class="d-none">
<form class="mileage-form">
<div class="form-group form-row justify-content-center" id="row-1">
<div class="col-sm-2 col-md-1">
<label for="date-1">Date</label>
<input type="date" id="date-1" class="form-control">
</div>
<div class="col-sm-3 col-md-3">
<label for="origin-1">Origin Address</label>
<input type="text" class="form-control" id="origin-1" placeholder="Street Address, City, State, Zip">
</div>
<div class="col-sm-3 col-md-3">
<label for="destination-1">Destination Address</label>
<input type="text" class="form-control" id="destination-1" placeholder="Street Address, City, State, Zip">
</div>
<div class="col-sm-2 col-md-1">
<label for="personal-1">Personal Miles</label>
<input type="text" class="form-control" id="personal-1" placeholder="0">
</div>
<div class="col-sm-2 col-md-1">
<label for="calculated-1">Calculated Miles</label>
<input type="text" class="form-control" id="calculated-1" placeholder="0" value="" disabled>
</div>
</div>
</form>
<div class="form-group form-row justify-content-center">
</i>
</i>
</div>
<div class="form-group form-row justify-content-center">
<button type="button" class="btn btn-outline-success" id="calculate-mileage">Calculate Mileage</button>
<button type="button" class="btn btn-outline-danger" id="clear-all">Clear All</button>
</div>
</section>
<!-------------------- Single Day Travel ----------------------->
<section id="single-day" class="d-none">
<form class="mileage-form">
<div class="form-group form-row justify-content-center" id="row-101">
<div class="col-sm-2 col-md-1">
<label for="date-101">Date</label>
<input type="date" id="date-101" class="form-control">
</div>
<div class="col-sm-3 col-md-3">
<label for="origin-101">Origin Address</label>
<input type="text" class="form-control" id="origin-101" placeholder="Street Address, City, State, Zip">
</div>
<div class="col-sm-3 col-md-3">
<label for="destination-101">Destination Address</label>
<input type="text" class="form-control" id="destination-101" placeholder="Street Address, City, State, Zip">
</div>
<div class="col-sm-2 col-md-1">
<label for="personal-101">Personal Miles</label>
<input type="text" class="form-control" id="personal-101" placeholder="0">
</div>
<div class="col-sm-2 col-md-1">
<label for="calculated-101">Calculated Miles</label>
<input type="text" class="form-control" id="calculated-101" placeholder="0" value="" disabled>
</div>
</div>
</form>
<div class="form-group form-row justify-content-center">
</i>
</i>
</div>
</section>
And my event listeners look like this:
document.querySelector('.add-row').addEventListener('click', mileage.addRow);
document.querySelector('.delete-row').addEventListener('click', mileage.deleteRow);
The functions to add and delete a row are in a Mileage Class, but I don't think there is a problem there, because they do function properly with the "Itinerant" section. And if I comment the "Itinerant" section out, they work fine with the "Single Day" section. But like I said, if both sections are uncommented, and just hidden, they only work with the Itinerant section. If you want to see that code though, I have it all on github, and they would be in the mileage.js file.
I would greatly appreciate any explanation on what I did wrong!
use
querySelectorAll(".add-row").forEach(function(item){ item.addEventListener .. etc }):
to target all of the elements
I have one drop down list which has two options
<div class="form-group">
<span class="col-sm-4 control-span">Member Type</span>
<div class="col-sm-8">
<select class="form-control" id="membertype" name="membertype" ng-model="membertype">
<option value="">-- Select Member Type --</option>
<option value="owner">Owner</option>
<option value="member">Member</option>
</select>
</div>
</div>
When i select the owner, I have to show one text box section
<div class="form-group">
<span class="col-sm-4 control-span">Your Membership Number</span>
<div class="col-sm-8">
<input type="text" class="form-control" id="membernumber" name="membernumber" placeholder="Membership Number">
</div>
</div>
When i select the member, I have to show one text box section
<div class="form-group">
<span class="col-sm-4 control-span">Owner Membership Number</span>
<div class="col-sm-8">
<input type="text" class="form-control" id="ownernumber" name="ownernumber" placeholder="Owner Membership Number">
</div>
</div>
It is happening at onchange event.
If i not selecting no one, These two text box sections will be hide.
How to make this functionality
you can user ng-show or ng-hide to do this, here is a demonstration,
when ng-model="membertype" is equals to 'owner' it will show the below div;
<div class="form-group" ng-show="(membertype == 'owner')">
<span class="col-sm-4 control-span">Your Membership Number</span>
<div class="col-sm-8">
<input type="text" class="form-control" id="membernumber" name="membernumber" placeholder="Membership Number">
</div>
</div>
when ng-model="membertype" is equals to 'member' it will show the below div;
<div class="form-group" ng-show="(membertype == 'member')">
<span class="col-sm-4 control-span">Owner Membership Number</span>
<div class="col-sm-8">
<input type="text" class="form-control" id="ownernumber" name="ownernumber" placeholder="Owner Membership Number">
</div>
</div>
<div class="form-group">
<span class="col-sm-4 control-span">Member Type</span>
<div class="col-sm-8">
<select class="form-control" id="membertype" name="membertype" ng-model="membertype">
<option value="">-- Select Member Type --</option>
<option value="owner">Owner</option>
<option value="member">Member</option>
</select>
</div>
</div>
<div class="form-group" ng-show="membertype == 'member'">
<span class="col-sm-4 control-span">Your Membership Number</span>
<div class="col-sm-8">
<input type="text" class="form-control" id="membernumber" name="membernumber" placeholder="Membership Number">
</div>
</div>
divs to show on event change in dropdown
<div class="form-group" ng-if="membertype == 'owner'">
<span class="col-sm-4 control-span">Owner Membership Number</span>
<div class="col-sm-8">
<input type="text" class="form-control" id="ownernumber" name="ownernumber" placeholder="Owner Membership Number">
</div>
</div>
On page load set textbox visibility to none using style
<div class="col-sm-8">
<input type="text" class="form-control" id="ownernumber" name="ownernumber" placeholder="Owner Membership Number" style="display:none" >
</div>
OnChange of dropdownlist call the script
<script>
yourfunction(value)
{
if(value === "owner")
{
document.getElementById("ownernumber").style.display="block";
}
}
</script>