jQWidgets Forums

jQuery UI Widgets › Forums › Form › form – styles and event control

Tagged: 

This topic contains 4 replies, has 3 voices, and was last updated by  admin 1 month, 2 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    form – styles and event control Posts
  • December 2, 2023 at 7:08 pm 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>

    December 4, 2023 at 7:03 pm 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/

    December 4, 2023 at 10:16 pm 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

    March 10, 2025 at 2:10 pm form – styles and event control #135686

    shadymaster1011
    Participant

    Hi I am using React js version 22.0.0 to use JQX forms , and whenever I try to use getComponentByName() function i am getting undefined as a output . This is my code:

    import React, { useRef, useEffect } from “react”;
    import { JQXForm } from “jqwidgets-react/react_jqxform”;

    const MyForm = () => {
    const myFormRef = useRef(null);

    useEffect(() => {
    // Call getComponentByName after the form has been rendered
    if (myFormRef.current) {
    const submitButton = myFormRef.current.getComponentByName(“submitButton”);
    if (submitButton) {
    console.log(“Submit Button Component:”, submitButton);
    } else {
    console.error(“Submit Button not found!”);
    }
    }
    }, []);

    const template = [
    {
    type: “text”,
    name: “name”,
    label: “Name:”,
    labelPosition: “left”,
    },
    {
    type: “button”,
    name: “submitButton”,
    text: “Submit”,
    },
    ];

    return <JQXForm ref={myFormRef} template={template} />;
    };

    export default MyForm;

    March 12, 2025 at 9:59 pm form – styles and event control #135696

    admin
    Keymaster

    React’s ref should be attached properly, but sometimes JQXForm might not expose getComponentByName directly. Try using myFormRef.current.getInstance() to access the actual instance:

    useEffect(() => {
    if (myFormRef.current) {
        const formInstance = myFormRef.current.getInstance();
        const submitButton = formInstance.getComponentByName("submitButton");

        if (submitButton) {
            console.log("Submit Button Component:", submitButton);
        } else {
            console.error("Submit Button not found!");
        }
    }
}, []);

    Regards,
    Peter

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.