Search code examples
javascriptfunctioncapitalize

I can't get all my form information to automatically capitalize. Help! (It only capitalizes the name)


I can't figure out how to get this script to work. The form works, but it will not translate all of the input data into uppercase? I am not an expert so my code is probably all kinds of wonky. I am sure that it is any easy fix. Thanks.

 <HTML>
     <HEAD> <TITLE>Information Form</TITLE></HEAD>
            <SCRIPT LANGUAGE = "JavaScript">

    function alpha(textField) {
            if( textField.calue.lenth !=0) {
            for (var i = 0; i < textField.value.lenth;i++) {
                 var ch= textField.value.charAt(i);

              if((ch < "A" || ch > "Z") && (ch< "a" || ch >"Z")) {
                     return false;
                     }
                }
            }
         else {
         return true; 
           }
          }
    </script>


</head>
<body> 
         <big> 
         Type your name here:
         <input type="text" name="nameInput" onChange="nameInput.value=                                       nameInput.value.toUpperCase()">
         <p>

         Type your street address here:
         <input type="text" address="addressInput" onChange="                                                  addressInput.value=addressInput.value.toUpperCase()">
         <p>

         Type your city and state here:
         <input type="text" cityandstate="stateInput"  onChange="stateInput.value= stateInput.value.toUpperCase()">
            </body>

 <body bgcolor="lightblue">
  <font face=verdana>
  <strong>
    </body>
</html>

Solution

  • First off, you have a good bit of malformed html in your markup. There should be only one body tag. And all your tags expect your input tag should have a closing tag.

    Secondly, if all you want to do is to present the text in all caps then you can do that using CSS. If the way something appears is all that is important, then using CSS should be your solution most of the time.

    <html>
      <head> 
        <title>Information Form</title>
          <style>
              input[type=text] {
                text-transform: capitalize;
              }
          </style>
      </head>
      <body>
           Type your name here:
           <input type="text" name="nameInput" />
    
           Type your street address here:
           <input type="text" address="addressInput" />
    
           Type your city and state here:
           <input type="text" cityandstate="stateInput" />
       </body>
    </html>