I am trying to get this sketch to work. I need to program the red things in this sketch
I use angularJS and bootstrap. This is the code right now:
<div class="col-md-6">
<div class="form-group">
<label>text:</label>
<select name="" id="" ng-model="" ng-options="">
<option value=""></option>
</select>
</div>
<div class="form-group">
<label>text:</label>
<select name="" id="" ng-model="" ng-options="">
<option value=""></option>
</select>
</div>
<div class="form-group">
<label>text:</label>
<select name="" id="" ng-model="" ng-options="">
<option value=""></option>
</select>
</div>
<div class="form-group">
<label>text:</label>
<input type="text" name="" id="" placeholder="" ng-model="" />
</div>
<div class="form-group">
<label>text:</label>
<input type="text" name="" id="" placeholder="" ng-model="" />
</div>
<div class="form-group">
<label>text:</label>
<input type="text" name="" id="" placeholder="" ng-model="" />
</div>
<div class="form-group">
<label>text:</label>
<input type="text" name="" id="" placeholder="" ng-model="" />
</div>
<div class="form-group">
<label>text:</label>
<input type="text" name="" id="" placeholder="" ng-model="" />
</div>
</div>
I need to program a second column with textfields right next with a combobox above.
1 = combobox in angularjs
Kind regards and much thanks!
You're using col-md so I'm guessing you have bootstrap. You can nest another row in the column you already have so:
<div class="row">
<div class="col-md-6">
<!-- some inputs -->
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>
Related
I cannot post the code snippet here on Stackoverflow as it hits well past the limit of 30,000 characters so I have added it to jsfiddle as an alternative:
https://jsfiddle.net/c0ffee/n9ct2zms/1/
<!--====== Form Section ======-->
<section class="blog-area p-t-130 p-b-130">
<div class="container-lg">
<div class="row justify-content-center">
<div class="col-xl-7 col-lg-8">
<div class="contact-form-area m-t-md-100">
<div class="common-heading tagline-boxed m-b-40">
<span class="tagline">Send Us Message</span>
<h2 class="title">Have Any Questions ? <br> Let’s Start to Talk</h2>
</div>
<div class="contact-form-v2">
<form>
<div class="input-field m-b-30">
<input type="text" id="firstName" placeholder="First Name" name="name" required="">
<label for="fullName">Required</label>
</div>
<div class="input-field m-b-30">
<input type="text" id="phoneNumber" placeholder="Phone Number" name="phone" required="">
<label for="phoneNumber">Required</label>
</div>
<div class="input-field m-b-30">
<input type="text" id="phoneNumber" placeholder="Phone Number" name="phone" required="">
<label for="phoneNumber">Business Name</label>
</div>
<div class="input-field m-b-30">
<input type="text" id="phoneNumber" placeholder="Phone Number" name="phone" required="">
<label for="phoneNumber">Phone Number</label>
</div>
<div class="input-field m-b-30">
<input type="email" id="emailAddress" placeholder="Email Address" name="email" required="">
<label for="emailAddress">Email</label>
</div>
<div class="input-field m-b-30">
<input type="text" id="subject" placeholder="I Would Like To Discuses " name="subject" required="">
<label for="subject">Subject</label>
</div>
<div class="input-field m-b-30">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="input-field textarea-field m-b-30">
<textarea id="message" placeholder="Message" name="message"></textarea>
</div>
</div>
<div class="input-field">
<button type="submit" class="template-btn">Send Message <i class="fas fa-arrow-right"></i></button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!--====== Form Section ======-->
The issue I am running into is that the dropdown menu doesn't list all the options and it seems like the options are hidden behind the other contact form elements and I am not sure why it is doing that.
Can anyone please take a look and advise as to what I am missing here?
This question already has answers here:
Convert form data to JavaScript object with jQuery
(58 answers)
Closed last year.
I need to take the values of the form and convert it into JSON. Although the fields ‘tickets’, ‘DriverAge’, and ‘PurchaseDateYear’, needs to be converted to a int and the rest would remain a string. My goal is to be able to take data from user input, change the data type on some inputs and put it all into a JSON. What is the best way to go about this.
HTML
<form class="form" id="form" name="form" action="https://api.leadprosper.io/ingest" method="post" enctype="multipart/form-data" >
<div id="wizard">
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="FirstName">First Name</label>
<input type="hidden" type="number" id="lp_campaign_id" name="lp_campaign_id" value="5848" required>
<input type="hidden" type="number" id="lp_supplier_id" name="lp_supplier_id" value="5848" required>
<input type="hidden" id="lp_campaign_id" name="lp_key" value="131bvmpb2" required>
<input type="text" id="FirstName" name="FirstName" required>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="LastName">Last Name</label>
<input type="text" id="LastName" name="LastName" required>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="Email">Email</label>
<input pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,}$" type="email" id="Email" name="Email" required>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="Phone">phone</label>
<input type="phone" type="text" pattern="^[789]\d{9,9}$" min="1" max="10" id="Phone" Name="Phone" required>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="VehicleYear">Vehicle Year</label>
<input pattern="[0-9]{1,15}" type="number" id="VehicleYear" name="VehicleYear" required>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="PurchaseDateMonth">Purchase Date Month</label>
<input pattern="[a-zA-z]{1,15}" type="text" id="PurchaseDateMonth" name="PurchaseDateMonth" required placeholder="September">
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="PurchaseDateYear">Purchaes Date Year</label>
<input pattern="[0-9]{1,15}" type="number" id="PurchaseDateYear" name="PurchaseDateYear" placeholder="2022" required>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="FinancedLeased">Finance Leased</label>
<select type="text" id="FinancedLeased" name="FinancedLeased" placeholder="">
<option value="finance">finance</option>
<option value="leased">leased</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="Goal">Goal</label>
<input pattern="[a-zA-Z]{1,15}" type="text" id="Goal" name="Goal" placeholder="">
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="DailyDistance">Daily Distance</label>
<input pattern="[0-9]{1,15}" type="text" id="DailyDistance" name="DailyDistance" placeholder="">
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="YearlyDistance">Yearly Distance</label>
<input pattern="[0-9]{1,15}" type="text" id="YearlyDistance" name="YearlyDistance" placeholder="">
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="CompCoverage">Company Coverage</label>
<select type="text" id="CompCoverage" name="CompCoverage" placeholder="">
<option value="yes">yes</option>
<option value="no">no</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="CollisionCoverage">Collision Converage</label>
<select type="text" id="CollisionCoverage" name="CollisionCoverage" placeholder="">
<option value="yes">yes</option>
<option value="no">no</option>
</select>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="MaritalStatus">Marital Status</label>
<select type="text" id="MaritalStatus" name="MaritalStatus" placeholder="">
<option value="single">single</option>
<option value="married/common law">married/common law</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label id="dob"for="DOB">Date of Birth</label>
<input pattern="?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31" type="datetime" id="DOB" name="DOB" placeholder="yyyy-mm-dd">
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="Occupation">Occupation</label>
<input patter="[a-zA-Z]{1,15}" type="text" id="Occupation" name="Occupation" placeholder="">
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="genGenderder">gender</label>
<select type="text" id="Gender" name="genGenderder" placeholder="">
<option value="male">male</option>
<option value="female">female</option>
<option value='other'>other</option>
</select>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="LicenseClass">Licence Class</label>
<select type="text" id="LicenseClass" name="LicenseClass" placeholder="">
<option value="class 5">class 5</option>
<option value="class 5-1">class 5-1</option>
<option value="class 5-2">class 5-2</option>
<option value="other">other</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="DriverAge">Driver Age</label>
<input pattern="[0-9]{1,15}" type="text" id="DriverAge" name="DriverAge" placeholder="">
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="InsuranceCancellation">Insurance Cancellation</label>
<select type="text" id="InsuranceCancellation" name="InsuranceCancellation" placeholder="">
<option value="no">no</option>
<option value="yes">yes</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="Suspensions">Suspensions</label>
<select type="text" id="Suspensions" name="Suspensions" placeholder="">
<option value="no">no</option>
<option value="yes-once">yes once</option>
<option value="yes-more">yes more than once
</select>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="Claims">claim</label>
<select type="text" id="Claims" name="Claims" placeholder="">
<option value="no">no</option>
<option value="yes">yes</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="Tickets">Tickets</label>
<input pattern="[0-9]{1,10}" type="text" id="Tickets" name="Tickets" placeholder="">
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="StartDate">Start Date</label>
<input pattern="?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31" type="datetime" id="StartDate" name="StartDate" placeholder="yyyy-mm-dd">
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="col-md-4">
<div class="form-row">
<label for="licenceSince">Licence Since</label>
<input pattern="?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31" type="text" id="licenceSince" name="licenceSince" placeholder="yyyy-mm-dd">
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="City">City</label>
<input type="text" id="City" name="City" required>
<div class="error"></div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="state">State</label>
<input pattern="[a-zA-z]{2}" type="text" id="State" name="State" required>
<div class="error"></div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="Postal">Postal</label>
<input type="text" pattern="[A-za-z0-9]{5}" id="Postal" name="Postal" required>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="sumbit">
<button type="submit" >Submit</button>
</div>
</div>
</div>
</form>
Thank you for any advice.
Run the code, write in the form, and submit it to see the JSON formatted form data.
const submitBtn = document.querySelector('button[type="submit"]');
const form = document.querySelector('form');
submitBtn.addEventListener('click', (e) => {
e.preventDefault();
const data = new FormData(form);
const json = Object.fromEntries(data.entries());
console.log(json);
});
<form class="form" id="form" name="form" action="https://api.leadprosper.io/ingest" method="post" enctype="multipart/form-data">
<div id="wizard">
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="FirstName">First Name</label>
<input type="hidden" type="number" id="lp_campaign_id" name="lp_campaign_id" value="5848" required />
<input type="hidden" type="number" id="lp_supplier_id" name="lp_supplier_id" value="5848" required />
<input type="hidden" id="lp_campaign_id" name="lp_key" value="131bvmpb2" required />
<input type="text" id="FirstName" name="FirstName" required />
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="LastName">Last Name</label>
<input type="text" id="LastName" name="LastName" required />
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="Email">Email</label>
<input pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,}$" type="email" id="Email" name="Email" required />
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="Phone">phone</label>
<input type="phone" type="text" pattern="^[789]\d{9,9}$" min="1" max="10" id="Phone" name="Phone" required />
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="VehicleYear">Vehicle Year</label>
<input pattern="[0-9]{1,15}" type="number" id="VehicleYear" name="VehicleYear" required />
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="PurchaseDateMonth">Purchase Date Month</label>
<input pattern="[a-zA-z]{1,15}" type="text" id="PurchaseDateMonth" name="PurchaseDateMonth" required placeholder="September" />
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="PurchaseDateYear">Purchaes Date Year</label>
<input pattern="[0-9]{1,15}" type="number" id="PurchaseDateYear" name="PurchaseDateYear" placeholder="2022" required />
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="FinancedLeased">Finance Leased</label>
<select type="text" id="FinancedLeased" name="FinancedLeased" placeholder="">
<option value="finance">finance</option>
<option value="leased">leased</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="Goal">Goal</label>
<input pattern="[a-zA-Z]{1,15}" type="text" id="Goal" name="Goal" placeholder="" />
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="DailyDistance">Daily Distance</label>
<input pattern="[0-9]{1,15}" type="text" id="DailyDistance" name="DailyDistance" placeholder="" />
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="YearlyDistance">Yearly Distance</label>
<input pattern="[0-9]{1,15}" type="text" id="YearlyDistance" name="YearlyDistance" placeholder="" />
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="CompCoverage">Company Coverage</label>
<select type="text" id="CompCoverage" name="CompCoverage" placeholder="">
<option value="yes">yes</option>
<option value="no">no</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="CollisionCoverage">Collision Converage</label>
<select type="text" id="CollisionCoverage" name="CollisionCoverage" placeholder="">
<option value="yes">yes</option>
<option value="no">no</option>
</select>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="MaritalStatus">Marital Status</label>
<select type="text" id="MaritalStatus" name="MaritalStatus" placeholder="">
<option value="single">single</option>
<option value="married/common law">married/common law</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label id="dob" for="DOB">Date of Birth</label>
<input pattern="?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31" type="datetime" id="DOB" name="DOB" placeholder="yyyy-mm-dd" />
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="Occupation">Occupation</label>
<input patter="[a-zA-Z]{1,15}" type="text" id="Occupation" name="Occupation" placeholder="" />
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="genGenderder">gender</label>
<select type="text" id="Gender" name="genGenderder" placeholder="">
<option value="male">male</option>
<option value="female">female</option>
<option value="other">other</option>
</select>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="LicenseClass">Licence Class</label>
<select type="text" id="LicenseClass" name="LicenseClass" placeholder="">
<option value="class 5">class 5</option>
<option value="class 5-1">class 5-1</option>
<option value="class 5-2">class 5-2</option>
<option value="other">other</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="DriverAge">Driver Age</label>
<input pattern="[0-9]{1,15}" type="text" id="DriverAge" name="DriverAge" placeholder="" />
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="InsuranceCancellation">Insurance Cancellation</label>
<select type="text" id="InsuranceCancellation" name="InsuranceCancellation" placeholder="">
<option value="no">no</option>
<option value="yes">yes</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="Suspensions">Suspensions</label>
<select type="text" id="Suspensions" name="Suspensions" placeholder="">
<option value="no">no</option>
<option value="yes-once">yes once</option>
<option value="yes-more">yes more than once</option>
</select>
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="Claims">claim</label>
<select type="text" id="Claims" name="Claims" placeholder="">
<option value="no">no</option>
<option value="yes">yes</option>
</select>
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="Tickets">Tickets</label>
<input pattern="[0-9]{1,10}" type="text" id="Tickets" name="Tickets" placeholder="" />
<div class="error"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-row">
<label for="StartDate">Start Date</label>
<input pattern="?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31" type="datetime" id="StartDate" name="StartDate" placeholder="yyyy-mm-dd" />
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="col-md-4">
<div class="form-row">
<label for="licenceSince">Licence Since</label>
<input pattern="?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31" type="text" id="licenceSince" name="licenceSince" placeholder="yyyy-mm-dd" />
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="City">City</label>
<input type="text" id="City" name="City" required />
<div class="error"></div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="state">State</label>
<input pattern="[a-zA-z]{2}" type="text" id="State" name="State" required />
<div class="error"></div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-row">
<label for="Postal">Postal</label>
<input type="text" pattern="[A-za-z0-9]{5}" id="Postal" name="Postal" required />
<div class="error"></div>
</div>
</div>
</div>
<div class="row">
<div class="sumbit">
<button type="submit">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
I am trying to save data in html form as json. But only my last row is saved. The reason for this is probably because the names of the inputs in the two sections are the same.
But I want the json file like this:
{"name":"Name1","surname":"Surname1","gender":"f","birthDay":"15","birthMonth":"1","birthYear":"1995"},
{"name":"Name2","surname":"Surname2","gender":"m","birthDay":"20","birthMonth":"2","birthYear":"2020"}
But now output is:
{"name":"Name2","surname":"Surname2","gender":"m","birthDay":"20","birthMonth":"2","birthYear":"2020"}
function handleFormSubmit(event) {
event.preventDefault();
const data = new FormData(event.target);
const formJSON = Object.fromEntries(data.entries());
console.log(JSON.stringify(formJSON))
}
const form = document.querySelector('#example-form');
form.addEventListener('submit', handleFormSubmit);
<div class="container py-4">
<form id="example-form">
<div class="row">
<div class="col-md-12 p-0">
<div class="col-md-12 form_field_outer p-0" id="app">
<div class="row form_field_outer_row">
<div class="form-group col-md-2">
<input class="form-control w_90" id="name" name="name" placeholder="Name" type="text" value="" /></div>
<div class="form-group col-md-2">
<input class="form-control w_90" id="surname" name="surname" placeholder="Surname" type="text" value="" /></div>
<div class="form-group col-md-2">
<select class="form-control" id="gender" name="gender"><option disabled="disabled" selected="selected">Gender</option>
<option value="f">Female</option>
<option value="m">Male</option>
<option value="n">None.</option></select></div>
<div class="form-group col">
<input class="form-control w_90" id="birthDay" maxlength="2" name="birthDay" placeholder="Day" type="text" value="" /></div>
<div class="form-group col">
<select class="form-control" id="birthMonth" name="birthMonth">
<option disabled="disabled" selected="selected">Month</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
</select>
</div>
<div class="form-group col">
<input class="form-control w_90" id="birthYear" maxlength="4" name="birthYear" placeholder="Year" type="text" value="" /></div>
</div>
<br>
<div class="row form_field_outer_row">
<div class="form-group col-md-2">
<input class="form-control w_90" id="name" name="name" placeholder="Name" type="text" value="" /></div>
<div class="form-group col-md-2">
<input class="form-control w_90" id="surname" name="surname" placeholder="Surname" type="text" value="" /></div>
<div class="form-group col-md-2">
<select class="form-control" id="gender" name="gender"><option disabled="disabled" selected="selected">Gender</option>
<option value="f">Female</option>
<option value="m">Male</option>
<option value="n">None.</option></select></div>
<div class="form-group col">
<input class="form-control w_90" id="birthDay" maxlength="2" name="birthDay" placeholder="Day" type="text" value="" /></div>
<div class="form-group col">
<select class="form-control" id="birthMonth" name="birthMonth">
<option disabled="disabled" selected="selected">Month</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
</select>
</div>
<div class="form-group col">
<input class="form-control w_90" id="birthYear" maxlength="4" name="birthYear" placeholder="Year" type="text" value="" /></div>
</div>
</div>
</div>
</div>
<br>
<div class="col-md ml-0 mt-3 py-3">
<div class="col-md-12">
<button type="submit" id="submitId" class="btn btn-success float-right "><i class="fa fa-check-circle"></i> Submit</button>
</div>
</div>
</form>
</div>
How can I solve this?
Thanks for answers.
You have to have unique id and name values to your form elements.
So change the two occurences of:
<input id="surname" name="surname">
to something like this:
<input id="surname_0" name="person[0][surname]">
And the second occurence:
<input id="surname_1" name="person[1][surname]">
(I removed all other attributes to improve readability for my answer)
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 have this div.form-group dynamically added. I have button to click to get the index. my problem is that when I delete an elment using index the third div also is deleted. how can I delete only one div by the given index, if I delete again looks like it's not updating index after it remove. is this because it is dynamically added ?
<div class="mycontainer">
<div class="form-group">
<input type="text" class="form-control">
</div>
<div class="form-group">
<input type="text" class="form-control">
</div>
<div class="form-group">
<input type="text" class="form-control" >
</div>
<div class="form-group">
<input type="text" class="form-control" >
</div>
</div>
$('.mycontainer').find('div.form-group').eq(index).remove();
Actually, you really don't need jQuery for it:
const removeByIndex = (index = 0) =>
[...document.querySelectorAll('.mycontainer .form-group')][index].remove();
setTimeout(() => removeByIndex(2), 2000);
<div class="mycontainer">
<div class="form-group">
<input type="text" class="form-control">
</div>
<div class="form-group">
<input type="text" class="form-control">
</div>
<div class="form-group">
<input type="text" class="form-control" value="will be removed ...">
</div>
<div class="form-group">
<input type="text" class="form-control">
</div>
</div>
Your code working fine... check isn't your script runs twice.
$('.mycontainer').find('div.form-group').eq(1).remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mycontainer">
<div class="form-group">
<input type="text" value="0" class="form-control">
</div>
<div class="form-group">
<input type="text" value="1" class="form-control">
</div>
<div class="form-group">
<input type="text" value="2" class="form-control" >
</div>
<div class="form-group">
<input type="text" value="3" class="form-control" >
</div>
</div>