Is not showing anything, or showing “undefined”


Tags: javascript,html,css

Problem :

First off, here's the fiddle: http://jsfiddle.net/6p45am8y/

When you get the end of the form, you should see a confirmation page.

<span id="display_fname"></span>

works fine on page two (the headline should show the first name you entered), but does not work on the confirmation page. It is only showing the last name and I cannot figure out why.

Also,

<p>City: <span id="display_city"></span></p><br>
<p>State: <span id="display_state"></span></p><br>
<p>Zip: <span id="display_zip"></p></span><br>
<p>Date of Birth: <span id="display_birth"></span></p><br>
<p>Monthly Income: <span id="display_income"></span></p><br>
<p>Bank Account Number: <span id="display_account"></span></p><br>
<p>Routing Number: <span id="display_routing"></span></p><br>

...is showing "undefined" and I'm at a loss as to why that is.

Any help would be greatly appreciated!

In case you need it here, here is the full HTML (my js is hardcoded into the HTML):

<!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'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" type="text/javascript"></script>


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



  </head>

  <body>

    <div class="container">

      <div class="header clearfix">
      <i class="fa fa-chevron-circle-left fa-5x"></i>
        <progress id="progressBar" value="0" max="100" style="width:250px;"></progress>
        <!--<progress id="progressBar" class="green glow" value="0" max="100" style="width:250px;"> -->
            <span style="width: 40%" value="0" max="100"></span>
        </progress>
      <i class="fa fa-chevron-circle-right fa-5x"></i>
        <div id="phase1a">
            <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 id="phase2a">
            <div class="contact-greeting">
              <h1>Nice to meet you, <span id="display_fname"></span>! Next we need your current address.</h1>
              <p>Providing your address helps us determine your loan amount.</p>
            </div>
        </div>

        <div id="phase3a">
            <div class="contact-greeting">
              <h1>Tell us about your finances.</h1>
              <p>Don't worry. Your information is not stored on this device or shared with any third parties.</p>
            </div>
        </div>
      </div>

      <div id="phase4a">
            <div class="contact-greeting">
              <h1>How do we get in touch with you?</h1>
              <p>We'll send a copy of your application results to this email.<br>
              Use your existing mobile phone number if possible.</p>
            </div>
        </div>

        <div id="phase5a">
            <div class="contact-greeting">
              <h1>How much money did you want?</h1>
              <p>Drag the slider to choose the amount that you want.</p>
            </div>
        </div>

        <div id="show_all_dataa">
            <div class="contact-greeting">
              <h1>Is this information correct?</h1>
              <p>Please click the back button to change any information.</p>
            </div>
        </div>


      <div class="jumbotron">

      <!-- <progress id="progressBar" value="0" max="100" style="width:250px;"></progress> -->
      <!-- <progress id="progressbar" class="green glow" >
    <span style="width: 40%" value="0" max="100"></span>
</progress> -->
        <!-- <h3 id="status">Phase 1 of 3</h3> -->
        <div id="form-main">
          <div id="form-div">
            <form id="multiphase" onsubmit="return false">


<!-- =====PHASE 1 INFORMATION===== -->

              <div id="phase1">
                <div class="names">
                    <p class="fname">First Name*</p>
                    <p class="lname">Last Name*</p>
                </div>
                  <p>
                    <input name="fname" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="" id="fname" >
                  </p>
                  <p>
                    <input name="lname" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="" id="lname" >
                  </p>

                  <button onclick="processPhase1()" id="button-blue">Continue</button>
              </div>


