Jquery Addition and Percentage calculation - javascript

I am trying to calculate percentage and addition using JQuery. Addition can properly run but percentage calculation cannot. My code is below.
How can I change it and calculate the percentage?
index.php
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<br/><br />
<form id="jquery_percentage">
<label>Total Marks</label>
<input type="text" name="total_marks" id="total_marks"/>
<br/>
<br/>
<label>Written Marks</label>
<input type="text" name="written_marks" id="written_marks"/>
<br/>
<br/>
<label>Viva Marks</label>
<input type="text" name="viva_marks" id="viva_marks"/>
<br/>
<br/>
<label>Grooming Marks</label>
<input type="text" name="grom_marks" id="grom_marks"/>
<br/>
<br/>
<label>Obtain Marks</label>
<input type="text" name="obt_marks" id="obt_marks"/>
<br/>
<br/>
<label>Percentage Marks</label>
<input type="text" name="perc_marks" id="perc_marks"/>
<br/>
<br/>
<input type="button" name="submit" id="submit" value="Submit" />
</form>
<div id="return"></div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$('#written_marks, #grom_marks, #viva_marks').change(function(){
var written_marks = parseFloat($('#written_marks').val()) || 0;
var grom_marks = parseFloat($('#grom_marks').val()) || 0;
var viva_marks = parseFloat($('#viva_marks').val()) || 0;
$('#obt_marks').val(written_marks + viva_marks + grom_marks);
});
</script>
<script>
$('#total_marks, #obt_marks').change(function(){
var total_marks = parseFloat($('#total_marks').val());
var obt_marks = parseFloat($('#grom_marks').val());
//var viva_marks = parseFloat($('#viva_marks').val()) || 0;
$('#perc_marks').val((obt_marks * 100) / total_marks);
});
</script>

You onChange event occurs when you actually go to the element and change its value. It doesn't trigger automatically if you are just changing it's value dynamically. In this case you have to trigger the event like this $("#obt_marks").trigger("change");. Check the snippet
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<br/><br />
<form id="jquery_percentage">
<label>Total Marks</label>
<input type="text" name="total_marks" id="total_marks" />
<br/>
<br/>
<label>Written Marks</label>
<input type="text" name="written_marks" id="written_marks" />
<br/>
<br/>
<label>Viva Marks</label>
<input type="text" name="viva_marks" id="viva_marks" />
<br/>
<br/>
<label>Grooming Marks</label>
<input type="text" name="grom_marks" id="grom_marks" />
<br/>
<br/>
<label>Obtain Marks</label>
<input type="text" name="obt_marks" id="obt_marks" />
<br/>
<br/>
<label>Percentage Marks</label>
<input type="text" name="perc_marks" id="perc_marks" />
<br/>
<br/>
<input type="button" name="submit" id="submit" value="Submit" />
</form>
<div id="return"></div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$('#written_marks, #grom_marks, #viva_marks').change(function() {
var written_marks = parseFloat($('#written_marks').val()) || 0;
var grom_marks = parseFloat($('#grom_marks').val()) || 0;
var viva_marks = parseFloat($('#viva_marks').val()) || 0;
$('#obt_marks').val(written_marks + viva_marks + grom_marks);
$("#obt_marks").trigger("change");
});
</script>
<script>
$('#total_marks, #obt_marks').change(function() {
var total_marks = parseFloat($('#total_marks').val());
var obt_marks = parseFloat($('#obt_marks').val());
//var viva_marks = parseFloat($('#viva_marks').val()) || 0;
$('#perc_marks').val((obt_marks * 100) / total_marks);
});
</script>

Related

Javascript Local Storage Not Storing Everything

