We Keep Coding

Laravel : Fill out a form with several drop-down lists

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

User input validation Bootstrap 4 and JQuery?

I started learning Bootstrap 4 validation and there are few things that are not clear to me. Some of the situations are confusing in case where input fields that are not required are showing valid-feedback / invalid-feedback. Also, I'm wondering if there is a way to trigger validation with button on click instead of submit process? Here is example of what I have so far:
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container">
<fieldset class="fieldset-info">
<legend class="hcs-legend">Add New Profile</legend>
<form name="new-profile" id="new-profile" class="needs-validation" novalidate>
<div class="form-group required">
<label for="agency">Profile Name:</label>
<input class="form-control" type="text" name="profile" id="profile" value="" maxlength="120" placeholder="Enter the official name of your profile" required>
<div class="invalid-feedback">Please provide Profile Name</div>
</div>
<div class="form-group required">
<label>Type:</label>
<select class="custom-select browser-default" name="type" id="type" required>
<option value="">--Select Type--</option>
<option value="1">Large</option>
<option value="2">Medium</option>
<option value="3">Small</option>
</select>
<div class="invalid-feedback">Please provide Type</div>
</div>
<div class="form-group row required">
<label class="col-2 col-form-label" for="fname">First Name:</label>
<div class="col-10">
<input class="form-control" type="text" name="fname" id="fname" value="" maxlength="20" placeholder="Enter First name" required>
<div class="invalid-feedback">Please provide First Name</div>
</div>
</div>
<div class="form-group row">
<label class="col-2 col-form-label" for="middle_ini">Middle Init:</label>
<div class="col-10">
<input class="form-control" type="text" name="middle_ini" id="middle_ini" value="" maxlength="1" placeholder="Enter Middle Initial (optional).">
</div>
</div>
<div class="form-group row required">
<label class="col-2 col-form-label" for="lname">Last Name:</label>
<div class="col-10">
<input class="form-control" type="text" name="lname" id="lname" value="" maxlength="30" placeholder="Enter Last name" required>
<div class="invalid-feedback">Please provide Last Name</div>
</div>
</div>
<div class="form-group row required">
<label class="col-2 col-form-label" for="email">Email:</label>
<div class="col-10">
<input class="form-control" type="text" name="email" id="email" value="" maxlength="50" placeholder="Enter Email" required>
<div class="invalid-feedback">Please provide Email</div>
</div>
</div>
<div class="row">
<div class="col-12"><strong><u>Physical Address</u></strong></div>
</div>
<div class="form-row">
<div class="form-group col-6 required">
<div class="row">
<label class="col-3 col-form-label" for="Addr1">Address 1:</label>
<div class="col-9">
<input class="form-control" type="text" name="Addr1" id="Addr1" value="" placeholder="Enter Physical Address 1" maxlength="40" required>
<div class="invalid-feedback">Please provide Address 1</div>
</div>
</div>
</div>
<div class="form-group col-6 required">
<div class="row">
<label class="col-2 col-form-label" for="city">City:</label>
<div class="col-10">
<input class="form-control" type="text" name="city" id="city" value="" placeholder="Enter City" maxlength="25" required>
<div class="invalid-feedback">Please provide City</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<div class="row">
<div class="col-3">
<label for="Addr2">Address 2:</label>
</div>
<div class="col-9">
<input class="form-control" type="text" name="Addr2" id="Addr2" value="" placeholder="Enter Physical Address 2" maxlength="40">
</div>
</div>
</div>
<div class="form-group col-6 required">
<div class="row">
<label class="col-2 col-form-label" for="state">State:</label>
<div class="col-10">
<select class="custom-select browser-default" name="state" id="state" required>
<option value="">--Select State--</option>
<option value="ny">New York</option>
<option value="fl">Florida</option>
</select>
<div class="invalid-feedback">Please provide State</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<div class="row">
<label class="col-3 col-form-label" for="Addr3">Address 3:</label>
<div class="col-9">
<input class="form-control" type="text" name="Addr3" id="Addr3" value="" placeholder="Enter Physical Address 3" maxlength="40">
</div>
</div>
</div>
<div class="form-group col-6 required">
<div class="row">
<label class="col-2 col-form-label" for="zip">Zip:</label>
<div class="col-10">
<input class="form-control" type="text" name="zip" id="zip" value="" placeholder="Enter Zip Code, formatted: 99999 or 99999-9999" maxlength="10" required>
<div class="invalid-feedback">Please provide Zip</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<div class="row">
<label class="col-3 col-form-label" for="Addr4">Address 4:</label>
<div class="col-9">
<input class="form-control" type="text" name="Addr4" id="Addr4" value="" placeholder="Enter Physical Address 4" maxlength="40">
</div>
</div>
</div>
<div class="col-6">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="sameAddress" id="sameAddress" value="Y">
<label class="form-check-label" for="sameAddress">check this box if mailing address is the same of physical address</label>
</div>
</div>
</div>
<div class="row">
<div class="col-12"><strong><u>Access options</u></strong></div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="flag_1" id="flag_1" value="Y">
<label class="form-check-label" for="flag_1">Allow for access level 1?</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="flag_2" id="flag_2" value="Y">
<label class="form-check-label" for="flag_2">Allow for access level 2?</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="flag_3" id="flag_3" value="Y">
<label class="form-check-label" for="flag_3">Allow for access level 3?</label>
</div>
<div class="row">
<div class="col-12 text-center">
<input class="btn btn-primary" type="submit" name="save" id="save" value="Save">
</div>
</div>
</form>
</fieldset>
</div>
In the example above I used the code for validation form the Bootstrap web site. There is very little explained on how this works. I have few questions:
How I can trigger validation on click since I will use ajax to send request to the server?
Why fields that are not required are turning green (color around the input)?
How I can use pattern attribute to validate input value if it's correct or not with custom message for the user?
Please let me know if anyone knows how to achieve this?
Thank you.

