Develop Reference

If statement with multiple logical operator not working

<script>
function calculateAmount(val) {
var quantity = val;
if (quantity <= 100 && quantity < 1000){
var divobj = document.getElementById('discount');
divobj.value = 4;
var divobj1 = document.getElementById('yousaved');
var yousaved = 0.4 * quantity;
divobj1.value = yousaved;
}
}
</script>
<form>
<div class="form-group">
<label for=“quantity”>:</label>
<input type="quantity" class="form-control" id="quantity" aria-describedby="quantityHelp" placeholder="100 to 1000000" onchange="calculateAmount(this.value)" required>
<small id="quantityHelp" class="form-text text-muted">Any amount between 100 to 1000000.</small>
</div>
<div class="form-group">
<label for=“discount”>discount in %:</label>
<input type="discount" readonly class="form-control" id="discount" placeholder="Interest">
</div>
<div class="form-group">
<label for=“yousaved”>Total saving:</label>
<input type="yousaved" readonly class="form-control" id="yousaved" placeholder="Your Savings">
</div>
</form>
</div>
if (quantity <= 100 && quantity < 1000) condition not working, the only value accepted and get calculated is 100, and even var addition and multiplication is not working eg: quantity - quantity * 4/100

Based on text from your HTML (Number between 100 and 1000), the script should be:
<script>
function calculateAmount(val) {
var quantity = val;
if (quantity >= 100 && quantity <= 1000){
var divobj = document.getElementById('discount');
divobj.value = 4;
var divobj1 = document.getElementById('yousaved');
var yousaved = 0.4 * quantity;
divobj1.value = yousaved;
}
}
</script>

Yup, just a typo.
Probably better to just delete this question Arunkumar.
function calculateAmount(val) {
var quantity = val;
if (quantity >= 100 && quantity < 1000) {
var divobj = document.getElementById('discount');
divobj.value = 4;
var divobj1 = document.getElementById('yousaved');
var yousaved = 0.4 * quantity;
divobj1.value = yousaved;
}
}
<form>
<div class="form-group">
<label for=“quantity”>:</label>
<input type="quantity" class="form-control" id="quantity" aria-describedby="quantityHelp" placeholder="100 to 1000000" onchange="calculateAmount(this.value)" required>
<small id="quantityHelp" class="form-text text-muted">Any amount between 100 to 1000000.</small>
</div>
<div class="form-group">
<label for=“discount”>discount in %:</label>
<input type="discount" readonly class="form-control" id="discount" placeholder="Interest">
</div>
<div class="form-group">
<label for=“yousaved”>Total saving:</label>
<input type="yousaved" readonly class="form-control" id="yousaved" placeholder="Your Savings">
</div>
</form>

How would I create a currency converter with javascript?

I'm trying to build a currency converter. I'm using javascript and I have a good foundation but I want to know how to make the converter update in real-time without having to click a button.
How do I make it so that my converter converts from a base currency of M without needing be be within a select element & how do I make the converter update as the user types the number in, rather than having to click a button?
I've tried removing all of the available options for the .currency-1 class and only leaving M, but that still leaves a drop down menu. I want to convert from M to X (USD, GBP, CAD, EUR, etc.)
var crrncy = {
'M': {
'USD': 0.80,
'GBP': 0.65,
'EUR': 0.77,
'CAD': 0.95,
'M': 1
},
};
var btn = document.querySelector('.calculate-btn');
var baseCurrencyInput = document.getElementById('currency-1');
var secondCurrencyInput = document.getElementById('currency-2');
var amountInput = document.getElementById('amount');
var toShowAmount = document.querySelector('.given-amount');
var toShowBase = document.querySelector('.base-currency');
var toShowSecond = document.querySelector('.second-currency');
var toShowResult = document.querySelector('.final-result');
function convertCurrency(event) {
event.preventDefault();
var amount = amountInput.value;
var from = baseCurrencyInput.value;
var to = secondCurrencyInput.value;
var result = 0;
try{
if (from == to){
result = amount;
} else {
result = amount * crrncy[from][to];
}
} catch(err) {
result = amount * (1 / crrncy[to][from]);
}
toShowAmount.innerHTML = amount;
toShowBase.textContent = from + ' = ';
toShowSecond.textContent = to;
toShowResult.textContent = result;
}
btn.addEventListener('click', convertCurrency);
<div class="jumbotron">
<div class="container">
<form class="form-inline">
<div class="form-group mb-2">
<input type="number" class="form-control" id="amount"/>
</div>
<div class="form-group mx-sm-3 mb-2">
<select class="form-control" id="currency-1" required>
<option>M</option>
</select>
</div>
<div class="form-group mx-sm-3 mb-2">
<select class="form-control" id="currency-2" required>
<option>USD</option>
<option>GBP</option>
<option>EUR</option>
<option>CAD</option>
</select>
</div>
<button class="btn calculate-btn btn-primary mb-2">Sum</button>
</form>
<div class="result">
<p>
<span class="given-amount"></span>
<span class="base-currency"></span>
<span class="final-result"></span>
<span class="second-currency"></span>
</p>
</div>
</div>
</div>
Any help would be appreciated!
I need the user to be able to input X amount (in currency M, no dropdown), select their native currency & have the page calculate the rate as soon as they type in the number.

