Search code examples
javascriptformssimple-form

I am brand new to Javascript, and am struggling to get a simple form to work. Can I please get some advice?


My code is below. Trying to create a simple form for an assignment.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Adoption Form</title>
<script>
function getInfo(){

var first = 
document.forms["formInfo"]["first"].value;
var last = 
document.forms["formInfo"]["last"].value;

var applicantInfo = "My first name is " + first + " My last name is " + last ".";

document.getElementById("info").innerHTML = applicantInfo;

}
</script>
</head>

<body>
    <div>
    <form id="formInfo" name="formInfo">
        <p>My first name is <input name="first" type="text" id="first" title="first"></p>
        <p> My last name is <input name="last" type="text" id="last" title="last"></p>

        <p><input type="button" value="Send Information" onClick="getInfo()"></p>
    </form>
    </div>
    <div id="info">
    </div>
</body>
</html>

Whenever I press the button in the browser, nothing happens. Where am I going wrong?


Solution

  • There are two mistakes first it's onclick with a small c not onClick. Second you are missing a + after last

    <!DOCTYPE html>
    <html lang="en">
      <head>
       <meta charset="UTF-8">
       <title>Adoption Form</title>
        <script>
          function getInfo() {
            var first = document.forms["formInfo"]["first"].value;
            var last = document.forms["formInfo"]["last"].value;
    
            var applicantInfo =
              "My first name is " + first + " My last name is " + last + ".";
    
            document.getElementById("info").innerHTML = applicantInfo;
          }
        </script>
      </head>
      <body>
        <div>
          <form id="formInfo" name="formInfo">
            <p>
              My first name is
              <input name="first" type="text" id="first" title="first" />
            </p>
            <p>
              My last name is
              <input name="last" type="text" id="last" title="last" />
            </p>
    
            <p>
              <input type="button" value="Send Information" onclick="getInfo();" />
            </p>
          </form>
        </div>
        <div id="info"></div>
      </body>
    </html>