So I want to add local storage to this project but it's only saving the first 2 checkboxes, not all of them. I want to make a habit tracker and you are to check off the days you complete and so when you reload the page, the days you have completed a habit are checked off. so far I only have the basic layout of the page without the actual habit part or the styling. I'm trying to work on the checkbox part first.
Any help will be appreciated. Code is below:
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Local Storage Test</title>
</head>
<body>
<!-- <p>Last Saved Item: <span id="saved">_____</span></p>
<input id="username" type="text"></input>
<button onclick="store()">Save</button>
<br><br>
<p id="confirm"></p> -->
<h2 id="Haading">Habbit Tracker</h2><br>
<div class="habbits">
<input type="text" placeholder="Enter A Habbit Here"><button class="add" onclick="add()">Add</button><br><br>
</div>
<div class="days">
<input onclick="save()" type="checkbox" id="Mon">Monday</input>
<br>
<input onclick="save()" type="checkbox" id="Tue">Tuesday</input>
<br>
<input onclick="save()" type="checkbox" id="Thu">Wednesday</input>
<br>
<input onclick="save()" type="checkbox" id="Fri">Thursday</input>
<br>
<input onclick="save()" type="checkbox" id="Sun">Friday</input>
<br>
<input onclick="save()" type="checkbox" id="Sat">Saturday</input>
<br>
<input onclick="save()" type="checkbox" id="Sun">Sunday</input>
</div>
<script src="script.js" charset="utf-8"></script>
</body>
</html>
Javascript
function save(){
var checkbox1 = document.getElementById('Mon');
localStorage.setItem('monday', checkbox1.checked);
var checkbox2 = document.getElementById('Tue');
localStorage.setItem('tuesday', checkbox2.checked);
var checkbox3 = document.getElementById('Wed');
localStorage.setItem('wednesday', checkbox3.checked);
var checkbox4 = document.getElementById('Thu');
localStorage.setItem('thursday', checkbox4.checked);
var checkbox5 = document.getElementById('Fri');
localStorage.setItem('friday', checkbox5.checked);
var checkbox6 = document.getElementById('Sat');
localStorage.setItem('saturday', checkbox6.checked);
var checkbox7 = document.getElementById('Sun');
localStorage.setItem('sunday', checkbox7.checked);
}
function load(){
var checked1 = JSON.parse(localStorage.getItem('monday'));
document.getElementById("Mon").checked = checked1;
var checked2 = JSON.parse(localStorage.getItem('tuesday'));
document.getElementById("Tue").checked = checked2;
var checked3 = JSON.parse(localStorage.getItem('wednesday'));
document.getElementById("Wed").checked = checked3;
var checked4 = JSON.parse(localStorage.getItem('thursday'));
document.getElementById("Thu").checked = checked4;
var checked5 = JSON.parse(localStorage.getItem('friday'));
document.getElementById("Fri").checked = checked5;
var checked6 = JSON.parse(localStorage.getItem('saturday'));
document.getElementById("Sat").checked = checked6;
var checked7 = JSON.parse(localStorage.getItem('sunday'));
document.getElementById("Sun").checked = checked7;
}
load();
This ids for these 3 input fileds are wrong.
<input onclick="save()" type="checkbox" id="Thu">Wednesday</input>
<br>
<input onclick="save()" type="checkbox" id="Fri">Thursday</input>
<br>
<input onclick="save()" type="checkbox" id="Sun">Friday</input>
<br>
So you js code throws an error here:
document.getElementById("Wed").checked = checked3;
Change your html to:
<input onclick="save()" type="checkbox" id="Wed">Wednesday</input>
<br>
<input onclick="save()" type="checkbox" id="Thu">Thursday</input>
<br>
<input onclick="save()" type="checkbox" id="Fri">Friday</input>
<br>
and it will work

Show value in a field from javascript

