Javascript calculator if statement doesn't work - javascript

I want my calculator to insert numbers in the first value until an operator (like +) is clicked. Then the inserted numbers should go to the second value.
If I click the + it doesn't switch to the first if statement.
let clicked = 0;
console.log('startValue: ' + clicked);
operatorPlus_div.addEventListener('click', () => {
clicked = 1;
operator_div.innerHTML += '+';
console.log('clickedValue: ' + clicked);
})
function calc() {
//----------second-Value----------
if (clicked === 1) {
valueOne_p.addEventListener('click', () => {
secondValue += one;
secondValue_div.innerHTML += one;
console.log('secondValue');
})
valueTwo_p.addEventListener('click', () => {
secondValue += two;
secondValue_div.innerHTML += two;
})
//----------first-Value----------
} else if (clicked === 0) {
valueOne_p.addEventListener('click', () => {
firstValue += one;
firstValue_div.innerHTML += one;
console.log(clicked + ' firstValue');
console.log(operator_div.innerHTML);
})
valueTwo_p.addEventListener('click', () => {
firstValue += two;
firstValue_div.innerHTML += two;
console.log(clicked + ' firstValue');
})
}
}
calc();
Here is the html:
<!DOCTYPE html>
<html>
<head>
<title>myCalc</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="media/css/style.css">
<link rel="shortcut icon" type="image/x-icon" href="media/images/fav-icon.png">
</head>
<body>
<div class="wrapper">
<div class="container-all">
<div id="heading">
<h1>myCalc</h1>
</div>
<div class="container-input-showcase">
<div id="first-value"></div>
<div id="operator"></div>
<div id="second-value">
</div>
<div class="underline"></div>
</div>
<div class="container-result">
<div id="result">
</div>
</div>
<div class="container-input">
<div class="input" id="value-zero">
<p>0</p>
</div>
<div class="input" id="value-one">
<p>1</p>
</div>
<div class="input" id="value-two">
<p>2</p>
</div>
<div class="input" id="value-three">
<p>3</p>
</div>
<div class="input" id="value-four">
<p>4</p>
</div>
<div class="input" id="value-five">
<p>5</p>
</div>
<div class="input" id="value-six">
<p>6</p>
</div>
<div class="input" id="value-seven">
<p>7</p>
</div>
<div class="input" id="value-eight">
<p>8</p>
</div>
<div class="input" id="value-nine">
<p>9</p>
</div>
<div class="input" id="operator-plus">
<p>+</p>
</div>
<div class="input" id="operator-minus">
<p>-</p>
</div>
<div class="input" id="operator-multiply">
<p>*</p>
</div>
<div class="input" id="operator-divide">
<p>/</p>
</div>
<div class="reset">
<p>CE</p>
</div>
<div class="equals">
<p>=</p>
<div clearer></div>
</div>
</div>
</div>
</div>
<script src="media/script/app.js"></script>
</body>
</html>
I now put he calc () inside operatorPlus_div.addEventListener function and if i click + the next number clicked jumps in the secondValue. But it also get's interted in the firstValue..

Related

how I validate JavaScript