Add another eventListner which is keyup so that whenever user types in the required field, it will call the convertCurrency function as below:
amountInput.addEventListener('keyup', convertCurrency);
Edit:
To remove the selection box for M, remove the select element and replace by either <p> or <span> tag. After this, you would have to get the this value by using innerText as var from = baseCurrencyInput.innerText; in the currency converter function.
var crrncy = {
'M': {
'USD': 0.80,
'GBP': 0.65,
'EUR': 0.77,
'CAD': 0.95,
'M': 1
},
}
var btn = document.querySelector('.calculate-btn');
var baseCurrencyInput = document.getElementById('currency-1');
var secondCurrencyInput = document.getElementById('currency-2');
var amountInput = document.getElementById('amount');
var toShowAmount = document.querySelector('.given-amount');
var toShowBase = document.querySelector('.base-currency');
var toShowSecond = document.querySelector('.second-currency');
var toShowResult = document.querySelector('.final-result');
function convertCurrency(event) {
event.preventDefault();
var amount = amountInput.value;
var from = baseCurrencyInput.innerText;
var to = secondCurrencyInput.value;
var result = 0;
try {
if (from == to) {
result = amount;
} else {
result = amount * crrncy[from][to];
}
} catch (err) {
result = amount * (1 / crrncy[to][from]);
}
toShowAmount.innerHTML = amount;
toShowBase.textContent = from + ' = ';
toShowSecond.textContent = to;
toShowResult.textContent = result;
}
btn.addEventListener('click', convertCurrency);
amountInput.addEventListener('keyup', convertCurrency);
<div class="jumbotron">
<div class="container">
<form class="form-inline">
<div class="form-group mb-2">
<input type="number" class="form-control" id="amount"/>
</div>
<div class="form-group mx-sm-3 mb-2">
<p id="currency-1">M</p>
</div>
<div class="form-group mx-sm-3 mb-2">
<select class="form-control" id="currency-2" required>
<option>USD</option>
<option>GBP</option>
<option>EUR</option>
<option>CAD</option>
</select>
</div>
<button class="btn calculate-btn btn-primary mb-2">Sum</button>
</form>
<div class="result">
<p>
<span class="given-amount"></span>
<span class="base-currency"></span>
<span class="final-result"></span>
<span class="second-currency"></span>
</p>
</div>
</div>
</div>

