jQWidgets Forums

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 2 months ago.

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

Author

combo box accepts text too Posts

December 24, 2013 at 2:21 am combo box accepts text too #46926

Participant

hello all –

is there any easy way to prevent the very cool jqxComboBox from accepting text? or more specifically, when a user accidentally clicks in the combo box and presses a return key, this initiates a submit on my form.

you can see it happening here:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxcombobox/index.htm?(arctic)#demos/jqxcombobox/multiselect.htm

click “Multi Select”, and click to the right of “Germany”. text can be entered here as well as a return key.

thank you!

December 24, 2013 at 11:35 am combo box accepts text too #46938

Peter Stoev

Keymaster

Hi edwardsmarkf,

It is not possible to disable the ComboBox Input field.

Best Regards,
Peter Stoev

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

December 28, 2013 at 5:13 pm combo box accepts text too #47039

edwardsmarkf

Participant

i was hoping there was at least some easy way to “disable” the return key acting like a submit button. in other words, i remove all items in the combo box, click inside of it, type “jqWidgets is awesome” and hit return. this does a submit on my form.

December 28, 2013 at 7:58 pm combo box accepts text too #47041

Peter Stoev

Keymaster

Hi edwardsmarkf,

Submitting a Form if Enter is pressed is expected and built in behavior of the Browser’s INPUT tags which the ComboBox has. If you want to prevent that default action performed by the browser, you can do the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.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>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var source = [
                    "Affogato",
                    "Americano",
                    "Bicerin",
                    "Breve"
		        ];

                // Create a jqxComboBox
                $("#jqxComboBox").jqxComboBox({ autoDropDownHeight: true, source: source, width: '200px', height: '25px' });
                $("#jqxComboBox input").on('keydown', function (event) {
                    if (event.keyCode == 13) {
                        event.preventDefault();
                    }
                });
                $("#myForm").on("submit", function (event) {
                    alert("Submit");
                });
            });
        </script>
        <form id="myForm">
            <div name="comboBox" id='jqxComboBox'>
            </div>
        </form>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

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

Author

Posts

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

You must be logged in to reply to this topic.