Search code examples
javascriptprototypejs

js prototype form not working


new poster, sorry if anything is wrong with my post.

I am trying to make a form with the js prototype framework but it isn't working. I was wondering if someone could help me by pointing me in the right direction. Any help is appreciated!

This is my code:

        function formsF() {
            var form = $('exampleForm');
            var message= '';
            var field = form.getElements();
            for (var i = 0; i < field.length; i++) {
                message += "Field Name : " + field[i].name + " Value : " + field[i].value + "\n";
            }
            alert(message);
        }
    </script>
</head>
<body>
    <form id="exampleForm" action="#" onsubmit="return false">
        Name: <input type="text" name="name" /><br/>
        Number: <input type="text" name="number" /><br/>
        Message: <input type="text" name="message" /><br/>
    </form>
    <input type="button" value="Result" onclick="formsF();"/>
</body>


Solution

  • Make sure to include the prototype cdn

    <!DOCTYPE html>
    <html>
    
      <head>
        <script data-require="prototype@*" data-semver="1.7.1+0" src="//cdnjs.cloudflare.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
        <link rel="stylesheet" href="style.css" />
        <script src="script.js"></script>
      </head>
    
      <body>
        <form id="exampleForm" action="#" onsubmit="return false">
            Name:       <input type="text" name="name" />
          <br />
    
            Number:       <input type="text" name="number" />
          <br />
    
            Message:       <input type="text" name="message" />
          <br />
        </form>
        <input type="button" value="Result" onclick="formsF();" />
        <script>
              function formsF() {
                var form = $('exampleForm');
                var message= '';
                var field = form.getElements();
                for (var i = 0; i < field.length; i++) {
                    message += "Field Name : " + field[i].name + " Value : " + field[i].value + "\n";
                }
                alert(message);
            }
        </script>
      </body>
    
    </html>
    

    It works for me. Here is the plnkr

    Hope it works for you :)