Convert Form to JSON [duplicate] - javascript

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>

Related

Copy data using checkbox not working in repeater field

On the 1st image link, I have enter the required data in the first tab.
On the 2nd image link, when I go to second tab and click on checkbox it copy data from 1st tab and show in the 2nd tab form
On the 3rd image link, when I repeat the form and also when click on check box the data did not show in the respective field.
$(document).ready(function() {
$(".repeater").repeater({
defaultValues: {
//"text-input": "foo"
},
show: function() {
$(this).slideDown();
},
hide: function(deleteElement) {
if (confirm("Are you sure you want to delete this element?")) {
$(this).slideUp(deleteElement);
}
},
ready: function(setIndexes) {
//$dragAndDrop.on('drop', setIndexes);
},
repeaters: [
{
selector: ".inner-repeater"
}
]
});
});
function myFunction() {
var checkBox = document.getElementById("single_checkbox");
var door_no = document.getElementById("doorno");
var street_name = document.getElementById("streetname");
var client_area = document.getElementById("area");
var client_statename = document.getElementById("statename");
var client_dist = document.getElementById("distname");
var client_city = document.getElementById("city");
var client_pincode = document.getElementById("pincode");
var dr_number = document.getElementById("doornos");
var contact_street = document.getElementById("streetnames");
var contact_area = document.getElementById("contactarea");
var contact_state = document.getElementById("statenamecontact");
var contact_dist = document.getElementById("contactdist");
var contact_city = document.getElementById("contactcity");
var contact_pincode = document.getElementById("pincode_contact");
if (checkBox.checked == true){
dr_number.value=door_no.value;
contact_street.value=street_name.value;
contact_area.value=client_area.value;
contact_state.value=client_statename.value;
contact_dist.value=client_dist.value;
contact_city.value=client_city.value;
contact_pincode.value=client_pincode.value;
} else {
dr_number.value="";
contact_street.value="";
contact_area.value="";
contact_state.value="";
contact_dist.value="";
contact_city.value="";
contact_pincode.value="";
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js"></script>
<div class="row match-height">
<div class="col-md-12">
<div class="">
<div class=" collapse show">
<div class="">
<form action="clientinsert2" method="post" enctype="multipart/form-data">
<div class="">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Client</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Client Contact</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="tab-pane active pd_0"><br>
<div class="form-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="">Client Name </label>
<input type="text" class="form-control" value="" name="clientname">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">Phone Number</label>
<input type="text" class="form-control" value="" name="phone">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="">Door Number</label>
<input type="text" class="form-control" value="" id="doorno" name="doorno">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="issueinput4">Street Name</label>
<input type="text" class="form-control" value=""id="streetname" name="streetname">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="">Area</label>
<input type="text" class="form-control" id="area" name="area" value="">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">State</label>
<select class="form-control" name="State" id="statename" value="">
<option>Select</option>
<option>odisha</option>
<option>Bihar</option>
<option>Assam</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">District</label>
<select class="form-control" id="distname" name="districtname" value="">
<option>Select</option>
<option>jajpur</option>
<option>puri</option>
<option>cuttack</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">City</label>
<select class="form-control" name="cityname" id="city" value="">
<option>Select</option>
<option>Bhubaneswar</option>
<option>Bari</option>
<option>Mangalpur</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="">Pincode</label>
<input type="text" class="form-control" name="pincode" value="" id="pincode">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Status</label>
<select class="form-control" name="status" value="">
<option selected>Please Select Status</option>
<option value="1">Active</option>
<option value="2">Inactive</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Logo</label>
<input type="file" class="form-control" name="client_logo">
</div>
</div>
</div>
</div>
</div>
<!-- client contact form start-->
<div id="menu1" class="tab-pane fade pd_0"><br>
<div class="form-group mb-2 repeater">
<div data-repeater-list="outer-list">
<div data-repeater-item>
<div class="row mb-1">
<div class="col-md-6">
<div class="form-group">
<label for="">Contact Person </label>
<input type="text" class="form-control" name="contactname">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">Contact Person Phone</label>
<input type="text" class="form-control" name="contactphone">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Mail</label>
<input type="email" class="form-control" name="contactmail">
</div>
</div>
<!-- <div class="col-md-4">
<div class="form-group">
<label for="">Client Primary Spoc</label>
<div class="skin skin-square">
<input type="checkbox"
id="single_checkbox1" name="client_contact_primary_spoc"
value="checked">
<label for="single_checkbox1">checked</label>
</div>
</div>
</div> -->
<div class="col-md-4">
<div class="form-group">
<label for="">Designation</label>
<input type="text" class="form-control" name="designation">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Status</label>
<select class="form-control" name="status">
<option selected>Please Select Status</option>
<option value="1">Active</option>
<option value="2">Inactive</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Client Branch</label>
<select class="form-control" name="clientbranch">
<option>Select</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Corporate Address</label>
<div class="">
<input type="checkbox" value="1" id="single_checkbox"
name="checkbox" onclick="myFunction()">
<label for="">checked
</label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Door Number</label>
<input type="text" class="form-control" name="doorno" id="doornos">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="issueinput4">Street Name</label>
<input type="text" class="form-control" name="streetname" id="streetnames">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Area</label>
<input type="text" class="form-control" name="area" id="contactarea">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">State</label>
<select class="form-control" name="State"
id="statenamecontact">
<option>Select</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">District</label>
<select class="form-control" name="districtname"
id="contactdist">
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">City</label>
<select class="form-control" name="cityname"
id="contactcity">
<option>Select</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Pincode</label>
<input type="text" class="form-control" name="pincode" id="pincode_contact">
</div>
</div>
<div class="col-12">
<button type="button" data-repeater-delete
class="btn btn-icon btn-danger mr-1"><i
class="ft-x"></i></button>
</div>
</div>
</div>
</div>
<button type="button" data-repeater-create id="repeater-button"
class="btn btn-info">
<i class="ft-plus"></i> Add new file
</button>
</div>
<div class="form-actions">
<span id="hide">
<a href="/client"><input type="button" class="btn btn-warning"
value="Back"></a>
</span>
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
<!-- Tab panes -->
</div>
</div>
</div>
</div>
</div>
<!-- Form wizard with icon tabs section end -->
</div>

Forum Post To Url

I have this project where I have to post data to the url given following specific parameters. I am getting errors and my code is just messy in general. One thing that got me stumped is how I can convert specific values in the JSON object to int. For example the parameter "tickets" requests a integer. Any help would be great.
<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>
Javascript
<script>
const Form = document.querySelectorAll('form');
Form.addEventListener('submit',function(e){
e.preventDefault();
const formData = new FormData(this);
const searchParams = new URLSearchParams();
for(const pair of formData){
searchParams.append(pair[0],pair[1]);
console.log(pair[0],pair[1]);
}
console.log(formData);
const response = fetch('https://api.leadprosper.io/ingest', {
method: 'POST',
body: searchParams,
headers:{
'Content-Type': 'application/json;'
}
}).then(function (reponse){
return reponse.json();
}).then(function(text){
console.log(text);
}).catch(function (error){
console.error(error);
})
})
</script>
Payload with the paramaters I need to follow.
{
"lp_campaign_id": "5848",
"lp_supplier_id": "5848",
"lp_key": "131bvmpb2",
"FirstName": "Amelia",
"LastName": "Nakia",
"Email": "jbaumbach#example.com",
"Phone": "3866311306",
"VehicleYear": 4,
"PurchaseDateMonth": "Groves",
"PurchaseDateYear": 1,
"FinancedLeased": "gray",
"Goal": "Thursday",
"DailyDistance": 7,
"YearlyDistance": 5,
"CompCoverage": "no",
"CollisionCoverage": "yes",
"MaritalStatus": "fuchsia",
"DOB": "2022-02-03",
"Occupation": "South",
"Gender": "male",
"LicenseClass": "lime",
"DriverAge": 6,
"LicensedSince": 2,
"LicenseLength": "Springs",
"InsuranceCancellation": "no",
"Suspensions": "no",
"Claims": "West",
"Tickets": 7,
"StartDate": "2022-02-07",
"City": "Lake Bailee",
"State": "AL",
"Postal": "68820"
}

First of all, if you want to get only numbers from input, convert your html code to this:
<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>
then when you want to get value as an integer type, you should put it in parseInt();
Like this:
var data = parseInt(document.getElementById('tickets')) // data is an integer
if you want to change value from a JSON object you can simply change the value by reading it like this:
data = {
tickets : 5
}
// to change the number in tickets
data.tickets = 12

How to remove only first set of div of a specific class jquery

I have html structure like this :
<div class="row clearfix student">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Student</h2>
<div class="form-line focused">
<input type="text" name="name" class="form-control" required="">
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<select name="subject_name" class="form-control subject" required="" aria-invalid="false">
<option value="">Select</option>
<option value="1">Maths</option>
<option value="2">Science</option>
</select>
</div>
</div>
<div>
<div class="row clearfix subject">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<div class="form-line focused">
<input type="text" name="subject[]" class="form-control" required="">
</div>
</div>
</div>
<div>
<div class="row clearfix class">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<div class="form-line focused">
<input type="text" name="subject[]" class="form-control" required="">
</div>
</div>
</div>
<div>
<div class="row clearfix student">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Student</h2>
<div class="form-line focused">
<input type="text" name="name" class="form-control" required="">
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<select name="subject_name" class="form-control subject" required="" aria-invalid="false">
<option value="">Select</option>
<option value="1">Maths</option>
<option value="2">Science</option>
</select>
</div>
</div>
<div>
<div>
<div class="row clearfix subject">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<div class="form-line focused">
<input type="text" name="subject[]" class="form-control" required="">
</div>
</div>
</div>
<div>
<div class="row clearfix class">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<div class="form-line focused">
<input type="text" name="subject[]" class="form-control" required="">
</div>
</div>
</div>
<div>
..
..
There is a student row and multiple subject row.There is a dropdown on the Student row, so what i want is to remove the subject rows only when dropdown is changed. I'm using this code but it is not working.
jQuery(document).on('change', '.subject', function(e) {
var nearest_row = $(this).closest('div.row');
$(nearest_row).next().remove();
});
I don't want to delete student, only the subjects rows of that student.

I believe the problem is that you have lots of unclosed <div> in your code, the each row is actually inside each other. If you look at the example below, i have closed the divs, and now it seems to work.
Working demo
jQuery(document).on('change', 'select.subject', function(e) {
var nearest_row = $(this).closest('div.row');
if ($(nearest_row).next('.row').find("select").length == 0) {
$(nearest_row).next().remove();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row clearfix student">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Student</h2>
<div class="form-line focused">
<input type="text" name="name" class="form-control" required="">
</div>
</div>
</div>
</div>
<div class="row clearfix subject">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<select name="subject_name" class="form-control subject" required="" aria-invalid="false">
<option value="">Select</option>
<option value="1">Maths</option>
<option value="2">Science</option>
</select>
</div>
</div>
</div>
<div class="row clearfix subject">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<div class="form-line focused">
<input type="text" name="subject[]" class="form-control" required="">
</div>
</div>
</div>
</div>
<div class="row clearfix class">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<div class="form-line focused">
<input type="text" name="subject[]" class="form-control" required="">
</div>
</div>
</div>
</div>
<div class="row clearfix student">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Student</h2>
<div class="form-line focused">
<input type="text" name="name" class="form-control" required="">
</div>
</div>
</div>
</div>
<div class="row clearfix subject">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<select name="subject_name" class="form-control subject" required="" aria-invalid="false">
<option value="">Select</option>
<option value="1">Maths</option>
<option value="2">Science</option>
</select>
</div>
</div>
</div>
<div class="row clearfix subject">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<div class="form-line focused">
<input type="text" name="subject[]" class="form-control" required="">
</div>
</div>
</div>
</div>
<div class="row clearfix class">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<div class="form-line focused">
<input type="text" name="subject[]" class="form-control" required="">
</div>
</div>
</div>
</div>

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.

How to Show/Hide the Div using Button

First, i wanted to automatically hide div part, then if i click the add guardian button. It will show the div part. Here's my code. Thankyou in Advance. Also i indicate my script here. Please check, thankyouuu!
<div align="right">
<button onClick="toggle_div_fun('guardian');" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
</div>
<!-- Add Guardian -->
<div class="row" id="guardian">
<h4 class="title-well">Guardian</h4>
<div class="checkbox">
<label> <input id="chkGuardian" type="checkbox">DECEASED
</label>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianFirstName"><span
class="text-danger">*</span> First Name</label> <input
rv-value="applicant:personalInformation:guardianFirstName"
class="form-control input-lg" name="guardianFirstName" id="guardianFirstName"
data-validate="required" placeholder="Enter First Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMiddleName"><span
class="text-danger">*</span> Middle Name</label> <input
class="form-control input-lg" name="guardianMiddleName"
rv-value="applicant:personalInformation:guardianMiddleName"
id="guardianMiddleName" data-validate="required"
placeholder="Enter Middle Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianLastName"><span
class="text-danger">*</span> Last Name</label> <input
rv-value="applicant:personalInformation:guardianLastName"
class="form-control input-lg" name="guardianLastName" id="guardianLastName"
data-validate="required" placeholder="Enter Last Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianNationality"><span
class="text-danger">*</span> Nationality</label> <input
rv-value="applicant:personalInformation:guardianNationality"
class="form-control input-lg" name="guardianNationality" id="guardianNationality"
data-validate="required" placeholder="Enter Nationality" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="dateOfBirth"><span
class="text-danger">*</span> Date of Birth</label>
<div class="input-group">
<input id="dateOfBirth" name="dateOfBirth"
rv-value="applicant:personalInformation:guardianDateOfBirth | date"
type="text" class="form-control input-lg datepicker" data-parsley-required="true" data-parsley-group="wizard-step-4">
<div class="input-group-addon">
<i class="entypo-calendar"></i>
</div>
</div>
</div>
</div>
<div id="guardianDeceased">
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianHomeNumber"><span
class="text-danger">*</span> Home Number</label> <input
rv-value="applicant:personalInformation:guardianHomeNumber"
class="form-control input-lg" name="guardianHomeNumber" id="guardianHomeNumber"
data-validate="required" placeholder="Enter Home Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMobileNumber"><span
class="text-danger">*</span> Mobile Number</label> <input
rv-value="applicant:personalInformation:guardianMobileNumber"
class="form-control input-lg" name="guardianMobileNumber" id="guardianMobileNumber"
data-validate="required" placeholder="Enter Mobile Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="inputEmail" class="control-label"><span
class="text-danger">*</span>Email</label> <input
rv-value="applicant:personalInformation:guardianEmailAddress"
type="email" class="form-control input-lg" name="inputEmail" id="inputEmail"
placeholder="Email" data-validate="required" data-parsley-required="true" data-parsley-group="wizard-step-4">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="checkbox col-sm-12">
<label> <input id="guardianCurrentAddress" type="checkbox">Address same as Current Address
</label>
</div>
</div>
</div>
<div id="guardianAdd">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="guardianStreetAddress"><span
class="text-danger">*</span> Street Address</label> <input
rv-value="applicant:personalInformation:guardianStreetAddress"
class="form-control input-lg" name="guardianStreetAddress" id="guardianStreetAddress"
data-validate="required" placeholder="Enter Street Address" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCity">City</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianCity"
type="text" class="form-control input-lg ref-city" name="guardianCity"
id="guardianCity" data-validate="required">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianProvince">Province</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianProvince"
type="text" id="guardianCity" name="guardianCity"
class="form-control input-lg ref-province">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCountry"><span class="text-danger">*</span>Country</label>
<select
rv-value="applicant:personalInformation:guardianCountry"
name="guardianCountry" class="form-control input-lg ref-country"
id="guardianCountry">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianPostalCode"><span class="text-danger">*</span>Zip Code</label>
<input class="form-control input-lg"
rv-value="applicant:personalInformation:guardianPostalCode"
name="guardianPostalCode" id="guardianPostalCode"
data-validate="required" placeholder="Zip Code" />
</div>
</div>
</div>
</div>
<!-- End Guardian -->
<script type="text/javascript">
function toggle_div_fun(id){
var divelement = document.getElementById(id);
if(divelement.style.display == 'none')
divelement.style.display == 'block';
else
divelement.style.display == 'none';
}
</script>

Since you're using Bootstrap, just use the collapse component..
<div align="right">
<button data-toggle="collapse" data-target="#guardian" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
</div>
<!-- Add Guardian -->
<div class="row collapse" id="guardian">
...
Demo: http://www.codeply.com/go/0jvcrckYOL

A tiny error in your code, you had == where you need a single =
if(divelement.style.display == 'none')
divelement.style.display = 'block';
else
divelement.style.display = 'none';

function toggle_div_fun(id){
var divelement = document.getElementById(id);
if(divelement.style.visibility == 'hidden')
divelement.style.visibility = 'visible';
else
divelement.style.visibility = 'hidden';
}
<div align="right">
<button onClick="toggle_div_fun('guardian');" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
</div>
<!-- Add Guardian -->
<div class="row" id="guardian">
<h4 class="title-well">Guardian</h4>
<div class="checkbox">
<label> <input id="chkGuardian" type="checkbox">DECEASED
</label>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianFirstName"><span
class="text-danger">*</span> First Name</label> <input
rv-value="applicant:personalInformation:guardianFirstName"
class="form-control input-lg" name="guardianFirstName" id="guardianFirstName"
data-validate="required" placeholder="Enter First Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMiddleName"><span
class="text-danger">*</span> Middle Name</label> <input
class="form-control input-lg" name="guardianMiddleName"
rv-value="applicant:personalInformation:guardianMiddleName"
id="guardianMiddleName" data-validate="required"
placeholder="Enter Middle Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianLastName"><span
class="text-danger">*</span> Last Name</label> <input
rv-value="applicant:personalInformation:guardianLastName"
class="form-control input-lg" name="guardianLastName" id="guardianLastName"
data-validate="required" placeholder="Enter Last Name" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianNationality"><span
class="text-danger">*</span> Nationality</label> <input
rv-value="applicant:personalInformation:guardianNationality"
class="form-control input-lg" name="guardianNationality" id="guardianNationality"
data-validate="required" placeholder="Enter Nationality" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="dateOfBirth"><span
class="text-danger">*</span> Date of Birth</label>
<div class="input-group">
<input id="dateOfBirth" name="dateOfBirth"
rv-value="applicant:personalInformation:guardianDateOfBirth | date"
type="text" class="form-control input-lg datepicker" data-parsley-required="true" data-parsley-group="wizard-step-4">
<div class="input-group-addon">
<i class="entypo-calendar"></i>
</div>
</div>
</div>
</div>
<div id="guardianDeceased">
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianHomeNumber"><span
class="text-danger">*</span> Home Number</label> <input
rv-value="applicant:personalInformation:guardianHomeNumber"
class="form-control input-lg" name="guardianHomeNumber" id="guardianHomeNumber"
data-validate="required" placeholder="Enter Home Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianMobileNumber"><span
class="text-danger">*</span> Mobile Number</label> <input
rv-value="applicant:personalInformation:guardianMobileNumber"
class="form-control input-lg" name="guardianMobileNumber" id="guardianMobileNumber"
data-validate="required" placeholder="Enter Mobile Number" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="inputEmail" class="control-label"><span
class="text-danger">*</span>Email</label> <input
rv-value="applicant:personalInformation:guardianEmailAddress"
type="email" class="form-control input-lg" name="inputEmail" id="inputEmail"
placeholder="Email" data-validate="required" data-parsley-required="true" data-parsley-group="wizard-step-4">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="checkbox col-sm-12">
<label> <input id="guardianCurrentAddress" type="checkbox">Address same as Current Address
</label>
</div>
</div>
</div>
<div id="guardianAdd">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="guardianStreetAddress"><span
class="text-danger">*</span> Street Address</label> <input
rv-value="applicant:personalInformation:guardianStreetAddress"
class="form-control input-lg" name="guardianStreetAddress" id="guardianStreetAddress"
data-validate="required" placeholder="Enter Street Address" data-parsley-required="true" data-parsley-group="wizard-step-4" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCity">City</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianCity"
type="text" class="form-control input-lg ref-city" name="guardianCity"
id="guardianCity" data-validate="required">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianProvince">Province</label>
<select
rv-value="applicant:personalInformation:permanentAddress:guardianProvince"
type="text" id="guardianCity" name="guardianCity"
class="form-control input-lg ref-province">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianCountry"><span class="text-danger">*</span>Country</label>
<select
rv-value="applicant:personalInformation:guardianCountry"
name="guardianCountry" class="form-control input-lg ref-country"
id="guardianCountry">
<option value="" default selected></option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="guardianPostalCode"><span class="text-danger">*</span>Zip Code</label>
<input class="form-control input-lg"
rv-value="applicant:personalInformation:guardianPostalCode"
name="guardianPostalCode" id="guardianPostalCode"
data-validate="required" placeholder="Zip Code" />
</div>
</div>
</div>
</div>
<!-- End Guardian -->

here I'm giving you the short demo. prefer below is your example. where you have to toggle DIV with class " Your_Class ".
HTML
<div class="Your_Class">
"Your Content"
</div>
<button onClick="toggle_div_fun('guardian');" type="button" class="btn btn-icon btn-primary icon-left">Add Guardian<i class="fa fa-plus"></i></button>
CSS
.Your_Class { display:none;}
.Your_Class.active { display:block;}
JS
$(".btn-primary").click(function(){
if($(".Your_Class").hasClass('active')) {
$(this).removeClass('active');
}
else
{
$(this).addClass('active');
}
});

Categories