jQuery UI Widgets › Forums › Form › form – styles and event control
This topic contains 2 replies, has 2 voices, and was last updated by pepe 1 year, 2 months ago.
-
Author
-
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>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,
PeterjQWidgets team
https://www.jqwidgets.com/Thank you very much Peter, I’m going to try it and see if I can get it. thank you
-
AuthorPosts
You must be logged in to reply to this topic.