I have a input field that is readonly that shows the user the money they have left over after spending. They first have to enter their income and in the spending field, it will show the value from the database. My problem is after calculating the money left over in javascript, the value does not show in the leftOver field. I am not sure what I am doing wrong. Here is my code:
<script type="text/javascript">
$(document).ready(function(){
$("#addRecord").hide();
$("#btnAdd").click(function(){
$("#addRecord").show();
});
});
</script>
<script type="text/javascript">
function getTotalIncome(){
var income = parseFloat(document.getElementById("income").value);
var otherIncome = parseFloat(document.getElementById("otherIncome").value);
var totalIncome = income + otherIncome;
document.getElementById("totalIncome").value = '$' + totalIncome;
}
</script>
<script type="text/javascript">
function getLeftOver(){
var totalIncome = parseFloat(document.getElementById("totalIncome").value);
var totalSpending = parseFloat(document.getElementById("totalSpending").value);
var leftOver = totalIncome - totalSpending;
document.getElementById("leftOver").value = '$' + leftOver;
}
</script>
</head>
<body>
<button id="btnAdd" type="button" name="btnAdd">Create A Budget</button>
<form id="addRecord" name="addRecord" action="Budget" method="post">
<h3>Income</h3>
<label>Income:</label>
<input type="text" name="income" id="income" onchange="getTotalIncome()"> <br>
<label>Other Income:</label>
<input type="text" name="otherIncome" id="otherIncome" onchange="getTotalIncome()"><br>
<hr>
<h3>Spending</h3>
<label>Total Amount Of Spending</label>
<input type="text" name="totalSpending" value="$${totalSpending}" disabled=disabled>
<hr>
<h4>You've budgeted</h4>
<label>Income</label>
<input type="text" name="totalIncome" id="totalIncome" readonly="readonly" onchange="getLeftOver()">
<label>Spending</label>
<input type="text" name="totalSpending" id="totalSpending" value="$${totalSpending}" readonly="readonly" onchange="getLeftOver()">
<label>Left Over</label>
<input type="text" name="leftOver" id="leftOver" readonly="readonly">
</form>
</body>

Filling data in form using angular

