CODEWITHSUNDEEP
javascriptjqueryhtml
Rob
Rob

Reputation: 3

I can't figure out why I'm getting the "Cannot read property 'length' of undefined" error here

I am trying to create a multipage, or multiphase, form where a user fills in a couple pieces of information, clicks 'continue', and gets some more information to fill in. I want all of it done on one page of a website until they are ready to submit all of the information they have entered, so I have used some tutorials to get to where I am now. It is done using css to show the first process, and hide the others until the 'continue' button is clicked. Then it will hide the first process and show the second process, and so on until the end.

On line 43, where it says 'if(country.length > 1){', I am getting the error "Cannot read property 'length' of undefined" from Google Chrome's developer tools. Everything in processPhase1 is the same as processPhase2 syntax-wise, as far as I can tell. I think I have 'country' defined where it needs to be...so I'm at a loss.

Here is the code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Tech Consulting, LLC.">
    <link rel="icon" href="../../favicon.ico">

    <title>Street Cred</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/jumbotron-narrow.css" rel="stylesheet">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link href='http://fonts.googleapis.com/css?family=Lilita+One' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Exo:400,900' rel='stylesheet' type='text/css'>


    <style>
        form#multiphase{ border:#000 1px solid; padding:24px; width:350px; }
        form#multiphase > #phase2, #phase3, #show_all_data{ display:none; }
    </style>

    <script>
        var name, email, phone, place, country, city, state, zip, routing;
        function _(x){
            return document.getElementById(x);
        }
        function processPhase1(){
            name = _("name").value;
            if(name.length > 2){
                _("phase1").style.display = "none";
                _("phase2").style.display = "block";
                _("progressBar").value = 33;
                _("status").innerHTML = "Phase 2 of 3";
            } else {
                alert("Please fill in the fields.");    
            }
        }
        function processPhase2(){
            country = _("country").value;
            if(country.length > 1){
                _("phase2").style.display = "none";
                _("phase3").style.display = "block";
                _("progressBar").value = 66;
                _("status").innerHTML = "Phase 3 of 3";
            } else {
                alert("Please make sure all fields are entered.");  
            }
        }
        function processPhase3(){
            routing = _("routing").value;
            if(routing.length > 0){
                _("phase3").style.display = "none";
                _("show_all_data").style.display = "block";
                _("display_name").innerHTML = name;
                _("display_email").innerHTML = email;
                _("display_phone").innerHTML = phone;
                _("display_country").innerHTML = country;
                _("display_routing").innerHTML = routing;
                _("progressBar").value = 100;
                _("status").innerHTML = "Data Overview";
            } else {
                alert("Please fill in everything.");    
            }
        }
        function submitForm(){
            _("multiphase").method = "post";
            _("multiphase").action = "insert_form.php";
            _("multiphase").submit();
        }
    </script>

  </head>

  <body>
    <div class="container">
      <div class="header clearfix">
      <i class="fa fa-chevron-circle-left fa-5x"></i>
      <i class="fa fa-chevron-circle-right fa-5x"></i>
        <div class="contact-greeting">
          <h1>Let's get to know each other.</h1>
          <p>Before we can get you the device you want, we need to know a little bit about you.</p>
        </div>
      </div>

      <div class="jumbotron">

      <progress id="progressBar" value="0" max="100" style="width:250px;"></progress>
        <h3 id="status">Phase 1 of 3</h3>
            <form id="multiphase" onsubmit="return false">
              <div id="phase1">
                  <p id="name">
                    <input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="First and Last Name" id="name" />
                  </p>

                  <p id="email">
                    <input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
                  </p>

                   <p id="phone">
                    <input name="phone" type="text" class="validate[required,custom[onlyNumber],length[0,100]] feedback-input" id="phone" placeholder="Telephone Number" />
                  </p>
                  <button onclick="processPhase1()">Continue</button>
              </div>

              <div id="phase2">
                  <p id="country">
                    <input name="country" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Country" id="country" />
                  </p>

                  <p id="place">
                    <input name="place" type="text" class="validate[required,length[0,100]] feedback-input" placeholder="Address" id="place" />
                  </p>

                  <p id="city">
                    <input name="city" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="City" id="city" />
                  </p>

                  <p id="state">
                    <input name="state" type="text" class="validate[required,custom[onlyLetter],length[0,2]] feedback-input" placeholder="State" id="state" />
                  </p>

                  <p id="zip">
                    <input name="zip" type="text" class="validate[required,custom[onlyNumber],length[0,5]] feedback-input" placeholder="Zip" id="zip" />
                  </p>
                  <button onclick="processPhase2()">Continue</button>
              </div>

              <div id="phase3">
                  <p id="text">
                    <textarea name="text" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Questions or comments..."></textarea>
                  </p>
                  <button onclick="processPhase3()">Continue</button>
              </div>

              <div id="show_all_data">
                Name: <span id="display_fname"></span> <br>
                E-mail: <span id="display_email"></span> <br>
                Phone: <span id="display_phone"></span> <br>
                Address: <span id="display_country"></span> <br>
                <button onclick="submitForm()">Submit Data</button>
              </div>

              <div class="submit">
                <input type="submit" value="SEND" id="button-blue"/>
                <div class="ease"></div>
              </div>
            </form>
          </div>
        </div>

      <div class="row marketing-contact">
        <p></p><br><br><br>
      </div>


    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

Upvotes: 0

Views: 285

Answers (1)

Igor
Igor

Reputation: 15893

DOM element corresponding to p tag does not have value property. You need to get rid of duplicate id's in your html. If you remove id="country" from p tag, the input with id="country" will be found by document.getElementById and processPhase2 will work.

Upvotes: 2

Related Questions