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;
}
Related
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>
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>
I have successfully integrated dropzone with my form using jquery. However, I have an issue with validation of the other form inputs. It seems the other form inputs do not respect the validation such as "required". I also tried using parsley for validation but does not work. when I remove the dropzone field, the validation works well.
Here is the form.
<form class="form-vertical"
id="createPropertyForm"
enctype="multipart/form-data"
method="POST"
>
<div class="col-md-12 col-lg-12 col-sm-12" >
<div class="col-md-6">
<div class="form-group">
<label class=" control-
label">Country</label>
<div class="inputGroupContainer">
<input id="country"
name="country" placeholder="Country" class="form-control" required
value="" type="text">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-
label">County</label>
<div
class="inputGroupContainer">
<input id="county"
name="county" placeholder="County" class="form-control" required value=""
type="text">
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12" >
<div class="col-md-6">
<div class="form-group">
<label class=" control-
label">Town</label>
<div class=" inputGroupContainer">
<input id="town" name="town"
placeholder="Town" class="form-control" required value="" type="text">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-
label">Postcode</label>
<div class="inputGroupContainer">
<input id="postcode"
name="postcode" placeholder="Postcode" class="form-control" required
value=""
type="text">
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12" >
<div class="col-md-6">
<div class="form-group">
<label class=" control-
label">Description</label>
<div class=" inputGroupContainer">
<textarea id="description"
name="description" placeholder="Description" class="form-control"
required="true" value="" type="text"></textarea>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-
label">Address</label>
<div class="inputGroupContainer">
<input id="address" name="address"
placeholder="Address" class="form-control" required value="" type="text">
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12" >
<div class="col-md-6">
<div class="form-group">
<label class=" control-
label">Bedrooms</label>
<div class=" inputGroupContainer">
<select class=" form-control"
name="bedrooms" id="bedrooms" required>
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label
">Bathrooms</label>
<div class=" inputGroupContainer">
<select
class="selectpicker bathrooms form-control" name="bathrooms"
id="bathrooms"
required>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12" >
<div class="col-md-6">
<div class="form-group">
<label class=" control-
label">Price</label>
<div class="inputGroupContainer">
<input id="price" name="price"
placeholder="Price" class="form-control" required value="" type="number">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-
label">Property Type</label>
<div class=" inputGroupContainer">
<select
class="selectpicker form-control" name="propertyType" id="propertyType">
<option
value="">Choose type</option>
<?php
foreach
($propertyTypes as $propertyType) {
?>
<option value="<?=
$propertyType->id ?>"><?= $propertyType->title ?></option>
<?php
}
?>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12" >
<div class="col-md-6">
<div class="form-group">
<label class=" control-
label">Type</label>
<div class="col-md-12">
<div class="col-md-6 ">
<label><input type="radio"
name="type" class="form-control type" required>Sale</label>
</div>
<div class="col-md-6">
<label><input type="radio"
name="type" class="form-control type" required>Rent</label>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-
label">Upload Image</label>
<div class=" inputGroupContainer">
<div class="dropzone"
id="create-dropzone" >
<div class="fallback">
<input name="file"
type="file" required/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="dropzone-previews"></div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<button class="btn btn-success btn-lg"
type="submit" id="submitCreateForm"> Submit </button>
</div>
</form>.
Here is the jquery code:
// Parsley for form validation
$('#createPropertyForm').parsley();
$('#editPropertyForm').parsley();
Dropzone.options.createDropzone = {
url: `${baseUrl}administrator/properties`,
autoProcessQueue: false,
parallelUploads: 1,
maxFiles: 1,
maxFileSize:2048,
uploadMultiple: false,
acceptedFiles: "image/*",
init: function () {
var submitButton = document.querySelector("#submitCreateForm");
var wrapperThis = this;
submitButton.addEventListener("click", function (e) {
e.preventDefault();
if (wrapperThis.files.length) {
wrapperThis.processQueue();
} else {
wrapperThis.submit();
}
});
this.on("addedfile", function (file) {
var removeButton = Dropzone.createElement("<button class='btn btn-block btn-danger'><i class='fa-times fa'></button>");
removeButton.addEventListener("click", function (e) {
e.preventDefault();
e.stopPropagation();
wrapperThis.removeFile(file);
});
file.previewElement.appendChild(removeButton);
});
this.on('sending', function (data, xhr, formData) {
formData.append("country", $("#country").val());
formData.append("county", $("#county").val());
formData.append("town", $("#town").val());
formData.append("postcode", $("#postcode").val());
formData.append("description", $("#description").val());
formData.append("address", $("#address").val());
formData.append("bathrooms", $("#bathrooms").val());
formData.append("price", $("#price").val());
formData.append("bedrooms", $("#bedrooms").val());
formData.append("propertyTypeId", $("#propertyType").val());
formData.append("type", $(".type").val());
});
this.on('success', function (files, response) {
toastr.success(response.message);
setTimeout(function () {
location.reload();
}, 1000);
});
this.on('error', function (file, error, xhr) {
file.status = 'queued';
if (xhr.status === 422){
toastr.error('An error occurred, please confirm that you have filled all inputs and try again');
}else{
toastr.error('An error occurred');
}
});
this.on("maxfilesexceeded", function(file) {
wrapperThis.removeFile(file);
});
}
};
Here i did form validation ,after form validation all fields filled and click the INVITE QUOTES button means i want show modal, and i want to fill the modal form after filled all field means i want to close that modal,but dont want to refresh the page,Here i click INVITE QUOTES button means page is refreshing and modal is not showing how can do this?
<script>
/*$('#businessForm').submit(function (e) {
e.preventDefault();
validateForm();
});*/
function validateForm() {
var ratesfor = document.forms["myForm"]["ratesfor"].value;
if (ratesfor == null || ratesfor == "") {
document.getElementById("rate_err").innerHTML = "Field is empty";
}
var no = document.forms["myForm"]["no"].value;
if (no == null || no == "") {
document.getElementById("no_err").innerHTML = "Field is empty";
}
var breath = document.forms["myForm"]["breath"].value;
if (breath == null || breath == "") {
document.getElementById("b_t_err").innerHTML = "Field is empty";
}
var height = document.forms["myForm"]["height"].value;
if (height == null || height == "") {
document.getElementById("height_err").innerHTML = "Field is empty";
}
var truck_type = document.forms["myForm"]["truck_type"].value;
if (truck_type == null || truck_type == "") {
document.getElementById("truck_type_err").innerHTML = "Field is empty";
}
var datepicker = document.forms["myForm"]["datepicker-13"].value;
if (datepicker == null || datepicker == "") {
document.getElementById("pickup_err").innerHTML = "Field is empty";
}
var myTime = document.forms["myForm"]["myTime"].value;
if (myTime == null || myTime == "") {
document.getElementById("time_err").innerHTML = "Field is empty";
}
var from = document.forms["myForm"]["from"].value;
if (from == null || from == "") {
document.getElementById("from_err").innerHTML = "Field is empty";
}
var to = document.forms["myForm"]["to"].value;
if (to == null || to == "") {
document.getElementById("to_err").innerHTML = "Field is empty";
return false;
}
else{
$('#businessForm').submit(function (e) {
e.preventDefault();
})
$.ajax({
url:'search_truck.php',
type:'POST',
data : { 'state_id' : city},
success:function(data){
//var res=jQuery.parseJSON(data);// convert the json
console.log(data);
},
});
}
}
</script>
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal();
});
});
$(document).ready(function(){
$("#Register").click(function(){
$("#myModal").hide();
$("#myModal_Register").modal();
});
});
</script>
<form id="businessForm" method="POST" onsubmit="return validateForm()" name="myForm" enctype="multipart/form-data">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="experience">Rates For</label>
<input type="ratesfor" class="form-control" id="ratesfor" name="ratesfor" placeholder="weight(kg)">
<span id="rate_err"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="length">Length</label>
<input type="text" class="form-control" id="no" name="no" placeholder="Length"><span id="no_err"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="length"> </label>
<select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" name="length" id="length" style="margin-top:25px;">
<option value="">feet</option>
<option value="">mm</option>
<option value="">mtr</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="breadth">Breadth</label>
<input type="text" class="form-control" id="breath" name="breath" placeholder="Breadth"><span id="b_t_err"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="breadth"> </label>
<select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" name="b_type" id="b_type" style="margin-top:25px;">
<option value="">feet</option>
<option value="">mm</option>
<option value="">mtr</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="height">Height</label>
<input type="text" class="form-control" id="height" name="height" placeholder="Height"><span id="height_err"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="height"> </label>
<select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" name="type" id="h_t" name="h_t" style="margin-top:25px;">
<option value="">feet</option>
<option value="">mm</option>
<option value="">mtr</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="experience">Type Of Truck</label>
<select id="truck_type" name="truck_type" autocomplete="off" class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12">
<option value="feet">feet</option>
<option value="mm">mm</option>
<option value="mtr">mtr</option>
</select><span id="truck_type_err"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="date">Date of PickUp</label>
<br>
<input type="text" placeholder="DD-MM-YY" id="datepicker-13" name="datepicker-13" style="width:100%;height:35px;">
<span id="pickup_err"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="time">Time of PickUp</label>
<br>
<input type="time" class="form-control" id="myTime" name="myTime" placeholder="Time">
<span id="time_err"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="experience">Destination</label>
<select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" id="from" name="from">
<option value="">From</option>
<option value="1">Ahmedabad</option>
<option value="2">Bangalore</option>
</select>
</div>
<span id="from_err"></span>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="experience"> </label>
<select class="form-control form-design col-lg-6 col-md-6 col-sm-12 col-xs-12" autocomplete="off" name="to" id="to" style="margin-top:25px;">
<option value="">To</option>
<option value="1">Guragon</option>
<option value="2">Hyderabad</option>
</select>
</div>
<span id="to_err"></span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg btn-block">INVITE QUOTES</button>
</div>
</div>
</div>
</form>
<div class="container">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" style="z-index: 9999;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:5px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>Login</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<div class="form-group">
<label for="usrname">Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter Name">
</div>
<div class="form-group">
<label for="psw"> Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-info btn-block">Login </button>
</form>
</div>
<div class="modal-footer">
<p>Not a member? <b>Sign Up</b>
</p>
<!--<p>Forgot Password?</p>-->
</div>
</div>
</div>
</div>
<!--######
Login From End
#######--->
<!--#####
Register From Start
#####--->
<div class="modal fade" id="myModal_Register" role="dialog">
<div class="modal-dialog" style="z-index: 9999;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:5px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>Registration</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<div class="form-group">
<label for="usrname"> Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw">Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="form-group">
<label for="psw"> Confirm Password</label>
<input type="text" class="form-control" id="psw" placeholder="Confirm password">
</div>
<button type="submit" class="btn btn-info btn-block">Submit</button>
</form>
</div>
<!-- <div class="modal-footer">
<p>Not a member? Sign Up</p>
<p>Forgot Password?</p>
</div>-->
</div>
</div>
</div>
</div>
Bro check this line:
<button type="submit" class="btn btn-primary btn-lg btn-block">INVITE QUOTES</button>
here you are using button type submit, submit button will submit the form and reloads the page. Instead use:
<button type="button" class="btn btn-primary btn-lg btn-block">INVITE QUOTES</button>
I'm submitting a form through JQuery by using the form.serialize method. But that same form has an array of checkboxes, which is dynamically genetrated by a PHP function
This is the form:
<form class="form" id="formNewClient" role="form">
<ul class="nav nav-tabs">
<li class="active"><i class="fa fa-user"></i> Dados Cliente</li>
<li><i class="fa fa-phone"></i> Dados Phonepark</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="clientdata">
<div class="row">
<div class="col-md-12">
<div class="page-header"><h3>Dados Pessoais</h3></div>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<label for="name">Nome Completo:*</label>
<input type="text" name="clientName" class="form-control" placeholder="Nome Completo do Utilizador">
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<label for="email">Email:</label>
<input type="text" name="clientEmail" class="form-control" placeholder="Email Utilizador">
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<label for="addressone">Morada:</label>
<input type="text" name="clientAddressone" class="form-control" placeholder="Morada do Utilizador">
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="address2">Morada (cont.):</label>
<input type="text" name="clientAddresstwo" class="form-control" placeholder="Morada do Utilizador (cont.)">
</div>
<div class="form-group col-md-3">
<label for="postalcode">Código Postal:</label>
<input type="text" name="clientCPostal" class="form-control" placeholder="Código Postal">
</div>
<div class="form-group col-md-3">
<label for="city">Localidade:</label>
<input type="text" name="clientCity" class="form-control" placeholder="Localidade">
</div>
</div>
<div class="row">
<div class="form-group col-md-4">
<label for="clientNif">NIF</label>
<input type="text" name="clientNif" class="form-control " placeholder="NIF">
</div>
<div class="form-group col-md-4">
<label for="clientBirthdate">Data de Nascimento</label>
<div class="form-group">
<div class='input-group date' id='inputendDate' data-date-format="YYYY/MM/DD">
<input type='text' name="clientBirthdate" class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</div>
</div>
</div>
<div class="form-group col-md-4">
<label for="sex">Sexo:</label>
<br>
<label class="radio-inline">
<input type="radio" name="optionsRadioSex" value="M">
Masculino
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadioSex" value="F">
Feminino
</label>
</div>
</div>
</div>
<!--END CLIENTDATA-->
<div class="tab-pane" id="phoneparkdata">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h3>Dados Phonepark</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12"><h4>Documentos:</h4></div>
<div class="form-group col-md-4">
<label for="document">Tipo de Documento:</label>
<select name="documenttype" class="form-control">
<?php selectListDocuments();?>
</select>
</div>
<div class="form-group col-md-4">
<label for="documentNumber">Número do Documento:*</label>
<input type="text" name="documentNumber" class="form-control">
</div>
<div class="form-group col-md-4">
<label for="documentNumber">Número do Documento (Secundário):</label>
<input type="text" name="documentNumberSec" class="form-control">
</div>
</div>
<div class="row">
<div class="col-md-12"><h4>Comunicações:</h4></div>
<div class="form-group col-md-4">
<label for="phone1">Telemóvel:*</label>
<input type="text" name="clientPhonePri" class="form-control">
</div>
<div class="form-group col-md-4">
<label for="phone2">Telemóvel Secundário:</label>
<input type="text" name="clientPhoneSec" class="form-control">
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<h4>Perfil:</h4>
<label for="profile">Perfil(s) a utilizar:*</label>
<?php
profileCheckBoxes();
?>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="activationDate">Data de Activação:</label>
<div class="form-group">
<div class='input-group date' id='inputactivationDate' data-date-format="YYYY/MM/DD hh:mm">
<input type='text' name="clientActivationTime" class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</div>
</div>
</div>
<div class="form-group col-md-6">
<label for="limitDate">Data de Limite:</label>
<div class="form-group">
<div class='input-group date' id='inputendDate' data-date-format="YYYY/MM/DD hh:mm">
<input type='text' name="clientDeactivationTime" class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span>
</div>
</div>
</div>
</div>
</div>
<!--END PHONEPARKDATA-->
</div>
<!--END TAB-CONTENT-->
<div class="row">
<div class="col-md-4 col-lg-4 pull-right">
<button type="submit" class="btn btn-success" name="submitNewClient" id="submitNewClient"><i class="fa fa-plus"></i> Adicionar Cliente</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Cancelar</button>
</div>
</div>
</form>
And this is the php function that generates the checkboxes:
function profileCheckBoxes(){
$queryListProfiles = "SELECT * FROM perfil";
$listProfiles = mysqli_query($GLOBALS['dbc'],$queryListProfiles);
$numProfiles = mysqli_num_rows($listProfiles);
if($numProfiles !=""){
while($row = mysqli_fetch_array($listProfiles)){
?>
<label class="checkbox-inline">
<input type="checkbox" value="<?php echo $row['id']?>" name="profiles[]">
<?php echo $row['Nome']; ?>
</label>
<?php
}
}
}
How can I submit the form with form.serialize in Jquery and in the PHP side process the checkbox so I can extract the values from the checkbox array?
This jQuery documentation page explains how to use the serialize function:
http://api.jquery.com/serialize/
If you then pass the output to your php page using POST, in the PHP script the checked values will be stored in $_POST['profiles'] as an array. So to loop through the values of the checked boxes you could use:
foreach ($_POST['profiles'] as $profile) {
//process code here
}
jQuery's form.serialize only pass checksboxes that are checked.
if you want all your checkboxes to get passed to your server consider to generate also hidden inputs to store those values.
I would also change the checkboxes name to "profiles"