jqxInput doesn't return value - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Button, Input, item.value, jqxButton, jqxinput, select, val

This topic contains 3 replies, has 3 voices, and was last updated by admin 9 years, 8 months ago.

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

Author

jqxInput doesn't return value Posts

March 26, 2015 at 12:39 pm jqxInput doesn't return value #69177

cpuin

Participant

I have


						var url = "json_partners.php";
						                // prepare the data
						var companies =
						                {
						                    datatype: "json",
						                    datafields: [
						                    	{ name: 'ID' },
						                        { name: 'Bulstat' },
						                        { name: 'Company' }
						                    ],
						                    url: url
						                };
						var dataAdapter = new $.jqx.dataAdapter(companies);
						$("#company").jqxInput({placeHolder: "Избери партньор", displayMember: "Company", valueMember: "ID", height: 25, width: 300, minLength: 1,  source: dataAdapter});
.....

and want to get the value of the selected item, but insted of returning ID, it retuns an object.


$("#company").val();

March 26, 2015 at 1:32 pm jqxInput doesn't return value #69183

Nadezhda

Participant

Hello cpuin,

Here is an example which shows how to get the value of selected item:

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>

</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var url = "../sampledata/customers.txt";

                // prepare the data
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'CompanyName' },
                        { name: 'ContactName' }
                    ],
                    url: url
                };
                var dataAdapter = new $.jqx.dataAdapter(source);

                // Create a jqxInput
                $("#jqxInput").jqxInput({ source: dataAdapter, placeHolder: "Contact Name:", displayMember: "ContactName", valueMember: "CompanyName", width: 200, height: 25 });
                $("#jqxInput").on('select', function (event) {
                    if (event.args) {
                        var item = event.args.item;
                        if (item) {
                            var valueelement = $("<div></div>");
                            valueelement.text("Value: " + item.value);
                            var labelelement = $("<div></div>");
                            labelelement.text("Label: " + item.label);

                            $("#selectionlog").children().remove();
                            $("#selectionlog").append(labelelement);
                            $("#selectionlog").append(valueelement);
                        }
                    }
                });
                $("#jqxButton").jqxButton({
                    height: '30px',
                    width: '120px',
                });
                $('#jqxButton').on('click', function () {
                    var input = $('#jqxInput').jqxInput('val');
                    alert(input.value);
                });
            });
        </script>
        <input id="jqxInput" />
        <br />
        <label style="font-family: Verdana; font-size: 10px;">ex: Ana</label>
        <div>
            <input style="margin-top: 20px;" type="button" id='jqxButton' value="Get value" />
        </div>
        <div style="font-family: Verdana; font-size: 13px;" id='selectionlog'>
        </div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

March 26, 2015 at 7:23 pm jqxInput doesn't return value #69204

cpuin

Participant

Thank you Nadhezda.

This works , but is a bit strange:


$('#jqxInput').jqxInput('val').value;

March 27, 2015 at 6:46 am jqxInput doesn't return value #69225

admin

Keymaster

Hey cpuin,

When you have displayMember and valueMember defined. val returns object with “label” and “value”. It’s also demonstrated in the Docs how to set value of such jqxInput – $(‘#jqxInput’).jqxInput(‘val’, {label: “Item 1”, value: “1”});

Regards,
Peter

Author

Posts

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

You must be logged in to reply to this topic.