var crrncy = {
'M': {
'USD': 0.80,
'GBP': 0.65,
'EUR': 0.77,
'CAD': 0.95,
'M': 1
},
};
var btn = document.querySelector('.calculate-btn');
var baseCurrencyInput = document.getElementById('currency-1');
var secondCurrencyInput = document.getElementById('currency-2');
var amountInput = document.getElementById('amount');
var toShowAmount = document.querySelector('.given-amount');
var toShowBase = document.querySelector('.base-currency');
var toShowSecond = document.querySelector('.second-currency');
var toShowResult = document.querySelector('.final-result');
function convertCurrency(event) {
event.preventDefault();
var amount = amountInput.value;
var from = baseCurrencyInput.value;
var to = secondCurrencyInput.value;
var result = 0;
try{
if (from == to){
result = amount;
} else {
result = amount * crrncy[from][to];
}
} catch(err) {
result = amount * (1 / crrncy[to][from]);
}
toShowAmount.innerHTML = amount;
toShowBase.textContent = from + ' = ';
toShowSecond.textContent = to;
toShowResult.textContent = result;
}
btn.addEventListener('click', convertCurrency);
$('#amount').keyup(function(event){
convertCurrency(event);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="jumbotron">
<div class="container">
<form class="form-inline">
<div class="form-group mb-2">
<input type="number" class="form-control" id="amount"/>
</div>
<div class="form-group mx-sm-3 mb-2">
<select class="form-control" id="currency-1" required>
<option>M</option>
</select>
</div>
<div class="form-group mx-sm-3 mb-2">
<select class="form-control" id="currency-2" required>
<option>USD</option>
<option>GBP</option>
<option>EUR</option>
<option>CAD</option>
</select>
</div>
<button class="btn calculate-btn btn-primary mb-2">Sum</button>
</form>
<div class="result">
<p>
<span class="given-amount"></span>
<span class="base-currency"></span>
<span class="final-result"></span>
<span class="second-currency"></span>
</p>
</div>
</div>
</div>

Trying to remove each line of HTML element using a newly created button

var Operator = document.getElementById("operation");
var Desc = document.getElementById("description");
var Amount = document.getElementById("value");
var budget = 0.00;
var income = 0.00;
var expenses = 0.00;
var IncomeList = document.getElementById("incomeList");
var ExpenseList = document.getElementById("expenseList");
document.getElementById("submit").addEventListener("click", function() {
var DButton = document.createElement("button");
var t = document.createTextNode("Delete");
//document.body.appendChild(DButton);
DButton.appendChild(t);
// Converts the fake (non-existant)numbers into real (functionable) numbers
var aValue = parseFloat(Amount.value);
// if the operator is +, budget and income will increase by whatever you type in the value
if (Operator.value == "+") {
budget = budget += aValue;
income = income += aValue;
// The value that was typed along with description in will appear in the Income list in each line
IncomeList.innerHTML = IncomeList.innerHTML + Desc.value + ": " + aValue;
IncomeList.appendChild(DButton);
IncomeList.innerHTML = IncomeList.innerHTML + "<br>";
} else {
budget = budget -= aValue;
expenses = expenses -= aValue;
ExpenseList.innerHTML = ExpenseList.innerHTML + Desc.value + ": " + aValue;
ExpenseList.appendChild(DButton);
ExpenseList.innerHTML = ExpenseList.innerHTML + "<br>";
}
// Declaring statements to make it easier to input
document.getElementById("budget").innerText = budget;
document.getElementById("incomeTotal").innerText = income;
document.getElementById("expenseTotal").innerText = expenses;
});
<div id="wrapper">
<div id="top">
<p id="day">Available Budget in January 2018:</p>
<p id="budget">0.00</p>
<div id="income" class="highlight">
<h1>Income</h1>
<p id="incomeTotal">+0.00</p>
</div>
<div id="expenses" class="highlight">
<h1>Expenses</h1>
<p id="expenseTotal">-0.00</p>
</div>
</div>
<div id="controls">
<select id="operation">
<option>+</option>
<option>-</option>
</select>
<input type="text" placeholder="Add description" id="description" required/>
<input type="number" min="1" placeholder="Value" id="value" />
<button id="submit">✓</button>
</div>
<div id="content">
<div id="incomeList">
<p>INCOME</p>
</div>
<div id="expenseList">
<p>EXPENSES</p>
</div>
</div>
</div>
Hi, this is a budget tracker I made to practice JavaScript. So whenever users type a description and an amount and press submit, the list will show up along with a delete button that erases each line. How should I approach this method? Because the button is newly created by createElement, I do not know how to make this a handler...Thank you.

Append a row container instead of concatenating to the HTML string, and then you can attach a listener to the button that calls .remove() on the row.
It's often a good idea to avoid assigning to innerHTML when possible - it will corrupt all existing Javascript references to any elements inside. If you want to assign text alone, use textContent rather than innerHTML or createTextNode. (it's faster, safer, and more predictable)
var Operator = document.getElementById("operation");
var Desc = document.getElementById("description");
var Amount = document.getElementById("value");
var budget = 0.00;
var income = 0.00;
var expenses = 0.00;
var incomeList = document.getElementById("incomeList");
var expenseList = document.getElementById("expenseList");
document.getElementById("submit").addEventListener("click", function() {
const parent = Operator.value === "+" ? incomeList : expenseList;
const row = parent.appendChild(document.createElement('div'));
var DButton = row.appendChild(document.createElement("button"));
DButton.textContent = 'delete';
DButton.onclick = () => row.remove();
var aValue = parseFloat(Amount.value);
row.appendChild(document.createTextNode(Desc.value + ": " + aValue));
if (Operator.value == "+") {
budget = budget += aValue;
income = income += aValue;
} else {
budget = budget -= aValue;
expenses = expenses -= aValue;
}
// Declaring statements to make it easier to input
document.getElementById("budget").innerText = budget; document.getElementById("incomeTotal").innerText = income; document.getElementById("expenseTotal").innerText = expenses;
});
<div id="wrapper">
<div id="top">
<p id="day">Available Budget in January 2018:</p>
<p id="budget">0.00</p>
<div id="income" class="highlight">
<h1>Income</h1>
<p id="incomeTotal">+0.00</p>
</div>
<div id="expenses" class="highlight">
<h1>Expenses</h1>
<p id="expenseTotal">-0.00</p>
</div>
</div>
<div id="controls">
<select id="operation">
<option>+</option>
<option>-</option>
</select>
<input type="text" placeholder="Add description" id="description" required/>
<input type="number" min="1" placeholder="Value" id="value" />
<button id="submit">✓</button>
</div>
<div id="content">
<div id="incomeList">
<p>INCOME</p>
</div>
<div id="expenseList">
<p>EXPENSES</p>
</div>
</div>
</div>

Javascript percentage calculation for each form field

I'm trying to work out the percentage value for each field in a form. However my current code is only working out the value for the first field or whichever one is focused.
I'd like it so that the percentage value only for the filed in the same fieldset
The current code works but i'd like to apply to to multiple fieldsets without them interfering with other inputs on the same page
In the snippet you can see that the two separate amounts which are editing each others details
function percentageCal() {
var $price = $(".form-item--invamt .form-item__input").on("input", calculatePerc),
$percentage = $(".form-item__input-expand .percentage").on("input", calculatePrice),
$currency = $(".form-item__input-expand .currency").on("focus", removePercent),
$none = $(".form-item--charges .no-charge").on("focus", removePercent),
$increase = $(".wrapper-types__percentage-value"),
$increaseWrap = $(".wrapper-types__percentage");
$($percentage).add($currency).keypress(function(event) {
if (event.which != 8 && event.which != 0 && (event.which < 48 || event.which > 57)) {
return false;
}
});
function calculatePrice() {
var percentage = parseFloat($(this).val());
var price = parseFloat($price.val());
var calcPrice = parseFloat((price * percentage / 100).toFixed(2));
var newPrice = price + calcPrice;
$increase.text(newPrice);
$increaseWrap.fadeIn();
if (isNaN(newPrice)) {
$increaseWrap.hide();
}
}
function calculatePerc() {
var percentage = $percentage.val();
var price = parseFloat($(this).val());
var calcPerc = parseFloat((price * percentage / 100).toFixed(2));
var newPrice = price + calcPerc;
$increase.text(newPrice);
}
function removePercent() {
$increaseWrap.fadeOut();
}
}
percentageCal();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="wrapper-types__investment">
<legend class="sr-only">Investment 1</legend>
<div class="form-item form-item--required form-item--invamt">
<label class="form-item__label" for="wrappers[0]">Investment amount</label>
<div class="form-item__input-labelled">
<span class="form-item__input-label">£</span>
<input class="form-item__input " type="number" name="wrappers[0]" id="wrappers[0]" min="0" value="15000" required>
</div>
</div>
<div class="form-item form-item--charges-wrap">
<span class="form-item__label">Charges</span>
<div class="form-item form-item--charges">
<label class="form-item__input-label-expand" for="percentage1">%</label>
<div class="form-item__input-expand">
<input class="form-item__input percentage" type="number" name="percentage" id="percentage1">
</div>
</div>
</div>
<div class="form-item form-item--charges-wrap">
<span class="wrapper-types__percentage">= £<span class="wrapper-types__percentage-value"></span></span>
</div>
<div class="form-item form-item--action-btns">
</div>
</fieldset>
<fieldset class="wrapper-types__investment">
<legend class="sr-only">Investment 2</legend>
<div class="form-item form-item--required form-item--invamt">
<label class="form-item__label" for="wrappers[1]">Investment amount</label>
<div class="form-item__input-labelled">
<span class="form-item__input-label">£</span>
<input class="form-item__input " type="number" name="wrappers[1]" id="wrappers[1]" min="0" value="13005.02" required>
</div>
</div>
<div class="form-item form-item--charges-wrap">
<span class="form-item__label">Charges</span>
<div class="form-item form-item--charges">
<label class="form-item__input-label-expand" for="percentage2">%</label>
<div class="form-item__input-expand">
<input class="form-item__input percentage" type="number" name="percentage" id="percentage2">
</div>
</div>
</div>
<div class="form-item form-item--charges-wrap">
<span class="wrapper-types__percentage">= £<span class="wrapper-types__percentage-value"></span></span>
</div>
<div class="form-item form-item--action-btns">
</div>
</fieldset>

Instead of IDs, use classes and DOM traversal functions to find the fields in the same fieldset.
function percentageCal() {
var $price = $(".form-item--invamt .form-item__input").on("input", calculatePerc),
$percentage = $(".form-item__input-expand .percentage").on("input", calculatePrice),
$currency = $(".form-item__input-expand .currency").on("focus", removePercent),
$none = $(".form-item--charges .no-charge").on("focus", removePercent),
$increase = $(".wrapper-types__percentage-value"),
$increaseWrap = $(".wrapper-types__percentage");
$percentage.add($currency).keypress(function(event) {
if (event.which != 8 && event.which != 0 && (event.which < 48 || event.which > 57)) {
return false;
}
});
function calculatePrice() {
var $fieldset = $(this).closest("fieldset");
var percentage = parseFloat($(this).val());
var price = parseFloat($fieldset.find(".form-item--invamt .form-item__input").val());
var calcPrice = parseFloat((price * percentage / 100).toFixed(2));
var newPrice = price + calcPrice;
$fieldset.find(".wrapper-types__percentage-value").text(newPrice);
$fieldset.find(".wrapper-types__percentage").fadeIn();
if (isNaN(newPrice)) {
$fieldset.find(".wrapper-types__percentage").hide();
}
}
function calculatePerc() {
var $fieldset = $(this).closest("fieldset");
var percentage = $fieldset.find(".form-item__input-expand .percentage").val();
var price = parseFloat($(this).val());
var calcPerc = parseFloat((price * percentage / 100).toFixed(2));
var newPrice = price + calcPerc;
$fieldset.find(".wrapper-types__percentage-value").text(newPrice);
}
function removePercent() {
var $fieldset = $(this).closest("fieldset");
$fieldset.find(".wrapper-types__percentage").fadeOut();
}
}
percentageCal();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="wrapper-types__investment">
<div class="form-item--invamt">
<div>
<span class="form-item__input-label">£</span>
<input class="form-item__input " type="number" name="wrappers[0]" id="wrappers[0]" min="0" value="15000" required>
</div>
</div>
<div class="form-item--charges-wrap">
<div class="form-item--charges">
<label class="form-item__input-label-expand" for="percentage">%</label>
<div class="form-item__input-expand">
<input class="form-item__input percentage" type="number" name="percentage" id="percentage">
</div>
</div>
</div>
<div class="form-item--charges-wrap">
<span class="wrapper-types__percentage">= £<span class="wrapper-types__percentage-value"></span></span>
</div>
</fieldset>
<fieldset class="wrapper-types__investment">
<div class="form-item--invamt">
<div>
<span class="form-item__input-label">£</span>
<input class="form-item__input " type="number" name="wrappers[1]" id="wrappers[1]" min="0" value="15000" required>
</div>
</div>
<div class="form-item--charges-wrap">
<div class="form-item--charges">
<label class="form-item__input-label-expand" for="percentage1">%</label>
<div class="form-item__input-expand">
<input class="form-item__input percentage" type="number" name="percentage" id="percentage1">
</div>
</div>
</div>
<div class="form-item--charges-wrap">
<span class="wrapper-types__percentage">= £<span class="wrapper-types__percentage-value"></span></span>
</div>
</fieldset>

show next custom error message if user enter only first input in any row

iam working on form validation, my requirement is show erro message if user did not fill all field in a row. in my page there are two rows every row contains two input fields. when i click submit button when all fields are empty it should show error. page first two inputs working. when user enter first field the next field also mandatory. no need of second row, if user filled first row and also filed second row first field, the second row second field mandatory.
in this manner is my requirement i have written some code.
Thanks in advance.
HTML
function crtNewRelease() {
var versionIpa = document.getElementById("versionIpa");
var version1Error = document.getElementById("version1Error");
var selectDevice1 = document.getElementById("selectDevice1");
var selectDevice1Error = document.getElementById("selectDevice1Error");
var versionApk = document.getElementById("versionApk");
var version2Error = document.getElementById("version2Error");
var selectDevice2 = document.getElementById("selectDevice2");
var selectDevice2Error = document.getElementById("selectDevice2Error");
if (sltProject.value == "") {
sltProject.style.border = "solid 1px red";
firstNError.textContent = "Select Project";
firstNError.style.color = "red";
firstNError.style.marginTop = "10px"
sltProject.focus();
return false;
}
if (releaseName.value == "") {
releaseName.style.border = "solid 1px red";
lastNError.textContent = "Enter Release Name";
lastNError.style.color = "red";
lastNError.style.marginTop = "10px"
releaseName.focus();
return false;
}
var sameCls = document.getElementsByClassName("newformInputs");
var inputArray = [];
var result;
var i = 1
for (i = 1; i < sameCls.length; i++) {
result += sameCls[i]
if (result == 1) {
version1Error.textContent = "Enter version";
return false;
} else {
version1Error.style.display = "none";
}
}
}
<form name="createNewRelease" onsubmit="return crtNewRelease();">
<select class="form-control" id="sltProject">
<option value="">Select Project</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">Domino’s Makeline App</option>
</select>
<div id="firstNError" class="firstN"></div>
<input class="form-control " placeholder="Release Name" type="text" id="releaseName">
<div id="lastNError" class="firstN"></div>
<div class="selectPlatform">
<h6>Select platforms (you can select both)</h6>
<div class="row">
<div class="col-md-5">
<input class="form-control newformInputs" placeholder="Version number" type="text" id="versionIpa" />
<div id="version1Error" class="firstN"></div>
</div>
<div class="col-md-5 ">
<select class="form-control newformInputs" id="selectDevice1">
<option value="">Select device</option>
<option>iPhone</option>
<option>iPad</option>
</select>
<div id="selectDevice1Error" class="selectDevice1Cls"></div>
</div>
<div class="col-md-1"> <span> </span></div>
</div>
<div class="row">
<div class="col-md-5 ">
<input class="form-control newformInputs" placeholder="Version number" type="text" id="versionApk">
<div id="version2Error" class="firstN"></div>
</div>
<div class="col-md-5 ">
<select class="form-control newformInputs" id="selectDevice2">
<option value="">Select device</option>
<option>iPhone</option>
<option>iPad</option>
</select>
<div id="selectDevice2Error" class="selectDevice2Cls"></div>
</div>
<div class="col-md-1"> <span></span></div>
</div>
</div>
<div class="btnsRow">
<button class="btn" type="submit">Create Release</button>
Cancel
</div>
</form>

OK i add it to this code.check it!.
<form name="createNewRelease" onsubmit="return crtNewRelease();">
<select class="form-control" id="sltProject">
<option value="">Select Project</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">Domino’s Makeline App</option>
</select>
<div id="firstNError" class="firstN"></div>
<input class="form-control " placeholder="Release Name" type="text" id="releaseName">
<div id="lastNError" class="firstN"></div>
<div class="selectPlatform">
<h6>Select platforms (you can select both)</h6>
<div class="row">
<div class="col-md-5">
<input class="form-control newformInputs" placeholder="Version number" type="text" id="versionIpa" />
<div class="error"></div>
</div>
<div class="col-md-5 ">
<select class="form-control newformInputs" id="selectDevice1">
<option value="">Select device</option>
<option>iPhone</option>
<option>iPad</option>
</select>
<div class="error"></div>
</div>
<div class="col-md-1"> <span> </span></div>
</div>
<div class="row">
<div class="col-md-5 ">
<input class="form-control newformInputs" placeholder="Version number" type="text" id="versionApk">
<div class="error"></div>
</div>
<div class="col-md-5 ">
<select class="form-control newformInputs" id="selectDevice2">
<option value="">Select device</option>
<option>iPhone</option>
<option>iPad</option>
</select>
<div class="error"></div>
</div>
<div class="col-md-1"> <span></span></div>
</div>
</div>
<div class="btnsRow">
<button class="btn" type="submit">Create Release</button>
Cancel
</div>
</form>
JS :
function crtNewRelease() {
var versionIpa = document.getElementById("versionIpa");
var version1Error = document.getElementById("version1Error");
var selectDevice1 = document.getElementById("selectDevice1");
var selectDevice1Error = document.getElementById("selectDevice1Error");
var versionApk = document.getElementById("versionApk");
var version2Error = document.getElementById("version2Error");
var selectDevice2 = document.getElementById("selectDevice2");
var selectDevice2Error = document.getElementById("selectDevice2Error");
if (sltProject.value == "") {
sltProject.style.border = "solid 1px red";
firstNError.textContent = "Select Project";
firstNError.style.color = "red";
firstNError.style.marginTop = "10px"
sltProject.focus();
return false;
}
if (releaseName.value == "") {
releaseName.style.border = "solid 1px red";
lastNError.textContent = "Enter Release Name";
lastNError.style.color = "red";
lastNError.style.marginTop = "10px"
releaseName.focus();
return false;
}
var sameCls = document.getElementsByClassName("newformInputs");
var inputArray = [];
var errorPos = [];
var result;
var i = 0;
for (i = 0; i < sameCls.length; i++) {
result = sameCls[i];
if (result.value == "" ) {
errorPos.push(i);
} else {
//version1Error.style.display = "none";
}
}
//reset error class
var listerror = document.getElementsByClassName("error");
for(var t5 = 0 ; t5 < listerror.length ; t5++ ){
listerror[t5].textContent = "";
}
console.log(errorPos);
var flag = false;
if(errorPos.length > 0){
for (i = 0; i < sameCls.length; i=i+2 ) {
if(i % 2 == 0){
console.log(errorPos.indexOf(i));
if(errorPos.indexOf(i)==-1){
if(errorPos.indexOf(i+1)==-1){
flag = true;
}
else{
flag = false;
}
}
}
}
if(!flag){
for(var t2= 0 ; t2 < errorPos.length ; t2++){
console.log(sameCls[errorPos[t2]]);
for(var t3 = 0 ; t3 < sameCls[errorPos[t2]].parentNode.childNodes.length; t3++ ){
if(sameCls[errorPos[t2]].parentNode.childNodes[t3].className == "error"){
sameCls[errorPos[t2]].parentNode.childNodes[t3].textContent = "Erorr!!";
sameCls[errorPos[t2]].parentNode.childNodes[t3].style.display = "block";
return false;
}
}
}
}
}
return false;
}
Check It!