Is there a way to transfer the content of a "text box" to an unordered list when the user presses the "Enter" key?
This is the HTML structure:
<input type="text" name="InputUPC" id="InputUPC" />
<ul id="CandidateUPCs" name="CandidateUPCs" class="ulUPCs"></ul>
CSS styling for the unordered list:
.ulUPCs {
min-height:160px;
height:auto !important;
height:160px;
max-width:344px;
width:auto !important;
width:344px;
border-style:solid;
border-width:2px;
}
The jQuery code to handle keypress event:
$('#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("");
}
});
However, after entering a value in "InputUPC" and pressing Enter, the value briefly appears in the list but then disappears. The input field gets cleared as expected, but why does the value vanish from the list too?
UPDATE
I made some changes based on adeneo's answer and here's the updated code snippet (http://jsfiddle.net/AEy9x/):
$('#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
The code works with jQuery versions above 1.6.4. I upgraded to jquery 1.9.1, but it still doesn't work as expected.
Even though I updated jquery-ui as well:
@* <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
The issue persists with either block of code (first mine, second adeneo's). The content flashes in the UL momentarily and then disappears quickly.
// Your code block
$('#InputUPC').keyup(function (event) {
event.preventDefault();
var keycode = (event.keyCode ? event.keyCode : event.which);
// Rest of your code
);
// Adeneo's code block
$('#InputUPC').on('keyup', function(e) {
e.preventDefault();
if (e.which == 13) {
var upcPrefix = $.trim( this.value );
// Rest of the code
}
UPDATE 4
The form is being submitted even though preventDefault has been used. This can be observed when checkboxes get deselected along with the brief appearance and disappearance of values in the UL.
Is there something like this meta-metaphor that could solve the issue?:
e.preventDefault(); ! important
UPDATE 5
The problem persists despite including these modifications:
$('#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') {
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("");
}
});