Progress Bar - Multi Step Form - Javascript Problem

Progress Bar - Multi Step Form - Javascript Problem - javascript

I have a multi step form, where I want to include a progress bar.
So far I have the following solution, which is working for the first click, but afterwards it doesn't work.
Javascript:
$(document).ready(function(){
var a = document.getElementsByClassName("progress-15");
var b = document.getElementsByClassName("progress-30");
var c = document.getElementsByClassName("progress-50");
var d = document.getElementsByClassName("progress-70");
var e = document.getElementsByClassName("progress-85");
var f = document.getElementsByClassName("progress-100");
window.addEventListener('click', function() {
if($("a").is(":visible")) {
document.getElementsByClassName("progress-bar")[0].style.width = "15%";
}
})
});
I want to add the classes like ".progress-15" to the steps in the form.
It works for progress-15 until now, but it doesn't load for progress-30.
HTML:
<!-- /Immobilienart > Grundstück ============================== -->
<div class="branch" id="Grundstück">
<div class="step" data-state="grundflaeche">
<div class="question_title progress-15">
<p>Um <strong>was für ein Grundstück</strong> handelt es sich?</p>
</div>
<div class="row">
<div class="col-sm-3">
<div class="item">
<input id="branch_0_answer_0" name="branch_0_answers[]" type="radio" value="Bauland" class="required">
<label for="branch_0_answer_0"><img src="img/Bauland.svg" alt=""><strong>Bauland</strong></label>
</div>
</div>
<div class="col-sm-3">
<div class="item">
<input id="branch_0_answer_1" type="radio" name="branch_0_answers[]" value="Ackerland" class="required">
<label for="branch_0_answer_1"><img src="img/Ackerland.svg" alt=""><strong>Ackerland</strong></label>
</div>
</div>
<div class="col-sm-3">
<div class="item">
<input id="branch_0_answer_2" name="branch_0_answers[]" type="radio" value="Wald / Grünland" class="required">
<label for="branch_0_answer_2"><img src="img/Wald.svg" alt=""><strong>Wald / Grünland</strong></label>
</div>
</div>
<div class="col-sm-3">
<div class="item">
<input id="branch_0_answer_3" name="branch_0_answers[]" type="radio" value="Sonstiges" class="required">
<label for="branch_0_answer_3"><img src="img/Sonstiges.svg" alt=""><strong>Sonstiges</strong></label>
</div>
</div>
</div>
<!-- /row-->
</div>
<!-- /step -->
</div>
HTML (Progress Bar):
<main>
<h1 id="hero">So verkaufen Sie Ihre Immobilie zum Top-Preis</h1>
<div class="container mb-5">
<div class="progress-rounded progress pmd-progress position-absolute"><div class="progress-bar progress-bar-info" style="width: 0%;"></div></div>
<!-- Preloader ============================== -->
<div data-loader="circle-side"></div>
<div id="wizard_container">
<form class="immobilienbewertung" name="example-1" id="wrapped" method="POST">
<input id="website" name="website" type="text" value="">
<!-- Leave input above for security protection, read docs for details -->
<div id="middle-wizard" class="h-75 mb-4 pt-2">
<!-- Immobilienart ============================== -->
<div class="step" data-state="branchtype">
<div class="question_title">
<p><strong>Welche Immobilie</strong> möchten Sie verkaufen?</p>
</div>
<div class="row mb-5">
<div class="col-md-3">
<div class="item" id="start">
<input id="answer_1" type="radio" name="branch_1_group_1" value="Grundstück" class="required">
<label for="answer_1"><img src="img/Grundstueck.svg" alt=""><strong>Grundstück</strong></label>
</div>
</div>
<div class="col-md-3">
<div class="item">
<input id="answer_2" name="branch_1_group_1" type="radio" value="Wohnung" class="required">
<label for="answer_2"><img src="img/Wohnung.svg" alt=""><strong>Wohnung</strong></label>
</div>
</div>
<div class="col-md-3">
<div class="item">
<input id="answer_3" name="branch_1_group_1" type="radio" value="Haus" class="required">
<label for="answer_3"><img src="img/Haus.svg" alt=""><strong>Haus</strong></label>
</div>
</div>
<div class="col-md-3">
<div class="item">
<input id="answer_4" name="branch_1_group_1" type="radio" value="Gewerbe" class="required">
<label for="answer_4"><img src="img/Gewerbeimmobilie.svg" alt=""><strong>Gewerbe</strong></label>
</div>
</div>
</div>
<!-- /row-->
Do you have an idea how I could get this to work?
Thanks so much in Advance.
Solution:
$(document).on('click', function(){
if($(".progress-0").is(":visible")){
document.getElementsByClassName("progress-bar")[0].style.width = "0%";
}
if($(".progress-10").is(":visible")){
document.getElementsByClassName("progress-bar")[0].style.width = "10%";
}
if($(".progress-20").is(":visible")){
document.getElementsByClassName("progress-bar")[0].style.width = "20%";
}
if($(".progress-30").is(":visible")){
document.getElementsByClassName("progress-bar")[0].style.width = "30%";
}
if($(".progress-40").is(":visible")){
document.getElementsByClassName("progress-bar")[0].style.width = "40%";
}
if($(".progress-50").is(":visible")){
document.getElementsByClassName("progress-bar")[0].style.width = "50%";
}
if($(".progress-60").is(":visible")){
document.getElementsByClassName("progress-bar")[0].style.width = "60%";
}
if($(".progress-70").is(":visible")){
document.getElementsByClassName("progress-bar")[0].style.width = "70%";
}
if($(".progress-80").is(":visible")){
document.getElementsByClassName("progress-bar")[0].style.width = "80%";
}
if($(".progress-90").is(":visible")){
document.getElementsByClassName("progress-bar")[0].style.width = "90%";
}
if($(".progress-100").is(":visible")){
document.getElementsByClassName("progress-bar")[0].style.width = "100%";
}
});