Enable form validation/required if fieldset is not disabled

I have a booking form, which requires validation. Some of the fields are enabled/disabled depending on previous options chosen. My problem is that I am restricted from submitting the form with the fields disabled as it waits for "valid" input data from the empty fields.
Is there a way which I can enable/disable required and data validation for these fields only if the fieldset is enabled?
EDIT
Here is the code I'm currently working with. The fieldset is enabled/disabled according to the selected radio button. I want the fields within the fieldset to be validated if the radio button is selected and the fields are enabled. Right now, if I try to submit the form with the fieldset disabled and validation/required existing on the fields, I am not able to submit the form due to required fields not filled/fields validation fails due to fields being empty.
<div class="col-sm-2">
<div class="form-check">
<label class="radio-inline">
<input type="radio" name="oneRetOpt" id="returntrf" onclick="enableReturn()">
Return
</label>
</div>
</div>
<fieldset id="returnfields" disabled>
<div class="row" style="padding-bottom: 5px">
<div class="col-sm-4">
<div class="form-group">
<label for="transferTypeRet">Transfer Type:</label>
<select class="form-control" placeholder="Transfer Type" id="transferTypeRet">
<option> </option>
<option>Direct Tranfser</option>
<option>Split Transfer</option>
</select>
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="numadultsRet">Adults:</label>
<input type="number" min="0" class="form-control" placeholder="Number of Adults" id="numadultsRet" >
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="numchildRet">Children:</label>
<input type="number" min="0" class="form-control" placeholder="Number of Children (under 12 years old)" id="numchildRet" >
<p class="help-block text-danger"></p>
</div>
</div>
</div>
<div class="row" style="padding-bottom: 5px">
<div class='col-sm-6'>
<div class="form-group">
<label for="datetimeret">Date and Time:
<a href="#" data-toggle="timeTooltip"
title="Provide flight landing or departure time for airport transfers">
<i class="fa fa-info-circle"></i></a>
</label>
<div class='input-group date form_datetime' data-date-format="dd MM yyyy - HH:ii" id='datetimeret'>
<input class="form-control" type="text" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<div class="row" style="padding-bottom: 5px">
<div class="col-sm-6">
<div class="form-group">
<label for="pickupret">Pick-up Location: </label>
<input type="text" class="form-control" placeholder="Pick-up location" id="pickupret">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="dropoffret">Drop-off Location: </label>
<input type="text" class="form-control" placeholder="Drop-off location" id="dropoffret">
<p class="help-block text-danger"></p>
</div>
</div>
</div>
</fieldset>
<script type="text/javascript">
function enableReturn() {
document.getElementById("returnfields").disabled = false;
}
</script>

You can consider handling it in the submit logic of the form. See sample below. You an even bypass certain inputs from validation if you can conditionally evaluate them.
$("#myform").submit( function(event){
event.preventDefault();
var form = $("#myform");
console.log(form)
form.validate()
alert(form.valid())
form.children("#input1").remove()
form.validate()
alert(form.valid())
})
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<form id = "myform" novalidate>
<input id= "input1" required>
<input id= "input2" required>
<input type = "submit">
</form>

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.

How to get show text box, When change the dropdown list

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>