Javascript Form How to - Access form element by name vs by index

Question

We would like to know how to access form element by name vs by index.

Answer


<HTML>
<HEAD>
    <SCRIPT LANGUAGE="JavaScript">
    function showCar(){<!--   w  ww .  ja  v a  2  s  . c  o  m-->
      var car = document.pref.elements[0].value;
      console.log("Your favorite car is: " + car);
    }
    function showColor(){
      var color = document.pref.color.value;
      console.log("Your favorite color is: " + color);
    }
    </SCRIPT>
    </HEAD>
    <BODY>
    <FORM NAME="pref" METHOD=POST>
    Enter the name of your favorite car:
      <INPUT TYPE="text" NAME="car" SIZE=25>
      <INPUT TYPE="BUTTON" NAME="carButton" VALUE="Show Car" onClick="showCar(this.form)">
    <BR>
    Enter your favorite color:
      <INPUT TYPE="text" NAME="color" SIZE=15>
      <INPUT TYPE="BUTTON" NAME="colorButton" VALUE="Show Color" onClick="showColor(this.form)">
    </FORM>
</BODY>
</HTML>

The code above is rendered as follows: