I'm trying to make a calculator on dividing 2 variables in javascript. But I got an error like NaN. Please take a look at my code. I'm a beginner to javascript.
<script type="text/javascript">
var p_val, d_days, total_price
function calculate() {
p_val = parseInt(document.getElementById("purchased_price").value);
d_days = parseInt(document.getElementById("days"));
total_price = parseInt(p_val/d_days);
alert(total_price);
}
</script>
<div class="box-body">
<span class="text-danger"><?php echo validation_errors() ?></span>
<div class="box-body">
<div class="form-group">
<label for="exampleInputEmail1">Purchased Price </label>
<input type="text" id="purchased_price" class="form-control" value="100000">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Number Of Days</label>
<input type="text" id=days" class="form-control" >
</div>
<form action="<?=base_url()?>" method="post">
<div class="form-group">
<label for="exampleInputEmail1">Depreciation Value</label>
<input type="text" id=result" class="form-control" >
</div>
<button class="btn btn-primary" type="button" onclick="calculate()" value="calculate">Calculate</button>
</div>
<!-- /.box-body -->
<div class="box-footer">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-3">
<button type="submit" class="btn btn-info btn-lg" >Save</button>
</div>
<div class="col-md-3">
<a href="<?=base_url()?>location/location_list/" class="btn btn-info btn-lg" >Cancel</a>
</div>
<div class="col-md-3">
</div>
</div>
</div>
</form>
</div>
Hello,
Im try to make calculator for divide 2 variable in javascript. But I got error like NaN Please look my code. I am beginner to javascript.
Just add .value to parse the value of d_days input like you did with p_val and not the whole object
d_days = parseInt(document.getElementById("days").value);
Btw, when you get an error specifying that X var is NaN, it usually means that you tried to compute mathematically something that is not a number.
Related
I got a small problem that i have no clue how to solve. This HTML/PHP code bellow gets different values from a database and outputs them into the different input fields.
The HTML/PHP bellow is one element, and multiple of them are made with different values from the database. Then i got a small javascript that calulates some different values from the values that are inputted. The problem is that i got lets say 5 elements, and only wants to calculate for one of them, but if i press the "btn-oppdater" button it calculates for all the different elements.
How do i make it only calculate for the element where the button is?
Script
$('.btn-oppdater').click(function(){
$(".kval_spill").each(function(){
var fieldShow = $(this).next('.kval_spill_inner');
var b_value_kval_1 = fieldShow.find('.b_value_kval_1')[0].value;
var b_odds_kval_1 = fieldShow.find('.b_odds_kval_1')[0].value;
var e_odds_kval_1 = fieldShow.find('.e_odds_kval_1')[0].value;
var gebyr_kval = '0.02'
var q_value = ((b_odds_kval_1 / (e_odds_kval_1 - gebyr_kval)) * b_value_kval_1);
var q_tap = (b_odds_kval_1 - 1) * b_value_kval_1 - (e_odds_kval_1 - 1) * q_value;
var q_value_fixed = q_value.toFixed(2);
var q_tap_fixed = q_tap.toFixed(2);
fieldShow.find('.q_value_1')[0].value = q_value_fixed;
fieldShow.find('.q_tap_1')[0].value = q_tap_fixed;
});
});
HTML/PHP
<?php while ($row = mysqli_fetch_assoc($result2)) { echo '
<form style="margin-top: 10px;" action="" method="post" class="">
<input type="hidden" class="kval_spill">
<div class="kval_spill_inner">
<input class="" type="hidden" name="id" value="'.$row['id'].'">
<div class="form-row">
<div class="form-group col-md-4">
<input type="text" class="form-control kval_kamp_1" name="kval_kamp_1" value ="'.$row['kval_kamp_1'].'" placeholder="Kamp">
</div>
<div class="form-group col-md-3">
<div class="input-group">
<input type="text"class="form-control b_value_kval_1" name="b_value_kval_1" value ="'.$row['b_value_kval_1'].'" placeholder="Spill verdi">
<div class="input-group-append">
<span class="input-group-text">Kr</span>
</div>
</div>
</div>
<div class="form-group col-md-2">
<input type="text" class="form-control b_odds_kval_1" name="b_odds_kval_1" value ="'.$row['b_odds_kval_1'].'" placeholder="Odds">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<input type="text" class="form-control kval_marked_1" name="kval_marked_1" value ="'.$row['kval_marked_1'].'" placeholder="Type marked">
</div>
<div class="form-group col-md-3">
<div class="input-group">
<input type="text"class="form-control text-info q_value_1" name="q_value_1" value ="'.$row['q_value_1'].'" placeholder="Lay verdi">
<div class="input-group-append">
<span class="input-group-text">Kr</span>
</div>
</div>
</div>
<div class="form-group col-md-2">
<input type="text" class="form-control e_odds_kval_1" name="e_odds_kval_1" value ="'.$row['e_odds_kval_1'].'" placeholder="Odds">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-2">
<div class="input-group">
<div class="input-group-append">
<span class="input-group-text">Tap</span>
</div>
<input type="text" class="form-control text-danger q_tap_1" name="q_tap_1" value ="'.$row['q_tap_1'].'" placeholder
="0.00" readonly>
<div class="input-group-append">
<span class="input-group-text">Kr</span>
</div>
</div>
</div>
<div class="col-auto">
<button type="button" class="btn btn-outline-secondary btn-oppdater">Regn ut</button>
</div>
</div>
</div>
</form>
<br>
'; }?>
Replace $(".kval_spill") with $(this).closest("form").find(".kval_spill").
But it looks like there's only one kval_spill and kvall_spill_inner in each form, so there's no need to use .each(). You can get rid of the .each() loop and just use:
var fieldShow = $(this).closest("form").find('.kval_spill_inner');
And instead of
fieldShow.find('.q_value_1')[0].value = q_value_fixed;
fieldShow.find('.q_tap_1')[0].value = q_tap_fixed;
you can write:
fieldShow.find('.q_value_1').val(q_value_fixed);
fieldShow.find('.q_tap_1').val(q_tap_fixed);
I have a form in a modal. When I press the submit button the php file runs with the following errors:
Notice: Undefined index: phone1 in C:\xampp\htdocs\site\bank.php on line 2
Notice: Undefined index: charge1 in C:\xampp\htdocs\site\bank.php on line 4
Here is the PHP code in bank.php:
<?php
echo $_POST["phone"];
echo "</br>";
echo $_POST["charge"];
?>
Here is the modal contents:
<!-- Modal content-->
<div class="modal fade" id="register" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal title here</h4>
</div>
<div class="modal-body">
<form id="modal-form" class="form-horizontal" method="POST" action="bank.php">
<div class="form-group col-md-12">
<div class="form-group">
<div class="col-xs-6" style="float:right;">
<label>phone numer:</label>
<input id="phone" type="text" class="form-control" name="phone" value="pre filled value" disabled/>
<span id='display'></span>
</div>
<div class="col-xs-6" style="float:left;">
<label>charge:</label>
<input style="font-size:17px; font-weight:bold;" id="charge" type="text" class="form-control" name="charge" value="some other prefilled value" disabled/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<button class="btn btn-danger btn-default pull-right" data- dismiss="modal" style="margin-left:10px;">close</button>
<button type="submit" class="btn btn-success"> submit </button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
modal footer
</div>
</div>
</div>
</div>
I would be thankful if some one help me figure out what;s wrong with this
Not relevant anymore, OP edited his question. see edit for relevant answer!
the name of the post variable is defined by the nameattribute of the input, not the id.
therefore in your bank.php you will have $_POST['phone1'] and $_POST['charge1']available.
you can always just var_dump($_POST); to see all available post variables.
Edit: Also, disabled inputs are not being sent on submit. You can work around that fact by just adding a second hidden input for each disabled one like that:
<!-- Modal content-->
<div class="modal fade" id="register" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal title here</h4>
</div>
<div class="modal-body">
<form id="modal-form" class="form-horizontal" method="POST" action="bank.php">
<div class="form-group col-md-12">
<div class="form-group">
<div class="col-xs-6" style="float:right;">
<label>phone numer:</label>
<input id="phoneDisabled" type="text" class="form-control" name="phoneDisabled" value="pre filled value" disabled/>
<input id="phone" type="hidden" class="form-control" name="phone" value="pre filled value" disabled/>
<span id='display'></span>
</div>
<div class="col-xs-6" style="float:left;">
<label>charge:</label>
<input style="font-size:17px; font-weight:bold;" id="chargeDisabled" type="text" class="form-control" name="chargeDisabled" value="some other prefilled value" disabled/>
<input style="font-size:17px; font-weight:bold;" id="charge" type="hidden" class="form-control" name="charge" value="some other prefilled value" disabled/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<button class="btn btn-danger btn-default pull-right" data- dismiss="modal" style="margin-left:10px;">close</button>
<button type="submit" class="btn btn-success"> submit </button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
modal footer
</div>
</div>
</div>
</div>
Edit2: Or, just change disabled attribute to readonly
The name in your $_POST variable and the html input name are both different. Please try to make them the same and hopefully, your code will work.
Change name=phone1 to name=phone or whatever.
You have set both of those inputs as disabled. Forms by default won't post those. You probably need to grab the vars with JavaScript, or remove the disabled attributes, again, with JavaScript.
I have a modal that allows users to 'refuel' by filling out a form where they can input the amount of fuel to add, however the maximum fuel amount is 180 litres, so if the existing fuel is 170 litres (the existing fuel value will be retrieved from a database), and the user tries to add 20 litres, it should produce an error. I've got some code already, but it's not producing the error. If anyone could point out the issue it would be greatly appreciated.
$(document).ready(function() {
$('#fuel').blur(function() {
if (!ValidateFuel()) {
e.preventDefault();
}
});
$('#auth_form8').on('submit', function(e) {
if (!ValidateFuel()) {
e.preventDefault();
}
});
});
function ValidateFuel() {
var IsValid = false;
var fuel_to_add = $('#fuel').val();
var current_fuel = '100'; // this value will be retrieved from database
var fuel_once_added = Number(current_fuel) + Number(fuel_to_add);
if (fuel_once_added > 180) {
$('#alertInvalidFuel').show();
IsValid = false;
} else {
$('#alertInvalidFuel').hide();
IsValid = true;
}
return IsValid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="btn btn-success" role="button" data-target="#confirm-refuelG-EEGU" data-toggle="modal"><em class='fa fa-plus'></em></a>
<div id="confirm-refuelG-EEGU" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Fuel G-EEGU</h4>
</div>
<div class="modal-body">
<form name="auth_form8" id="auth_form8" method="post" action="action_refuel.php">
<p>This action cannot be undone.</p>
<hr>
<input class="form-control" id="aircraft_id" name="aircraft_id" value='1' type="hidden">
<div class="form-group" name="fuel" id="fuel">
<label for="auth_code8" class="control-label">
Fuel to add:</label>
<input class="form-control" id="fuel" name="fuel" type="number" required>
</div>
<div style="display:none;" class="alert alert-danger" id="alertInvalidFuel">
<p>Fuel will exceed 180 litres.</p>
</div>
<hr>
<div class="form-group has-feedback" name="auth_code8" id="auth_code8">
<label for="auth_code8" class="control-label">
Authorisation Code</label>
<input class="form-control" id="auth_code_input8" autocomplete="new-password" name="refuel_auth_code" type="password" required>
<span class="form-control-feedback glyphicon" id="iconBad8"></span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" id="submit" class="btn btn-success">Add Fuel</button>
</div>
</form>
</div>
</div>
</div>
JSFiddle Demo
The problem is here:
<div class="form-group" name="fuel" id="fuel">
<label for="auth_code8" class="control-label">Fuel to add:</label>
<input class="form-control" id="fuel" name="fuel" type="number" required>
</div>
Your div has id="fuel" and so does the input. Remove the id from the div or make it unique. Also, there is no name attribute for div elements, you should remove that as well.
i have a problem with angulare code. I have made a small form structure with ng reapet . When i removed one of element every element down of them are not show the "not valid" message . All up of them work fine but down of remove not showing info not given the false of this data-ng-show="Zhf.w{{key}}.$error.pattern" why ng show not taked false.
<form name="zhf" class="form-horizontal">
<div data-ng-repeat="(key, i) in vm.items.Info | limitTo: (vm.NumberOfDays)">
<div class="col-sm-3">
<input type="text" class="form-control" id="w{{key}}" name="w{{key}}" ng-model="vm.item[key].w" placeholder="0" ng-pattern="/^[0-9]{1,10}([,.][0-9]{1,2})?$/" required>
<p style="color: #a94442" class="text-danger" data-ng-show="Zhf.w{{key}}.$error.pattern">
<span>Not a valid number!</span>
</p>
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-danger btn-sm " ng-click="vm.delete(key)">remove</button>
</div>
</div>
</form>
vm.delete = function(index) {
vm.items.Info.splice(index, 1);
vm.item.splice(index, 1);
vm.NumberOfDays -= 1;
}
I have updated your ng-repeat section to validate form and sample is HERE
<form novalidate="novalidate" name="inputValidate">
<div ng-repeat="field in fields.test">
<div style="width:600px">
<div ng-form name="validMe" style="width:58%;float:left">
<input id="input{{$index}}" name="input{{$index}}" type="text" ng-model="field.value" ng-pattern="/^[0-9]{1,10}([,.][0-9]{1,2})?$/" required>
<span style="color: #a94442" ng-show="validMe['input\{\{$index\}\}'].$error.pattern">Not a valid number!</span>
<span style="color: #a94442" ng-show="validMe['input\{\{$index\}\}'].$error.required ">Number Required!</span>
</div>
<div style="width:20%;float:left">
<input type="button" value="Remove" ng-click="delete($index)"/>
</div>
</div>
</div>
</form>
I am getting this error and the script never seems to work.
Uncaught ReferenceError: validate is not defined
I also tried to call the function onsubmit from the and also tried to place the function inside the page and in a separate JS file but same results.
The html file:show.gsp
<body>
<div class="row">
<div class="col-md-9 col-sm-9">
<g:form class="form-inline" role="form" action="update" name="form" >
<div class="form-group has-feedback">
<label class="control-label" for="mcc">GSM.Identity.MCC</label>
<br/>
<input type="text" class="form-control required" name="mcc" id="mcc" value="${mcc}">
<span class="glyphicon form-control-feedback"></span>
</div>
<br/>
<br/>
<div class="form-group has-feedback">
<label class="control-label" for="mnc">GSM.Identity.MNC</label>
<br/>
<input type="text" class="form-control required" name="mnc" id="mnc" value="${mnc}">
<span class="glyphicon form-control-feedback"></span>
</div>
<br/>
<br/>
<div class="form-group has-feedback">
<label class="control-label" for="co">GSM.Radio.CO</label>
<br/>
<input type="text" class="form-control required" name="co" id="co" value="${co}">
<span class="glyphicon form-control-feedback"></span>
</div>
<br/>
<br/>
<p>
<button type="submit" class="btn btn-success btn-sm" id="submit" onclick="validate()">Save Settings</button>
<g:link action="restart" class="btn btn-danger btn-sm">Restart OpenBts</g:link>
</p>
</g:form>
</div>
</div>
</body>
<script src="${resource(dir:'js', file:'main_script.js') }"></script>
and the script: main_script.js
//validation script
function validate(){
console.log("test");
var mcc = $("#mcc").val();
var mnc = $("#mnc").val();
var co = $("#co").val();
if (!$.isNumeric(mcc)){
$("#mcc").parent("div").removeClass("has-feedback has-error has-success").addClass("has-error");
}
if (!$.isNumeric(mnc)){
$("#mnc").parent("div").removeClass("has-feedback has-error has-success").addClass("has-error");
}
if (!$.isNumeric(co)){
$("#co").parent("div").removeClass("has-feedback has-error has-success").addClass("has-error");
}
}
Javascript must be loaded within <head> or <body> tags.
you have added script tag after </body> tag, thats why it is not getting loaded and button event can't find validate() function which is within that Javascript
Add it before </body> tag as follows,
.
.
.
</g:form>
</div>
</div>
<script src="${resource(dir:'js', file:'main_script.js') }"></script>
</body>
As This Link says it should be used within <body> tag