Javascript function not defined in jQuery

Question

I have problems with a simple bit of code. I'm trying to take a value from an input field and then do a simple calculation. The calculation is supposed to take place with an onSubmit command and then append it to a p tag.

HTML:

<h1 class="titleHead">Calculator</h1>

<form method="POST" action="#" onSubmit="depositCal()">
  <input type="text" name="money" id="money">
  <input type="submit" value="How much" onSubmit="">
</form>

<div>
  <p class="answer"></p>
</div>

Javascript:

$(document).ready(function() {
    var numberOne = $('#money').val(),
    numberTwo = 4;

    var finalNumber = numberOne + numberTwo;
    function depositCal() {
        $('.answer').append(finalNumber);
     }
})

I get back function not defined when it runs.

I know this is probably very simple but any help would be greatly appreciate.

Move depositCal() function outside of the $(document).ready(function(). — vaso123
– vaso123, Commented Dec 3, 2014 at 10:38
Declare your function outside the document.ready. You don't need it there. — putvande
– putvande, Commented Dec 3, 2014 at 10:38
You'll also have to declare the global variables outside too (but assign their values inside) or move it all into the function — Pete
– Pete, Commented Dec 3, 2014 at 10:39

Pat Dobson · Accepted Answer · 2014-12-03 10:55:27Z

2

Try this:

Give your form a name and ID e.g. 'myForm'

JS

$('#myForm').submit(function(e){
     e.preventDefault();
     var numberOne = $('#money').val();
     var numberTwo = 4;
     var finalNumber = numberOne + numberTwo;
     $('.answer').append(finalNumber);
});

e.preventDefault() - stops the form from submitting (thus refreshing the page) and the function is only fired when submit is clicked.

Addition

numberOne is getting it's value from a form field so it sees it as a string. To prevent this use this line instead:

var numberOne = parseFloat($('#money').val());

Which forces the value to be a (float) number.

edited Dec 3, 2014 at 10:55

answered Dec 3, 2014 at 10:39

Pat Dobson

3,2992 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

empiric Over a year ago

Sidenote: If the Form should be submitted or the Data should be transfered elsewhere, it can be extended with $('myForm').submit() or an ajax-call after the calculation

Mark Over a year ago

So this works but its placing numberOne and numberTwo side by side and not adding them together?

Mark Over a year ago

parseFloat did it thanks everyone for your help. I'll get the hang of all this one day :)

Amit Joki · Accepted Answer · 2014-12-03 10:38:30Z

1

You need to declare the function in global scope if you want to use it in inline js

$(document).ready(function() {
    var numberOne = $('#money').val(),
        numberTwo = 4;
    var finalNumber = numberOne + numberTwo;
})
function depositCal() {
    $('.answer').append($('#money').val() + 4);
}

You could also make it a global function by attaching the function to window object.

answered Dec 3, 2014 at 10:38

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

Comments

Bhushan Kawadkar · Accepted Answer · 2014-12-03 10:40:13Z

0

I think you don't need $(document).ready here and do calculation of finalNumber inside function so that it will give you the correct value of money input, otherwise you will get NaN or empty value-

function depositCal() {
    var numberOne = $('#money').val(),
        numberTwo = 4;
    var finalNumber = numberOne + numberTwo;
    $('.answer').append(finalNumber);
}

answered Dec 3, 2014 at 10:40

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

Comments

Ankit Chaudhary · Accepted Answer · 2014-12-03 10:42:50Z

0

You have to keep the depositCal function definition out of $(document).ready(),because first the whole document is loaded,then $(document).ready() is called.So while loading the form,browser finds depositCal as undefined as it is defined after document is fully loaded......So keep the depositCal definition in global scope

answered Dec 3, 2014 at 10:42

Ankit Chaudhary

4,1092 gold badges15 silver badges25 bronze badges

Collectives™ on Stack Overflow

Javascript function not defined in jQuery

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related