Convert Form to JSON

Question

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.

Answer 1

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>