<!-- =====PHASE 2 INFORMATION===== -->

              <div id="phase2">
                <div class="address-label">
                    <p class="fname">Address 1*</p>
                </div>
                  <p>
                    <input name="place" type="text" class="validate[required,length[0,100]] feedback-input" placeholder="" id="place" >
                  </p>
                <div class="address-label">
                    <p class="fname">Address 2</p>
                </div>
                  <p>
                    <input name="place2" type="text" class="validate[required,length[0,100]] feedback-input"placeholder="Apt, Ste, etc." id="place2" >
                  </p>
                    <div class="address-label">
                        <p class="city-label">City*</p><p class="state-label">State*</p><p class="zip-label">Zip*</p>
                    </div>
                <div class="citystate">
                          <p>
                            <input name="city" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="" id="city" >
                          </p>

                          <p>
                            <select name="state" type="text" class="validate[required,custom[onlyLetter],length[0,2]] feedback-input" placeholder="" id="state" ><option value="">
                                </option><option value="AK"  >AK</option>
                                <option value="AL"  >AL</option>
                                <option value="AR"  >AR</option>
                                <option value="AZ"  >AZ</option>
                                <option value="CA"  >CA</option>
                                <option value="CO"  >CO</option>
                                <option value="CT"  >CT</option>
                                <option value="DC"  >DC</option>
                                <option value="DE"  >DE</option>
                                <option value="FL"  >FL</option>
                                <option value="GA"  >GA</option>
                                <option value="HI"  >HI</option>
                                <option value="IA"  >IA</option>
                                <option value="ID"  >ID</option>
                                <option value="IL"  >IL</option>
                                <option value="IN"  >IN</option>
                                <option value="KS"  >KS</option>
                                <option value="KY"  >KY</option>
                                <option value="LA"  >LA</option>
                                <option value="MA"  >MA</option>
                                <option value="MD"  >MD</option>
                                <option value="ME"  >ME</option>
                                <option value="MI"  >MI</option>
                                <option value="MN"  >MN</option>
                                <option value="MO"  >MO</option>
                                <option value="MS"  >MS</option>
                                <option value="MT"  >MT</option>
                                <option value="NC"  >NC</option>
                                <option value="ND"  >ND</option>
                                <option value="NE"  >NE</option>
                                <option value="NH"  >NH</option>
                                <option value="NJ"  >NJ</option>
                                <option value="NM"  >NM</option>
                                <option value="NV"  >NV</option>
                                <option value="NY"  >NY</option>
                                <option value="OH"  >OH</option>
                                <option value="OK"  >OK</option>
                                <option value="OR"  >OR</option>
                                <option value="PA"  >PA</option>
                                <option value="PR"  >PR</option>
                                <option value="RI"  >RI</option>
                                <option value="SC"  >SC</option>
                                <option value="SD"  >SD</option>
                                <option value="TN"  >TN</option>
                                <option value="TX"  >TX</option>
                                <option value="UT"  >UT</option>
                                <option value="VA"  >VA</option>
                                <option value="VT"  >VT</option>
                                <option value="WA"  >WA</option>
                                <option value="WI"  >WI</option>
                                <option value="WV"  >WV</option>
                                <option value="WY"  >WY</option>
                            </select>
                          </p>

                          <p>
                            <input name="zip" type="text" class="validate[required,custom[onlyNumber],length[0,5]] feedback-input" placeholder="" id="zip">
                          </p>
                </div>
                        <div class="address-label">
                            <p class="lived-label">How long have you lived there?*</p>
                        </div>
                <p>
                    <select name="years" type="text" class="validate[required,custom[onlyLetter],length[0,2]] feedback-input" placeholder="" id="years" ><option value=""></option>
                        <option value="0"  >Less than 1 yr.</option>
                        <option value="3"  >1 to 3 yrs.</option>
                        <option value="5"  >3 to 5 yrs.</option>
                        <option value="10"  >More than 5 yrs.</option>
                    </select>
                  </p><br>
                  <button onclick="processPhase2()" id="button-blue" class="button-pg-2">Continue</button>
              </div>