Related

How to implement radio button check in JSP JavaScript?

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

Uncaught Error when append data by Google Apps Script

I have just learnt Google Apps Script a week to build a small online survey for my work.
Everything work fine, until I added 1 more question about taking Photo in the Index. Before that, it worked OK with 1 element taking Photo, but when I added 1 more element than an "Uncaught" error appear. I have tried to find this issue but it seems my English is not good enough to "google" right search key and didn't find any same error.
Please see my Index HTML code below: The error occurs when I added element with id "ds_q_Q06"
<!DOCTYPE html>
<html>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<meta http-equiv="Expires" content="0" />
<meta name="msapplication-TileColor" content="#0072C6" />
<title>GAS Question Templates</title>
<head>
<base target="_top">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<?!= include('CSS'); ?>
<?!= include('JS'); ?>
<?!= include('Json_data'); ?>
<?!= include('Routing'); ?>
</head>
<body>
<form class="form-survey test" id="mainForm">
<div class="survey-info" style="display:none;">
<input type="text" name="respID" id="respId" class="respId" ></input>
<input type="text" name="currentPage" id="currentPage" class="currentPage" ></input>
<input type="text" name="routing" id="routing" class="routing" ></input>
</div>
<div class="main-content">
<div class="dsDropDown ds-question" name="ds_q_Q01_1" id="ds_q_Q01_1">
<div class="q-question">
1. Điểm bán:
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer">
<select class="">
<option disabled selected value>Vui lòng chọn...</option>
<option value="Điểm bán mở cửa - Khảo sát TC">Điểm bán mở cửa - Khảo sát TC</option>
<option value="Điểm bán không tìm thấy">Điểm bán không tìm thấy</option>
<option value="Điểm bán thay đổi KD">Điểm bán thay đổi KD</option>
<option value="Điểm bán đóng cửa">Điểm bán đóng cửa</option>
<option value="Điểm bán mở cửa - Từ chối hợp tác">Điểm bán mở cửa - Từ chối hợp tác</option>
</select>
</div>
<div class="q-true-answer">
<input type="text" name="answer" class="hidden answer" ></input>
</div>
</div>
<div class="dsImage ds-question" name="ds_q_Q01_2" id="ds_q_Q01_2">
<div class="q-question">
Chụp hình
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer">
<input type="file" accept="image/*" name="file" id="Q02_img"></input>
<div class="button">
<div class="btnUpload" >Upload</div>
</div>
</div>
<div class="q-true-answer">
<input type="text" name="answer" class="hidden answer" ></input>
</div>
</div>
<div class="dsText ds-question" name="ds_q_Q02" id="ds_q_Q02">
<div class="q-question">
2. Ghi chú
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer q-true-answer">
<textarea type="text" name="answer" class="answer" ></textarea>
</div>
</div>
</div>
<div class="main-content">
<div class="dsDropDown ds-question" name="ds_q_Q03_1" id="ds_q_Q03_1">
<div class="q-question">
3. Tên điểm bán / Biển hiệu:
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer">
<select class="">
<option disabled selected value>Vui lòng chọn...</option>
<option value="Đúng">Đúng</option>
<option value="Sai">Sai - Cập nhật tên điểm bán mới</option>
</select>
</div>
<div class="q-true-answer">
<input type="text" name="answer" class="hidden answer" ></input>
</div>
</div>
<div class="dsText ds-question optional" name="ds_q_Q03_2" id="ds_q_Q03_2">
<div class="q-question">
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer q-true-answer">
<input type="text" name="answer" class="answer" placeholder="Nhập tên điểm bán..." ></input>
</div>
</div>
</div>
<div class="main-content">
<div class="dsDropDown ds-question" name="ds_q_Q04_1" id="ds_q_Q04_1">
<div class="q-question">
4. Địa chỉ:
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer">
<select class="">
<option disabled selected value>Vui lòng chọn...</option>
<option value="Đúng">Đúng</option>
<option value="Sai">Sai</option>
</select>
</div>
<div class="q-true-answer">
<input type="text" name="answer" class="hidden answer" ></input>
</div>
</div>
<div class="dsText ds-question optional" name="ds_q_Q04_2" id="ds_q_Q04_2">
<div class="q-question">
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer q-true-answer">
<input type="text" name="answer" class="answer" placeholder="Nhập địa chỉ..." ></input>
</div>
</div>
</div>
<div class="main-content">
<div class="dsSingle ds-question" name="ds_q_Q05" id="ds_q_Q05">
<div class="q-question">
5. Single Question
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer">
<ul>
<li>
<input type="radio" name="ds_sa_Q01" id="Q01_C1" class="dsSingleChoice"></input>
<label for="Q01_C1" class="answerLabel">Câu 2</label>
</li>
<li>
<input type="radio" name="ds_sa_Q01" id="Q01_C2" class="dsSingleChoice"></input>
<label for="Q01_C2" class="answerLabel">Câu 3</label>
</li>
<li>
<input type="radio" name="ds_sa_Q01" id="Q01_C3" class="dsSingleChoice"></input>
<label for="Q01_C3" class="answerLabel">Câu 4</label>
</li>
</ul>
</div>
<div class="q-true-answer">
<input type="text" name="answer" class="hidden answer" ></input>
</div>
</div>
</div>
**<div class="main-content">
<div class="dsImage ds-question" name="ds_q_Q06" id="ds_q_Q06">
<div class="q-question">
6. Take Photo
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer">
<input type="file" accept="image/*" id="Q06_img"></input>
<div class="button">
<div class="btnUpload" >Upload</div>
</div>
</div>
<div class="q-answer q-true-answer">
<input type="text" name="answer" class="answer" ></input>
</div>
</div>
</div>**
<div class="main-content">
<div class="dsDropDown ds-question" name="ds_q_Q07" id="ds_q_Q07">
<div class="q-question">
7. Drop Down Question
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer">
<select class="">
<option disabled selected value>------</option>
</select>
</div>
<div class="q-true-answer">
<input type="text" name="answer" class="hidden answer" ></input>
</div>
</div>
</div>
<div class="main-content">
<div class="dsText ds-question" name="ds_q_Q08" id="ds_q_Q08">
<div class="q-question">
8. Text / Search Question
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer q-true-answer">
<input type="text" name="answer" class="answer" ></input>
</div>
</div>
</div>
<div class="main-content">
<div class="dsSearch ds-question" name="ds_q_Q09" id="ds_q_Q09">
<div class="q-question">
9. Text / Search Question
</div>
<div class="q-error hidden">
<span class="dsErrorText"></span>
</div>
<div class="q-info hidden">
<span class="dsInfoText"></span>
</div>
<div class="q-answer q-true-answer">
<input type="text" name="answer" class="answer" ></input>
</div>
</div>
</div>
<div class="ds-navigator">
<table>
<tbody>
<tr>
<td class="left"><div class="button dsPrev">Previous Page</div></td>
<td class="right"><div class="button dsNext">Next Page</div></td>
</tr>
</tbody>
</table>
</div>
<div class="survey-done hidden"><div class="dsEndMessage">Thank you for submitting!</div></div>
<div class="survey-loading hidden">
<div class="loader">
<div class="loader-wheel"></div>
<div class="loader-text"></div>
</div>
</div>
</form>
</body>
</html>
Here is my app script that input data when click on submit button
function doGet() {
return HtmlService.createTemplateFromFile('Index').evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME).addMetaTag('viewport', 'width=device-width, initial-scale=1');
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function uploadFiles(imageFile) {
//var folderId = getFolderID("App_Img");
var blob = Utilities.newBlob(imageFile.bytes, imageFile.mimeType, imageFile.filename);
var file = DriveApp.getFolderById("ID_FOLDER");
try {
var child = file.getFoldersByName(imageFile.folderName).next();
}
catch(e){
var child = file.createFolder(imageFile.folderName);
}
child.createFile(blob);
return {fileURL:file.getUrl(),fileDir:imageFile.fileDir};
}
function getFolderID(folderName)
{
var folders = DriveApp.getFolders();
while (folders.hasNext()) {
var folder = folders.next();
if(folder.getName() == folderName)
{
return folder.getId();
}
}
}
**
function inputData(formSurvey){
var url = "URL_GOOGLE_SHEETS";
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("Sheet1");
Logger.log(ws.getName());
console.log(ws.getName());
var data = [];
for (var i = 0; i<formSurvey.answer.length; i++){
data.push(formSurvey.answer[i]);
}
Logger.log(data.join(";"));
console.log(data.join(";"));
//ws.appendRow(data);
}
**
Here is my JS when click Submit button (last page)
function endSurvey(){
$(".survey-loading").show(0).delay(5000).hide(0);
google.script.run.withSuccessHandler(submitSuccess).inputData($("#mainForm")[0]);
}
function submitSuccess(){
$(".survey-done").toggleClass("hidden",false);
}
The error is quite weird , without any more information.
Please help me on this.

