Why is the val I'm adding to an unordered list vanishing right after I add it?

Question

I've got a "text box" whose contents I want to send to an unordered list when the user mashes the "Enter" key:

HTML

<input type="text" name="InputUPC" id="InputUPC" />
<ul id="CandidateUPCs" name="CandidateUPCs" class="ulUPCs"></ul>

CSS

.ulUPCs {
    min-height:160px;
    height:auto !important;
    height:160px;
    max-width:344px;
    width:auto !important;
    width:344px;
    border-style:solid;
    border-width:2px;
}

jQuery

$('#InputUPC').keypress(function (event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '13') {
        var upcPrefix = jQuery.trim($("#InputUPC").val());

        if (upcPrefix != "") {
              $("#CandidateUPCs").append('<li>' + upcPrefix + '</li>');
        }
        $("#InputUPC").val("");
    }
});

When I enter something into "InputUPC" and mash the key, the value appears in the unordered list, but only for a "brief second" then it disappears. The value in "InputUPC" also disappears, but that is as expected. Why is it also vacating the UL premesis?

UPDATE

This is what I've ended up with (http://jsfiddle.net/AEy9x/), based primarily on adeneo's answer:

$('#InputUPC').keyup(function (event) {
    event.preventDefault();
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '13') {
        var upcPrefix = jQuery.trim($("#InputUPC").val());

        if (upcPrefix != "") {
              $("#CandidateUPCs").append('<label for=' + upcPrefix + '>' + upcPrefix + ' </label>');
              $("#CandidateUPCs").append('<input type=\"checkbox\" name=' + upcPrefix + ' id=' + upcPrefix + ' />');
              $("#CandidateUPCs").append('<br>');
        }
        $("#InputUPC").val("");
    }
});

UPDATE 2

In jsfiddle, this works as long as the jquery version is above 1.6.4.

That being the case, I updated my project to jquery 1.9.1 (it had been referencing version 1.4.4 in one place, and 1.6.2 in all other places). However, it still does not work...?!?

I see the val in the UL for a "flash," but then it's gone again.

Note: I also updated the jquery-ui:

@*    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.16.custom.min.js")" type="text/javascript"> </script>*@
    <script src="@Url.Content("http://code.jquery.com/ui/1.10.3/jquery-ui.js")" type="text/javascript"> </script>

UPDATE 3

@sriniris:

The same thing happens with either block of code (mine is first; adeneo's is second), namely, the UL is populated for a nanosecond, but then the flighty bits skedaddle quicker than greased and polished lightning:

$('#InputUPC').keyup(function (event) {
    event.preventDefault();
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == '13') {
        var upcPrefix = jQuery.trim($("#InputUPC").val());

        if (upcPrefix != "") {
              $("#CandidateUPCs").append('<label for=' + upcPrefix + '>' + upcPrefix + ' </label>');
              $("#CandidateUPCs").append('<input type=\"checkbox\" name=' + upcPrefix + ' id=' + upcPrefix + ' />');
              $("#CandidateUPCs").append('<br>');
        }
        $("#InputUPC").val("");
    }
});



$('#InputUPC').on('keyup', function(e) {
e.preventDefault();
if (e.which == 13) {
    var upcPrefix = $.trim( this.value );

    if (upcPrefix != "") {
          var upcElem = $('<li />', {text : upcPrefix});
          $("#CandidateUPCs").append(upcElem);
    }
    this.value = "";
}

UPDATE 4

The problem is that the form is being submitted, even though there is code to prevent that (preventDefault). I know this because when I select a slew of checkboxes, they all go deselected at the same time that the value briefly entered into the UL also goes bye-bye. So is there something analagous to this mixture of "metaphors":

e.preventDefault(); ! important

?

UPDATE 5

I still have the same problem with this:

    $('#InputUPC').keyup(function (event) {
    if (event.stopPropagation) { // W3C/addEventListener()
        event.stopPropagation();
    } else { // Older IE.
        event.cancelBubble = true;
}
         event.preventDefault();
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if (keycode == '13') {
            //alert('get the values that start with what was entered and place it in ulUPCStartsWith');
            var upcPrefix = jQuery.trim($("#InputUPC").val());

            if (upcPrefix != "") {
                  $("#CandidateUPCs").append('<label for=' + upcPrefix + '>' + upcPrefix + ' </label>');
                  $("#CandidateUPCs").append('<input type=\"checkbox\" name=' + upcPrefix + ' id=' + upcPrefix + ' />');
                  $("#CandidateUPCs").append('<br>');
            }
            $("#InputUPC").val("");
        }
    });

Answer 1

$('#InputUPC').on('keyup', function(e) {
    e.preventDefault();
    if (e.which == 13) {
        var upcPrefix = $.trim( this.value );

        if (upcPrefix != "") {
              var upcElem = $('<li />', {text : upcPrefix});
              $("#CandidateUPCs").append(upcElem);
        }
        this.value = "";
    }
});

Answer 2

The code as in the question works fine, however I imagine that in your actual code the input is inside a form.

Thus, hitting the enter key is very likely submitting the form (see §4.10.22.2 "Implicit submission" in the spec). What you are seeing is not a script/logic error that is clearing the ul; you are seeing the page reloading.

You can fix this by adding: [event object].preventDefault();

Examples:

1. Undesirable submission
2. Fixed

Answer 3

Adeneo's solution is the right one. But if you want to get it to work without upgrading to jQuery 1.9, you can always use the "bind" event instead of "on". On is supported from v1.7 onwards and replaces bind in the newer versions.

$('#InputUPC').bind('keyup', function(e) {

Answer 4

UPDATE 4 The problem is that the form is being submitted, even though there is code to prevent that (preventDefault). I know this because when I select a slew of checkboxes, they all go deselected at the same time that the value briefly entered into the UL also goes bye-bye. So is there something analagous to this mixture of "metaphors":

e.preventDefault(); ! important?

Your issue may be caused by event bubbling. Try adding this code before event.preventDefault();

if (event.stopPropagation) { // W3C/addEventListener()
        event.stopPropagation();
    } else { // Older IE.
        event.cancelBubble = true;
}