Form Refresh - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: javascript form, jquery form, jqwidgets form, jqxform refresh, reset form

This topic contains 3 replies, has 2 voices, and was last updated by Todor 5 years ago.

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

Author

Form Refresh Posts
August 8, 2019 at 2:31 pm Form Refresh #106444

teaguejust
Participant

Does the refresh method refresh the form’s original values or to what the values are currently set? I would like to send new values to a form and refresh the form, but I keep getting the original values. I’m wondering if refresh is not the correct application here.

August 9, 2019 at 9:24 am Form Refresh #106448

Todor
Participant

Hello teaguejust,

You need to reset each widget in the form.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

August 14, 2019 at 5:40 pm 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>

August 19, 2019 at 7:03 am Form Refresh #106521

Todor
Participant

Hello teaguejust,

You could do it the same way as it is done in the following demo about State.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com
Author

Posts

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

You must be logged in to reply to this topic.