<!-- =====PHASE 3 INFORMATION===== -->

              <div id="phase3">
               <div class="dob">
                  <div class="address-label">
                    <p class="birth-label">Date of birth*</p><p class="income-label">Monthly Income*</p>
                  </div>
                  <p>
                    <input name="birth" type="text" class="validate[required,custom[birth]] feedback-input" id="birth" placeholder="MM/DD/YYYY" >
                  </p>

                  <p>
                    <select name="income" type="text" class="validate[required,custom[onlyLetter],length[0,2]] feedback-input" placeholder="" id="income" ><option value=""></option>
                        <option value="0"  >Less than $1000.</option>
                        <option value="3"  >$1200-$1500</option>
                        <option value="5"  >$1500-$1700</option>
                        <option value="10"  >$1700-$2000</option>
                        <option value="10"  >More than $2000</option>
                    </select>
                  </p>
               </div><br>

               <div class="bank">
                  <div class="address-label">
                    <p class="birth-label">Bank Account Number*</p><p class="income-label">Routing Number*</p>
                  </div>
                  <p>
                    <input name="account" type="text" class="validate[required,custom[account]] feedback-input" id="account" placeholder="" >
                  </p>

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

                  <button onclick="processPhase3()" id="button-blue">Continue</button>
               </div>
              </div>


<!-- =====PHASE 4 INFORMATION===== -->

              <div id="phase4">
                    <div class="email">
                      <div class="address-label">
                        <p class="birth-label">Email</p><p class="income-label">Confirm Email</p>
                      </div>
                      <p>
                        <input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="" >
                      </p>

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

                    <div class="phone">
                      <div class="address-label">
                        <p class="birth-label">Phone Number</p>
                      </div>
                      <p>
                        <input name="phone" type="text" class="validate[required,custom[onlyNumber],length[0,10]] feedback-input" id="phone" placeholder="" >
                      </p>
                    </div>

                    <button onclick="processPhase4()" id="button-blue">Continue</button>
              </div>


<!-- =====PHASE 5 INFORMATION===== -->

              <div id="phase5">
                    <div class="container-slider">
                        <div class="slider">
                            <output id="rangevalue">1000</output><br>
                            <div class="min-max"><p class="min">$500 Min</p><p class="max">$1500 Max</p></div>
                                <input type = "range" min="500" max="1500" step="10"onchange="rangevalue.value=value" id="range"/>

                        </div>
                     </div>
                        <div class="slider-cont">
                            <button onclick="show_all_data()" id="button-blue">Continue</button>
                        </div>
              </div>