I am a true beginner at Angular (but not JS), started yesterday, so I hope you forgive me if this question sound stupid. Consider the following small application:
HTML:
<!doctype html>
<html ng-app="todoApp">
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="/js/TestController.js"></script>
</head>
<body ng-controller="TestController as myControl">
<div id="overlaybox">
<button ng-click="myControl.showUpd(4)">Test</button><br/><br/><br/>
<form ng-submit="myControl.updTodo()">
Note:<br/>
<textarea rows="5" cols="30" id="updContent" ng-model="noteupd.content"></textarea><br/>
Deadline (format YYYY-MM-DD HH:MM):<br/>
<input type="text" id="updDeadline" ng-model="noteupd.deadline" /><br/>
Completed:
<input type="checkbox" id="updCompleted" ng-model="noteupd.completed" /><br/>
<input type="hidden" id="updID" ng-model="noteupd.id" /><br/>
<input type="submit" value="Update" />
</form>
</div>
</body>
</html>
Angular-controller:
angular.module('todoApp', []).controller('TestController', function($scope, $http) {
var thisApp = this;
thisApp.showUpd = function(noteID) {
$http({method : 'GET', url : 'http://localhost:8000/notes/' + noteID})
.then (function(response) {
console.log(response.data.content);
console.log(response.data.deadline);
console.log(response.data.id);
console.log(response.data.completed);
document.getElementById("updContent").innerHTML = response.data.content;
document.getElementById("updDeadline").value = response.data.deadline;
document.getElementById("updID").value = response.data.id;
if (response.data.completed == 1) {
document.getElementById("updCompleted").checked = true;
} else {
document.getElementById("updCompleted").checked = false;
}
}, function() {
alert("Error getting todo note");
});
}
thisApp.updTodo = function(noteupd) {
console.log("TEST");
console.log($scope.noteupd);
}
});
After clicking Test-button I get the following output in my console:
TestController.js:7 123123
TestController.js:8 2016-01-05 10:28:42
TestController.js:9 4
TestController.js:10 0
By then, the fields in the form have been filled in (and the hidden field has a value). And after clicking Update I get this in the console:
TestController.js:27 TEST
TestController.js:28 undefined
If i change the values in the fields manually, I do get something else instead of "undefined", but the idea is that one should not have to change the values. Also, the object does not contain the hidden "id" even if all fields are changed.
Obviously, I'm a beginner at this, and obviously I'm doing it wrong, but do anyone have a suggestion on how I can make this work?
Your html is fine but your code needs fixing
First define noteupd in your code
Use noteupd to change your html values rather then document.getElementById
That should fix your code it will end up looking like this
angular.module('todoApp', []).controller('TestController', function($scope, $http) {
var thisApp = this;
$scope.noteupd={}; //defining noteupd
var noteupd=$scope.noteupd; //preventing scope issues
thisApp.showUpd = function(noteID) {
$http({method : 'GET', url : 'http://localhost:8000/notes/' + noteID})
.then (function(response) {
console.log(response.data.content);
console.log(response.data.deadline);
console.log(response.data.id);
console.log(response.data.completed);
//updating your html
noteupd.content= response.data.content;
noteupd.deadline = response.data.deadline;
noteupd.id= response.data.id;
if (response.data.completed == 1) {
noteupd.completed = true;
} else {
noteupd.completed = false;
}
}, function() {
alert("Error getting todo note");
});
}
thisApp.updTodo = function(noteupd) {
console.log("TEST");
console.log($scope.noteupd);
}
});
If you are using this variable against $scope .. you have always ng-controller with alias , and you can only access properties or methods of controller with controller alias only ..
if you didnt use ng-controller= "TestController as myController"
and not access methods as myController.method() .. your example won't be worked...(section 2)
Here is some examples to describe you how it is work
Check this tutorial too ..
http://plnkr.co/edit/FgBcahr6WKAI2oEgg4cO?p=preview
angular.module('todoApp', []).controller('TestController', function($scope, $http) {
var thisApp = this;
$scope.readedTodo = {};
this.noteupd = {};
thisApp.showUpd = function(noteID) {
// changed your url as defat json data
$http({
method: 'GET',
url: 'data.json'
})
.then(function(response) {
console.log(response.data);
console.log(response.data.content);
console.log(response.data.deadline);
console.log(response.data.id);
console.log(response.data.completed);
thisApp.noteupd = response.data;
$scope.readedTodo = response.data;
}, function() {
alert("Error getting todo note");
});
}
thisApp.updTodo = function(noteupd) {
console.log("TEST");
console.log(thisApp.noteupd);
}
});
<!doctype html>
<html ng-app="todoApp">
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="overlaybox" ng-controller="TestController as myControl">
<button ng-click="myControl.showUpd(4)">Test</button>
<br/>
<br/>
<br/>
<form ng-submit="myControl.updTodo()">
<h3>if you use binding h this against $scope</h3> Note:
<br/>
<textarea rows="5" cols="30" id="updContent" ng-model="myController.noteupd.content"></textarea>
<br/> Deadline (format YYYY-MM-DD HH:MM):
<br/>
<input type="text" id="updDeadline" ng-model="myController.noteupd.deadline" />
<br/> Completed:
<input type="checkbox" id="updCompleted" ng-model="myController.noteupd.completed" />
<br/>
<h3>if you use binding with $scope</h3> Note:
<br/>
<textarea rows="5" cols="30" id="updContent2" ng-model="readedTodo.content"></textarea>
<br/> Deadline (format YYYY-MM-DD HH:MM):
<br/>
<input type="text" id="updDeadline222" ng-model="readedTodo.deadline" />
<br/> Completed:
<input type="checkbox" id="updCompleted" ng-model="readedTodo.completed" />
<br/>
<input type="hidden" id="updID" ng-model="readedTodo.id" />
<br/>
<input type="submit" value="Update" />
</form>
</div>
<h3>SEction 2 </h3>
<div id="overlaybox2" ng-controller="TestController ">
<button ng-click="showUpd(4)">Test</button>
<button ng-click="showUpdate(4)">Test</button>
<br/>
<br/>
<br/>
<form ng-submit="updTodo()">
<h3>if you use binding h this against $scope</h3> Note:
<br/>
<textarea rows="5" cols="30" id="updContent" ng-model="readedTodo.content"></textarea>
<br/> Deadline (format YYYY-MM-DD HH:MM):
<br/>
<input type="text" id="updDeadline" ng-model="readedTodo.deadline" />
<br/> Completed:
<input type="checkbox" id="updCompleted" ng-model="readedTodo.completed" />
<br/>
<h3>if you use binding with $scope</h3> Note:
<br/>
<textarea rows="5" cols="30" id="updContent2" ng-model="readedTodo.content"></textarea>
<br/> Deadline (format YYYY-MM-DD HH:MM):
<br/>
<input type="text" id="updDeadline222" ng-model="readedTodo.deadline" />
<br/> Completed:
<input type="checkbox" id="updCompleted" ng-model="readedTodo.completed" />
<br/>
<input type="hidden" id="updID" ng-model="readedTodo.id" />
<br/>
<input type="submit" value="Update" />
</form>
</div>
</body>
</html>

