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

user_13105615 0
Viewed 32

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?

simple-form forms javascript
2 Answers

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>

user_98717560

This code works, here is the JSFIDDLE

You were simply missing a concatenation operator(+) toward the end of your variable 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>
user_7916000
Related