I've faced a similar situation with an "uncaught" console error after running some specific server side function. After a day of searching where the problem is, in my case It was caused by running the google app script from one account while logged in chrome to another one.
Once I changed and opened the app from the same account as logged in to Chrome, the problem disappeared.

JavaScript Mathematical calculation - Different results when compared to Excel Formula

When i simulate the following Excel calculation using JavaScript in HTML Form, i'am getting a different value When compared to Excel Result. I have attached the Excel sheet results and HTML form Results as well. Appreciate your help.
Excel Formula
=IF(E13=0,0,((E9/E13)+(E9*E11/12)))
Excel Result
HTML Form Result
Method I Tried
function calculate() {
var E9 = document.getElementById('E9').value;
var E11 = document.getElementById('E11').value;
var E13 = document.getElementById('E13').value;
var E11Pecentage = E11 / 100;
if (E9 !== "" && E11 !== "" && E13 !== "") {
var cal = (E9 / E13) + (E9 * E11Pecentage / 12);
//(E9/E13)+(E9*E11/12)
console.log(cal);
document.getElementById('E15').value = cal;
} else {
document.getElementById('E15').value = null;
}
}
<form id="mainForm" type="POST" action="/">
<div class="container body-content">
<div class="container">
<div class="row justify-content-start" style="padding-top:10px;">
<h1>Term Loan Calculator</h1>
</div>
<div class="row justify-content-start" style="padding-top:10px;">
<div class="col" style="padding-top:10px;">
<label>Loan facility proposed</label>
</div>
<div class="col" style="padding-top:10px;">
<input class="form-control" type="number" name="E9" id="E9" required onkeydown="calculate()" />
</div>
</div>
<div class="row justify-content-start" style="padding-top:10px;">
<div class="col" style="padding-top:10px;">
<label>Annual Interest Rate</label>
</div>
<div class="col" style="padding-top:10px;">
<input class="form-control" type="number" name="E11" id="E11" required onkeydown="calculate()" />
</div>
</div>
<div class="row justify-content-start" style="padding-top:10px;">
<div class="col" style="padding-top:10px;">
<label>Loan Term</label>
</div>
<div class="col" style="padding-top:10px;">
<input class="form-control" type="number" name="E13" id="E13" required onkeydown="calculate()" />
</div>
</div>
<div class="row justify-content-start" style="padding-top:10px;">
<div class="col" style="padding-top:10px;">
<label>Installment amount</label>
</div>
<div class="col" style="padding-top:10px;">
<input class="form-control" type="number" name="E15" id="E15" disabled/>
</div>
</div>
<div class="row justify-content-start" style="padding-top:10px;">
<div class="col" style="padding-top:10px;">
</div>
<div class="col" style="padding-top:10px;">
</div>
</div>
</div>
</div>
</form>