How do I add/remove text boxes with JQuery changing the variable name to keep the name attributes different?

I want to make a book catalog with JQuery to add books to a author. In the code That I have I am trying to add a author and have his books be in a array with his number only. Separated by other authors and their own arrays of books.
For example, when I press the button to add a author a input box appears so that I can add the authors name also a button to add a book that when I press that button I get an input box to add a books name.
When I press the add author again I want to be able to add another author with the same input boxes as before (adding more books to that author).
Also to add multiple books assigned to that author.
I have already done this in the pics but I get an array of everything. I want it to be separated by author.
author1 has an array of {book1, book2, book3...}
author2 has an array of {book13, book14, book15}
(i'm a beginner at JQuery)
This is the code that I have so far:
<!DOCTYPE html>
<html>
<head>
<title>Add or Remove text boxes with jQuery</title>
<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
<!--
#main {
max-width: 800px;
margin: 0 auto;
}
-->
</style>
</head>
<body>
<div id="main">
<h1>Add or Remove text boxes with jQuery</h1>
<div class="my-form">
<form role="form" method="post">
<p class="all_fields">
<button class="add_author">Add Author</button>
<div id="commonPart" class="commonPart">
<label for="author1">Author <span class="author-number">1</span></label>
<br/>
<input type="text" name="author" value="" id="author1" />
<br/>
<button class="add_book">Add book</button>
<div>
<input type="text" class="bookName" name="authBook[]"/>
</div>
</div>
</p>
<p><input type="submit" value="Submit" /></p>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function($){
var wrapper = $(".all_fields"); //Fields wrapper
var commonPart = $("#commonPart");
var add_author = $(".add_author"); //Add button ID
var add_subButton = $(".add_book"); //Add sub button ID
$('.my-form .add-box').click(function(){
var n = $('.all_fields').length + 1;
if( 15 < n ) {
alert('Stop it!');
return false;
}
$(add_author).click(function(e){
e.preventDefault();
var htmlToAdd = $('<label for="author' + n + '">Author <span class="author-number">' + n + '</span></label><br/><input type="text" name="author' + n + '" value="" id="author' + n + '" /><br/><button class="add_book">Add book</button><a class="add-book" href="#">Add Book</a><div><input type="text" class="bookName" name="authBook' + n + '[]"/></div>');
htmlToAdd.hide();
$('.my-form p.all_fields:last').after(htmlToAdd);
box_html.fadeIn('slow');
return false;
});
$(add_book).click(function(e){
e.preventDefault();
var htmlToAdd = $('<div><input type="text" class="bookName" name="authBook' + n + '[]"/></div>');
htmlToAdd.hide();
$('.my-form p.all_fields:last').after(htmlToAdd);
box_html.fadeIn('slow');
return false;
});
$('.my-form').on('click', '.remove-box', function(){
$(this).parent().css( 'background-color', '#FF6C6C' );
$(this).parent().fadeOut("slow", function() {
$(this).remove();
$('.box-number').each(function(index){
$(this).text( index + 1 );
});
});
return false;
});
});
</script>
</body>
</html>
updated code(fixed some bugs..), try this....
<!DOCTYPE html>
<html>
<head>
<title>Add or Remove text boxes with jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
<!--
#main {
max-width: 800px;
margin: 0 auto;
}
-->
</style>
</head>
<body>
<div id="main">
<h1>Add or Remove text boxes with jQuery</h1>
<div class="my-form">
<button onclick="addAuthor()" >Add Author</button><br><br>
<div id="addAuth"></div>
<br><br>
<button onclick="submit()" >Submit</button>
</div>
<div id="result" ></div>
</div>
<script type="text/javascript">
var authors = 0;
function addAuthor(){
authors++;
var str = '<div id="auth'+authors+'"><input type="text" name="author" id="author'+authors+'" />'
+'<button onclick="addMore(\'auth'+authors+'\')" >Add Book</button>'
+'</div>';
$("#addAuth").append(str);
}
var count=0;
function addMore(id){
count++;
var str = '<div id="bookDiv'+count+'">'
+'<input class="'+id+'" type="text" name="book'+id+'" />'
+'<span onclick="addMore(\''+id+'\')" style="font-size: 20px; background-color: green; cursor:pointer;">+</span>'
+'<span onclick="removeDiv(\'bookDiv'+count+'\')" style="font-size: 20px; background-color: red; cursor:pointer; margin-left:1%;">-</span>'
+'</div>';
$("#"+id).append(str);
}
function removeDiv(id){
var val = confirm("Are you sure ..?");
if(val){
$("#"+id).slideUp(function(){$("#"+id).remove();});
}
}
function submit(){
var arr = [];
for(i=1; i<=authors; i++){
var obj = {};
obj.name = $("#author"+i).val();
obj.books = [];
$(".auth"+i).each(function(){
var data = $(this).val();
obj.books.push(data);
});
arr.push(obj);
}
$("#result").html(JSON.stringify(arr));
}
</script>
</body>
</html>
Please try this code and include jquery min js :
<div class="my-form">
<form role="form" method="post">
<p class="all_fields">
<div id="commonPart" class="commonPart">
<label for="author1">Author <span class="author-number"></span></label>
<input type="text" name="author" value="" id="author1" />
<br/>
<div>
<label for="author1">book <span class="author-number"></span></label>
<input type="text" class="bookName" name="authBook[]"/>
</div>
</div>
<button type="button" class="add_author" onclick="AddCustomMOre();">Add More</button>
</p>
<p><input type="submit" value="Submit" /></p>
</form>
</div>
<script> function AddCustomMOre(){
$(".all_fields ").append('<div id="commonPart" class="commonPart"><label for="author1">Author <span class="author-number"></span></label> <input type="text" name="author" value="" id="author1" /> <br/> <div><label for="author1">book <span class="author-number"></span></label> <input type="text" class="bookName" name="authBook[]"/></div> Remove</div>');
} </script>
You can try this....
<p class="all_fields">
<button class="add_author">Add Author</button>
<div class="commonPart">
<label for="author1">Author <span class="author-number">1</span></label>
<br/>
<input type="text" name="author1" value="" id="author1" />
<br/>
<button div-id="1" class="add_book">Add book</button>
<div id="books1">
<input type="text" class="bookName" name="authBook[]"/>
</div>
</div>
</p>
<script>
var c=1;
$(".add_author").on("click",function(){
c++;
$(".all_fields").append('<div class="commonPart"><label for="author'+c+'">Author <span class="author-number">'+c+'</span></label><br/><input type="text" name="author'+c+'" value="" id="author'+c+'" /><br/><button class="add_book" div-id="'+c+'">Add book</button><div id="books'+c+'"><input type="text" class="bookName" name="authBook[]"/></div></div>');
});
$(".add_book").on("click",function(){
var id=$(this).attr("div-id");
$("#books"+id).append('<input type="text" class="bookName" name="authBook[]"/>');
});
</script>

why this code has error

//this is a part of html code
<form>
<b>user:</b> <input type="text" name="user" size="25"/>
<input type="button" name ="submit" value="confirm" onclick= "mehdi(this.form)"/>
</form>
<script type="text/javascript">
function mehdi(rno){
rno.user.value = 2 * Math.PI ;//this is error line user is unknown
alert(rno);
return rno;
}
</script>
what can i do?
Try This
<form>
<b>user:</b> <input type="text" name="user" size="25"/>
<input type="button" name ="submit" value="confirm" onclick= "mehdi(this.form)">
</form>
<script type="text/javascript">
function mehdi(rno)
{
rno.user.value = 2 * Math.PI ;//this is error line user is unknown
alert(rno.user.value);
return rno.user.value;
}
</script>

Categories

Resources