jQWidgets Forums

jQuery UI Widgets Forums Lists ComboBox Text value

This topic contains 2 replies, has 2 voices, and was last updated by  nosn 12 years, 3 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Text value Posts
  • Text value #12526

    nosn
    Participant

    Is there a way to grab the text value of the input box ( I.e. user typed in input instead of selecting an item )?

    thanks,
    nosn

    Text value #12551

    Dimitar
    Participant

    Hello nosn,

    Here is how to get the value in the input:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="keywords" content="jQuery ComboBox, List, ListBox, Popup List, jqxComboBox, jqxListBox, List Widget, ListBox Widget, DropDownList Widget" />
    <meta name="description" content="The jqxComboBox in this demo is populated with items and show
    how to display image next to each item." />
    <title id='Description'>The jqxComboBox represents a widget that contains a list of
    selectable items displayed in a drop-down. Users can enter information in the text
    box portion and search for a specific item. The widget comes with built-in auto-complete
    support.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
    </head>
    <body>
    <div id='content'>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getTheme();
    var source = new Array();
    for (i = 0; i < 10; i++) {
    var movie = 'avatar.png';
    var title = 'Avatar';
    var year = 2009;
    switch (i) {
    case 1:
    movie = 'endgame.png';
    title = 'End Game';
    year = 2006;
    break;
    case 2:
    movie = 'priest.png';
    title = 'Priest';
    year = 2011;
    break;
    case 3:
    movie = 'unknown.png';
    title = 'Unknown';
    year = 2011;
    break;
    case 4:
    movie = 'unstoppable.png';
    title = 'Unstoppable';
    year = 2010;
    break;
    case 5:
    movie = 'twilight.png';
    title = 'Twilight';
    year = 2008;
    break;
    case 6:
    movie = 'kungfupanda.png';
    title = 'Kung Fu Panda';
    year = 2008;
    break;
    case 7:
    movie = 'knockout.png';
    title = 'Knockout';
    year = 2011
    break;
    case 8:
    movie = 'theplane.png';
    title = 'The Plane';
    year = 2010;
    break;
    case 9:
    movie = 'bigdaddy.png';
    title = 'Big Daddy';
    year = 1999;
    break;
    }
    var html = "<div style='padding: 0px; margin: 0px; height: 95px; float: left;'><img width='60' style='float: left; margin-top: 4px; margin-right: 15px;' src='../../images/" + movie + "'/><div style='margin-top: 10px; font-size: 13px;'>"
    + "<b>Title</b><div>" + title + "</div><div style='margin-top: 10px;'><b>Year</b><div>" + year.toString() + "</div></div></div>";
    source[i] = { html: html, title: title };
    }
    // Create a jqxComboBox
    $("#jqxWidget").jqxComboBox({ source: source, selectedIndex: 0, width: '250', height: '25px', theme: theme });
    // alerts the value in the widget's input
    $("#getValueButton").click(function () {
    var value = $("#jqxWidget input").val();
    alert(value);
    });
    });
    </script>
    <div id='jqxWidget'>
    </div>
    <button id="getValueButton">
    Get value</button>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Text value #12600

    nosn
    Participant

    Thank you. That answered my question.

    -nosn

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.