The keydown event fires before the value of your inputs actually changes. Use the input event instead:
function calculate() {
var E9 = document.getElementById('E9').value;
var E11 = document.getElementById('E11').value;
var E13 = document.getElementById('E13').value;
var E11Pecentage = E11/100;
if(E9 !=="" && E11 !=="" && E13 !=="" ) {
var cal = (E9/E13) + (E9 * E11Pecentage/12);
//(E9/E13)+(E9*E11/12)
console.log(cal);
document.getElementById('E15').value = cal;
}
else {
document.getElementById('E15').value = null;
}
}
<form id="mainForm" type="POST" action="/">
<div class="container body-content">
<div class="container">
<div class="row justify-content-start" style="padding-top:10px;">
<h1>Term Loan Calculator</h1>
</div>
<div class="row justify-content-start" style="padding-top:10px;">
<div class="col" style="padding-top:10px;">
<label>Loan facility proposed</label>
</div>
<div class="col" style="padding-top:10px;">
<input class="form-control" type="number" name="E9" id="E9" required oninput="calculate()"/>
</div>
</div>
<div class="row justify-content-start" style="padding-top:10px;">
<div class="col" style="padding-top:10px;">
<label>Annual Interest Rate</label>
</div>
<div class="col" style="padding-top:10px;">
<input class="form-control" type="number" name="E11" id="E11" required oninput="calculate()"/>
</div>
</div>
<div class="row justify-content-start" style="padding-top:10px;">
<div class="col" style="padding-top:10px;">
<label>Loan Term</label>
</div>
<div class="col" style="padding-top:10px;">
<input class="form-control" type="number" name="E13" id="E13" required oninput="calculate()"/>
</div>
</div>
<div class="row justify-content-start" style="padding-top:10px;">
<div class="col" style="padding-top:10px;">
<label>Installment amount</label>
</div>
<div class="col" style="padding-top:10px;">
<input class="form-control" type="number" name="E15" id="E15" disabled/>
</div>
</div>
<div class="row justify-content-start" style="padding-top:10px;">
<div class="col" style="padding-top:10px;">
</div>
<div class="col" style="padding-top:10px;">
</div>
</div>
</div>
</div>
</form>

