jQWidgets Forums

Forum Replies Created

Viewing 1 post (of 1 total)
  • Author
    Posts
  • August 14, 2019 at 5:40 pm in reply to: Form Refresh Form Refresh #106491

    teaguejust
    Participant

    Thank you for the reply. I can’t seem to get it to work after banging my head against the wall over several days. Would you mind taking a look at this simple example I put together? Simply just trying to change the form entry based on the drop down event.

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <meta name=”keywords” content=”jQuery DropDownList, List, ListBox, Popup List, jqxDropDownList, jqxListBox, List Widget, ListBox Widget, DropDownList Widget” />
    <meta name=”description” content=”The jqxDropDownList represents a widget that contains a list of
    selectable items displayed in a drop-down.” />
    <title id=’Description’>The jqxDropDownList represents a widget that contains a list
    of selectable items displayed in a drop-down.</title>
    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
    <meta name=”viewport” content=”width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1″ />
    <script type=”text/javascript” src=”../../scripts/jquery-1.11.1.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/jqxdropdownlist.js”></script>
    <script type=”text/javascript” src=”../../scripts/jquery-1.12.4.min.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxinput.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxpanel.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxform.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {

    var source = [
    “Affogato”,
    “Americano”,
    “Bicerin”,
    “Breve”,
    “Café Bombón”,
    “Café au lait”,
    “Caffé Corretto”,
    “Café Crema”,
    “Caffé Latte”,
    “Caffé macchiato”,
    “Café mélange”,
    “Coffee milk”,
    “Cafe mocha”,
    “Cappuccino”,
    “Carajillo”,
    “Cortado”,
    “Cuban espresso”,
    “Espresso”,
    “Eiskaffee”,
    “The Flat White”,
    “Frappuccino”,
    “Galao”,
    “Greek frappé coffee”,
    “Iced Coffee”,
    “Indian filter coffee”,
    “Instant coffee”,
    “Irish coffee”,
    “Liqueur coffee”
    ];

    // Create a jqxDropDownList
    $(“#jqxWidget”).jqxDropDownList({ source: source, selectedIndex: 0, width: 250, height: 30});

    var item = $(“#jqxWidget”).jqxDropDownList(‘getSelectedItem’);
    var selected_value = item[‘value’];

    var template = [
    {
    bind: ‘firstName’,
    type: ‘text’,
    label: ‘First name’,
    required: true,
    labelWidth: ’80px’,
    width: ‘250px’,
    info: ‘Enter first name’,
    infoPosition: ‘right’
    }
    ];

    var sampleValue = {
    firstName: selected_value
    };

    $(‘#sampleForm’).jqxForm({
    template: template,
    value: sampleValue,
    padding: { left: 10, top: 10, right: 10, bottom: 10 }
    });

    $(“#jqxWidget”).on(‘select’, function (event) {

    var item_change = $(“#jqxWidget”).jqxDropDownList(‘getSelectedItem’);
    var item_change_value = item_change[‘value’];
    console.log( item_change_value ); //Check to see if event is working

    var template = [
    {
    bind: ‘firstName’,
    type: ‘text’,
    label: ‘First name’,
    required: true,
    labelWidth: ’80px’,
    width: ‘250px’,
    info: ‘Enter first name’,
    infoPosition: ‘right’
    }
    ];

    var sampleValue = {
    firstName: item_change_value
    };

    console.log( sampleValue ); //Check to see if event sent the correct value to the form

    $(‘#sampleForm’).jqxForm({
    template: template,
    value: sampleValue,
    padding: { left: 10, top: 10, right: 10, bottom: 10 }
    });

    });

    });
    </script>
    </head>
    <body class=’default’>
    <div id=’sampleForm’ style=”width: 400px; height: auto;”></div>
    <div id=’jqxWidget’>
    <div class=”example-description”>
    <h2>Description</h2>
    <div style=”width: 800px;”>
    Change the form value using the dropdown change event.
    </div>
    </div>
    </body>
    </html>

  • Author
    Posts
Viewing 1 post (of 1 total)