Question

I have a form with three text boxes. I want to have a key event on each of them regardless which one they enter in first. Here is my code below:

function showQuoteBox() {
var overlay = '<div id="overlay"></div>';
var quoteBox = '<form id="quoteForm" action="#"><h1>Get a quote from <INSTALLERS NAME></h1><fieldset id="user-details"><label for="inName">Name:</label><input type="text" id="inName" name="name" value="" /><label for="email">Email:</label><input type="email" id="inEmail" name="email" value=""  /><label for="phone">Phone:</label><input type="text" id="inPhone" name"phone" value=""  /><input type="submit" value="Get quote!" name="submit" class="submit" /></fieldset><div id="sent-details"><span id="nameText"><span id="emailText"><span id="phoneText"></span></div></form>'
jQuery(overlay).appendTo('body');
jQuery(quoteBox).appendTo('body');
jQuery(document).ready(function() {
    jQuery('#inName').keyup(function(){
        jQuery('#nameText').html(jQuery(this).val());
    });
    jQuery('#inEmail').keyup(function(){
        jQuery('#emailText').html(jQuery(this).val());
    });
    jQuery('#inPhone').keyup(function(){
        jQuery('#phoneText').html(jQuery(this).val());
    });
});
}

window.onkeyup = function (event) {
   if (event.keyCode == 27) {
      jQuery('#overlay').remove();
      jQuery('#quoteForm').remove();
   }
}

Above is my entire function that is called when a button is clicked. It shows the quoteBox with three inputs. Each input box will allow me to enter text but it will only update the span area for the first one that has been entered. All others will not update if any other text box has a value in.

If I choose to enter an email first it will show in the span, but then when I enter a value in any other text boxes, it won’t listen.

Answer 1

The behavior you describe — where only one keyup appears to be working — is most likely caused by the fact that you have embedded your 3 SPANS inside one another!

<div id="sent-details">
    <span id="nameText">
        <span id="emailText">
            <span id="phoneText"></span>
</div>

Not only that, I don’t see them being closed. SPAN tags are not self closing, and each browser will try to self-correct or interpret this in a different way. Some browsers may try to close them for you.

Thus, your first keypress event is either overwriting the other 2 SPAN elements, or JavaScript can’t find the elements because your HTML is not valid.

The correct syntax for your HTML would be:

var quoteBox = '<form id="quoteForm" action="#">' +
  '<h1>Get a quote from <INSTALLERS NAME></h1>'+
  '<fieldset id="user-details">'+
      '<label for="inName">Name:</label>'+
      '<input type="text" id="inName" name="name" value="" />'+
      '<label for="email">Email:</label>'+
      '<input type="email" id="inEmail" name="email" value=""  />'+
      '<label for="phone">Phone:</label>'+
      '<input type="text" id="inPhone" name"phone" value=""  />'+
      '<input type="submit" value="Get quote!" name="submit" class="submit" />'+
  '</fieldset>'+
  '<div id="sent-details">'+
      '<span id="nameText"></span>'+  // closed tags here
      '<span id="emailText"></span>'+ // closed tags here
      '<span id="phoneText"></span>'+ // closed tags here
  '</div></form>';

More sustainable and maintainable solution:

As an aside, storing a long string of HTML in a JavaScript variable is a very unsustainable way of working with the markup, as it leads to unreadability, which leads precisely to these sorts of mistakes. Instead, if I were to tackle this problem, I would instead place this HTML on the page, but hide it using display:none. Then, in the function showQuoteBox, I would simply use a CSS class or id selector to unhide that block of code.

Since the HTML would be in the HTML document where it belongs, it would not only be much more maintainable, but you’ll also make friends with your Web designers, who don’t want to try to reverse engineer your JavaScript.

<div id="overlay" style="display:none">
    <form id="quoteForm" action="#">
        <h1>Get a quote from <INSTALLERS NAME></h1>
            <fieldset id="user-details">
                <label for="inName">Name:</label>
                <input type="text" id="inName" name="name" value="" />
                <label for="email">Email:</label>
                <input type="email" id="inEmail" name="email" value=""  />
                <label for="phone">Phone:</label>
                <input type="text" id="inPhone" name"phone" value=""  />
                <input type="submit" value="Get quote!" name="submit" class="submit" />
            </fieldset>
           <div id="sent-details">
               <span id="nameText"></span>
               <span id="emailText"></span>
               <span id="phoneText"></span>
          </div>
      </form>
  </div>

function showQuoteBox() {
     // var overlay = '<div id="overlay"></div>';  <-- don't do this
     // var quoteBox

     // instead, use jQuery to unhide your HTML and keep it out of the JavaScript
     $('overlay').show();  

     // the rest of your code follows
     ...
 }

Finally, it looks like you’re including your keyup event code inside the function showQuoteBox. The ready method on the jQuery object fires as soon as your page is done loading and the DOM is ready, so registering that event inside a function seems a bit odd.

In this case, you are registering these events when using jQuery to add some DOM elements to an already-loaded page. Thus, the (document).ready is not only unnecessary, but will likely have problems. If, after following the steps in the previous section, you still have trouble, consider removing the document.ready wrapper as shown in this code block:

// don't put document.ready around this since it's in a function you're calling to show a form
jQuery('#inName').keyup(function(){
    jQuery('#nameText').html(jQuery(this).val());
});
jQuery('#inEmail').keyup(function(){
    jQuery('#emailText').html(jQuery(this).val());
});
jQuery('#inPhone').keyup(function(){
    jQuery('#phoneText').html(jQuery(this).val());
});