Here when multiplying -1 to any variable it turns to negative. It uses for when the balance is withdrawn balance decreases but I set if the condition for validation for this reason -1 does not work. how I validate properly and balance also decreases when
<!doctype html>
<html lang="en">
<head>
<title>Bank || Project</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- css link -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="login-area" class="login-area">
<h1 class="bank-title">Welcome To Pioneer Bank</h1>
<div class="submit-area">
<h4>Login</h4>
<input type="text" class="form-control" placeholder="Email...">
<br>
<input type="password" class="form-control" placeholder="Password...">
<br>
<button type="submit" id="login-btn" class="btn btn-success">Submit</button>
</div>
</div>
<div id="transaction-area">
<div class="row">
<div class="col-md-4">
<div class=" deposit status">
<h5>Deposit</h5>
<h2>$ <span id="current-deposit">00</span></h2>
</div>
</div>
<div class="col-md-4 my-2 my-md-0">
<div class=" withdraw status">
<h5>Withdraw</h5>
<h2>$ <span id="current-withdraw">00</span></h2>
</div>
</div>
<div class="col-md-4">
<div class=" balance status">
<h5>Balance</h5>
<h2>$ <span id="current-balance">1240</span></h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="submit-area">
<h4>Deposit</h4>
<input type="text" id="deposit-amount" class="form-control" placeholder="$ amount you want to deposit">
<br>
<button id="deposit-btn" class="btn btn-success">Deposit</button>
</div>
</div>
<div class="col-md-6">
<div class="submit-area">
<h4>Withdraw</h4>
<input type="text" id="withdraw-amount" class="form-control" placeholder="$ amount you want to withdraw">
<br>
<button id="withdraw-btn" class="btn btn-success">Withdraw</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
Here when multiplying -1 to any variable it turns to negative. It uses for when the balance is
withdrawn balance decreases but I set if the condition for validation for this reason -1 does not
ork. how I validate properly and balance also decreases when
// LOGIN BUTTON EVENT HANDLER
const loginBtn = document.getElementById('login-btn');
loginBtn.addEventListener('click', function () {
const loginArea = document.getElementById('login-area');
loginArea.style.display = 'none';
const transactionArea = document.getElementById('transaction-area');
transactionArea.style.display = 'block';
})
//deposit handler
const depositBtn = document.getElementById('deposit-btn');
depositBtn.addEventListener('click', function() {
const depositNumber = getInputNumber("deposit-amount");
updateSpanText("current-deposit", depositNumber)
updateSpanText("current-balance", depositNumber);
})
// withdraw button handler
const withdrawBtn = document.getElementById("withdraw-btn");
withdrawBtn.addEventListener("click", function() {
const withdrawNumber = getInputNumber("withdraw-amount");
updateSpanText("current-withdraw", withdrawNumber);
updateSpanText("current-balance", withdrawNumber;
})
function getInputNumber(id) {
const amount = document.getElementById(id).value;
const amountNumber = parseFloat(amount);
document.getElementById(id).value = "";
return amountNumber;
}
Here when multiplying -1 to any variable it turns to negative. It uses for when the balance
is withdrawn balance decreases but I set if the condition for validation for this reason -1 does
not work. how I validate properly and balance also decreases when
function updateSpanText(id, depositNumber) {
if (depositNumber >= 0 && depositNumber !== '') { //here I set if condtition
var currentBalance = document.getElementById(id).innerText;
const currentBalanceNumber = parseFloat(currentBalance);
const totalBalance = depositNumber + currentBalanceNumber;
document.getElementById(id).innerText = totalBalance;
} else {
console.log(alert('Invalid input value'));
}
</script>
withdraw.
Here is what you want:
// LOGIN BUTTON EVENT HANDLER
const loginBtn = document.getElementById('login-btn');
loginBtn.addEventListener('click', function () {
const loginArea = document.getElementById('login-area');
loginArea.style.display = 'none';
const transactionArea = document.getElementById('transaction-area');
transactionArea.style.display = 'block';
})
//deposit handler
const depositBtn = document.getElementById('deposit-btn');
depositBtn.addEventListener('click', function () {
const depositNumber = getInputNumber("deposit-amount");
updateSpanText("current-deposit", depositNumber)
updateSpanText("current-balance", depositNumber);
})
// withdraw button handler
const withdrawBtn = document.getElementById("withdraw-btn");
withdrawBtn.addEventListener("click", function () {
const withdrawNumber = getInputNumber("withdraw-amount");
updateSpanText("current-withdraw", withdrawNumber);
updateSpanText("current-balance", withdrawNumber, true);
})
function getInputNumber(id) {
const amount = document.getElementById(id).value;
const amountNumber = parseFloat(amount);
document.getElementById(id).value = "";
return amountNumber;
}
function updateSpanText(id, depositNumber, isWithdraw = false) {
if (depositNumber >= 0 && depositNumber !== '') { //here I set if condtition
var currentBalance = document.getElementById(id).innerText;
const currentBalanceNumber = parseFloat(currentBalance);
const totalBalance = currentBalanceNumber + (isWithdraw ? -depositNumber : depositNumber);
document.getElementById(id).innerText = totalBalance;
} else {
console.log(alert('Invalid input value'));
}
}
<!doctype html>
<html lang="en">
<head>
<title>Bank || Project</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- css link -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="login-area" class="login-area">
<h1 class="bank-title">Welcome To Pioneer Bank</h1>
<div class="submit-area">
<h4>Login</h4>
<input type="text" class="form-control" placeholder="Email...">
<br>
<input type="password" class="form-control" placeholder="Password...">
<br>
<button type="submit" id="login-btn" class="btn btn-success">Submit</button>
</div>
</div>
<div id="transaction-area">
<div class="row">
<div class="col-md-4">
<div class=" deposit status">
<h5>Deposit</h5>
<h2>$ <span id="current-deposit">00</span></h2>
</div>
</div>
<div class="col-md-4 my-2 my-md-0">
<div class=" withdraw status">
<h5>Withdraw</h5>
<h2>$ <span id="current-withdraw">00</span></h2>
</div>
</div>
<div class="col-md-4">
<div class=" balance status">
<h5>Balance</h5>
<h2>$ <span id="current-balance">1240</span></h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="submit-area">
<h4>Deposit</h4>
<input type="text" id="deposit-amount" class="form-control"
placeholder="$ amount you want to deposit">
<br>
<button id="deposit-btn" class="btn btn-success">Deposit</button>
</div>
</div>
<div class="col-md-6">
<div class="submit-area">
<h4>Withdraw</h4>
<input type="text" id="withdraw-amount" class="form-control"
placeholder="$ amount you want to withdraw">
<br>
<button id="withdraw-btn" class="btn btn-success">Withdraw</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

JS validation mistakes

I got a problem with my validation of textboxes.
I am trying to get something like this.
Click on the button, give a message when something is not filled in, while you fill the empty textbox, the 1 message of that textbox should dissapear.
If you click the button again, with 1 empty textbox, only the message of that textbox should appear.
If you click it twice with nothing filled, it should only appear once ...
I messed something up here ...
can someone get me on again?
Thank you in advance!
var list2 = [];
function valideer(el) {
divOutput = document.getElementById("msgbox1");
var strValideer = "<ul>";
if (document.getElementById("naam").value === "") {
list2.push("naam");
} if (document.getElementById("voornaam").value === "") {
list2.push("voornaam");
} if (document.getElementById("straatnr").value === "") {
list2.push("straatnr");
} if (document.getElementById("postgem").selectedIndex === 0) {
list2.push("postgem");
} if (document.getElementById("telgsm").value === "") {
list2.push("telgsm");
} if (document.getElementById("email").value === "") {
list2.push("email");
}
for (var i = 0; i < list2.length; i++) {
strValideer += "<li><b>" + list2[i] + ": </b>verplicht veld</li>";
}
strValideer += "</ul>";
divOutput.innerHTML = strValideer;
}
function inputChange(el) {
divOutput = document.getElementById("msgbox1");
strValideer = "<ul>";
var naam = document.getElementById("naam").value;
if (naam !== "") {
list2.splice(list2.indexOf(el.name), 1);
}
for (var i = 0; i < list2.length; i++) {
strValideer += "<li><b>" + list2[i] + ": </b>verplicht veld</li>";
}
strValideer += "</ul>";
divOutput.innerHTML = strValideer;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="bootstrap/css/bootstrap_custom.min.css" type="text/css" rel="stylesheet" />
<!--lay-out met bootstrap grid-->
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="woodfactory.js" type="text/javascript"></script>
</head>
<body>
<section class="container" id="userform">
<form action="js_form_ontvanger.html" method="get" class="form-horizontal" name="frmUserform" id="frmUserform" onsubmit="return validate(this)" oninput="inputChange(this)">
<fieldset>
<legend>Persoonlijke gegevens</legend>
<div class="container">
<div class="row">
<div class="span7">
<div class="control-group">
<label class="control-label" for="naam">naam:</label>
<div class="controls">
<input type="text" id="naam" name="naam" placeholder="naam" required onsubmit="valideer(this)" onclick="inputChange(this)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="voornaam">voornaam:</label>
<div class="controls">
<input type="text" id="voornaam" name="voornaam" placeholder="voornaam" required onsubmit="valideer(this)" onclick="inputChange(this)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="straatnr">straat+nr:</label>
<div class="controls">
<input type="text" id="straatnr" name="straatnr" placeholder="straat+nr" required onsubmit="valideer(this)" onclick="inputChange(this)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="postgem">post+gem:</label>
<div class="controls">
<select id="postgem" required onsubmit="valideer(this)" onclick="inputChange(this)">
<option value="">-- maak een keuze --</option>
<option value="2000">2000 Antwerpen</option>
<option value="9000">9000 Gent</option>
<option value="9300">9300 Aalst</option>
<option value="9400">9400 Ninove</option>
<option value="9450">9450 Haaltert</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="telgsm">tel/gsm:</label>
<div class="controls">
<input type="text" id="telgsm" name="telgsm" placeholder="tel/gsm" required onsubmit="valideer(this)" onclick="inputChange(this)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">email:</label>
<div class="controls">
<input type="email" id="email" name="email" placeholder="e-mail" required onsubmit="valideer(this)" onclick="inputChange(this)">
</div>
</div>
<!--einde span7-->
</div>
<div class="span4 valid">
<div id="msgbox1" class="alert alert-error">
<div class="span1">
</div>
</div>
</div>
<div class="span1">
<div class="span1">
</div>
<!--einde row-->
</div>
<!--einde container-->
</div>
</div>
</fieldset>
<fieldset>
<div class="container">
<div class="row">
<div class="span7">
<div class="control-group">
<div class="controls">
</div>
</div>
<div class="control-group">
<div class="controls">
</div>
</div>
<div class="control-group">
<div class="controls">
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-success" onclick="valideer(this)">Verzenden</button>
</div>
</div>
<div class="span4 valid">
<div id="msgbox3" class="alert alert-success"></div>
</div>
<div class="span1"><!--lege kolom--></div>
<!--einde row-->
</div>
<!--einde container-->
</div>
</fieldset>
</form>
</section>
<footer class="container">
<p>© 2013 The Wood Factory </p>
</footer>
</body>
</html>
I feel like your approach is a little more complicated than it needs to be.. See my attempt below
function valideer(current) {
var ids = ['naam', 'voornaam', 'straatnr', 'postgem', 'telgsm', 'email'];
var str = '<ul>';
ids.forEach(function(id) {
var el = document.getElementById(id);
if (el.value === '' && el !== current) {
str += "<li><b>" + id + ": </b>verplicht veld</li>";
}
});
str += '</ul>';
var outputDiv = document.getElementById("msgbox1");
outputDiv.innerHTML = str;
}
function handleFormSubmit(ev) {
ev.preventDefault();
valideer();
return false;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="bootstrap/css/bootstrap_custom.min.css" type="text/css" rel="stylesheet" />
<!--lay-out met bootstrap grid-->
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="woodfactory.js" type="text/javascript"></script>
</head>
<body>
<section class="container" id="userform">
<form action="js_form_ontvanger.html" method="get" class="form-horizontal" name="frmUserform" id="frmUserform" onsubmit="handleFormSubmit">
<fieldset>
<legend>Persoonlijke gegevens</legend>
<div class="container">
<div class="row">
<div class="span7">
<div class="control-group">
<label class="control-label" for="naam">naam:</label>
<div class="controls">
<input type="text" id="naam" name="naam" placeholder="naam" required onclick="valideer(this)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="voornaam">voornaam:</label>
<div class="controls">
<input type="text" id="voornaam" name="voornaam" placeholder="voornaam" required onclick="valideer(this)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="straatnr">straat+nr:</label>
<div class="controls">
<input type="text" id="straatnr" name="straatnr" placeholder="straat+nr" required onclick="valideer(this)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="postgem">post+gem:</label>
<div class="controls">
<select id="postgem" required onclick="valideer(this)">
<option value="">-- maak een keuze --</option>
<option value="2000">2000 Antwerpen</option>
<option value="9000">9000 Gent</option>
<option value="9300">9300 Aalst</option>
<option value="9400">9400 Ninove</option>
<option value="9450">9450 Haaltert</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="telgsm">tel/gsm:</label>
<div class="controls">
<input type="text" id="telgsm" name="telgsm" placeholder="tel/gsm" required onclick="valideer(this)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">email:</label>
<div class="controls">
<input type="email" id="email" name="email" placeholder="e-mail" required onclick="valideer(this)">
</div>
</div>
<!--einde span7-->
</div>
<div class="span4 valid">
<div id="msgbox1" class="alert alert-error">
<div class="span1">
</div>
</div>
</div>
<div class="span1">
<div class="span1">
</div>
<!--einde row-->
</div>
<!--einde container-->
</div>
</div>
</fieldset>
<fieldset>
<div class="container">
<div class="row">
<div class="span7">
<div class="control-group">
<div class="controls">
</div>
</div>
<div class="control-group">
<div class="controls">
</div>
</div>
<div class="control-group">
<div class="controls">
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-success" onclick="valideer(this)">Verzenden</button>
</div>
</div>
<div class="span4 valid">
<div id="msgbox3" class="alert alert-success"></div>
</div>
<div class="span1">
<!--lege kolom-->
</div>
<!--einde row-->
</div>
<!--einde container-->
</div>
</fieldset>
</form>
</section>
<footer class="container">
<p>© 2013 The Wood Factory </p>
</footer>
</body>
</html>
Some notes and observations:
Since the only check being used for validation is if it contains, an empty string, I have generalised the valideer function to iterate and operate on a given array of ids. This can be made even better by querying for inputs on your form using a DOM query and handling it like that.
You have added a lot of inline event handlers in your dom.. Some of them are redundant and not really needed. For example, having a simgle onsubmit on your form element should suffice (no need to add it for every input inside the form)
You were using a global variable list2 this is what was causing the repeated entries each time you click the button. Localising the scope would fix that (by moving it inside a function)
You're already using required property, which means you no longer need a js function to validate if your inputs are empty or not.
You should also notice that list2 is a global variable, which means that you should clean it at the end of every valideer() invocation.
All in all, you code seems very verbose .. try to find a better way to express you needs.

Angular custom calculator with multiple functions

I need some help with a test calculator.
I managed to make the Add functionality work, but i'm stuck on what i have to do next in order to add an extra functionality like Multiply work when the Calculate button is pressed.
Here is a JSFiddle Link, and i will also add most of the code.
I chose Angular, but a jQuery example would do fine also.
Examples of the calculator lifecycle might be:
JS
angular.module('myApp', [])
.controller('MyController', function ($scope) {
$scope.items = [];
$scope.addItem = function(){
$scope.items.push({
myOperation: $scope.selectedOperation,
myNumber: $scope.selectedNumber
});
$scope.selectedOperation = '';
$scope.selectedNumber = '';
};
$scope.AddToTotal = function(){
var total = 0;
for(var i=0; i<$scope.items.length; i++){
total += $scope.items[i].myNumber;
}
return total;
}
});
Html
<body ng-app="myApp">
<div ng-controller="MyController" class="container">
<div class="row">
<div class=".col-md-6 .col-md-offset-3">
<form role="form" class="form-inline">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<!--Select-->
<select ng-model="selectedOperation" class="form-control input-lg" id="operators">
<option value="Add">Add</option>
<option value="Multiply">Multiply</option>
<option value="Apply">Apply</option>
</select>
<!--Input-->
<input ng-model="selectedNumber" class="form-control input-lg" type="number" placeholder="enter a number" />
<!--AddStep-->
<button ng-click="addItem()" id="btnAdd" class="btn btn-default btn-lg">Add step</button>
<p>{{selectedOperation}} {{selectedNumber}} = {{ AddToTotal()}}</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<ol id="instructions" class="jumbotron" style="margin-top: 2em;">
<li ng-repeat="item in items">{{item.myOperation}} {{item.myNumber}}</li>
</ol>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<button ng-click="getTotal()" id="btnCalculate" class="btn btn-primary btn-lg">
Calculate
</button>
<button id="btnReset" class="btn btn-danger btn-lg">Reset</button>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<h2>Result:
<span id="result" class="result">{{ AddToTotal() }}</span>
</h2>
</div>
</div>
</form>
</div>
</div>
</div>
Update your AddToTotal function with this:
$scope.AddToTotal = function() {
var total = 0;
for (var i = 0; i < $scope.items.length; i++) {
if ($scope.items[i].myOperation === 'Add') {
total += $scope.items[i].myNumber;
} else if ($scope.items[i].myOperation === 'Divide') {
total /= $scope.items[i].myNumber;
} else if ($scope.items[i].myOperation === 'Subtract') {
total -= $scope.items[i].myNumber;
} else if ($scope.items[i].myOperation === 'Multiply') {
total *= $scope.items[i].myNumber;
}
}
return total;
}

Want to use Angularjs validation instead of Browser validation

I have a form which holds two ng-forms where i am validating the input. I have two questions regarding my forms.
1) In the input Company I want to validate for the minlength, but my approach seems not to work. How can i solve this problem?
2) I want to use Angularjs validation with my error messages but the browser automatically shows "This input is invalid" AND Internet Explorer does not validate at all. Where is my fault? I already tried nonvalidate and ng-required but then my form does submit without validation.
Here is the plunkr link : Plunkr
Thanks in advance,
YB
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.billingAdrEqualsShippingAdr = false;
$scope.confirmBillingEqualsShipping = true;
$scope.changeBillingAddress = false;
$scope.shippingAddress = {};
$scope.billingAddress = {};
$scope.setBillingAddress = function (){
$scope.changeBillingAddress = true;
$scope.billingAddress = $scope.shippingAddress;
};
$scope.cancelBillingAddress = function (){
$scope.changeBillingAddress = false;
$scope.billingAddress = $scope.shippingAddress;
};
$scope.openCompanyModal = function (company){
$scope.billingAddress = company;
$scope.shippingAddress = company;
};
$scope.submit = function (){
console.log("Form submitted");
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css#*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="addressForm" ng-submit="submit()">
<div ng-form="shippingForm">
<div class="row">
<div class="col-md-12">
<h3 class="form-group">
<label>Lieferadresse</label>
</h3>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Salutation</label>
</div>
<div class="col-md-8">
<select name="salutation" ng-model="shippingAddress.salutation" class="form-control" ng-change="refreshBillingAddress()" ng-required="true">
<option></option>
<option value="Herr">Herr</option>
<option value="Frau">Frau</option>
</select>
<span ng-show="submitted && shippingForm.salutation.$error.required"></span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Firsname</label>
</div>
<div class="col-md-8">
<input type="text" name="prename" ng-model="shippingAddress.prename" ng-required="true" class="form-control" ng-change="refreshBillingAddress()"/>
<span ng-show="submitted && shippingForm.prename.$error.required">Required</span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Lastname</label>
</div>
<div class="col-md-8">
<input type="text" name="surname" ng-model="shippingAddress.surname" required="" class="form-control" ng-change="refreshBillingAddress()"/>
<span ng-show="submitted && shippingForm.surname.$error.required">Required</span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Company</label>
</div>
<div class="col-md-8">
<input type="text" name="company" ng-model="shippingAddress.company" required="" ng-minlength="10" class="form-control" ng-change="refreshBillingAddress()"/>
<span ng-show="submitted && shippingForm.company.$error.required">Required</span>
<span ng-show="submitted && shippingForm.company.$error.minlength">Minlength = 10</span>
</div>
</div>
</div >
<div class="row">
<div class="col-md-12">
<h3 class="form-group">
<label>Rechnungsadresse</label>
<div ng-click="setBillingAddress()" ng-show="changeBillingAddress === false" class="btn btn-default pull-right">Ändern</div>
<div ng-click="cancelBillingAddress()" ng-show="changeBillingAddress === true" class="btn btn-danger pull-right">Abbrechen</div>
</h3>
</div>
<div ng-show="changeBillingAddress == false" class="row">
<div class="col-md-offset-1">Identisch mit Lieferadresse</div>
</div>
</div>
<div ng-show="changeBillingAddress == true">
<div style="margin-top: 5px">
<div ng-form="billingForm">
<div class="row form-group">
<div class="col-md-4">
<label>Salutation</label>
</div>
<div class="col-md-8">
<select name="salutation" ng-model="billingAddress.salutation" ng-required="changeBillingAddress == true" class="form-control">
<option></option>
<option value="Herr">Herr</option>
<option value="Frau">Frau</option>
</select>
<span ng-show="submitted" class="help-block">Pflichtfeld</span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Firstname</label>
</div>
<div class="col-md-8">
<input type="text" name="prename" ng-model="billingAddress.prename" ng-required="changeBillingAddress == true" class="form-control"/>
<span ng-show="submitted && billingForm.prename.required" class="help-block">Pflichtfeld</span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Lastname</label>
</div>
<div class="col-md-8">
<input type="text" name="surname" ng-model="billingAddress.surname" ng-required="changeBillingAddress == true" class="form-control"/>
<span ng-show="submitted && billingForm.surname.$error.required"></span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Company</label>
</div>
<div class="col-md-8">
<input type="text" name="company" ng-model="billingAddress.company" ng-required="changeBillingAddress == true" class="form-control"/>
<span ng-show="submitted && billingForm.company.$error.required"></span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div style="padding-top: 1em" class="col-md-12">
<button ng-click="previousTab(0)" class="btn btn-default pull-left">Back</button>
<button type="submit" class="btn btn-default pull-right">Next</button>
</div>
</div>
</form>
</body>
</html>
Here is your plunker, i corrected some parts (until Rechnungsaddresse):
http://plnkr.co/edit/luVETXTVCf2PkNAKzK1Z?p=preview
I guess you can use <form name="addressForm"... or <div ng-form="addressForm"
but both seems to make problems.
submitted was never set, so i added it in the way i guess you intended

Control text values with Jquery

I'm learning jquery and jquery mobile. I try this; when next button is clicked, if input texts are empty, alert will be given. But how can i check all text values in the same method?
And if these are empty how can i stop next button action? Thanks.
<!DOCTYPE html />
<html>
<head>
<title>Ebru Sezal JQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="StyleSheet.css" />
<script type="text/javascript">
$(document).ready(function () {
$(".nextBtn").click(function () {
$('input:text').each(function (i) {
var uText = $(this).val();
if (!uText)
alert("alanlar boş olamaz!")
});
});
});
/*$("#nextBtn").click(function () {
// $('input[type="text"]').attr('required placeholder')
$(function () {
var values = $('input[type="text"]').map(function () {
return this.value
}).get()
})
$('input[type="text[]"]').each(function () {
alert($(this).val());
});*/
</script>
</head>
<body>
<div data-role="page" data-title="pOne" id="mainPage">
<div data-role="header" data-position="fixed">
<h1>Logo</h1>
</div>
<div data-role="popup" id="mainPopup">
<ul data-role="listview" data-inset="true" data-theme='d'>
<li data-icon="plus">New User</li>
<li data-icon="delete"><a href="#" >Exit</a></li>
</ul>
</div>
<div data-role="content">
<label for:"username">Username:</label>
<input type="text" />
<label for:"username">Password:</label>
<input type="password"/>
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" data-inline="true" >Sign-in</a>
Log-in
</div>
</div>
<div data-role="footer" data-position="fixed">
footer
</div>
</div>
<div data-role=page id="registerPage1">
<div data-role="header" data-position="fixed"><h1>Registration</h1></div>
<div data-role="content">
<div data-role="fieldcontainer">
<label for:"name">Name:</label>
<input type="text" id="name" required placeholder="Enter your name">
</div>
<div data-role:"fieldcontainer">
<label for:"surname">Surname:</label>
<input type="text" id="surname" required placeholder="Enter your surname">
</div>
<div data-role:"fieldcontainer">
<label for:"email">E-mail:</label>
<input type="email" id="email" required placeholder="Enter your e-mail">
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li> Back</li>
<li> Next </li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="registerPage2">
<div data-role="header"><h1>Registration</h1></div>
<div data-role="content">
<div data-role="fieldcontainer">
<label for="number">Number:</label>
<input type="number">
<label for="birthDay">Birthday:</label>
<input type="date">
<label for="city">City:</label>
<input list="cities" name="cities" >
<datalist id="cities">
<option value="İzmir"></option>
<option value="İstanbul"></option>
<option value="Ankara"></option>
<option value="Bursa"></option>
<option value="Antalya"></option>
<option value="Denizli"></option>
</datalist>
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Back</li>
<li>Next</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Check the variable before you proceed.
$(document).ready(function () {
$(".nextBtn").click(function () {
var text = $(this).val();
if (text){
//process
}
else{
//failed to process, give alert
}
});
});
What you are doing is correct only. Just try (uText == "") in if condition:
$(document).ready(function () {
$(".nextBtn").click(function () {
$('input:text').each(function (i) {
var uText = $(this).val();
if (uText == "")
alert("alanlar boş olamaz!")
return;
});
});
});
You can do this:
$(".nextBtn").click(function () {
// Get all the empty input textbox
var $inputs = $('input:text').filter(function () {
return $.trim(this.value) === '';
});
// If the number of empty textbox is more then 0
if($inputs.length > 0){
alert("alanlar boş olamaz!");
return false; // stop the next button action
}
return true;
});
Instead of the below code:
if (!uText)
alert("alanlar boş olamaz!")
use the below code:
if (!uText || uText == '') {
alert("alanlar boş olamaz!");
return false;
}
you can use
if(uText.length==0)

Categories