jQuery UI Widgets Forums Form form – styles and event control

This topic contains 2 replies, has 2 voices, and was last updated by  pepe 5 months, 3 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • form – styles and event control #134015

    pepe
    Participant

    Good evening, how can I apply styles (change the background color of the text) and control the click event of the buttons.

    Thank you.

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <meta name=”keywords” content=”JavaScript Form, HTML Form, jQuery Forms widget” />
    <meta name=”description” content=”The jqxForm widget helps you build interactive HTML JSON forms. It offers rich functionality and layout options.”/>
    <title id=’Description’>jQuery Form Widget Component</title>
    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”../../scripts/jquery-1.12.4.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/jqxinput.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxpanel.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxdropdownlist.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxform.js”></script>
    <script type=”text/javascript” src=”../../scripts/demos.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {

    var template = [
    {
    bind: ‘firstName’,
    type: ‘text’,
    label: ‘First name’,
    labelWidth: ’80px’,
    width: ‘250px’,
    },
    {
    bind: ‘lastName’,
    type: ‘text’,
    label: ‘Last name’,
    labelWidth: ’80px’,
    width: ‘250px’,
    },

    {
    type: ‘blank’,
    rowHeight: ’10px’
    },
    {
    columns: [
    {
    type: ‘button’,
    text: ‘Sign up’,
    width: ’90px’,
    height: ’30px’,
    rowHeight: ’40px’,
    columnWidth: ‘50%’,
    align: ‘right’
    },
    {
    type: ‘button’,
    text: ‘Cancel’,
    width: ’90px’,
    height: ’30px’,
    rowHeight: ’40px’,
    columnWidth: ‘50%’
    }
    ]
    }
    ];
    var sampleValue = {
    firstName: ‘John’,
    lastName: ‘Scott’,
    address: ‘1st Ave SW’,
    company: ‘N/A’,
    city: ‘San Antonio’,
    state: ‘Texas’,
    zip: ‘78209’
    };
    $(‘#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>

    </body>
    </html>

    form – styles and event control #134026

    admin
    Keymaster

    Hi,

    The .jqx-form table CSS class can be used for styling the background, fonts and colors. When a button is clicked, the form raises the ‘buttonClick’ event. You can subscribe to this event and do your logic within the event handler.

    Hope this helps.

    Regards,
    Peter

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

    form – styles and event control #134027

    pepe
    Participant

    Thank you very much Peter, I’m going to try it and see if I can get it. thank you

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

You must be logged in to reply to this topic.