Making Basic Web Application using knockout js.
I have 3 textboxes:
1. price,
2. quantity,
3. total.
I want to calculate total automatically when user add data in quantity & in price.
html code :
price:<input type="text" data-bind="value : itemPrice"><br/>
qty:<input type="text" data-bind="value : itemQTY"><br/>
total:<input type="text" data-bind="value : itemTotal">
knockout js code :
ViewModel = function() {
var self = this;
self.itemPrice = ko.observable();
self.itemQTY = ko.observable();
self.itemTotal = ko.observable();
};
Suggestion are greatly appreciated.
Use ko.computed :
self.itemTotal = ko.computed(function(){
if(isNaN(self.itemPrice()) == true && isNaN(self.itemQTY()) == true || isNaN(self.itemQTY()) == true || isNaN(self.itemPrice()) == true){
return '0.00';
}else{
return self.itemPrice()*self.itemQTY();
}
});
above condition will check that if user has entered text data, if user has entered text data then it ll automatically set to 0.00 otherwise calculate total on base of input then show in total textbox.
& make total textbox readonly so user can't edit it.
Like :
<input type="text" data-bind="value : itemTotal" readonly>
Use ko.computed
self.itemTotal = ko.computed(function() {
return self.itemPrice()*self.itemQTY();
});
Related
I'm getting an undefined error and don't know why this isn't working.
It's supposed to divide the rent by the amount of roommates:
function splitRent() {
var roommates = document.getElementById("rent");
var rent = document.getElementById("rent");
var rentEach = rent / roommates;
if (document.getElementById("submit") == true) {
document.write("You each should pay" + " " + rentEach)
} else {
document.alert("Gimme info")
}
};
<h1>Roommate Room Splitter</h1>
<form id="myForm">
Roommates:
<input type="text" name="roommates" id="roommates">
<br/>Rent:
<input type="text" name="rent" id="rent">
<br/>
<input type='submit' id='submit' value='Submit' onclick="splitRent()" />
</form>
You want to take the value of the fields, not the fields themselves.
document.getElementById() returns the node, but you want the value of the input field:
var rent = document.getElementById("rent").value;
Also, you're getting the value of the rent twice; you want to check the roommates as well.
var roommates = document.getElementById("roommates").value;
Lastly, document.getElementById("submit") == true doesn't mean anything: you're comparing a button node with a boolean value, which doesn't make sense. If you want to check to make sure that both fields are filled, try this:
if(roommates && rent){
//do calculations
}else{
window.alert("Enter something"); //note that it's window.alert(), not document.alert(), which is not a function
As it stands, this allows people to enter things that are not numbers; there are two things that you could do to fix that.
Use parseInt()/parseFloat() to ensure that you're extracting a number
Check that you actually have a number before doing calculations
You'd do something like this:
var rent = parseInt(document.getElementById("rent").value);
var roommates = parseFloat(document.getElementById("rooommates").value);
If you use the checking I've done above (rent && roommates), the validation will take place there (it checks for both empty and NaN values).
function splitRent() {
var roommates = parseInt(document.getElementById("roommates").value);
var rent = parseFloat(document.getElementById("rent").value);
var rentEach = rent / roommates;
if (roommates && rent) {
document.write("You each should pay" + " " + rentEach)
} else {
window.alert("Gimme info")
}
};
<h1>Roommate Room Splitter</h1>
<form id="myForm">
Roommates:
<input type="text" name="roommates" id="roommates">
<br/>Rent:
<input type="text" name="rent" id="rent">
<br/>
<input type='submit' id='submit' value='Submit' onclick="splitRent()" />
</form>
Shouldn't this be:
var roommates = document.getElementById("roommates").value;
var rent = document.getElementById("rent").value;
Do you always get "1" for your result?
I am working with form validations.
I have two text fields for adding budget. I want to check whether the value of total budget field is greater than that of daily budget in the click event of my submit button .I am using a form validation jquery plugin for validating my form. I want to customize that jquery with greaterthan rule.How can I validate a field's value is greater than another field's value in php and javascript..
I have tried with a method for greaterthan
Javascript:
method:
greaterThan: function(value, element, param)
{
var target = $(param);
return value <= target.val();
}
and
rules: {
totalbudget: {
required: true,
greaterThan:"#daylybudget"
},
But this is not working! How can I accomplish this?
var val1 = $('#textboxid1').val();
var val2 = $('#textboxid2').val();
var val3 = $('#textboxid3').val();
$('#submitbutton').click(function(){
if((val1 > val2) && (val2 > val3))
{
//prceed further
}
else
{
alert('alert message');
}
});
NOTE: You need to include jquery before this code..
First, javascript is client side, php is server side. Depending on the type of validation you need you can implement one of these validations or even both of them.
Considering the following form
<form method="post">
<input type="text" name="first_num" id="first_num" />
<input type="text" name="second_num" id="second_num" />
<input type="text" name="third_num" id="third_num" />
<input type="submit" value="Send & validate" onclick="validate()" />
</form>
Here's a javascript way of doing it:
<script type="text/javascript">
function validate()
{
var value1;
var value2;
var value3;
value1 = parseFloat(document.getElementById('first_num').value);
value2 = parseFloat(document.getElementById('second_num').value);
value3 = parseFloat(document.getElementById('third_num').value);
if (value1 > value2 && value2 > value3)
{
//we're ok
}
else
{
alert("Values are not as they should be");
return false;
}
}
</script>
As for the php side:
<?php
$value1 = $_POST['first_num'];
$value2 = $_POST['second_num'];
$value3 = $_POST['third_num'];
if ($value1 > $value2 && $value2 > $value3)
{
//do whatever you want because the values are as you wish
}
else
{
//the values are not as they should be
}
?>
Keep in mind that usually, for this kind of validation, javascript might be just enough.
Im creating a form where i want the user to fill out an amount, and then show at the bottom of the form. Then if there is a checkbox checked it adds 21 to the value within the input field so far i have this, but its not quite working.
http://jsfiddle.net/vePbV/
<label>Desired amount</label> <input name="tbDesiredAmount" type="number" id="tbDesiredAmount" min="50" />
<label>Include Apron?</label> <input id="cb_Apron" type="checkbox" name="cb_Apron" />
<p>Total: £<span id="total">0</span>.00</p>
$('#tbDesiredAmount').blur(function() {
var value = $('#tbDesiredAmount').val();
$("#total").empty().append(value);
});
$('#cb_Apron').blur(function() {
var value = $('#tbDesiredAmount').val();
var apron = 21;
var total = value + apron;
$("#total").empty().append(total);
});
So and example of what i want it to do.
Type 70 into "desired amount", show 70 in #total when you focus off the input field.
Check apron tickbox, adds 21 to the desired amount so displays 91 in #total
if you uncheck the apron checkbox, it will remove 21 from the figure in #total
if i change the desired amount, it will update the #total, this needs to work with the tickbox checked and the tickbox not checked.
Any help would be greatly appreciated as im rather stuck at the moment.
Try this Use parseInt()
var apron = 21;
$('#tbDesiredAmount').keyup(function () {
var value = $('#tbDesiredAmount').val();
if ($('#cb_Apron').is(':checked')) {
var total = parseInt(value) + parseInt(apron);
$("#total").empty().append(total);
} else {
$("#total").empty().append(value);
}
});
$('#cb_Apron').click(function () {
if ($(this).is(':checked')) {
var value = $('#tbDesiredAmount').val();
var total = parseInt(value) + parseInt(apron);
$("#total").empty().append(total);
} else {
var tot = parseInt($("#total").text()) - (parseInt(apron))
$("#total").empty().append(tot);
}
});
DEMO
I've created a form in Acrobat XI pro. I have 3 radio buttons, which when selected, populate a single number value into a field...here is the code I'm using for this:
var v = this.getField("marketRadioButtons").value;
event.value = (v=="Off") ? "" : v;
This works fine, but now I'm trying to restrict the user edit of this this field to a maximum 40% of the default value per selection of each radio button.
I've been able to accomplish this by simply creating 3 fields - one for each radio button, and using validation against an actual number (ie., selecting radio button1 populates text field1 with $700, so:
event.rc = event.value < 980 if (!event.rc) app.alert ("..."))
but prefer to use only one text field for each radio button value.
Any help is greatly appreciated!
Try this solution! I added some new happiness that does as you wish!
The way this program works:
You click a checkbox.
You type a new value for that number.
You click update.
It updates the number by the checkboxes.
Checks:
If the number entered is more than 1.4 * current value, an alert will fire and the value will not be updated.
If no number is entered, nothing happens.
Html:
<form id="form1" action="">
<input class='1' type="radio" onclick="display(this)" name="box" value="700"><span class="1">700</span><br>
<input class='2' type="radio" onclick="display(this)" name="box" value="1200"><span class="2">1200</span><br>
<input class='3' type="radio" onclick="display(this)" name="box" value="1500"><span class="3">1500</span>
</form><br>
<form action="">
<input type="text" id="output" value="$"/>
<button type="button" onclick="update(this)">Update</button>
</form>
Javascript:
var checkedValue = {
'class':0,
'value':0,
}
display = function(me) {
var textbox = document.getElementById('output');
textbox.value = "$" + me.value;
checkedValue.value = Number(me.value);
checkedValue.class = me.className;
}
update = function(me) {
var price = me.form.output.value;
// if no value entered, newAmount sets to 0
var newAmount = Number(price.substring(1, price.length));
if (newAmount) {
var maxChange = Math.round(1.4 * checkedValue.value);
if (newAmount <= maxChange) {
document.getElementsByClassName(checkedValue.class)[1].innerHTML = newAmount;
} else {
alert('Too high!');
}
}
}
jsFiddle.
I have a web page that allows a user to enter values into fields. When a user updates a field, I want to automatically update the total displayed to the user. Because the input fields are dynamically generated, I created a JavaScript function called "update". A sample of my code is shown here:
<input type="text" id="myField1" onchange="return update(this);" />
<input type="text" id="myField2" onchange="return update(this);" />
<span id="totalCount"></span>
var total = 0;
function update(e) {
var v = $(e).val();
if (parseInt(v) != NaN) {
total = total + v;
$("#totalCount").html(total);
}
return false;
}
When a user enters "2" into "myField1", "02" is displayed in the "totalCount" element. In reality, I would like to just display "2". How do I do this in JavaScript while taking into a account odd entries?
Thanks!
Since $(e).val() is a string, total + v is a string too. Use parseInt not just for the test but also when using the value:
var v = parseInt($(e).val(), 10);
if (!isNaN(v)) {
total = total + v;
$("#totalCount").html(total);
}