<!-- =====CONFIRMATION PHASE===== -->

              <div id="show_all_data">
                <p>Name: <span id="display_fname"></span> <span id="display_lname"></span> </p><br>
                <p>Address: <span id="display_place"></span> <span id="display_place1"></span> </p><br>
                <p>City: <span id="display_city"></span></p><br>
                <p>State: <span id="display_state"></span></p><br>
                <p>Zip: <span id="display_zip"></p></span><br>
                <p>Date of Birth: <span id="display_birth"></span></p><br>
                <p>Monthly Income: <span id="display_income"></span></p><br>
                <p>Bank Account Number: <span id="display_account"></span></p><br>
                <p>Routing Number: <span id="display_routing"></span></p><br>
                <p>Email: <span id="display_Email"></span></p><br>
                <p>Phone Number: <span id="display_phone"></span></p><br>
                <button onclick="submitForm()" id="button-blue">Submit Data</button>
              </div>


              <!--<div class="submit">
                <input type="submit" value="SEND" id="button-blue"/>
                <div class="ease"></div>
              </div>-->
            </form>
            </div>
            </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>

      <script>
        var fname, lname, email, emailconfirm, phone, place, place2, city, state, zip, birth, account, income, routing, range;
        function _(x){
            return document.getElementById(x);
        }
        function processPhase1(){
            fname = _("fname").value;
            lname = _("lname").value;
            if(fname.length > 2 && lname.length > 2){
                _("phase1").style.display = "none";
                _("phase1a").style.display = "none";
                _("phase2").style.display = "block";
                _("phase2a").style.display = "block";
                _("display_fname").innerHTML = fname;
                <!-- _("display_lname").innerHTML = lname; -->
                _("progressBar").value = 20;
            } else {
                alert("Please fill in the fields.");    
            }
        }
        function processPhase2(){
            place = _("place").value;
            if(place.length > 1){
                _("phase2").style.display = "none";
                _("phase2a").style.display = "none";
                _("phase3").style.display = "block";
                _("phase3a").style.display = "block";
                _("progressBar").value = 40;
            } else {
                alert("Please make sure all fields are entered.");  
            }
        }
        function processPhase3(){
            routing = _("routing").value;
            if(routing.length > 1){
                _("phase3").style.display = "none";
                _("phase3a").style.display = "none";
                _("phase4").style.display = "block";
                _("phase4a").style.display = "block";
                _("progressBar").value = 60;
            } else {
                alert("Please make sure all fields are entered.");  
            }
        }
        function processPhase4(){
            email = _("email").value;
            if(email.length > 0){
                _("phase4").style.display = "none";
                _("phase4a").style.display = "none";
                _("phase5").style.display = "block";
                _("phase5a").style.display = "block";
                _("progressBar").value = 80;
            } else {
                alert("Please fill in everything.");    
            }
        }
        function show_all_data(){
            email = _("email").value;
            if(email.length > 0){
                _("phase5").style.display = "none";
                _("phase5a").style.display = "none";
                _("show_all_data").style.display = "block";
                _("show_all_dataa").style.display = "block";
                _("display_fname").innerHTML = fname;
                _("display_lname").innerHTML = lname;
                _("display_place").innerHTML = place;

                _("display_city").innerHTML = city;
                _("display_state").innerHTML = state;
                _("display_zip").innerHTML = zip;
                _("display_birth").innerHTML = birth;
                _("display_income").innerHTML = income;
                _("display_account").innerHTML = account;
                _("display_routing").innerHTML = routing;
                _("display_email").innerHTML = email;
                _("display_phone").innerHTML = phone;
                _("display_range").innerHTML = range;
                _("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>

</html>


Solution :

You haven't set the values for the elements which show up as undefined. For instance, in processPhase2(), you set place = _("place").value; but there are no fields capturing a field named place. And, you never set the values for city, state, zip. Go back and revisit each section and ensure that the values are being stored for later retrieval.


    CSS Howto..

    How to make a button that can change background color of a doucment?

    How to add a gradient/filter in the image in CSS

    Responsive design: How to open links in a modal window for desktop browsers, but not on a mobile device?

    how to use input[type=range] CSS Pseudo-elements with firefox and IE

    How to read different CSS classes with the same beginning with jquery?

    meteorjs how to import a wrapbootstrap theme

    How to position this div next to others?

    How to target div within a modal box with CSS

    How to Create paragraph first letter uppercase in html & css (in special format)

    How to add CSS style to focused anchor in HTML

    How to show the vertical image into horizontal manner using HTML and CSS?

    How to traverse and click on Next & Cancel Button (On PopUp) using selenium webdriver

    How to use CSS for formatting Crystal Report in Winform?

    How can I specify relative positioning in HTML?

    How do I style a Javascript button using d3?

    How to use the CSS :not selector for classes further up the DOM tree

    how to use css sprites? [closed]

    How can I fix this CSS positioning for the transition to work? (CSS3 with Bootstrap)

    How to create spoiler text?

    CSS How to make image size relative to parent?

    How to align elements properly using CSS

    Displaying a title and description on a jquery slideshow

    How to use CSS to align a custom check box with its label?

    how to add class to razor form and give padding?

    How to override default tag css to normal?

    Why won't my background show within div container?

    How do I make my website’s layout work gracefully with different browser window sizes, like Tumblr does?

    How to extend width and height automatically when the data gets increased

    How to apply inverse text mask with CSS

    How to force Google's custom search to be responsive?