How to get Underscore in textbox content in MVC in Print preview mode

I have printing textbox, labels and dropdown values on print preview page. Here I've attached Codepen link as well as code what I have done yet.
HTML
<form>
<div class="container no-print">
<div class="row" id="DivDate">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right">
<input type="text" name="CreatedDate" placeholder="DD/MM/YYYY" class="form-control" />
</div>
</div>
</div>
</div>
<div id="DivDoc">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-md-2 col-xs-4">
Respected Dr.
</label>
<div class="col-md-10 col-xs-8">
<input type="text" name="txtDoctor" placeholder="Doctor Name" class="form-control" />
</div>
</div>
</div>
</div>
</div>
<div id="DivData">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-2">
Referring
</label>
<div class="col-xs-4 col-md-2">
<select name="ddlGender" class="form-control">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Miss">Miss</option>
</select>
</div>
<div class="col-xs-6 col-md-8">
<input type="text" name="txtPatient" placeholder="Patient Name" class="form-control" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-9 col-sm-8 col-md-6">
to you for the favour of your kind consultation of
</label>
<div class="col-xs-3 col-sm-4 col-md-6">
<select name="ddlGender" class="form-control">
<option value="his">his</option>
<option value="her">her</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<div class="col-xs-3">
<select name="ddlOption" class="form-control">
<option value="C/O">C/O</option>
</select>.
</div>
<label class="col-xs-9">
<input type="text" class="form-control" />
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-9 col-sm-8 col-md-6">
Please do the needful to evaluate the case and treat
</label>
<div class="col-xs-3 col-sm-4 col-md-6">
<select name="ddlGender" class="form-control">
<option value="him">him</option>
<option value="her">her</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="col-xs-9 col-sm-8 col-md-6">
accordingly.
</label>
</div>
</div>
</div>
</div>
<div class="row" id="DivFooter">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right text-center">
<label>
Regards and Respect<br />
from<br />
Dr. Jayesh Hathi
</label>
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-lg-12">
<div class="col-xs-4">
<input type="button" value="Save" class="btn btn-block btn-primary" id="BtnSave" />
</div>
<div class="col-xs-4">
<input type="button" value="Print" class="btn btn-block btn-primary" />
</div>
<div class="col-xs-4">
<input type="button" value="Cancel" class="btn btn-block btn-default" />
</div>
</div>
</div>
</div>
</form>
<div class="print">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right" id="PrintDate">
</div>
</div>
</div>
</div>
<br />
<br />
<div class="row">
<div class="col-lg-12">
<div class="form-group" id="PrintDoc">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group" id="PrintData">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="pull-right text-center">
<label>
Regards and Respect<br />
from<br />
Dr. Jayesh Hathi
</label>
</div>
</div>
</div>
</div>
<br />
</div>
</div>
And Jquery:
$("#BtnSave").click(function() {
var values1 = [];
$('#DivDate').find("input,select,label").each(function() {
if ($(this).attr('type') == 'button') return true;
if ($(this).val() != "") {
values1.push($(this).val().trim());
} else {
values1.push($(this).text().trim());
}
});
$("#PrintDate").text(values1.join(" "));
var values2 = [];
$('#DivDoc').find("input,select,label").each(function() {
if ($(this).attr('type') == 'button') return true;
if ($(this).val() != "") {
values2.push($(this).val().trim());
} else {
values2.push($(this).text().trim());
}
});
$("#PrintDoc").text(values2.join(" "));
var values3 = [];
$('#DivData').find("input,select,label").each(function() {
if ($(this).attr('type') == 'button') return true;
if ($(this).val() != "") {
values3.push($(this).val().trim());
} else {
values3.push($(this).text().trim());
}
});
$("#PrintData").text(values3.join(" "));
window.print();
});
CodePen:https://codepen.io/anon/pen/GmjmBr
I want underscore under input text like doctorname and patient name. Can I add HTML any how in preview mode?
As I am getting value of all input in array and joining it, I don't think I can save HTML code in array.
I've attached Image for better clarification

