23

I am new to JavaScript, and I'm trying to figure out how to pass user-inputted values as a parameter to a JavaScript function. Here is my code:

<body>
<h1>Adding 'a' and 'b'</h1>
<form>
  a: <input type="number" name="a" id="a"><br>
  b: <input type="number" name="b" id="a"><br>
  <button onclick="add(a,b)">Add</button>
</form>
<script>
  function add(a,b) {
    var sum = a + b;
    alert(sum);
  }
</script>
</body>
cdalto
  • 667
  • 1
  • 13
  • 30
  • possible duplicate of [Javascript get input text value](http://stackoverflow.com/questions/11563638/javascript-get-input-text-value) – Felix Kling Jan 28 '14 at 06:26

7 Answers7

29

One way is by using document.getElementByID, as below -

<body>
  <h1>Adding 'a' and 'b'</h1>

  a: <input type="number" name="a" id="a"><br> b: <input type="number" name="b" id="b"><br>
  <button onclick="add(document.getElementById('a').value,document.getElementById('b').value)">Add</button>

  <script>
    function add(a, b) {
      var sum = parseInt(a, 10) + parseInt(b, 10);
      alert(sum);
    }
  </script>
</body>
Ankit
  • 1,343
  • 18
  • 29
  • 1
    Okay, your solution is somewhat working. However, it is concatenating it as if a and b were strings. So sum is 12 instead of 3 where a=1 and b=2. – cdalto Jan 28 '14 at 05:56
  • 1
    `var sum = Number(a) + Number(b);` – cdalto Jan 28 '14 at 06:09
10

Firstly an elements ID should always be unique. If your element IDs aren't unique then you would always get conflicting results. Imagine in your case using two different elements with the same ID.

<form>
  a: <input type="number" name="a" id="a"><br>
  b: <input type="number" name="b" id="b"><br>
  <button onclick="add()">Add</button>
</form>

<script>
  function add() {
    var a = document.getElementById('a').value;
    var b = document.getElementById('b').value;

    var sum = parseInt(a) + parseInt(b);
    alert(sum);
  }
</script>
dcodesmith
  • 9,445
  • 4
  • 38
  • 40
  • Is there no way to actually pass these items as a parameter though? – cdalto Jan 28 '14 at 05:45
  • 1
    @cdalto, I understand that you're new to JS. The answer you accepted "works" but is hardly best practise. It usually best to delegated all the logic to the function and not onclick function in the DOM element. Just image if you had 3,4,5.. values to add. Best not to learn bad habits as a beginner :). Good luck in learning JS. :) – dcodesmith Jan 28 '14 at 06:17
6

1 IDs are meant to be unique

2 You dont need to pass any argument as you can call them in your javascript

<form>
  a: <input type="number" name="a" id="a"><br>
  b: <input type="number" name="b" id="b"><br>
  <button onclick="add()">Add</button>
</form>
<script>
  function add() {
    var a = document.getElementById('a').value;
    var b = document.getElementById('b').value;
    var sum = a + b;
    alert(sum);
  }
</script>
Community
  • 1
  • 1
Voonic
  • 4,419
  • 3
  • 26
  • 56
1
   <form action="" onsubmit="additon()" name="form1" id="form1">
      a: <input type="number" name="a" id="a"><br>
      b: <input type="number" name="b" id="b"><br>
      <input type="submit" value="Submit" name="submit">
   </form>
  <script>
      function additon() 
      {
           var a = document.getElementById('a').value;
           var b = document.getElementById('b').value;
           var sum = parseInt(a) + parseInt(b);
           return sum;
      }
  </script>
Community
  • 1
  • 1
parajs dfsb
  • 135
  • 1
  • 4
  • 13
0

You can get the values with use of ID. But ID should be Unique.

<body>
<h1>Adding 'a' and 'b'</h1>
<form>
  a: <input type="number" name="a" id="a"><br>
  b: <input type="number" name="b" id="b"><br>
  <button onclick="add()">Add</button>
</form>
<script>
  function add() {
    a = $('#a').val();
    b = $('#b').val();
    var sum = a + b;
    alert(sum);
  }
</script>
</body>
Moorthy GK
  • 1,223
  • 9
  • 17
0

do you use jquery? if then:

$('#xx').val();

or use original javascript(DOM)

document.getElementById('xx').value

or

xxxform.xx.value;

if you want to learn more, w3chool can help you a lot.

Tim Li
  • 215
  • 1
  • 2
  • 8
0

Use this it will work,

<body>
<h1>Adding 'a' and 'b'</h1>
<form>
  a: <input type="number" name="a" id="a"><br>
  b: <input type="number" name="b" id="a"><br>
  <button onclick="add()">Add</button>
</form>
<script>
  function add() {
    var m = document.getElementById("a").value;
    var n = document.getElementById("b").value;
    var sum = m + n;
    alert(sum);
  }
</script>
</body>
Shivam
  • 712
  • 2
  • 10
  • 25