382 lines
9.3 KiB
PHP
382 lines
9.3 KiB
PHP
|
|
<style>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
button {
|
|
background-color: #04AA6D;
|
|
color: #ffffff;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
font-size: 17px;
|
|
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Mark input boxes that gets an error on validation: */
|
|
input.invalid {
|
|
background-color: #ffdddd;
|
|
}
|
|
|
|
/* Hide all steps by default: */
|
|
.tab {
|
|
display: none;
|
|
}
|
|
|
|
|
|
button:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
#prevBtn {
|
|
background-color: #bbbbbb;
|
|
}
|
|
|
|
/* Make circles that indicate the steps of the form: */
|
|
.step {
|
|
height: 15px;
|
|
width: 15px;
|
|
margin: 0 2px;
|
|
background-color: #bbbbbb;
|
|
border: none;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.step.active {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Mark the steps that are finished and valid: */
|
|
.step.finish {
|
|
background-color: #04AA6D;
|
|
}
|
|
.custom_radio{
|
|
margin-top: 20px;
|
|
margin-bottom: 20px;
|
|
margin-left: 85px;
|
|
margin-right: 55px;
|
|
text-align: left;
|
|
}
|
|
|
|
.custom_radio input[type="radio"]{
|
|
display: none;
|
|
}
|
|
.custom_radio input[type="radio"] + label{
|
|
position: relative;
|
|
display: inline-block;
|
|
padding-left: 1.5em;
|
|
margin-right: 2em;
|
|
cursor: pointer;
|
|
line-height: 1em;
|
|
-webkit-transition: all 0.3s ease-in-out;
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
.custom_radio input[type="radio"] + label:before,
|
|
.custom_radio input[type="radio"] + label:after{
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 1em;
|
|
height: 1em;
|
|
text-align: center;
|
|
color: white;
|
|
|
|
border-radius: 50%;
|
|
-webkit-transition: all .3s ease;
|
|
transition: all .3s ease;
|
|
}
|
|
.custom_radio input[type="radio"] + label:before {
|
|
-webkit-transition: all .3s ease;
|
|
transition: all .3s ease;
|
|
box-shadow: inset 0 0 0 0.2em white, inset 0 0 0 1em white;
|
|
}
|
|
.custom_radio input[type="radio"] + label:hover:before {
|
|
-webkit-transition: all .3s ease;
|
|
transition: all .3s ease;
|
|
box-shadow: inset 0 0 0 0.3em white, inset 0 0 0 1em #c6c6c6;
|
|
}
|
|
.custom_radio input[type="radio"]:checked + label:before {
|
|
-webkit-transition: all .3s ease;
|
|
transition: all .3s ease;
|
|
box-shadow: inset 0 0 0 0.2em white, inset 0 0 0 1em #4CAF50;
|
|
}
|
|
.popupstyle{
|
|
padding-top:25px;
|
|
}
|
|
|
|
.form-group1 {
|
|
display: block;
|
|
|
|
|
|
margin-left: 85px;
|
|
margin-right: 55px;
|
|
|
|
text-align: left;
|
|
}
|
|
|
|
.form-group1 input {
|
|
padding: 0;
|
|
height: initial;
|
|
width: initial;
|
|
margin-bottom: 0;
|
|
display: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.form-group1 label {
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.form-group1 label:before {
|
|
content:'';
|
|
-webkit-appearance: none;
|
|
background-color: transparent;
|
|
border: 2px solid #0079bf;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
|
|
padding: 6px;
|
|
display: inline-block;
|
|
position: relative;
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.form-group1 input:checked + label:after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 6px;
|
|
width: 7px;
|
|
height: 14px;
|
|
border: solid #0079bf;
|
|
border-width: 0 2px 2px 0;
|
|
transform: rotate(45deg);
|
|
}
|
|
</style>
|
|
|
|
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<form id="regForm" method="POST" class="popupstyle">
|
|
|
|
<!-- One "tab" for each step in the form: -->
|
|
<?php
|
|
if(isset($getquest)&& $getquest->num_rows()>0)
|
|
{
|
|
$ss=1;
|
|
foreach($getquest->result() as $ps)
|
|
{
|
|
$quesid=$ps->id;
|
|
$question=$ps->question;
|
|
$options=$ps->options;
|
|
$option_input_type=$ps->option_input_type;?>
|
|
<div class="tab"><h3 style="text-align:center"><?=$question;?></h3>
|
|
|
|
|
|
<!-- radio-->
|
|
<?php if($option_input_type=="1") { ?><div class="custom_radio">
|
|
<?php
|
|
$j=1;
|
|
$inopt=explode("|", $options);
|
|
foreach($inopt as $io)
|
|
{ if($io!=" "){ ?>
|
|
<input type="hidden" name="hide_opt[]" id="hide_opt_<?=$ss;?>_<?=$j;?>" value="<?=$io;?>" >
|
|
<input type="radio" class="cat_quest" id="featured-<?=$ss;?>-<?=$j;?>" name="optionselected[]" >
|
|
<label for="featured-<?=$ss;?>-<?=$j;?>"><?=$io;?></label>
|
|
<br>
|
|
|
|
<?php } $j++; } ?>
|
|
</div><?php } ?>
|
|
|
|
<!-- inpput-->
|
|
<?php if($option_input_type=="2") { ?>
|
|
<div class="col-md-10" style="margin:0px auto;float:none;text-align:center;">
|
|
|
|
<input type="text" name="inputopt" class="form-control inputopt" id="inputopt_<?=$ss;?>" >
|
|
</div>
|
|
<?php } ?>
|
|
<?php if($option_input_type=="3") { ?>
|
|
<?php
|
|
$jc=1;
|
|
$inopt=explode("|", $options);
|
|
foreach($inopt as $io)
|
|
{ if($io!=" "){ ?>
|
|
<div class="form-group1">
|
|
<input type="checkbox" class="incheck" value="<?=$io;?>" name="incheckname" id="incheck_<?=$ss;?>_<?=$jc;?>">
|
|
<label for="incheck_<?=$ss;?>_<?=$jc;?>"><?=$io;?></label>
|
|
</div>
|
|
<?php } $jc++; } }?>
|
|
</div>
|
|
<input type="hidden" name="hide_question[]" id="hide_question_<?=$ss;?>" value="<?=$question;?>" >
|
|
<input type="hidden" name="hide_answer[]" id="hide_answer_<?=$ss;?>" >
|
|
<input type="hidden" name="userid" value="<?=$primaryid;?>" >
|
|
<input type="hidden" name="policyid" id="policyid" value="<?=$policyid;?>" >
|
|
<input type="hidden" name="pincode" id="pincode" value="<?=$pincode;?>" >
|
|
<input type="hidden" name="company" id="company" value="<?=$company;?>" >
|
|
<?php $ss++; } } ?>
|
|
<div style="overflow:auto; margin-top:10px">
|
|
<div style="float:right;">
|
|
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
|
|
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
|
|
</div>
|
|
</div>
|
|
<!-- Circles which indicates the steps of the form: -->
|
|
<div style="text-align:center;margin-top:40px;">
|
|
<?php
|
|
if(isset($getquest)&& $getquest->num_rows()>0)
|
|
{
|
|
$s=1;
|
|
foreach($getquest->result() as $ps)
|
|
{
|
|
$quesid=$ps->id;
|
|
?>
|
|
<span class="step"></span>
|
|
<?php $s++; }}?>
|
|
</div>
|
|
<input type="hidden" name="getsteps" id="getsteps" value="<?=$getquest->num_rows();?>" >
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<script>
|
|
var currentTab = 0; // Current tab is set to be the first tab (0)
|
|
showTab(currentTab); // Display the current tab
|
|
|
|
function showTab(n) {
|
|
// This function will display the specified tab of the form...
|
|
var x = document.getElementsByClassName("tab");
|
|
|
|
x[n].style.display = "block";
|
|
//... and fix the Previous/Next buttons:
|
|
if (n == 0) {
|
|
document.getElementById("prevBtn").style.display = "none";
|
|
} else {
|
|
|
|
}
|
|
if (n == (x.length - 1)) {
|
|
|
|
document.getElementById("nextBtn").innerHTML = "Submit";
|
|
|
|
document.getElementById('nextBtn').className += 'formsubmitinsteps';
|
|
|
|
}
|
|
else {
|
|
document.getElementById("nextBtn").innerHTML = "Next";
|
|
}
|
|
//... and run a function that will display the correct step indicator:
|
|
fixStepIndicator(n)
|
|
}
|
|
|
|
function nextPrev(n) {
|
|
// This function will figure out which tab to display
|
|
var x = document.getElementsByClassName("tab");
|
|
// Exit the function if any field in the current tab is invalid:
|
|
if (n == 1 && !validateForm()) return false;
|
|
// Hide the current tab:
|
|
x[currentTab].style.display = "none";
|
|
// Increase or decrease the current tab by 1:
|
|
currentTab = currentTab + n;
|
|
// if you have reached the end of the form...
|
|
if (currentTab >= x.length) {
|
|
// ... the form gets submitted:
|
|
// document.getElementById("regForm").submit();
|
|
document.getElementById('nextBtn').dataset.id = <?=$getquest->num_rows();?>;
|
|
return false;
|
|
}
|
|
// Otherwise, display the correct tab:
|
|
showTab(currentTab);
|
|
}
|
|
|
|
function validateForm() {
|
|
// This function deals with validation of the form fields
|
|
var x, y, i, valid = true;
|
|
x = document.getElementsByClassName("tab");
|
|
y = x[currentTab].getElementsByTagName("input");
|
|
// A loop that checks every input field in the current tab:
|
|
for (i = 0; i < y.length; i++) {
|
|
|
|
if (y[i].value == "") {
|
|
// add an "invalid" class to the field:
|
|
alert (y[i].value);
|
|
// and set the current valid status to false
|
|
valid = false;
|
|
}
|
|
|
|
if (y[i].checked == true)
|
|
{
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
// If the valid status is true, mark the step as finished and valid:
|
|
if (valid) {
|
|
document.getElementsByClassName("step")[currentTab].className += " finished";
|
|
}
|
|
return valid; // return the valid status
|
|
}
|
|
|
|
function fixStepIndicator(n) {
|
|
// This function removes the "active" class of all steps...
|
|
var i, x = document.getElementsByClassName("step");
|
|
for (i = 0; i < x.length; i++) {
|
|
x[i].className = x[i].className.replace(" active", "");
|
|
}
|
|
//... and adds the "active" class on the current step:
|
|
x[n].className += " active";
|
|
}
|
|
</script>
|
|
<script>
|
|
$('.cat_quest').on('click',function(){
|
|
|
|
var id=$(this).attr("id");
|
|
var idd=id.split("-");
|
|
var cqid=idd[1];
|
|
var cqidpos=idd[2];
|
|
|
|
var organs=$("#hide_opt_"+cqid+"_"+cqidpos).val();
|
|
$("#hide_answer_"+cqid).val(organs);
|
|
});
|
|
$('.inputopt').focusout(function(){
|
|
|
|
var id=$(this).attr("id");
|
|
var orgval=$(this).val();
|
|
var idd=id.split("_");
|
|
var cqid=idd[1];
|
|
|
|
|
|
|
|
$("#hide_answer_"+cqid).val(orgval);
|
|
});
|
|
|
|
|
|
$(".incheck").click(function(){
|
|
var id=$(this).attr("id");
|
|
var orgval=$(this).val();
|
|
var idd=id.split("_");
|
|
var cqid=idd[1];
|
|
var checkin = [];
|
|
$.each($("input[name='incheckname']:checked"), function(){
|
|
checkin.push($(this).val());
|
|
});
|
|
$("#hide_answer_"+cqid).val( checkin.join("|"));
|
|
});
|
|
|
|
|
|
</script>
|
|
|