$(document).ready(function() {
function getData1() {
var innerhtml1 = $('.load1').html();
$('.main_div').append(innerhtml1);
}
getData1();
$(document).on('click', '.add_question', function() {
let lengthQstn = $('.main_div').children().length;
let questionHtml = $('.load1').html();
let appendQstn = questionHtml.replace(/0/g, lengthQstn).replace(/add_question/g, "remove_question").replace(/add question/g, "remove question");
$('.main_div').append(appendQstn);
})
$(document).on('click', '.add_option', function() {
var dataParent = $(this).attr('data-parent');
let lengthOpt = $("#option_" + dataParent).children().length;
lengthOpt++;
var dataParent = $(this).attr('data-parent');
let optionHtml = $('.load2').html();
let appendOpt = optionHtml.replace(/count/g, lengthOpt).replace(/0/g, dataParent);
$("#option_" + dataParent).append(appendOpt);
})
$(document).on('click', '.remove_question', function() {
var dataParent = $(this).attr('data-parent');
$("#question_" + dataParent).remove();
})
$(document).on('click', '.remove_option', function() {
var dataParent = $(this).attr('data-parent');
var dataIndex = $(this).attr('data-id');
$("#row_" + dataParent + '_' + dataIndex).remove();
})
})
.hide {
display: none;
}
.remove_option,
.remove_question {
background-color: rgb(204, 177, 177);
}
.add_question,
.add_option {
background-color: rgb(201, 233, 222);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<div class="container">
<center>
<h2>New Form</h2>
</center>
<div class="main_div">
</div>
</div>
<div class="load1 hide">
<div class="parent_div mb-5 mt-5" id="question_0">
<div class="div1">
<div class="row">
<div class="col-6">
<label id="question_0">Question_0</label>
<input type="text" name="question_0" id="question_0" class="form-control">
</div>
<div class="col-3">
<button id="add_question_0" class="form-control add_question mt-4" data-parent="0">add_question</button>
</div>
</div>
</div>
<div class="div2" id="option_0">
<div class="row" id="row_0_1">
<div class="col-6">
<label id="option_0_1">option_0_1</label>
<input type="text" name="option_0_1" id="option_0_1" class="form-control">
</div>
<div class="col-3">
<button id="add_option_0" class="form-control add_option mt-4" data-parent="0">add
option</button>
</div>
</div>
<div class="row" id="row_0_2">
<div class="col-6">
<label id="option_0_2">option_0_2</label>
<input type="text" name="option_0_2" id="option_0_2" class="form-control">
</div>
</div>
</div>
</div>
</div>
<div class="load2 hide">
<div class="row" id="row_0_count">
<div class="col-6 option_0_count">
<label id="option_0_count">option_0_count</label>
<input type="text" name="option_0_count" id="option_0_count" class="form-control">
</div>
<div class="col-3">
<button id="remove_option_count" class="form-control remove_option mt-4" data-parent="0" data-id="count">remove option</button>
</div>
</div>
</div>
I have made a page for dynamically appending input fields for new questions, as well as new options.
All are input fields only, I have to generate an index for the fields.
But, when I click on "add option" the options input fields are appending but the index is not being generated correctly; also I have to generate an index similarly for the buttons too. Please help with this part.
Also, I have to dynamically remove the added option fields too when clicked on "remove option" button, I have commented it as of now.
I need to make sure the value of a particular set of boxes should not exceed the value of other sets of boxes...
Set 1: Consultation fee, Other fee (total_fee will show the sum of these)
Set 2: cash, gpay, upi, card, others (total fee paid will show the sum of these)
The above action working pretty well...
Now, I want to make sure set 2 of total value should not exceed set 1 of total value. if so, I need to disable btn and also need to show an error message as "Sum of Receiving Payment exceeds Total Fee, Please Check!"...
How to do that?!
<html>
<head>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.error-text {
font-size: 14px;
color: red;
margin-top: 15px;
}
</style>
<!-- Total Receiving Fee Calculation from Cash, Gpay, UPI, Card, Others -->
<script type="text/javascript">
$(function() {
const paid_cash = document.getElementById("paid_cash");
const paid_gpay = document.getElementById("paid_gpay");
const paid_upi = document.getElementById("paid_upi");
const paid_card = document.getElementById("paid_card");
const paid_others = document.getElementById("paid_others");
const total_fee_paid = document.getElementById("total_fee_paid");
document.getElementById("paid_cash").addEventListener("input", sum);
document.getElementById("paid_gpay").addEventListener("input", sum);
document.getElementById("paid_upi").addEventListener("input", sum);
document.getElementById("paid_card").addEventListener("input", sum);
document.getElementById("paid_others").addEventListener("input", sum);
function sum() {
total_fee_paid.value = Number(paid_cash.value) + Number(paid_gpay.value) + Number(paid_upi.value) + Number(paid_card.value) + Number(paid_others.value);
}
});
</script>
<!-- Total Fee Calculation from Consultation fee and Other fee-->
<script type="text/javascript">
$(function() {
const fee1 = document.getElementById("visit_cons_fee");
const fee2 = document.getElementById("visit_other_fee");
const total_fee = document.getElementById("total_fee");
document.getElementById("visit_cons_fee").addEventListener("input", sum);
document.getElementById("visit_other_fee").addEventListener("input", sum);
function sum() {
total_fee.value = Number(fee1.value) + Number(fee2.value);
}
});
</script>
<script type="text/javascript">
// access the button from the html
const btn = document.getElementById("btnSubmit");
// access input boxes total_fee, total_fee_paid
const [visit_cons_fee, visit_other_fee, paid_cash, paid_gpay, paid_upi, paid_card, paid_others] = [
document.getElementById("visit_cons_fee"),
document.getElementById("visit_other_fee"),
document.getElementById("paid_cash"),
document.getElementById("paid_gpay"),
document.getElementById("paid_upi"),
document.getElementById("paid_card"),
document.getElementById("paid_others")
];
// a generic method to validate if prices indicate
// that 'submit' button should be disabled
// as well as render an error notification
const validatePrices = () => {
btn.disabled = (+visit_cons_fee.value + +visit_other_fee.value < +paid_cash.value + +paid_gpay.value + +paid_upi.value + +paid_card.value + +paid_others.value);
document.getElementById("error").innerText = (+visit_cons_fee.value + +visit_other_fee.value < +paid_cash.value + +paid_gpay.value + +paid_upi.value + +paid_card.value + +paid_others.value ?
'Sum of Receiving Payment exceeds Total Fee, Please Check!' :
''
);
};
// add event-listener to each input to invoke the validate method
[paid_cash, paid_gpay, paid_upi, paid_card, paid_others].forEach(
box => {
box.addEventListener('keyup', validatePrices)
});
</script>
</head>
<body>
<div class="row">
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Consulation Fees:</b><span class="text-danger">*</span></label><input type="number" class="form-control" id="visit_cons_fee" name="visit_cons_fee" required min="0">
</div>
</div>
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Other Charges:</b></label><input type="number" class="form-control" id="visit_other_fee" name="visit_other_fee" min="0">
</div>
</div>
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Total Fee:</b></label><input type="number" class="form-control" id="total_fee" name="total_fee" value="" disabled>
</div>
</div>
</div>
<hr/>
<div class="row">
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>Payment by Cash:</b></label><input type="number" class="form-control" name="paid_cash" id="paid_cash" placeholder="0" min="0">
</div>
</div>
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>GPay Payment:</b></label><input type="number" class="form-control" id="paid_gpay" name="paid_gpay" placeholder="0" min="0">
</div>
</div>
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>UPI Payment:</b></label><input type="number" class="form-control" id="paid_upi" name="paid_upi" placeholder="0" min="0">
</div>
</div>
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>Card Payment:</b></label><input type="number" class="form-control" name="paid_card" id="paid_card" placeholder="0" min="0">
</div>
</div>
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>Other Payment:</b></label><input type="number" class="form-control" name="paid_others" id="paid_others" placeholder="0" min="0">
</div>
</div>
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>Total Paid Payment:</b></label><input type="number" class="form-control" id="total_fee_paid" name="total_fee_paid" value="" disabled>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-12">
<div class="form-group">
<center>
<div id="error" class='error-text'>Test</div>
</center><br/><br/>
</div>
</div>
</div>
<div class="form-group text-right">
<button id="btnSubmit" type="submit" class="btn btn-primary float-end ">Add Visit</button>
</div>
</body>
</html>
Your logic seems good, but you call getElementById before DOM is ready, which means all elements are not available, and you try to call addEventListener to undefined elements.
To avoid that situation, you can add
$(document).ready(() => { //your logic })
Side note that I also improved your logic in validatePrices.
<html>
<head>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.error-text {
font-size: 14px;
color: red;
margin-top: 15px;
}
</style>
<!-- Total Receiving Fee Calculation from Cash, Gpay, UPI, Card, Others -->
<script type="text/javascript">
$(function() {
const paid_cash = document.getElementById("paid_cash");
const paid_gpay = document.getElementById("paid_gpay");
const paid_upi = document.getElementById("paid_upi");
const paid_card = document.getElementById("paid_card");
const paid_others = document.getElementById("paid_others");
const total_fee_paid = document.getElementById("total_fee_paid");
paid_cash.addEventListener("input", sum);
paid_gpay.addEventListener("input", sum);
paid_upi.addEventListener("input", sum);
paid_card.addEventListener("input", sum);
paid_others.addEventListener("input", sum);
function sum() {
total_fee_paid.value = Number(paid_cash.value) + Number(paid_gpay.value) + Number(paid_upi.value) + Number(paid_card.value) + Number(paid_others.value);
}
});
</script>
<!-- Total Fee Calculation from Consultation fee and Other fee-->
<script type="text/javascript">
$(function() {
const fee1 = document.getElementById("visit_cons_fee");
const fee2 = document.getElementById("visit_other_fee");
const total_fee = document.getElementById("total_fee");
fee1.addEventListener("input", sum);
fee2.addEventListener("input", sum);
function sum() {
total_fee.value = Number(fee1.value) + Number(fee2.value);
}
});
</script>
<script type="text/javascript">
$(document).ready(() => {
// access the button from the html
const btn = document.getElementById("btnSubmit");
// access input boxes total_fee, total_fee_paid
const [visit_cons_fee, visit_other_fee, paid_cash, paid_gpay, paid_upi, paid_card, paid_others] = [
document.getElementById("visit_cons_fee"),
document.getElementById("visit_other_fee"),
document.getElementById("paid_cash"),
document.getElementById("paid_gpay"),
document.getElementById("paid_upi"),
document.getElementById("paid_card"),
document.getElementById("paid_others")
];
const total_fee = document.getElementById("total_fee");
const total_fee_paid = document.getElementById("total_fee_paid");
// a generic method to validate if prices indicate
// that 'submit' button should be disabled
// as well as render an error notification
const validatePrices = () => {
const invalid = Number(total_fee.value) < Number(total_fee_paid.value);
btn.disabled = invalid;
document.getElementById("error").innerText = invalid ?
'Sum of Receiving Payment exceeds Total Fee, Please Check!' :
''
};
// add event-listener to each input to invoke the validate method
[visit_cons_fee, visit_other_fee, paid_cash, paid_gpay, paid_upi, paid_card, paid_others].forEach(
(item) => {
item.addEventListener('keyup', validatePrices)
});
})
</script>
</head>
<body>
<div class="row">
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Consulation Fees:</b><span class="text-danger">*</span></label><input type="number" class="form-control" id="visit_cons_fee" name="visit_cons_fee" required min="0">
</div>
</div>
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Other Charges:</b></label><input type="number" class="form-control" id="visit_other_fee" name="visit_other_fee" min="0">
</div>
</div>
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Total Fee:</b></label><input type="number" class="form-control" id="total_fee" name="total_fee" value="" disabled>
</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>Payment by Cash:</b></label><input type="number" class="form-control" name="paid_cash" id="paid_cash" placeholder="0" min="0">
</div>
</div>
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>GPay Payment:</b></label><input type="number" class="form-control" id="paid_gpay" name="paid_gpay" placeholder="0" min="0">
</div>
</div>
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>UPI Payment:</b></label><input type="number" class="form-control" id="paid_upi" name="paid_upi" placeholder="0" min="0">
</div>
</div>
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>Card Payment:</b></label><input type="number" class="form-control" name="paid_card" id="paid_card" placeholder="0" min="0">
</div>
</div>
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>Other Payment:</b></label><input type="number" class="form-control" name="paid_others" id="paid_others" placeholder="0" min="0">
</div>
</div>
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>Total Paid Payment:</b></label><input type="number" class="form-control" id="total_fee_paid" name="total_fee_paid" value="" disabled>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-12">
<div class="form-group">
<center>
<div id="error" class='error-text'>Test</div>
</center><br /><br />
</div>
</div>
</div>
<div class="form-group text-right">
<button id="btnSubmit" type="submit" class="btn btn-primary float-end ">Add Visit</button>
</div>
</body>
</html>
Here is a jQuery specific approach, it is a rework, but only because you are already loading the library. The only slight modifications to HTML being adding a class for payment specific fields as well as fee specific fields. This is a little more concise and readable, but ultimately, it is just another approach.
<html>
<head>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.error-text {
font-size: 14px;
color: red;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Consulation Fees:</b><span class="text-danger">*</span></label><input type="number"
class="form-control field-consult-fee" id="visit_cons_fee" name="visit_cons_fee" required min="0">
</div>
</div>
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Other Charges:</b></label><input type="number" class="form-control field-consult-fee"
id="visit_other_fee" name="visit_other_fee" min="0">
</div>
</div>
<div class="col-xl-4">
<div class="form-group">
<label class="gr"><b>Total Fee:</b></label><input type="number" class="form-control" id="total_fee"
name="total_fee" value="" disabled>
</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>Payment by Cash:</b></label><input type="number" class="form-control field-payment-type"
name="paid_cash" id="paid_cash" placeholder="0" min="0">
</div>
</div>
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>GPay Payment:</b></label><input type="number" class="form-control field-payment-type"
id="paid_gpay" name="paid_gpay" placeholder="0" min="0">
</div>
</div>
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>UPI Payment:</b></label><input type="number" class="form-control field-payment-type"
id="paid_upi" name="paid_upi" placeholder="0" min="0">
</div>
</div>
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>Card Payment:</b></label><input type="number" class="form-control field-payment-type"
name="paid_card" id="paid_card" placeholder="0" min="0">
</div>
</div>
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>Other Payment:</b></label><input type="number" class="form-control field-payment-type"
name="paid_others" id="paid_others" placeholder="0" min="0">
</div>
</div>
<div class="col-xl-2">
<div class="form-group">
<label class="gr"><b>Total Paid Payment:</b></label><input type="number" class="form-control"
id="total_fee_paid" name="total_fee_paid" value="" disabled>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-12">
<div class="form-group text-center mb-4">
<div id="error" class='error-text'>Test</div>
</div>
</div>
</div>
<div class="form-group text-right">
<button id="btnSubmit" type="submit" class="btn btn-primary float-end ">Add Visit</button>
</div>
</div>
<script>
$(document).ready(function () {
// store our payment fields in variables
const $paid_cash = $("#paid_cash")
const $paid_gpay = $("#paid_gpay")
const $paid_upi = $("#paid_upi")
const $paid_card = $("#paid_card")
const $paid_others = $("#paid_others")
// store our fee fields in variables
const $fee1 = $("#visit_cons_fee")
const $fee2 = $("#visit_other_fee")
const $total_fee = $("#total_fee")
// store our totals in variables
const $total_fee_paid = $("#total_fee_paid")
const $field_payment_type = $("input.field-payment-type")
// function to sum our payment fields and display the total
function sumPayments() {
const payment_fields = [$paid_cash, $paid_gpay, $paid_upi, $paid_card, $paid_others]
const total_fee_paid = payment_fields.reduce((a, b) => a + +b.val(), 0)
$total_fee_paid.val(total_fee_paid)
validate()
}
// function to sum our fee fields and display the total
function sumFees() {
const fee_fields = [$fee1, $fee2];
const total_fee = fee_fields.reduce((a, b) => a + +b.val(), 0)
$total_fee.val(total_fee)
validate()
}
// function to validate our payment does not exceed our fee
function validate() {
const $btn_submit = $("#btnSubmit")
const total_fee = +$total_fee.val()
const total_fee_paid = +$total_fee_paid.val()
let disabled = false
let error = " "
if (total_fee_paid > total_fee) {
error = "Total paid amount cannot be greater than total fee"
disabled = true
}
$("#error").html(error)
$btn_submit.attr("disabled", disabled)
}
// add event listeners to our payment_type fields
$field_payment_type.on('input', sumPayments)
$field_consult_fee.on('input', sumFees)
});
</script>
</body>
</html>
function add_variant(){
var thickness=document.forms["create_product"]["thickness"].value;
var thickness_unit=document.forms["create_product"]["thickness_unit"].value;
var product_qty=document.forms["create_product"]["product_qty"].value;
var product_cost_price=document.forms["create_product"]["product_cost_price"].value;
var product_unit=document.forms["create_product"]["product_unit"].value;
var product_color=document.forms["create_product"]["product_color"].value;
var thickness_dim =document.forms["create_product"]["thickness"].value;
console.log("thick"+thickness);
console.log("thick dim"+thickness_dim);
if(thickness == null || thickness == "", thickness_dim ==""|| thickness_dim==null)
{
alert('you must filled previous data');
return false;
}
var temp = document.getElementById("product_dimension").content;
var copy = document.importNode(temp,true);
document.getElementById("product_description").appendChild(copy);
}
<div class="col-md-2">
<label>Product Variants</label>
<a class="btn btn-primary" id="add_variant" onclick="add_variant()"><i class="fa fa-plus"></i> add Variant</a>
</div>
<div id="product_description">
<div class="row" >
<div class="col-sm-1">
<div class="form-group">
<label>Actions</label><br>
<button class="btn btn-danger"><i class="fa fa-trash"></i></button>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label>Thickness</label>
<input type="number" class="form-control" name="thickness" id="thickness">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Thickness Unit</label>
<select class="form-control"name="thickness_unit" id="thickness_unit">
<option>mm</option>
<option>feet</option>
<option>Square feet</option>
<option>meter</option>
<option>mm square</option>
<option>Steel Gauge</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Product Qty.</label>
<input type="number" class="form-control" name="product_qty" id="product_qty">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Product Cost Price</label>
<input type="number" class="form-control" name="product_cost_price" id="product_cost_price">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Product Unit</label>
<select class="form-control" name="product_unit" id="product_unit">
<option>Sheet</option>
<option>No</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Product Color</label>
<input type="text" class="form-control" name="product_color" id="product_color">
</div>
</div>
</div>
</div>
<div>
<template id="product_dimension">
<div class="row">
<div class="col-md-1">
<div class="form-group">
<label>Actions</label><br>
<button class="btn btn-danger btnDelete"><i class="fa fa-trash"></i></button>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label>Thickness</label>
<input type="number" class="form-control" name="thickness" id="thickness">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Thickness Unit</label>
<select class="form-control"name="thickness_unit" id="thickness_unit">
<option>mm</option>
<option>feet</option>
<option>Square feet</option>
<option>meter</option>
<option>mm square</option>
<option>Gauge</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Product Qty.</label>
<input type="number" class="form-control" name="product_qty" id="product_qty">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Product Cost Price</label>
<input type="number" class="form-control" name="product_cost_price" id="product_cost_price">
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Product Unit</label>
<select class="form-control" name="product_unit" id="product_unit">
<option>Sheet</option>
<option>Nos</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label>Product Color</label>
<input type="text" class="form-control" name="product_color" id="product_color">
</div>
</div>
</div>
</template>
</div>
i am new to java script i am trying to add some validations on my add product form in which i am trying to perform some append function in whixh i want to append a div but if the previous row is empty then it should not add/append new row but while doing so it just check validation for the 1st row when i add 2 nd add try to add 3rd it shows error
will please anybody help me to solve this,here is my code
JS:
function add_variant(){
var thickness=document.forms["create_product"]["thickness"].value;
var thickness_unit=document.forms["create_product"]["thickness_unit"].value;
var product_qty=document.forms["create_product"]["product_qty"].value;
var product_cost_price=document.forms["create_product"]["product_cost_price"].value;
var product_unit=document.forms["create_product"]["product_unit"].value;
var product_color=document.forms["create_product"]["product_color"].value;
var thickness_dim =document.forms["create_product"]["thickness"].value;
console.log("thick"+thickness);
console.log("thick dim"+thickness_dim);
if(thickness == null || thickness == "", thickness_dim ==""|| thickness_dim==null)
{
alert('you must filled previous data');
return false;
}
var temp = document.getElementById("product_dimension").content;
var copy = document.importNode(temp,true);
document.getElementById("product_description").appendChild(copy);
}
<div id="product_description">
<div class="row" >
<div class="col-sm-1">
<button class="btn btn-danger"><i class="fa fa-
trash"></i></button>
</div>
<!--further fields-->
</div>
<template id="product_dimension">
<div class="row">
<div class="col-md-1">
<div class="form-group">
<button class="btn btn-danger btnDelete"><i class="fa fa-trash"></i>
</button>
<!--further fields->
</div>
</div>
</template>
`
Here is the code:
const addVariant = document.getElementById("add_variant");
const productDescription = document.getElementById("product_description");
const errorAlert = document.querySelector(".alert");
const template = `<div class="row my-4 p-3 rounded productTemp">
<div class="col-md-1">
<div class="form-group">
<label class="mb-2">Actions</label>
<br />
<button class="btn btn-danger btnDelete">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label class="mb-2">Thickness</label>
<input type="number" class="form-control" name="thickness" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Thickness Unit</label>
<select class="form-control" name="thickness_unit">
<option>mm</option>
<option>feet</option>
<option>Square feet</option>
<option>meter</option>
<option>mm square</option>
<option>Gauge</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Product Qty.</label>
<input type="number" class="form-control" name="product_qty" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Product Cost Price</label>
<input type="number" class="form-control" name="product_cost_price" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Product Unit</label>
<select class="form-control" name="product_unit">
<option>Sheet</option>
<option>Nos</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Product Color</label>
<input type="text" class="form-control" name="product_color" />
</div>
</div>
</div>
`;
function addAlert(message) {
errorAlert.classList.add("show");
errorAlert.innerHTML = message;
setTimeout(() => {
errorAlert.classList.remove("show");
}, 3000);
}
addVariant.addEventListener("click", function() {
const productTemp = document.querySelectorAll(".productTemp");
const lastElement = productTemp[productTemp.length - 1];
const thickness = lastElement.querySelector('[name="thickness"]');
const thicknessUnit = lastElement.querySelector('[name="thickness_unit"]');
const productQty = lastElement.querySelector('[name="product_qty"]');
const productPrice = lastElement.querySelector('[name="product_cost_price"]');
const productUnit = lastElement.querySelector('[name="product_unit"]');
const productColor = lastElement.querySelector('[name="product_color"]');
if (
thickness.value !== "" &&
thicknessUnit.value !== "" &&
productQty.value !== "" &&
productPrice.value !== "" &&
productUnit.value !== "" &&
productColor.value !== ""
) {
productDescription.insertAdjacentHTML("beforeend", template);
} else {
addAlert("Fields can not be empty! 😑");
}
});
.productTemp {
background-color: #2c3035;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<body class="bg-dark text-white">
<div class="container mt-5 bg-dark text-white">
<div class="alert alert-danger alert-dismissible fade mb-5" role="alert"></div>
<div class="col-md-2 mb-4">
<label class="mb-2">Product Variants</label>
<a class="btn btn-primary" id="add_variant">
<i class="fa fa-plus"></i> add Variant
</a>
</div>
<div id="product_description">
<div class="row my-4 p-3 rounded productTemp">
<div class="col-sm-1">
<div class="form-group">
<label class="mb-2">Actions</label>
<br />
<button class="btn btn-danger">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<label class="mb-2">Thickness</label>
<input type="number" class="form-control" name="thickness" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Thickness Unit</label>
<select class="form-control" name="thickness_unit">
<option>mm</option>
<option>feet</option>
<option>Square feet</option>
<option>meter</option>
<option>mm square</option>
<option>Steel Gauge</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Product Qty.</label>
<input type="number" class="form-control" name="product_qty" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Product Cost Price</label>
<input type="number" class="form-control" name="product_cost_price" />
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Product Unit</label>
<select class="form-control" name="product_unit">
<option>Sheet</option>
<option>No</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="mb-2">Product Color</label>
<input type="text" class="form-control" name="product_color" />
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
I am trying to use the percentage calculator (code below) but I only want it to out put whole numbers (rounded up where possible) as you cant have .3 of a business lead.
I have the code working so that it calculates and functions as intended but just need to reduce it to 0 decimal spaces.
I am building this onto wordpress but am happy to use a plugin or alternatively a 3rd party script if needed to solve this issue.
<style>
.entry-title {
display: none;
}
.calculator {
margin-bottom: 80px;
}
.calculator-banner {
padding: 100px 0px;
}
.calculator-banner h1 {
font-size: 55px;
font-weight: 300;
color: #4d4d4e;
text-align: center;
}
.calculator-banner p {
text-align: center;
font-size: 25px;
color: #4d4d4e;
padding: 0px;
font-weight: 100;
line-height: normal;
max-width: 800px;
margin: 0 auto;
margin-top: 20px;
}
.calculator .col-sm-4:first-child {
border-right: 1px solid #f0f0f0;
}
.calculator .row:nth-child(even) {
background: #f0f0f0;
}
.calculator .col-sm-4 p {
margin-top: 0px;
}
.calculator p {
padding: 10px;
}
input {
background: none;
margin: 10px;
}
</style>
<div class="calculator-banner">
<div class="container">
<h1>Conversion <strong>Calculator</strong></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at dui eleifend neque ullamcorper mattis sed sed risus.</p>
</div>
</div>
<div class="calculator">
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
<h5>Without Software</h5>
</div>
<div class="col-sm-4">
<h5>With Software</h5>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p>Website Visitors Per Month</p>
</div>
<div class="col-sm-4">
<input type="number" name="price" id="websitevisitors-without" value="10000" onchange="myChangeFunction(this)" />
</div>
<div class="col-sm-4">
<input type="number" name="price" id="websitevisitors-with" value="10000" />
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p>Standard Form Fill Conversion </p>
</div>
<div class="col-sm-4">
<input type="number" name="qty" id="standard-form-fill-without" value="2"/>
</div>
<div class="col-sm-4">
<input type="number" name="qty" id="standard-form-fill-with" value="2"/>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p>Number of Form Fill Enquiries</p>
</div>
<div class="col-sm-4">
<input type="number" name="total" id="number-of-form-fills-without" value="200" readonly />
</div>
<div class="col-sm-4">
<input type="number" name="total" id="number-of-form-fills-with" value="200" readonly />
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p>Conversion from Identified Website Visitors</p>
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p>Number of Website Visitor Conversions</p>
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p>Total Number of Opportunities</p>
</div>
<div class="col-sm-4">
<input type="number" name="total" id="total-opportunities-without" value="200" readonly />
</div>
<div class="col-sm-4">
<input type="number" name="total" id="total-opportunities-with" value="200" readonly />
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p>Conversion of Opportunities to Sales</p>
</div>
<div class="col-sm-4">
<input type="number" name="total" id="conversion-of-opportunities-without" value="20" />
</div>
<div class="col-sm-4">
<input type="number" name="total" id="conversion-of-opportunities-with" value="20" />
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p>Number of Sales</p>
</div>
<div class="col-sm-4">
<input type="number" name="total" id="number-of-sales-without" value="40" />
</div>
<div class="col-sm-4">
<input type="number" name="total" id="number-of-sales-with" value="40" />
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p>Average Order Value</p>
</div>
<div class="col-sm-4">
<input type="number" name="total" id="average-order-value-without" value="1000" />
</div>
<div class="col-sm-4">
<input type="number" name="total" id="average-order-value-with" value="1000" />
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p>Revenue Generated</p>
</div>
<div class="col-sm-4">
<input type="number" name="total" id="revenue-generated-without" value="40000" />
</div>
<div class="col-sm-4">
<input type="number" name="total" id="revenue-generated-with" value="40000" />
</div>
</div>
<div class="row">
<div class="col-sm-4">
<p>12month business benefit</p>
</div>
<div class="col-sm-4">
<input type="number" name="total" id="year-business-benefit-without" value="480000" step="0.01"/>
</div>
<div class="col-sm-4">
<input type="number" name="total" id="year-business-benefit-with" value="480000" />
</div>
</div>
</div>
<script>
$('#websitevisitors-without, #standard-form-fill-without, #conversion-of-opportunities-without, #number-of-sales-without, #average-order-value-without, #year-business-benefit-without, #revenue-generated-without').change(function() {
var webvisitorswithout = parseFloat($('#websitevisitors-without').val()).toFixed(2);
var standardformfillwithout = parseFloat($('#standard-form-fill-without').val()).toFixed(2);
var converstionofopportunitieswihtout = parseFloat($('#conversion-of-opportunities-without').val()).toFixed(2);
var numberofsaleswithout = parseFloat($('#number-of-sales-without').val()).toFixed(2);
var averageordervaluewithout = parseFloat($('#average-order-value-without').val()).toFixed(2);
var yearbusinessbenefitwithout = parseFloat($('#year-business-benefit-without').val()).toFixed(2);
var revenuegeneratedwithout = parseFloat($('#revenue-generated-without').val()).toFixed(2);
$('#number-of-form-fills-without, #total-opportunities-without').val(webvisitorswithout * standardformfillwithout / 100);
$('#number-of-sales-without').val(webvisitorswithout * standardformfillwithout / 100 * converstionofopportunitieswihtout / 100);
$('#revenue-generated-without').val(averageordervaluewithout * numberofsaleswithout);
$('#year-business-benefit-without').val(revenuegeneratedwithout * 12);
});
</script>
<script>
$('#websitevisitors-with, #standard-form-fill-with, #conversion-of-opportunities-with, #number-of-sales-with, #average-order-value-with, #year-business-benefit-with, #revenue-generated-with').change(function() {
var webvisitorswith = parseFloat($('#websitevisitors-with').val());
var standardformfillwith = parseFloat($('#standard-form-fill-with').val());
var converstionofopportunitieswihtout = parseFloat($('#conversion-of-opportunities-with').val());
var numberofsaleswith = parseFloat($('#number-of-sales-with').val());
var averageordervaluewith = parseFloat($('#average-order-value-with').val());
var yearbusinessbenefitwith = parseFloat($('#year-business-benefit-with').val());
var revenuegeneratedwith = parseFloat($('#revenue-generated-with').val());
$('#number-of-form-fills-with, #total-opportunities-with').val(webvisitorswith * standardformfillwith / 100);
$('#number-of-sales-with').val(webvisitorswith * standardformfillwith / 100 * converstionofopportunitieswihtout / 100);
$('#revenue-generated-with').val(averageordervaluewith * numberofsaleswith);
$('#year-business-benefit-with').val(revenuegeneratedwith * 12).toFixed(2);
});
</script>
<script type="text/javascript">
function myChangeFunction(websitevisitors-without) {
var input2 = document.getElementById('websitevisitors-with');
websitevisitors-with.value = websitevisitors-without.value;
}
</script>
use Math.ceil to round up to the next bigger number
use Math.floor to round up to the next smaller number
eg
Math.ceil(0.3) // returns 1
Math.floor(0.3) //returns 0
I'm trying to learn Bootstrap / play around with Bootsnipp.
I have copied the HTML, CSS and JS from the link (although I think I have redundancy here): http://bootsnipp.com/snippets/e3MBM
1) Is it Redundant to add the CDN link and the actual CSS and JS (From what I understand the latter would only be if I host the CSS and JS files locally? Can someone confirm this?
2)The damn thing doesn't work the way it is supposed to:
Is theirs - with each step shown separately.
Mine, on the other hand has everything together:
It's probably something so stupid and simple, but I have no idea.Can someone please help?
I tried JSFiddle *First time using it, looks easy, but I hope I've got it right :)
<!DOCTYPE HTML>
https://jsfiddle.net/vvstafo2/1/
You forgot to add bootstrap JS and CSS file thats why its conflict over there, Would you please once try with the below code?
$(document).ready(function () {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');
allWells.hide();
navListItems.click(function (e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allNextBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for(var i=0; i<curInputs.length; i++){
if (!curInputs[i].validity.valid){
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid)
nextStepWizard.removeAttr('disabled').trigger('click');
});
$('div.setup-panel div a.btn-primary').trigger('click');
});
body {
margin-top:40px;
}
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 50%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<link rel="stylesheet" href="http://bootsnipp.com/dist/bootsnipp.min.css?ver=7d23ff901039aef6293954d33d23c066">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://bootsnipp.com/dist/scripts.min.js"></script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<div class="container">
<div class="stepwizard col-md-offset-3">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
1
<p>Step 1</p>
</div>
<div class="stepwizard-step">
2
<p>Step 2</p>
</div>
<div class="stepwizard-step">
3
<p>Step 3</p>
</div>
</div>
</div>
<form role="form" action="" method="post">
<div class="row setup-content" id="step-1">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3> Step 1</h3>
<div class="form-group">
<label class="control-label">First Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter First Name" />
</div>
<div class="form-group">
<label class="control-label">Last Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Last Name" />
</div>
<div class="form-group">
<label class="control-label">Address</label>
<textarea required="required" class="form-control" placeholder="Enter your address" ></textarea>
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-2">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3> Step 2</h3>
<div class="form-group">
<label class="control-label">Company Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" />
</div>
<div class="form-group">
<label class="control-label">Company Address</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" />
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-3">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3> Step 3</h3>
<button class="btn btn-success btn-lg pull-right" type="submit">Submit</button>
</div>
</div>
</div>
</form>
</div>