Develop Reference

Multistep form won't move to the next form fields

This is my liveire component for handling logic. I am unable to move to the next step as the next button is not showing or is hidden. I tried using switch statement but to no avail.
I can't seem to figure our where the error is plus i am new to livewire.
Any help is greatly appreciated.
Thank You
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use Livewire\WithFileUploads;
class CpdApplicationForm extends Component
{
use WithFileUploads;
// Forms Components Go Here
public int $totalSteps = 5;
public int $currentStep = 1;
public function mount()
{
$this->currentStep = 1;
}
public function render()
{
return view('livewire.cpd-application-form');
}
public function increaseStep()
{
// $this->resetErrorBag();
$this->validateData();
$this->currentStep++;
if ($this->currentStep > $this->totalSteps) {
$this->currentStep = $this->totalSteps;
}
}
public function decreaseStep()
{
$this->resetErrorBag();
$this->currentStep--;
if ($this->currentStep < 1) {
$this->currentStep = 1;
}
}
}
This is the livewire blade component.
<form wire:submit.prevent="register">
#if ($currentStep == 1)
#endif
#if ($currentStep == 2)
<div class="step-two">
<div class="panel-section-card py-20 px-25 mt-20">
<div class="card-header bg-secondary text-white">STEP 2/5 - Personal Details</div>
<div class="card-body">
<div class="row">
<div class="col-12 ">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="">Full Name</label>
<input type="text" class="form-control" placeholder="Name Of Personnel "
wire:model="full_name" required>
<span class="text-danger">#error('full_name'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Phone</label>
<input type="text" class="form-control" placeholder="Phone Number"
wire:model="phone">
<span class="text-danger">#error('phone'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Email</label>
<input type="text" class="form-control"
placeholder="Your Organization Issued Email Address"
wire:model="email">
<span class="text-danger">#error('email'){{ $message }}#enderror</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="">Service Type</label>
<select class="form-control" wire:model="service_type" required>
<option value="" selected>Select Service Type</option>
<option value="United States">Accreditation Only</option>
<option value="India">Accreditation & Venue</option>
<option value="Rwanda">Accreditation, Venue & Facilitation</option>
</select>
<span class="text-danger">#error('country'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="">MSSI Liaison</label>
<select class="form-control" wire:model="liaison">
<option value="" selected>Select Your Point Of Contact At MSSI</option>
<option value="United States">Miss Victoria Koomson</option>
<option value="India">Mr. Emmanuel Addo Charwetey</option>
<option value="Rwanda"></option>
<option value="Nigeria">Nigeria</option>
<option value="Phillipines">Phillipines</option>
<option value="Canada">Canada</option>
<option value="Bangladesh">Bangladesh</option>
</select>
<span class="text-danger">#error('country'){{ $message }}#enderror</span>
</div>
</div>
{{-- <div class="col-md-6">--}}
{{-- <div class="form-group">--}}
{{-- <label for="">City</label>--}}
{{-- <input type="text" class="form-control" placeholder="Enter city" wire:model="city">--}}
{{-- <span class="text-danger">#error('city'){{ $message }}#enderror</span>--}}
{{-- </div>--}}
{{-- </div>--}}
</div>
</div>
</div>
</div>
</div>
</div>
#endif
#if ($currentStep == 3)
<div class="step-three">
<div class="panel-section-card py-20 px-25 mt-20">
<div class="card-header bg-secondary text-white">STEP 3/5 - Education | Training</div>
<div class="card-body">
<div class="row">
<div class="col-12 ">
<div class="row">
<div class="col-md-12">
<div class="form-group mt-15">
<label class="input-label"> Please enter your learning objectives for this
course (a maximum of five and a
minimum
3) <br><b>- Should reflect measurable outcomes of the topic.</b></br>
</label>
<textarea id="summernote" name="description"
class="form-control #error('description') is-invalid #enderror"
placeholder="{{ trans('forms.webinar_description_placeholder') }}">{!! !empty($webinar) ? $webinar->description : old('description') !!}</textarea>
#error('description')
<div class="invalid-feedback">
{{ $message }}
</div>
#enderror
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card-body">20.
<b>Target audience (Professional roles)</b>.
<div class="frameworks d-flex flex-column align-items-left mt-2">
<label for="yes">
<input type="checkbox" id="Yes" value="" wire:model="frameworks">
Consultants
</label>
<label for="no">
<input type="checkbox" id="No" value="" wire:model="frameworks">
Training Grades
</label>
<label for="not-available">
<input type="checkbox" id="N/A" value="" wire:model="frameworks"> Other
</label>
</div>
<span class="text-danger">#error('frameworks'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-4">
<div class="card-body">20.
<b>Teaching Methods</b>.
<div class="frameworks d-flex flex-column align-items-left mt-2">
<label for="yes">
<input type="checkbox" id="Yes" value="" wire:model="frameworks"> Lectures
</label>
<label for="no">
<input type="checkbox" id="No" value="" wire:model="frameworks">
Discussion Group
</label>
<label for="not-available">
<input type="checkbox" id="N/A" value="" wire:model="frameworks"> Quizzes
MCQs
etc
</label>
</div>
<span class="text-danger">#error('frameworks'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-4">
<div class="row">
<div class="card-body">
<b>Possible Date(s)</b> of training programme.
</div>
<div class="col-md-6">
<div id="date-fields">
<label>Select Date</label>
<input type="date" class="btn btn-primary btn-sm mt-3" id="date-picker"
name="dates[]" multiple
value="{{ old('dates.*') }}">
#error('dates.*')
<div class="alert alert-danger">{{ $message }}</div>
#enderror
</div>
</div>
</div>
<div class="col-md-4">
Tap 'Add Date'
<button id="add-date-btn" type="button"
class="btn btn-primary btn-sm mt-3">Add Date
</button>
</div>
</div>
</div>
</div>
</div>
</div>
#endif
#if ($currentStep == 4)
<div class="step-four">
<div class="panel-section-card py-20 px-25 mt-20">
<div class="card-header bg-secondary text-white">STEP 4/5 - Facilitators | Speakers | Test Questions
</div>
<div class="card-body">
<div class="row">
<div class="col-md-4">
<div class="card-body">
Please upload <b>speakers’ updated Curriculum Vitae</b>. Note that the acceptable
format is PDF.
</div>
<div class="form-group">
<label for="cv"></label>
<input type="file" class="form-control" wire:model="cv">
<span class="text-danger">#error('cv'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-4">
<div class="card-body">
Please upload <b>speakers’ electronic photograph </b>. Note that the acceptable
format is PDF. <br>- Should be professionally inclined </br>
<div class="form-group">
<label for="cv"></label>
<input type="file" class="form-control" wire:model="cv">
<span class="text-danger">#error('cv'){{ $message }}#enderror</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card-body">
Please upload <b>speakers’ E-Signature or of person co-signing </b> the certificate.
Note that the
acceptable
formats are jpg and png. <br>- Lead speaker signs in the case of multiple
facilitators </br>
<div class="form-group">
<label for="cv"></label>
<input type="file" class="form-control" wire:model="cv">
<span class="text-danger">#error('cv'){{ $message }}#enderror</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="card-body">
Please upload your <b>pretest questions</b>. Note that the acceptable formats
are
Microsoft
Word & PDF. <br>- Two option answers (True/False) <b>or</b></br> <br>- Four
option
answers
(E.g. a, b, c, d or I, II, III, IV)</br>
</div>
<div class="form-group">
<label for="cv"></label>
<input type="file" class="form-control" wire:model="cv">
<span class="text-danger">#error('cv'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-6">
<div class="card-body">
Please upload your <b>post questions</b>. Note that the acceptable formats are
Microsoft
Word & PDF. <br>- Two option answers (True/False) <b>or</b></br> <br>- Four
option
answers
(E.g. a, b, c, d or I, II, III, IV)</br>
</div>
<div class="form-group">
<label for="cv"></label>
<input type="file" class="form-control" wire:model="cv">
<span class="text-danger">#error('cv'){{ $message }}#enderror</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endif
#if ($currentStep == 5)
<div class="step-five">
<div class="panel-section-card py-20 px-25 mt-20">
<div class="card-header bg-secondary text-white">STEP 5/5 - Facility | Platform</div>
<div class="row">
<div class="col-md-4">
<div class="card-body">20.
Use of our <b>conference hall</b>.
<div class="frameworks d-flex flex-column align-items-left mt-2">
<label for="yes">
<input type="checkbox" id="Yes" value="" wire:model="frameworks"> Yes
</label>
<label for="no">
<input type="checkbox" id="No" value="" wire:model="frameworks">
No
</label>
<label for="not-available">
<input type="checkbox" id="N/A" value="" wire:model="frameworks"> Not Available
</label>
</div>
<span class="text-danger">#error('frameworks'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-4">
<div class="card-body">20.
Arrangement of <b>catering services</b> .ie food, drinks etc.
<div class="frameworks d-flex flex-column align-items-left mt-2">
<label for="yes">
<input type="checkbox" id="Yes" value="" wire:model="frameworks"> Yes
</label>
<label for="no">
<input type="checkbox" id="No" value="" wire:model="frameworks">
No
</label>
<label for="not-available">
<input type="checkbox" id="N/A" value="" wire:model="frameworks"> Not Available
</label>
</div>
<span class="text-danger">#error('frameworks'){{ $message }}#enderror</span>
</div>
</div>
<div class="col-md-4">
<div class="card-body">20.
Use of our <b>online webinar platform</b>.
<div class="frameworks d-flex flex-column align-items-left mt-2">
<label for="yes">
<input type="checkbox" id="Yes" value="" wire:model="frameworks"> Yes
</label>
<label for="no">
<input type="checkbox" id="No" value="" wire:model="frameworks">
No
</label>
<label for="not-available">
<input type="checkbox" id="N/A" value="" wire:model="frameworks"> Not Available
</label>
</div>
<span class="text-danger">#error('frameworks'){{ $message }}#enderror</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card-body">20.
Use of our <b>online on-demand platform</b>.
<div class="frameworks d-flex flex-column align-items-left mt-2">
<label for="yes">
<input type="checkbox" id="Yes" value="" wire:model="frameworks"> Yes
</label>
<label for="no">
<input type="checkbox" id="No" value="" wire:model="frameworks">
No
</label>
<label for="not-available">
<input type="checkbox" id="N/A" value="" wire:model="frameworks"> Not Available
</label>
</div>
<span class="text-danger">#error('frameworks'){{ $message }}#enderror</span>
</div>
</div>
</div>
</div>
</div>
#endif
<div class="action-buttons d-flex justify-content-between bg-white pt-2 pb-2">
#if ($currentStep == 1)
<div></div>
#endif
{{----}}
#if ($currentStep == 2 || $currentStep == 3 || $currentStep == 4 || $currentStep == 5)
<button type="button" class="btn btn-md btn-secondary">Back</button>
#endif
{{----}}
#if ($currentStep == 1 || $currentStep == 2 || $currentStep == 3 || $currentStep == 4)
<button type="button" class="btn btn-md btn-success">Next</button>
#endif
#if ($currentStep == 5)
<button type="submit" class="btn btn-md btn-primary">Submit</button>
#endif
</div>
</form>

A form isn't working when showing mobile view

I'm trying to set a mobile view for my site.
In this particular case i have to show two different forms according to the width of the page (under 400px it shows the "login-form-mobile").
The form submit is handled by a js function, the problem is that the function works only on the first form (over 400px), the second one submit without checking if inputs are empty etc...
Does someone knows why?
function validaReg() {
if (document.formregistrazione.nome.value === "") {
togglediv("invalidname");
invalidForm("nome");
return false;
}
if (document.formregistrazione.email.value === "") {
togglediv("invalidemail");
invalidForm("email");
return false;
}
if (document.formregistrazione.username.value === "") {
togglediv("invalidusername");
invalidForm("username");
return false;
}
if (document.formregistrazione.password.value === "") {
togglediv("invalidpassword");
invalidForm("password");
return false;
}
if (document.formregistrazione.ripeti_password.value === "") {
togglediv("invalidrippassword");
invalidForm("ripeti_password");
return false;
}
var pw1 = document.getElementById("password");
var pw2 = document.getElementById("ripeti_password");
var id = document.getElementById("invalidrippassword");
if (pw2.value != pw1.value) {
pw2.classList.add("is-invalid");
id.style.display = 'block';
return false;
}
return true;
}
<div id="login-form" class="container-form fade-in-image">
<div class="fade-in-image col-md-12 mb-3">
<img id="logo" class="img-fluid" src="Fubles.png">
<img id="logo-mobile" class="img-fluid" src="Fubles-mobile.png">
</div>
<form class="ctr-form" style="width:50%;" method="post" name="formregistrazione" onSubmit="return validaReg();" action="checkReg.php">
<div>
<div class="row justify-content-md-center">
<div class="col-md-3 mb-3">
<label for="nome">Nome</label>
<input type="text" class="form-control" id="nome" name="inputname" placeholder="Name" onChange="retogglediv('invalidname'); retogglediv2('nome');">
<div id="invalidname" class="invalid-feedback" style="display: none;">
Inserire un nome
</div>
</div>
<div class="col-md-3 mb-3">
<label for="cognome">Email</label>
<input type="email" class="form-control" id="email" name="inputemail" placeholder="Email" onChange="retogglediv('invalidemail'); retogglediv2('email');">
<div id="invalidemail" class="invalid-feedback" style="display: none;">
Inserire una email
</div>
</div>
<div class="col-md-3 mb-3">
<label for="username">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend3">#</span>
</div>
<input type="text" class="form-control" id="username" name="inputusername" placeholder="Username" aria-describedby="inputGroupPrepend3" onChange="retogglediv('invalidusername'); retogglediv2('username');">
<div id="invalidusername" class="invalid-feedback" style="display: none;">
Scegli un username
</div>
</div>
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-3 mb-3">
<label for="stato">Password</label>
<input type="password" class="form-control" id="password" name="inputpassword" placeholder="Password" onChange="retogglediv('invalidpassword'); retogglediv2('password');">
<div id="invalidpassword" class="invalid-feedback" style="display: none;">
Scegli una password
</div>
</div>
<div class="col-md-3 mb-3">
<label for="cap">Ripeti password</label>
<input type="password" class="form-control" id="ripeti_password" placeholder="Password" onChange="retogglediv('invalidrippassword'); retogglediv2('ripeti_password');">
<div id="invalidrippassword" class="invalid-feedback" style="display: none;">
La password deve corrispondere!
</div>
</div>
<div class="col-md-2 mb-3">
<div class="custom-control custom-radio">
<input type="radio" id="male" name="sex" value="M" class="custom-control-input" checked>
<label class="custom-control-label" for="male">Uomo</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="female" name="sex" value="F" class="custom-control-input">
<label class="custom-control-label" for="female">Donna</label>
</div>
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-3 mb-3">
<button class="btn btn-signup justify-content-md-center" name="submit" type="submit">Registrati</button>
</div>
</div>
</div>
</form>
</div>
<div style="overflow-y: scroll; margin-top: 5%;" id="login-form-mobile" class="container-form fade-in-image">
<div class="fade-in-image col-md-12 mb-3">
<img id="logo" class="img-fluid" src="Fubles.png">
<img id="logo-mobile" class="img-fluid" src="Fubles-mobile.png">
</div>
<form method="post" name="formregistrazione" onSubmit="return validaReg();" action="checkReg.php">
<div>
<div class="row justify-content-md-center">
<div class="col-md-3 mb-3">
<label for="nome">Nome</label>
<input type="text" class="form-control" id="nome" name="inputname" placeholder="Name" onChange="retogglediv('invalidname'); retogglediv2('nome');">
<div id="invalidname" class="invalid-feedback" style="display: none;">
Inserire un nome
</div>
</div>
<div class="col-md-3 mb-3">
<label for="cognome">Email</label>
<input type="email" class="form-control" id="email" name="inputemail" placeholder="Email" onChange="retogglediv('invalidemail'); retogglediv2('email');">
<div id="invalidemail" class="invalid-feedback" style="display: none;">
Inserire una email
</div>
</div>
<div class="col-md-3 mb-3">
<label for="username">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend3">#</span>
</div>
<input type="text" class="form-control" id="username" name="inputusername" placeholder="Username" aria-describedby="inputGroupPrepend3" onChange="retogglediv('invalidusername'); retogglediv2('username');">
<div id="invalidusername" class="invalid-feedback" style="display: none;">
Scegli un username
</div>
</div>
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-3 mb-3">
<label for="stato">Password</label>
<input type="password" class="form-control" id="password" name="inputpassword" placeholder="Password" onChange="retogglediv('invalidpassword'); retogglediv2('password');">
<div id="invalidpassword" class="invalid-feedback" style="display: none;">
Scegli una password
</div>
</div>
<div class="col-md-3 mb-3">
<label for="cap">Ripeti password</label>
<input type="password" class="form-control" id="ripeti_password" placeholder="Password" onChange="retogglediv('invalidrippassword'); retogglediv2('ripeti_password');">
<div id="invalidrippassword" class="invalid-feedback" style="display: none;">
La password deve corrispondere!
</div>
</div>
<div class="col-md-2 mb-3">
<div class="custom-control custom-radio">
<input type="radio" id="male" name="sex" value="M" class="custom-control-input" checked>
<label class="custom-control-label" for="male">Uomo</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="female" name="sex" value="F" class="custom-control-input">
<label class="custom-control-label" for="female">Donna</label>
</div>
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-3 mb-3">
<button class="btn btn-signup justify-content-md-center" name="submit" type="submit">Registrati</button>
</div>
</div>
</div>
</form>
</div>

Your form is not working because you have a bug in the lines that start with document.formregistrazione. You are trying to read a value from undefined. Instead you can access your field value like this document.formregistrazione["0"]["0"].value.
Note: if you are trying to test the second form replace document.formregistrazione["0"]["0"].value by document.formregistrazione["1"]["0"].value! (Replace the first "0" by "1")
function validaReg() {
console.log(document.formregistrazione);
if (document.formregistrazione["0"]["0"].value === "") {
togglediv("invalidname");
invalidForm("nome");
return false;
}
if (document.formregistrazione["0"]["1"].value === "") {
togglediv("invalidemail");
invalidForm("email");
return false;
}
if (document.formregistrazione["0"]["2"].value === "") {
togglediv("invalidusername");
invalidForm("username");
return false;
}
if (document.formregistrazione["0"]["3"].value === "") {
togglediv("invalidpassword");
invalidForm("password");
return false;
}
if (document.formregistrazione["0"]["4"].value === "") {
togglediv("invalidrippassword");
invalidForm("ripeti_password");
return false;
}
var pw1 = document.getElementById("password");
var pw2 = document.getElementById("ripeti_password");
var id = document.getElementById("invalidrippassword");
if (pw2.value != pw1.value) {
pw2.classList.add("is-invalid");
id.style.display = 'block';
return false;
}
return true;
}

How to implement radio button check in JSP JavaScript?

I have created a web application (i.e. an Ecommerce site). Here I have implemented a radio button where I am selecting one from two options. When I select any of them, then other elements should be visible. For example: I have a time slot option. When I click on multi option (from radio button check) then there are 5 or 6 more options should be displayed. And when I select uni option (from radio button check) then there are 1 option should be visible. I have done with that part. I got stuck where I need to send all those parameters to my servlet controller.
I want when multi option selected then only those 5 or 6 parameters should be sent when forms submitted. Below code is to show and hide div for selected radio button. I am facing problem when I select uni option, then I am getting as message - some parameters missing.
function selectoption(id){
if(id == 'multitime'){
document.getElementById('multidiv').style.display= 'contents';
document.getElementById('unidiv').style.display = 'none';
}else{
document.getElementById('unidiv').style.display = 'contents';
document.getElementById('multidiv').style.display = 'none';
}
}
Below code is to submit all data of form and send to controller of springboot.
function setpincode(){
var pincode = document.getElementById('pincode').value;
var delivercityid = document.getElementById('deliverycityid').value;
var status = "";
if(document.getElementById('activestatus').checked){
status = document.getElementById('activestatus').value;
}else{
status = document.getElementById('inactivestatus').value;
}
var timeslot = "";
if(document.getElementById('multitime').checked){
timeslot = document.getElementById('multitime').value;
}else{
timeslot = document.getElementById('unitime').value;
}
var nightservice = "";
if(document.getElementById('multinightservice').checked){
nightservice = document.getElementById('multinightservice').value;
}else{
nightservice = document.getElementById('uninightservice').value;
}
var midnightcharge = document.getElementById('midnightcharge').value;
var morningservice = "";
if(document.getElementById('activeservice').checked){
morningservice = document.getElementById('activeservice').value;
}else{
morningservice = document.getElementById('inactiveservice').value;
}
var earlymorningcharge=document.getElementById('morningcharge').value;
var fixedtimeservice = "";
if(document.getElementById('afixedtimeservice').checked){
fixedtimeservice=document.getElementById('afixedtimeservice').value;
}else{
fixedtimeservice=document.getElementById('inacfixedtimeservice').value;
}
var fixedcharge = document.getElementById('fixedcharge').value;
var fixedtimeslot = document.getElementById('fixedtimeslot').value;
var deliverycharge = document.getElementById('deliverycharge').value;
var deliveryslot = document.getElementById('deliveryslot').value;
var unitimeslot = document.getElementById('unitimeslot').value;
var deliverytime = document.getElementById('deliverytime').value;
document.getElementById('addpincodeform').submit();
}
Below is my HTML code:
<form action="addpincode" method="post" id="addpincodeform"
name="addpincodeform" enctype="multipart/form-data">
<div class="floating-form">
<div class="row">
<div class="col-md-6 col-12 mt-4">
<div class="floating-label">
<input class="floating-input" type="text" name="pincode"
id="pincode" placeholder=" ">
<span class="highlight"></span>
<label>Pin Code</label>
</div>
</div>
<div class="col-md-6 col-12 mt-4">
<div class="floating-label">
<input class="floating-input" type="text" name="city"
id="city" placeholder=" ">
<span class="highlight"></span>
<label>City</label>
</div>
</div>
<div class="col-md-6 col-12 mb-4">
<div class="row">
<div class="col-md-6 col-12">
<h6>Status</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="status" id="activestatus" value="1">Active
</div>
<div class="col-md-3 col-12">
<input type="radio" name="status" id="inactivestatus" value="0">
InActive
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="row">
<div class="col-md-6 col-12">
<h6>Time Slot</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="timeslot" id="multitime" value="multi"
onchange="selectoption('multitime')">Multi
</div>
<div class="col-md-3 col-12">
<input type="radio" name="timeslot" id="unitime" value="uni"
onchange="selectoption('unitime')">Uni
</div>
</div>
</div>
<div style="display:none;" id="multidiv">
<div class="col-md-6 col-12 mb-2">
<div class="row">
<div class="col-md-6 col-12">
<h6>Mid Night Service</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="nightservice" id="multinightservice"
value="yes">Yes
</div>
<div class="col-md-3 col-12">
<input type="radio" name="nightservice" id="uninightservice"
value="no">No
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="floating-label">
<input class="floating-input" type="text" name="midnightcharge"
id="midnightcharge" placeholder=" ">
<span class="highlight"></span>
<label>Mid Night Charge</label>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="row">
<div class="col-md-6 col-12">
<h6>Early Morning Service</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="morningservice" id="activeservice"
value="yes">Yes
</div>
<div class="col-md-3 col-12">
<input type="radio" name="morningservice" id="inactiveservice"
value="no"> No
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="floating-label">
<input class="floating-input" type="text" name="earlymorningcharge"
id="morningcharge" placeholder=" ">
<span class="highlight"></span>
<label>Early Morning Charge</label>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="row">
<div class="col-md-6 col-12">
<h6>Fixed Time Service</h6>
</div>
<div class="col-md-3 col-12">
<input type="radio" name="fixedtimeservice" id="afixedtimeservice"
value="yes">Yes
</div>
<div class="col-md-3 col-12">
<input type="radio" name="fixedtimeservice" id="inacfixedtimeservice"
value="no"> No
</div>
</div>
</div>
<div class="col-md-6 col-12 mb-2">
<div class="floating-label">
<input class="floating-input" type="text" name="fixedcharge"
id="fixedcharge" placeholder=" ">
<span class="highlight"></span>
<label>Fixed Charge</label>
</div>
</div>
<div class="col-md-6 col-12">
<div class="floating-label">
<input class="floating-input" type="text" name="deliverycharge"
id="deliverycharge" placeholder=" ">
<span class="highlight"></span>
<label>Standard Delivery Charge</label>
</div>
</div>
<div style="display:none;" id="unidiv">
<div class="col-md-6 col-12">
<div class="floating-label">
<input class="floating-input" type="text" name="unitimeslot"
id="unitimeslot" placeholder=" ">
<span class="highlight"></span>
<label>Uni Time Slot</label>
</div>
</div>
</div>
<div class="col-md-6 col-12">
<div class="floating-label">
<input class="floating-input" type="text" name="deliverytime"
id="deliverytime" placeholder=" ">
<span class="highlight"></span>
<label>Last Delivery Time</label>
</div>
</div>
<div class="col-12 mt-4">
<button type="button" class="btn btn-outline-danger px-5"
onclick="setpincode()">Save</button>
</div>
</div>
</div>
</form>

Cannot read property 'value' of null in contrast checker

The only thing that I changed in my code was that I changed the IDs e.g. previewContrast to preview_contrast and I get a Property value null error.
The error shows for the line "var color = colorObjekt.value.replace("#", "");
I would be grateful if someone could find the error in this code.
var textColorContrast = getColor('txtColor');
var bgColorContrast = getColor('bgColor');
var lumi1 = getLumi(textColorContrast);
var lumi2 = getLumi(bgColorContrast);
if (lumi1 !== false && lumi2 !== false) {
txtColor.style.color = '#'+textColorContrast;
bgColor.style.backgroundColor = '#'+bgColorContrast;
var ratio = (Math.max(lumi1, lumi2) + 0.05) / (Math.min(lumi1, lumi2) + 0.05);
contrastText.innerHTML = (Math.round(ratio * 100) / 100) + ':1';
}
function getColor(location) {
var colorObjekt = document.getElementById(location);
var color = colorObjekt.value.replace("#", "");
return color;
}`
Here is the html
<div class="tab-content container-fluid" id="navi_content" role="main">
<div class="tab-pane fade show active" id="post" role="tabpanel" aria-labelledby="post-tab">
<div class="row" role="row">
<h2 role="heading" class="col-10">Input</h2>
<div class="col-2" role="gridcell">
<button type="button" class="btn btn-lg btn-outline-secondary fas fa-info" role="button"
data-toggle="popover" title="Info" data-trigger="focus"
data-content="On this page you can enter a text to display on the LED Scroll Board. You can also change the background and text color as well as the speed and brightness settings in the Settings modal. By selecting the Date or Clock Mode you can post the current date or time on to the board"
data-placement="bottom"></button>
<button type="button" class="btn btn-lg btn-outline-secondary fas fa-cogs" role="button" data-toggle="modal"
title="Settings" data-target="#settings"></button>
</div>
</div>
<form class="text__form" id="form">
<div class="form-row" role="row">
<div class="form-group col-10" role="gridcell">
<label class="text__label" for="text__input" id="input_label">
Your message:
</label>
<input type="text" class="form-control text__input-text" id="text_input"
placeholder="Text input here... :)" role="textbox" aria-required="true" aria-labelledby="input_abel" required>
<p class="text__counter">150 characters left...</p>
</div>
<div class="col-2 text__colorpicker" role="gridcell">
<div class="form-group" role="gridcell">
<label class="text__label" for="text_color" id="text_color_label">Text Color</label>
<input class="text__input-color" type="color" name="textcolor" id="text_color" value="#ff0000"
aria-labelledby="text_color_label">
</div>
</div>
</div>
<div class="card" role="none">
<div class="card-body" role="group">
<h3 class="card-header" role="heading">Modes</h3>
<fieldset class="form-check" id="color_radios">
<legend class="col-form-label text__card-label" id="modes_legend">
Color Modes
</legend>
<div class="row" role="row">
<div class="form-check form-group col-sm-6" role="form">
<input class="form-check-input text__input-radio" type="radio" name="colorMode"
id="rainbow_mode" value="1" role="radio" aria-labelledby="rainbow_label">
<label for="rainbow_mode" class="form-check-label text__card-label" id="rainbow_label">Rainbow
Mode</label>
</div>
<div class="form-check form-group col-sm-6" role="form">
<input class="form-check-input text__input-radio" type="radio" name="colorMode" id="solid_mode"
value="0" role="radio" aria-labelledby="solid_mode_label" aria-checked="true" checked>
<label for="solid_mode" class="form-check-label text__card-label" id="solid_mode_label">Solid
Mode</label>
<div class="form-group" role="form">
<label for="bg_color" id="bg_color_label" aria-label="Background Color"> Color</label>
<input type="color" name="bgColor" id="bg_color" value="#ABCDEF" aria-labelledby="bg_color_label">
</div>
</div>
</div>
</fieldset>

Selecting Checkboxes Based on Value and Parent ID

I'm using Tampermonkey to check checkboxes. The way it's laid out is there's multiple 'Items', each with the same set of checkboxes. I'm trying to have the checkbox pre-selected based on a combination of the checkbox value and the ID (or even title, if that's more ideal).
Currently if I use the below, it will select the checkbox but it will do so for Item 1, Item 2, Item 3 and so on when I need to select different options for each. I'm trying to figure out how I go about narrowing the selection based on the ID (122) or even the title (Item 1)?
$("input:checkbox[value='See Notes']").attr("checked", true);
This is what my HTML looks like for each item:
<div class="field tabular">
<span class="item-data">{"Id":"122"}</span>
<div class="field-content">
<div class="title" title="Item 1">Item 1</div>
<div class="data">
<div class="errors"></div>
<div class="control">
<div class="option">
<input id="checkbox_3668-1523196351429_option0" type="checkbox" value="Checked & Okay">
<label for="checkbox_3668-1523196351429_option0">Checked & Okay</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option1" type="checkbox" value="Repair Required">
<label for="checkbox_3668-1523196351429_option1">Repair Required</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option2" type="checkbox" value="See Notes">
<label for="checkbox_3668-1523196351429_option2">See Notes</label>
</div>
<!-- Etc... -->

You can do something like:
$('[title="Item 1"]') //Select elemements with attribute title="Item 1"
.next() //Select the next element, which is div with class .data
.find("input:checkbox[value='" + value + "']") //Find checkbox with the value
.prop("checked", true); //Set the prop checked to true
Here is a snippet:
var item = 'Item 1';
var value = 'See Notes';
$('[title="' + item + '"]').next().find("input:checkbox[value='" + value + "']").prop("checked", true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field tabular">
<span class="item-data">{"Id":"122"}</span>
<div class="field-content">
<div class="title" title="Item 1">Item 1</div>
<div class="data">
<div class="errors"></div>
<div class="control">
<div class="option">
<input id="checkbox_3668-1523196351429_option0" type="checkbox" value="Checked & Okay">
<label for="checkbox_3668-1523196351429_option0">Checked & Okay</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option1" type="checkbox" value="Repair Required">
<label for="checkbox_3668-1523196351429_option1">Repair Required</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option2" type="checkbox" value="See Notes">
<label for="checkbox_3668-1523196351429_option2">See Notes</label>
</div>
</div>
</div>
</div>
</div>
<br />
<br />
<div class="field tabular">
<span class="item-data">{"Id":"123"}</span>
<div class="field-content">
<div class="title" title="Item 2">Item 2</div>
<div class="data">
<div class="errors"></div>
<div class="control">
<div class="option">
<input id="checkbox_3668-1523196351429_option0" type="checkbox" value="Checked & Okay">
<label for="checkbox_3668-1523196351429_option0">Checked & Okay</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option1" type="checkbox" value="Repair Required">
<label for="checkbox_3668-1523196351429_option1">Repair Required</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option2" type="checkbox" value="See Notes">
<label for="checkbox_3668-1523196351429_option2">See Notes</label>
</div>
</div>
</div>
</div>
</div>