So I have the following form here
{{> header}}
<div class="container">
<form action="/dashboard/users/forms/competition-form/{{user.id}}" method="post" class="competitionformlockdown">
<h2>School Competition Form</h2>
<p>
<b>All fields with <span style="color: red">*</span> are required</b>
</p>
<div class="panel panel-default">
<div class="panel-heading">
General Information
</div>
<div class="panel-body">
<div class="row">
<div class="form-group col-md-12">
<label for="schoolName">
School Name <span style="color: red">*</span>
</label>
<input type="text" class="form-control" name="schoolName" placeholder="Enter school name" value="{{competitions.schoolName}}" required>
</div>
<div class="form-group col-md-6 date" data-provide="datepicker">
<label for="competitionDate">
Competition Date <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionDate" name="competitionDate" placeholder="Enter the date of competition" value="{{competitions.competitionDate}}" required>
</div>
<div class="form-group col-md-6">
<label for="competitionTime">
Time <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionTime" name="competitionTime" placeholder="Enter the time of the competition (e.g. 8:00 AM)" value="{{competitions.competitionTime}}" required>
</div>
<div class="form-group col-md-12">
<label for="competitionVenue">
Venue <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionVenue" name="competitionVenue" placeholder="Enter where the competition was held" value="{{competitions.competitionVenue}}" required>
</div>
<div class="form-group col-md-6">
<label for="competitionTotalOfStudents">
Total number of students in the program <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionTotalOfStudents" name="competitionTotalOfStudents" placeholder="Enter the total number" value="{{competitions.competitionTotalOfStudents}}" required>
</div>
<div class="form-group col-md-6">
<label for="competitionTotalParticipated">
Total number of students that participated <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionTotalParticipated" name="competitionTotalParticipated" placeholder="Enter the total number" value="{{competitions.competitionTotalParticipated}}" required>
</div>
<div class="form-group col-md-6">
<label for="competitionTotalPersonnel">
Total number of school personnel involved in the program <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionTotalPersonnel" name="competitionTotalPersonnel" placeholder="Enter the total number" value="{{competitions.competitionTotalPersonnel}}" required>
</div>
</div><!-- row ends -->
</div><!-- End of panel body -->
</div><!-- School Information panel ends -->
<!-- Judge 1 Info -->
<div class="panel panel-default">
<div class="panel-heading">
Judge 1
</div>
<div class="panel-body">
<div class="row">
<div class="form-group col-md-12">
<label for="competitionJudge1Name">
Judge's Name <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionJudge1Name" name="competitionJudge1Name" placeholder="Enter the Judge's Name" value="{{competitions.competitionJudge1Name}}" required>
</div>
<div class="form-group col-md-6">
<label for="competitionJudge1Telephone">
Telephone <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionJudge1Telephone" name="competitionJudge1Telephone" placeholder="Enter the Judge's Telephone Number" value="{{competitions.competitionJudge1Telephone}}" required>
</div>
<div class="form-group col-md-6">
<label for="competitionJudge1Email">
Email address <span style="color: red">*</span>
</label>
<input type="email" class="form-control" id="competitionJudge1Email" name="competitionJudge1Email" placeholder="judge#example.com" value="{{competitions.competitionJudge1Email}}" required>
</div>
</div>
</div><!-- end of row -->
</div>
<!-- Judge 2 Info -->
<div class="panel panel-default">
<div class="panel-heading">
Judge 2
</div>
<div class="panel-body">
<div class="row">
<div class="form-group col-md-12">
<label for="competitionJudge2Name">
Judge's Name <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionJudge2Name" name="competitionJudge2Name" placeholder="Enter the Judge's Name" value="{{competitions.competitionJudge2Name}}" required>
</div>
<div class="form-group col-md-6">
<label for="competitionJudge2Telephone">
Telephone <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionJudge2Telephone" name="competitionJudge2Telephone" placeholder="Enter the Judge's Telephone Number" value="{{competitions.competitionJudge2Telephone}}" required>
</div>
<div class="form-group col-md-6">
<label for="competitionJudge2Email">
Email address <span style="color: red">*</span>
</label>
<input type="email" class="form-control" id="competitionJudge2Email" name="competitionJudge2Email" placeholder="judge#example.com" value="{{competitions.competitionJudge2Email}}" required>
</div>
</div>
</div><!-- end of row -->
</div>
<!-- Judge 3 Info -->
<div class="panel panel-default">
<div class="panel-heading">
Judge 3
</div>
<div class="panel-body">
<div class="row">
<div class="form-group col-md-12">
<label for="competitionJudge3Name">
Judge's Name <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionJudge3Name" name="competitionJudge3Name" placeholder="Enter the Judge's Name" value="{{competitions.competitionJudge3Name}}" required>
</div>
<div class="form-group col-md-6">
<label for="competitionJudge3Telephone">
Telephone <span style="color: red">*</span>
</label>
<input type="text" class="form-control" id="competitionJudge3Telephone" name="competitionJudge3Telephone" placeholder="Enter the Judge's Telephone Number" value="{{competitions.competitionJudge3Telephone}}" required>
</div>
<div class="form-group col-md-6">
<label for="competitionJudge3Email">
Email address <span style="color: red">*</span>
</label>
<input type="email" class="form-control" id="competitionJudge3Email" name="competitionJudge3Email" placeholder="judge#example.com" value="{{competitions.competitionJudge3Email}}" required>
</div>
</div>
</div><!-- end of row -->
</div>
<!-- The following fields are hidden to users and should ONLY be visible and editable by a site admin-level user. -->
{{#if user.admin}}
<div class="panel panel-danger">
<div class="panel-heading">
Administrators Only
</div>
<div class="panel-body">
<p>Sent Required Photos? (currently {{competitions.competitionRequiredPhotos}})</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="competitionRequiredPhotos" id="yesPhotosRadio" value="yes">
<label class="form-check-label" for="yesPhotosRadio">Yes</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="competitionRequiredPhotos" id="noPhotosRadio" value="no">
<label class="form-check-label" for="noPhotosRadio">No</label>
</div>
<p>Sent Required Certifications? (currently {{competitions.competitionRequiredCertifications}})</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="competitionRequiredCertifications" id="yesCertsRadio" value="yes">
<label class="form-check-label" for="yesCertsRadio">Yes</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="competitionRequiredCertifications" id="noCertsRadio" value="no">
<label class="form-check-label" for="noCertsRadio">No</label>
</div>
</div>
</div>
{{/if}}
<!-- End of fields hidden to user -->
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
{{> footer}}
and my current JS code
localStorage.setItem('competitionformlockdown', '0' || '1');
if(localStorage.getItem('competitionformlockdown') == '1') {
$(".competitionformlockdown input").prop('disabled', true);
$(".competitionformlockdown input[type=submit]").prop('disabled', true)
}
I want the forms to load with the value of 0 then when the form is submitted the value switches to 1 and triggers the competitionformlockdown on load and persists.
The forms are loading as 0 but the value is not switching to 1 on submit.
I'm new to localstorage so this is all new to me.
Any help is appreciated.
you can add a script tag which sets the value to zero on form load, and then after the submit you can return the script tag to set to 1.
Form load
<script>
var currentvalue = localStorage.getItem('competitionformlockdown') || '0';
localStorage.setItem('competitionformlockdown', currentValue);
</script>
On submit
localStorage.setItem('competitionformlockdown', '1');
Working fiddle
Related
I have a page with many radio with same name
Problem I have it's when I click on one, that affect other.
kidSection can be added via ajax
$("#kidsSection").on('click', '.kidsTutorYes', function(e) {
$(this).parent().parent().nextAll('.kidTutor, #kidsSectionAdd').eq(0).removeClass('visually-hidden');
});
$("#kidsSection").on('click', '.kidsTutorNo', function(e) {
$(this).parent().parent().nextAll('.kidTutor, #kidsSectionAdd').eq(0).addClass('visually-hidden');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="container" id="main" role="main">
<div>
<br>
<form class="row g-3" id="kidsForm">
<div id="kidsSection">
<div class="kidSection" id="kidSection">
<h5>Information de l'enfant</h5>
<div class="form-group col-md-6">
<label class="form-label" for="firstname">Prénom</label>
<input class="form-control" name="firstname" placeholder="Éric" type="text">
</div>
<div class="form-group col-md-6">
<label class="form-label" for="lastname">Nom</label>
<input class="form-control" name="lastname" placeholder="Duhamel" type="text">
</div>
<h6>Est-t'il mineur ou à charge?</h6>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input autocomplete="off" value="yes" name="kidsTutors1" type="radio" class="kidsTutorYes"> Oui
</label>
<label class="btn btn-secondary">
<input autocomplete="off" value="no" checked="" name="kidsTutors" type="radio" class="kidsTutorNo1"> Non
</label>
</div>
<br>
<div class="kidTutor">
<h5>Tuteur</h5>
<div class="form-group col-md-6">
<label class="form-label">Prénom</label>
<input class="form-control" name="firstname" placeholder="Éric" type="text">
</div>
<div class="form-group col-md-6">
<label class="form-label">Nom</label>
<input class="form-control" name="lastname" placeholder="Duhamel" type="text">
</div>
</div>
</div>
<br>
<div class="kidSection" id="kidSection">
<h5>Information de l'enfant</h5>
<div class="form-group col-md-6">
<label class="form-label" for="firstname">Prénom</label>
<input class="form-control" name="firstname" placeholder="Éric" type="text">
</div>
<div class="form-group col-md-6">
<label class="form-label" for="lastname">Nom</label>
<input class="form-control" name="lastname" placeholder="Duhamel" type="text">
</div>
<h6>Est-t'il mineur ou à charge?</h6>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input autocomplete="off" value="yes" name="kidsTutors2" type="radio" class="kidsTutorYes"> Oui
</label>
<label class="btn btn-secondary">
<input autocomplete="off" value="no" checked="" name="kidsTutors2" type="radio" class="kidsTutorNo"> Non
</label>
</div>
<br>
<div class="kidTutor visually-hidden">
<h5>Tuteur</h5>
<div class="form-group col-md-6">
<label class="form-label">Prénom</label>
<input class="form-control" name="firstname" placeholder="Éric" type="text">
</div>
<div class="form-group col-md-6">
<label class="form-label">Nom</label>
<input class="form-control" name="lastname" placeholder="Duhamel" type="text">
</div>
</div>
</div>
</div>
<div class="" id="kidsSectionAdd">
Ajouter un autre enfant
</div>
</form>
<br>
<div class="col-12 text-center">
Précédent
Suivant
</div>
<br>
</div>
</main>
I started learning Bootstrap 4 validation and there are few things that are not clear to me. Some of the situations are confusing in case where input fields that are not required are showing valid-feedback / invalid-feedback. Also, I'm wondering if there is a way to trigger validation with button on click instead of submit process? Here is example of what I have so far:
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container">
<fieldset class="fieldset-info">
<legend class="hcs-legend">Add New Profile</legend>
<form name="new-profile" id="new-profile" class="needs-validation" novalidate>
<div class="form-group required">
<label for="agency">Profile Name:</label>
<input class="form-control" type="text" name="profile" id="profile" value="" maxlength="120" placeholder="Enter the official name of your profile" required>
<div class="invalid-feedback">Please provide Profile Name</div>
</div>
<div class="form-group required">
<label>Type:</label>
<select class="custom-select browser-default" name="type" id="type" required>
<option value="">--Select Type--</option>
<option value="1">Large</option>
<option value="2">Medium</option>
<option value="3">Small</option>
</select>
<div class="invalid-feedback">Please provide Type</div>
</div>
<div class="form-group row required">
<label class="col-2 col-form-label" for="fname">First Name:</label>
<div class="col-10">
<input class="form-control" type="text" name="fname" id="fname" value="" maxlength="20" placeholder="Enter First name" required>
<div class="invalid-feedback">Please provide First Name</div>
</div>
</div>
<div class="form-group row">
<label class="col-2 col-form-label" for="middle_ini">Middle Init:</label>
<div class="col-10">
<input class="form-control" type="text" name="middle_ini" id="middle_ini" value="" maxlength="1" placeholder="Enter Middle Initial (optional).">
</div>
</div>
<div class="form-group row required">
<label class="col-2 col-form-label" for="lname">Last Name:</label>
<div class="col-10">
<input class="form-control" type="text" name="lname" id="lname" value="" maxlength="30" placeholder="Enter Last name" required>
<div class="invalid-feedback">Please provide Last Name</div>
</div>
</div>
<div class="form-group row required">
<label class="col-2 col-form-label" for="email">Email:</label>
<div class="col-10">
<input class="form-control" type="text" name="email" id="email" value="" maxlength="50" placeholder="Enter Email" required>
<div class="invalid-feedback">Please provide Email</div>
</div>
</div>
<div class="row">
<div class="col-12"><strong><u>Physical Address</u></strong></div>
</div>
<div class="form-row">
<div class="form-group col-6 required">
<div class="row">
<label class="col-3 col-form-label" for="Addr1">Address 1:</label>
<div class="col-9">
<input class="form-control" type="text" name="Addr1" id="Addr1" value="" placeholder="Enter Physical Address 1" maxlength="40" required>
<div class="invalid-feedback">Please provide Address 1</div>
</div>
</div>
</div>
<div class="form-group col-6 required">
<div class="row">
<label class="col-2 col-form-label" for="city">City:</label>
<div class="col-10">
<input class="form-control" type="text" name="city" id="city" value="" placeholder="Enter City" maxlength="25" required>
<div class="invalid-feedback">Please provide City</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<div class="row">
<div class="col-3">
<label for="Addr2">Address 2:</label>
</div>
<div class="col-9">
<input class="form-control" type="text" name="Addr2" id="Addr2" value="" placeholder="Enter Physical Address 2" maxlength="40">
</div>
</div>
</div>
<div class="form-group col-6 required">
<div class="row">
<label class="col-2 col-form-label" for="state">State:</label>
<div class="col-10">
<select class="custom-select browser-default" name="state" id="state" required>
<option value="">--Select State--</option>
<option value="ny">New York</option>
<option value="fl">Florida</option>
</select>
<div class="invalid-feedback">Please provide State</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<div class="row">
<label class="col-3 col-form-label" for="Addr3">Address 3:</label>
<div class="col-9">
<input class="form-control" type="text" name="Addr3" id="Addr3" value="" placeholder="Enter Physical Address 3" maxlength="40">
</div>
</div>
</div>
<div class="form-group col-6 required">
<div class="row">
<label class="col-2 col-form-label" for="zip">Zip:</label>
<div class="col-10">
<input class="form-control" type="text" name="zip" id="zip" value="" placeholder="Enter Zip Code, formatted: 99999 or 99999-9999" maxlength="10" required>
<div class="invalid-feedback">Please provide Zip</div>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<div class="row">
<label class="col-3 col-form-label" for="Addr4">Address 4:</label>
<div class="col-9">
<input class="form-control" type="text" name="Addr4" id="Addr4" value="" placeholder="Enter Physical Address 4" maxlength="40">
</div>
</div>
</div>
<div class="col-6">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="sameAddress" id="sameAddress" value="Y">
<label class="form-check-label" for="sameAddress">check this box if mailing address is the same of physical address</label>
</div>
</div>
</div>
<div class="row">
<div class="col-12"><strong><u>Access options</u></strong></div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="flag_1" id="flag_1" value="Y">
<label class="form-check-label" for="flag_1">Allow for access level 1?</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="flag_2" id="flag_2" value="Y">
<label class="form-check-label" for="flag_2">Allow for access level 2?</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="flag_3" id="flag_3" value="Y">
<label class="form-check-label" for="flag_3">Allow for access level 3?</label>
</div>
<div class="row">
<div class="col-12 text-center">
<input class="btn btn-primary" type="submit" name="save" id="save" value="Save">
</div>
</div>
</form>
</fieldset>
</div>
In the example above I used the code for validation form the Bootstrap web site. There is very little explained on how this works. I have few questions:
How I can trigger validation on click since I will use ajax to send request to the server?
Why fields that are not required are turning green (color around the input)?
How I can use pattern attribute to validate input value if it's correct or not with custom message for the user?
Please let me know if anyone knows how to achieve this?
Thank you.
This is the jQuery Code I am executing:
var fieldCheck = [], proceedNext = true;
$("form#form1 [id^=patient_]").each(function() {
if(!$.trim($(this).val())) {
proceedNext = false;
fieldCheck.push(" "+$('label[for="' + this.id + '"]').html());
}
});
if(!$("form#form1 input[name='patient_gender']:checked").val()) {
proceedNext = false;
fieldCheck.push(" "+"Gender");
}
if(!$("form#form1 input[name='patient_alcoholic']:checked").val()) {
proceedNext = false;
fieldCheck.push(" "+"Alcoholic Status");
}
if(!$("form#form1 input[name='patient_tobacco']:checked").val()) {
proceedNext = false;
fieldCheck.push(" "+"Tobacco Status");
}
if(proceedNext) {
var inpDataArray = [];
$("form#form1").each(function() {
var _inputDataArray = [];
$(this).find("input[type='text'], textarea, select").each(function(index, value) {
_inputDataArray.push($(this).val());
});
inpDataArray.push(_inputDataArray);
});
inpDataArray.push($('input[name=patient_gender]:checked').val());
inpDataArray.push($('input[name=patient_alcoholic]:checked').val());
inpDataArray.push($('input[name=patient_tobacco]:checked').val());
console.log(inpDataArray);
return false;
}
This is my HTML Code:
<form id="form1" enctype="multipart/form-data">
<div class="form-body">
<div class="row">
{{-- Reg id --}}
<div class="col-md-4 col-md-offset-4">
<div class="form-group form-md-line-input form-md-floating-label">
<input type="text" class="form-control" id="patient_HospitalUid" name="patient_HospitalUid">
<label for="patient_HospitalUid">Hospital UID / MRD Number</label> <span class="help-block">Hospital UID / MRD Number</span>
</div>
</div>
{{-- First Name --}}
<div class="col-md-4 col-md-offset-4">
<div class="form-group form-md-line-input form-md-floating-label">
<input type="text" class="form-control" id="patient_firstname" name="patient_patient_firstname">
<label for="patient_firstname">First Name</label> <span class="help-block">Patient's First Name</span>
</div>
</div>
{{-- Last Name --}}
<div class="col-md-4 col-md-offset-4">
<div class="form-group form-md-line-input form-md-floating-label">
<input type="text" class="form-control" id="patient_lastname" name="patient_patient_lastname">
<label for="patient_lastname">Last Name</label> <span class="help-block">Patient's Last Name</span>
</div>
</div>
{{-- Date of Birth --}}
<div class="col-md-4 col-md-offset-4">
<div class="form-group form-md-line-input form-md-floating-label">
<input class="form-control date-picker" size="16" type="text" value="" id="patient_dob" name="patient_patient_dob" data-date-format="dd-mm-yyyy" onblur="this.className += ' edited'" />
<label for="patient_dob">Date of Birth</label> <span class="help-block"> Select Date of Birth </span>
</div>
</div>
{{-- Age --}}
<div class="col-md-4 col-md-offset-4">
<div class="form-group form-md-line-input form-md-floating-label">
<input type="text" class="form-control" id="patient_age" name="patient_age">
<label for="patient_age">Age</label> <span class="help-block">Patient's Age</span>
</div>
</div>
{{-- Gender --}}
<div class="col-md-4 col-md-offset-4">
<div class="form-group form-md-radios">
<label>Gender</label>
<div class="md-radio-inline">
<div class="md-radio">
<input type="radio" id="patient_genderMale" name="patient_gender" data-value="Gender" value="male" class="md-radiobtn">
<label for="patient_genderMale"> <span></span> <span class="check"></span> <span class="box"></span> Male </label>
</div>
<div class="md-radio">
<input type="radio" id="patient_genderFemale" name="patient_gender" value="female" class="md-radiobtn">
<label for="patient_genderFemale"> <span></span> <span class="check"></span> <span class="box"></span> Female </label>
</div>
<div class="md-radio">
<input type="radio" id="patient_genderSkip" name="patient_gender" value="other" class="md-radiobtn">
<label for="patient_genderSkip"> <span></span> <span class="check"></span> <span class="box"></span> Other </label>
</div>
</div>
</div>
</div>
{{-- Mobile No --}}
<div class="col-md-4 col-md-offset-4">
<div class="form-group form-md-line-input form-md-floating-label">
<input type="text" class="form-control" id="patient_mobile" name="patient_mobile">
<label for="patient_mobile">Mobile No</label> <span class="help-block">Patient's Mobile No</span>
</div>
</div>
{{-- Landline No --}}
<div class="col-md-4 col-md-offset-4">
<div class="form-group form-md-line-input form-md-floating-label">
<input type="text" class="form-control" id="patientopt_landline" name="patientopt_landline">
<label for="patientopt_landline">Landline No.</label> <span class="help-block">Patient's Landline No.</span>
</div>
</div>
{{-- Email-ID --}}
<div class="col-md-4 col-md-offset-4">
<div class="form-group form-md-line-input form-md-floating-label">
<input type="text" class="form-control" id="patientopt_email" name="patientopt_email">
<label for="patientopt_email">E-mail address</label> <span class="help-block">Patient's E-mail address</span>
</div>
</div>
{{-- Reffered By --}}
<div class="col-md-4 col-md-offset-4">
<div class="form-group form-md-line-input form-md-floating-label">
<input type="text" class="form-control" id="patient_ReferredBy" name="patient_ReferredBy">
<label for="patient_ReferredBy">Referred By</label> <span class="help-block">Patient's Referred By</span>
</div>
</div>
{{-- Address --}}
<div class="col-md-4 col-md-offset-4">
<div class="form-group form-md-line-input form-md-floating-label">
<textarea class="form-control" id="patient_address" rows="2" cols="2" name="patient_address"></textarea>
<label for="patient_address">Address</label> <span class="help-block">Patient's Address</span>
</div>
</div>
{{-- State --}}
<div class="col-md-4 col-md-offset-4">
<div class="form-group form-md-line-input">
<select class="form-control" id="patient_state" name="patient_state">
<option selected disabled value="">Select State</option> #if(!empty($states)) #foreach($states as $state)
<option value="{{ $state['name'] }}"> {{ $state['name'] }}</option> #endforeach #else
<option value="">No data found</option>
<option value="maharashtra">Maharashtra</option> #endif </select>
<label for="patient_state">State</label>
</div>
</div>
{{-- City --}}
<div class="col-md-4 col-md-offset-4">
<div class="form-group form-md-line-input">
<select class="form-control" id="patient_city" name="patient_city">
<option selected disabled value="">Select City</option>
<option value="amravati">Amravati</option>
</select>
<label for="patient_city">City</label>
</div>
</div>
{{-- Pincode --}}
<div class="col-md-4 col-md-offset-4">
<div class="form-group form-md-line-input form-md-floating-label">
<input type="text" class="form-control" id="patient_pincode" name="patient_pincode">
<label for="patient_pincode">Pincode</label> <span class="help-block">Patient's Pincode</span>
</div>
</div>
{{-- BloodGroup --}}
<div class="col-md-4 col-md-offset-4">
<div class="form-group form-md-line-input has-success">
<select class="form-control" id="patient_bloodgroup" name="patient_bloodgroup">
<option selected disabled value=""> Select Bloodgroup</option>
<option value="bloodGrpId_1">AB+ve</option>
</select>
<label for="patient_bloodgroup">Bloodgroup</label>
</div>
</div>
{{-- Weight --}}
<div class="col-md-4 col-md-offset-4">
<div class="form-group form-md-line-input form-md-floating-label">
<input type="text" class="form-control" id="patient_weight" name="patient_weight">
<label for="patient_weight">Weight (In Kgs)</label> <span class="help-block">Patient's Weight (In Kgs)</span>
</div>
</div>
{{-- Height --}}
<div class="col-md-4 col-md-offset-4">
<div class="form-group form-md-line-input form-md-floating-label">
<input type="text" class="form-control" id="patient_height" name="patient_height">
<label for="patient_height">Height</label> <span class="help-block">Patient's Height</span>
</div>
</div>
{{-- BMI --}}
<div class="col-md-4 col-md-offset-4">
<div class="form-group form-md-line-input form-md-floating-label">
<input type="text" class="form-control" id="patient_bmi" name="patient_bmi">
<label for="patient_bmi">BMI</label> <span class="help-block">Patient's BMI</span>
</div>
</div>
{{-- Alcoholic --}}
<div class="col-md-4 col-md-offset-4">
<div class="form-group form-md-radios">
<label>Alcoholic?</label>
<div class="md-radio-inline">
<div class="md-radio">
<input type="radio" id="patient_alcoholicYes" data-value="Alcoholic Staus" name="patient_alcoholic" value="yes" class="md-radiobtn">
<label for="patient_alcoholicYes"> <span></span> <span class="check"></span> <span class="box"></span> Yes </label>
</div>
<div class="md-radio">
<input type="radio" id="patient_alcoholicNo" name="patient_alcoholic" class="md-radiobtn" value="no">
<label for="patient_alcoholicNo"> <span></span> <span class="check"></span> <span class="box"></span> No </label>
</div>
</div>
</div>
</div>
{{-- Tobacco --}}
<div class="col-md-4 col-md-offset-4">
<div class="form-group form-md-radios">
<label>Tobacco?</label>
<div class="md-radio-inline">
<div class="md-radio">
<input type="radio" id="patient_tobaccoYes" data-value="Tobacco Status" name="patient_tobacco" value="yes" class="md-radiobtn">
<label for="patient_tobaccoYes"> <span></span> <span class="check"></span> <span class="box"></span> Yes </label>
</div>
<div class="md-radio">
<input type="radio" id="tobacco_no" name="patient_tobacco" class="md-radiobtn" value="no">
<label for="tobacco_no"> <span></span> <span class="check"></span> <span class="box"></span> No </label>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
What I am trying to achieve is I have a form and it has text-area, text, radio, select what I am trying to achieve I that when I am iterating the loop in JQuery I want everything stored in an array currently I am not able to interate the radio button in the same loop so I am using method outside to achieve it but it is creating is another array. Also what I am trying to achieve is that when the value is being pushed also I want to get the value of the label like for example if gender is clicked on female then I want to achieve something like gender: male, address: address entered and so on. How to achieve it? I am not able to achieve is.
I have a webpage that contains a div that users can print using a print button that has an onclick javascript function. The div contains a couple of paragrapghs with bootstrap classes.The div also contains 3 bootstrap wells with bootstrap forms within them.
When I view the print preview, page 1 shows the first paragraph that is within the div, then no other content. The print preview shows more of the content being on page 2 and on page 3. However, it is cutting off some of the content at the end of the div.
I have spent several hours researching this issue and have tried several solutions, most of which try to modify overflow and float properties. None of these have resolved my problem.
I do have one css print rule that hides the print button when printing. I have disabled this css rule, but that has made no difference. I also have 1 page-break-before-always, which I have commented out, but this makes no difference.
These issues do not exist when using chrome.
My FireFox browser version is 52.0.2 (32-bit).
My Chrome browser is version 49.0.2.2623.112m.
My OS is windows XP.
p.s. keep in mind I am a pretty inexperienced developer.
<div class="row" id="sign_up">
<p class="lead text-danger text-center">Please sign me up for the 7 day Carnival Cruise.
<br>
Please print and fill out this sign-up form for each person.
</p>
<br>
<button type="button" onclick="printContent('sign_up')" class="btn btn-primary center-block"><span><i class="glyphicon glyphicon-print"></i></span> Print form</button>
<form class="well form-horizontal" action="" method="post" id="sign-up_form">
<fieldset>
<!-- Form Name -->
<legend>Sign-Up Form</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">First Name:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="first_name" placeholder="" class="form-control" type="text" data-delay="5000">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group inline">
<label class="col-md-2 control-label" >Last Name:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="last_name" placeholder="" class="form-control" type="text">
</div>
</div>
</div>
<!-- Date input-->
<div class="form-group">
<label class="col-md-2 control-label" >Date of Birth:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<input name="date" placeholder="MM/DD/YYY" class="form-control" type="date">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">E-Mail:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input name="email" placeholder="" class="form-control" type="email">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">Phone #</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input name="phone" placeholder="" class="form-control" type="tel">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">Address:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="address" placeholder="" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">City:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="city" placeholder="" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input -->
<div class="form-group">
<label class="col-md-2 control-label">State:</label>
<div class="col-md-6 selectContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="state" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">Zip Code:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input name="zip" placeholder="" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">Emergency Contact Name:</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input name="emerg_name" placeholder="" class="form-control" type="text" data-delay="5000">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label">Emergency Contact Phone #</label>
<div class="col-md-6 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input name="emerg_phone" placeholder="" class="form-control" type="tel">
</div>
</div>
</div>
</fieldset>
</form>
<form class="well form-inline">
<!-- Checkbox -->
<div class="form-group">
<label class="col-md-4 control-label">Inside Cabin</label>
<div class="col-md-2 inputGroupContainer">
<input name="ins_yes" placeholder="" class="form-control" type="checkbox">
</div>
</div>
<!-- Checkbox -->
<div class="form-group">
<label class="col-md-4 control-label">Balcony Cabin</label>
<div class="col-md-2 inputGroupContainer">
<input name="ins_no" placeholder="" class="form-control" type="checkbox">
</div>
</div>
</form>
<form class="well form-inline">
<!-- Checkbox -->
<div class="form-group">
<label class="col-md-4 control-label">Yes.<br> I do want insurance</label>
<div class="col-md-2 inputGroupContainer">
<input name="ins_yes" placeholder="" class="form-control" type="checkbox">
</div>
</div>
<!-- Checkbox -->
<div class="form-group">
<label class="col-md-4 control-label">No. <br>I don't want insurance</label>
<div class="col-md-2 inputGroupContainer">
<input name="ins_no" placeholder="" class="form-control" type="checkbox">
</div>
</div>
</form>
<p class="no-indent text-danger">I understand the payment / cancellation policy as stated above:
<br>
(sign) ________________________________________
</p>
<p><mark>Please bring or mail this completed form with payment.</mark></p>
<br>
<p style="page-break-before: always">
<p>
If you have any questions, please call Michelle # (810)-686-3524 or Denise # (989)-876-6102.
<br>
1390 E. Willard Rd.
<br>
Clio, MI 48420
<br>
810 - 686 - 3524
<br>
www.milesawaytravel.net
<br>
e-mail: <span class="text-primary">3524#Hughes.net</span>
<img class="responsive center-block" src="http://res.cloudinary.com/dx1tairmq/image/upload/v1499127232/miles%20away%20travel/newmatlogo.png" alt="miles away logo">
<button type="button" onclick="printContent('sign_up')" class="btn btn-primary"><span><i class="glyphicon glyphicon-print"></i></span> Print form</button>
</p>
</div>
I can't seem to suppress the data callout of the slide bar below the drop down menu when I mouse over the words in the dropdown and it is where the slider bar exists.
Please see image and jsfiddle as this is confusing to explain.
I am using bootstrap-select and bootstrap-slider.
https://jsfiddle.net/wolfpack06/u2z7tp0m/
Click the "Screen Criteria" button to view the modal with issues.
Thanks in advance1
<div class="container">
<form>
<!-- Symbols -->
<div class="form-group row">
<label for="symbols" class="col-sm-2 col-form-label">Symbols</label>
<div class="col-sm-10">
<select class="selectpicker" multiple data-live-search="true" multiple data-actions-box="true" id="symbols">
<optgroup label="Index/ETF">
<option>SPX</option>
<option>IBB</option>
</optgroup>
<optgroup label="Stock">
<option>NFLX</option>
<option>TSLA</option>
</optgroup>
</select>
<br>
Not finding a symbol? Request it
</div>
</div>
<!-- Spread Types -->
<div class="form-group row">
<label class="col-sm-2">Spread Types</label>
<div class="col-sm-10">
<div class="form-check">
<input id="typebullput" class="form-check-input" type="checkbox"> Bull Put Spreads
</div>
<div class="form-check">
<input id="typebullput" class="form-check-input" type="checkbox"> Bear Call Spreads
</div>
</div>
</div>
<!-- Expiration Distance -->
<div class="form-group row">
<label for="expirationdistance" class="col-sm-2 col-form-label">Expiration Distance</label>
<div class="col-sm-10">
<!-- double slider -->
<span id="expirationdistancelow" class="hidden">Low Distance</span>
<span id="expirationdistancehigh" class="hidden">High Distance</span>
<input id="expirationdistance" type="text"/>
<span id="expirationdistancelabel"><span id="expirationdistanceval">0,35</span></span>
</div>
<div class="col-sm-10">
<input id="includeweeklyexpiration" class="form-check-input" type="checkbox" disabled> Include weekly expirations
</div>
</div>
<!-- Maximum Delta -->
<div class="form-group row">
<label class="col-sm-2">Maximum Delta</label>
<div class="col-sm-10">
<input id="maximumdelta" type="text" data-slider-min="0" data-slider-max="0.25" data-slider-step="0.01" data-slider-value="0.08" disable/>
<span id="maximumdeltalabel"><span id="maximumdeltaval">0.08</span></span>
</div>
<div class="col-sm-10">
<input id="maximumdelta-enabled" type="checkbox"/ checked> Enabled
</div>
</div>
<!-- Spread Width -->
<div class="form-group row">
<label for="spreadwidth" class="col-sm-2 col-form-label">Spread Width</label>
<div class="col-sm-10">
<!-- double slider -->
<span id="spreadwidthlow" class="hidden">Low Width</span>
<span id="spreadwidthhigh" class="hidden">High Width</span>
<input id="spreadwidth" type="text"/>
<span id="spreadwidthlabel"><span id="spreadwidthval">5,15</span></span>
</div>
</div>
<!-- Minimum Distance -->
<div class="form-group row">
<label class="col-sm-2">Minimum Distance (%)</label>
<div class="col-sm-10">
<input id="minimumdistance" type="text" data-slider-min="5" data-slider-max="25" data-slider-step="1" data-slider-value="12" disable/>
<span id="minimumdistancelabel"><span id="minimumdistanceval">12</span></span>
</div>
<div class="col-sm-10">
<input id="minimumdistance-enabled" type="checkbox"/ checked> Enabled
</div>
</div>
<!-- Minimum Premium -->
<div class="form-group row">
<label class="col-sm-2">Minimum Premium</label>
<div class="col-sm-10">
<input id="minimumpremium" type="text" data-slider-min="0.05" data-slider-max="1.0" data-slider-step="0.01" data-slider-value="0.25" disable/>
<span id="minimumpremiumlabel"><span id="minimumpremiumval">0.25</span></span>
</div>
<div class="col-sm-10">
<input id="minimumpremium-enabled" type="checkbox"/ checked> Enabled
</div>
</div>
<!-- Minimum Profit disabled -->
<div class="form-group row">
<label class="col-sm-2">Minimum Target ROM (%)</label>
<div class="col-sm-10">
<input id="minimumprofit" type="text" data-slider-min="1.0" data-slider-max="10.0" data-slider-step="0.25" data-slider-value="2.5" disable/>
<span id="minimumprofitlabel"><span id="minimumprofitval">2.5</span></span>
</div>
<div class="col-sm-10">
<input id="minimumprofit-enabled" type="checkbox"/> Enabled
</div>
</div>
<!-- Minimum Leg Vol disabled -->
<div class="form-group row">
<label class="col-sm-2">Minimum Short/Long Leg Volume</label>
<div class="col-sm-10">
<input id="minimumlegvol" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="5" data-slider-value="10" disable/>
<span id="minimumlegvollabel"><span id="minimumlegvolval">10</span></span>
</div>
<div class="col-sm-10">
<input id="minimumlegvol-enabled" type="checkbox"/> Enabled
</div>
</div>
<!-- Minimum Short Leg Vol disabled -->
<!-- <div class="form-group row">
<label class="col-sm-2">Minimum Short Leg Vol</label>
<div class="col-sm-10">
<input id="minimumshortlegvol" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="5" data-slider-value="10" disable/>
<span id="minimumshortlegvollabel"><span id="minimumshortlegvolval">10</span></span>
</div>
<div class="col-sm-10">
<input id="minimumshortlegvol-enabled" type="checkbox"/> Enabled
</div>
</div> -->
<!-- Minimum Long Leg Vol disabled -->
<!-- <div class="form-group row">
<label class="col-sm-2">Minimum Long Leg Vol</label>
<div class="col-sm-10">
<input id="minimumlonglegvol" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="5" data-slider-value="10" disable/>
<span id="minimumlonglegvollabel"><span id="minimumlonglegvolval">10</span></span>
</div>
<div class="col-sm-10">
<input id="minimumlonglegvol-enabled" type="checkbox"/> Enabled
</div>
</div> -->
<!-- Minimum Open Interest -->
<div class="form-group row">
<label class="col-sm-2">Minimum Open Interest</label>
<div class="col-sm-10">
<input id="minimumopeninterest" type="text" data-slider-min="0" data-slider-max="1000" data-slider-step="10" data-slider-value="100" disable/>
<span id="minimumopeninterestlabel"><span id="minimumopeninterestval">100</span></span>
</div>
<div class="col-sm-10">
<input id="minimumopeninterest-enabled" type="checkbox"/ checked> Enabled
</div>
</div>
<div class="form-group row">
<div class="offset-sm-2 col-sm-10">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
The tooltips have a z-index of 1070 so your dropdown needs anything higher than that, for example:
.dropdown-menu{ z-index: 1080; }