Show hidden fields when checkbox is checked?

Hi I have multiple checkboxes of similar kind. I am applying javascript on the checkbox to show hidden fields. I have created a js code which works for a single checkbox, I want to apply a code that will work for all checkboxes.
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="checkbox" type="checkbox">
</div>
<div class="col-md-4" id="box" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="checkbox" type="checkbox">
</div>
<div class="col-md-4" id="box" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>
JS Code :-
var checkbox = document.getElementById('checkbox');
var box = document.getElementById('box');
checkbox.onclick = function() {
console.log(this);
if (this.checked) {
box.style['display'] = 'block';
} else {
box.style['display'] = 'none';
}
};
Now the thing is i can make individual javascript for all checkboxes but that will contain numerous js code, I want that a single javascript function can unhide the elements from every checkbox when clicked. A single js code should work for all checkboxes. Kindly please provide a way of doing it with plain javascript or jquery.

Try this
on your check box's onchange event call function onchange="showHiddenField(this)"
and function is like
function showHiddenField(currentObject) {
var inputDiv = $(currentObject).parent().next();
if ($(currentObject).is(":checked")) {
$(inputDiv).show().focus();
}
else {
$(inputDiv).hide();
}
}

Use javascript function to make it.
function toggleFields(boxId, checkboxId) {
var checkbox = document.getElementById(checkboxId);
var box = document.getElementById(boxId);
checkbox.onclick = function() {
console.log(this);
if (this.checked) {
box.style['display'] = 'block';
} else {
box.style['display'] = 'none';
}
};
}
toggleFields('box1', 'checkbox1');
toggleFields('box2', 'checkbox2');
<link href="//cdn.bootcss.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<!--<input id="checkbox" type="checkbox">-->
<input id="checkbox1" type="checkbox">
</div>
<!--<div class="col-md-4" id="box" style="display: none;">-->
<div class="col-md-4" id="box1" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<!--<input id="checkbox" type="checkbox">-->
<input id="checkbox2" type="checkbox">
</div>
<!--<div class="col-md-4" id="box" style="display: none;">-->
<div class="col-md-4" id="box2" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>

