from a html form to javascript

Question

I have a form that requires three inputs as follows:

  <form>
    <input name="mn" 
           type="number"
           min="1"
           value="1">
    <input name="mx" 
           type="number"
           min="2"
           value="10">
    <input name="step" 
           type="number"
           min="1"
           value="1">
    <input onclick="myfunc()"
           type="submit"
           value="calculate">
  </form>

all i require is to be able to access the three fields directly in javascript. I do not need to pass the information anywhere else.

Could anyone point me in the right direction? I have read examples where there has been one input, but not multiple.

  <script type="text/javascript">
    function myfunc() {
    var mn = document.getElementsByName("mn")
    var mx = document.getElementsByName("mx")
    var step = document.getElementsByName("step")
    alert((mn + mx) / step)
    }
  </script>

Bruno · Accepted Answer · 2012-12-17 00:36:31Z

2

Give your form an id like so

<form id="myForm">

The other thing to watch out for is that the is that the value attribute is a string so adding the two values concatenates them rather than summing them.

Try instead

var frm = document.forms["myForm"];

var _mn = parseInt( frm["mn"].value );
var _mx = parseInt( frm["mx"].value );
var _step = parseInt( frm["step"].value );

var result = ( _mn + _mx ) / _step;

edited Dec 17, 2012 at 0:36

answered Dec 16, 2012 at 23:51

Bruno

5,8222 gold badges29 silver badges44 bronze badges

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

2 Comments

RobG Over a year ago

Careful, the values will be strings, so frm["mn"].value + frm["mx"].value will concatenate the values, not add them. Convert them to numbers first, e.g. using parseInt, Number, +.

Bruno Over a year ago

@RobG Thank you for that. Well spotted. Corrected my code accordingly.

Daniel Figueroa · Accepted Answer · 2012-12-16 23:45:17Z

0

I'd start with giving each input an id then i could use:

var min = document.getElementById('mn')

and so on. To access the value you simply would call

min.value

Also there is no point in removing the i from min and the a from max. That is not optimized just hard to read and understand.

answered Dec 16, 2012 at 23:45

Daniel Figueroa

10.7k5 gold badges48 silver badges68 bronze badges

Comments

kadeempardue · Accepted Answer · 2012-12-16 23:47:28Z

0

Try this:

  <script type="text/javascript">
    function myfunc() {
    var mn = document.getElementsByName("mn")[0].value;
    var mx = document.getElementsByName("mx")[0].value;
    var step = document.getElementsByName("step")[0].value;
    var top = mn / mx;
    alert(top / step);
    }
  </script>

answered Dec 16, 2012 at 23:47

kadeempardue

895 bronze badges

Comments

Givius · Accepted Answer · 2012-12-17 00:04:17Z

0

if u need to access to the values of the inputs change your code to:

function myfunc() {
  var mn = document.getElementsByName("mn")[0];
  var mx = document.getElementsByName("mx")[0];
  var step = document.getElementsByName("step")[0];
  // you may need to validate your values here, like step.value != 0
  alert((mn.value + mx.value) / step.value)
}

edited Dec 17, 2012 at 0:04

answered Dec 16, 2012 at 23:45

Givius

1,0088 silver badges12 bronze badges

2 Comments

RobG Over a year ago

And you are dealing with strings, so: (Number(mn.value) + Number(mx.value)) / step.value unless concatenation is required.

Givius Over a year ago

I consider that as validation

Collectives™ on Stack Overflow

from a html form to javascript

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related