Okay this is how this works, each checkbox will have the id of its box as a class, so that when ever that checkbox is clicked, we will use its class to make its box visible. This will work even if you have 1000 checkboxes
var checkbox = document.querySelectorAll("#check1, #check2");
for (i = 0; i < checkbox.length; i++) {
checkbox[i].onclick = function() {
if (this.checked) {
document.getElementById(this.getAttribute('class')).style['display'] = 'block';
} else {
document.getElementById(this.getAttribute('class')).style['display'] = 'none';
}
};
}
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="check1" type="checkbox" class="box">
</div>
<div class="col-md-4" id="box" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="check2" type="checkbox" class="box2">
</div>
<div class="col-md-4" id="box2" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>

Yes you can do this. Solution in below code. i did this using JQuery.
$('input[type="checkbox"]').click(function(){
console.log(this);
// $(this).parent().next().css('display','block');
$(this).parent().next().toggle('show');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input name="chkbox" type="checkbox">
</div>
<div class="col-md-4" data-box="box" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input name="chkbox" type="checkbox">
</div>
<div class="col-md-4" data-box="box" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>

First Please note down in your mind "id" is only apply on a single elemnt on each page for multiple element you can apply a "class"
id="checkbox" replace with class="checkbox"
in Jquery
$(document).ready(function(){
$(".checkbox").change(function(){
if($(this).prop("checked")){
$(this).parents(".row").find(".box").show();
}else{
$(this).parents(".row").find(".box").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input class="checkbox" type="checkbox">
</div>
<div class="col-md-4 box" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input class="checkbox" type="checkbox">
</div>
<div class="col-md-4 box" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>

You can use querySelectorAll("[type='checkbox']") to select all checkbox and iterate through the elements using for loop.
Note : The id should be unique for each element.
var checkbox = document.querySelectorAll("[type='checkbox']");
for (i = 0; i < checkbox.length; i++) {
checkbox[i].onclick = function() {
if (this.checked) {
document.getElementById(this.getAttribute('class')).style['display'] = 'block';
} else {
document.getElementById(this.getAttribute('class')).style['display'] = 'none';
}
};
}
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="check1" type="checkbox" class="box">
</div>
<div class="col-md-4" id="box" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="check2" type="checkbox" class="box2">
</div>
<div class="col-md-4" id="box2" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>

The most narrowed (static) suggestion from your code:
$(document).ready(function() {
$('input[type=checkbox]').change(function(){
if($(this).prop('checked')){
$(this).parent().next().show();
}else{
$(this).parent().next().hide();
}
});
});
Use class attribute to get dynamic process.

Tested on google Chrome works.
gets id of input takes the number after "checkbox(gets_target)" string. creates a id with adding this number to end of "box"+number string
HTML :
<input onChange="display_hidden_field(this)" id="checkbox2" type="checkbox">
<div id="box2" style="display:none;">content</div>
Javascript :
function display_hidden_field(checkbox){
var box_id = checkbox.id;
var search_pattern = /checkbox(.*?)$/g;
var number = search_pattern.exec(box_id);
number = number[1];
box_id = 'box'+number;
var box = document.getElementById(box_id);
if(checkbox.checked){
box.style.display = 'block';
}else{
box.style.display = 'none';
}
}

You can use code like this what i did in this your every checkbox id create like this "checkbox_1" and your box id like this box_1 and so on other numbers please check below code you will get idea what you need to do with your html and java script.
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="checkbox_1" type="checkbox" onclick="myfunction(this);">
</div>
<div class="col-md-4" id="box_1" style="display: none;">
<input type="number" name="practical1" class="form-control">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-md-2">
<label>Practical Course:</label>
<input id="checkbox_2" type="checkbox" onclick="myfunction(this);">
</div>
<div class="col-md-4" id="box_2" style="display: none;">
<input type="number" name="practical2" class="form-control">
</div>
</div>
</div>
</div>
<script>
function myfunction(obj)
{
var element_index = obj.id.split("_");
console.log('box_'+element_index[1]);
var box = document.getElementById('box_'+element_index[1]);
if(obj.checked) {
box.style['display'] = 'block';
} else {
box.style['display'] = 'none';
}
}
</script>
Here in script i have given function name myfunction but you can set your function name as per your need. may this is helpful for you.

Develop Reference

JavaScript is the programming language of the Web.

Progress Bar - Multi Step Form - Javascript Problem - javascript

Related

How to implement radio button check in JSP JavaScript?

Uncaught Error when append data by Google Apps Script

JavaScript Mathematical calculation - Different results when compared to Excel Formula

How to get Underscore in textbox content in MVC in Print preview mode

Show hidden fields when checkbox is checked?

Categories

Resources