Smart UI Components & Libraries – Grid, Scheduler, Gantt, Kanban for Angular, React, Next.js, Vue, Blazor, JavaScript › Forums › General Discussions › DropDownList › DropDownList in Form not submitted?
Tagged: form controls, form dropdownlist, form submit
- This topic has 2 replies, 2 voices, and was last updated 3 years, 10 months ago by
Giovanni Zomer.
-
AuthorPosts
-
December 25, 2021 at 10:47 am #102698
Giovanni Zomer
ParticipantI have a form, which contains textboxes, checkboxes and a dropdownlist;
if I submit the actual value of the form, I get all the textboxes and checkboxes (only if selected) values, but I don’t get any information about the actual selected dropdown value;
the dropdownpart is simple added like thisobjElement={ dataField:arrDetail[0], controlType:’dropdownlist’, label:arrDetail[2], controlOptions: {dataSource: objDropDownElements} };
and the single values have been added before like this
objDropDownElements.push({label:arrDetailDropDown[1], value:arrDetailDropDown[0]});
I am able to select the choice of the dropdown, but no values regarding it are arriving at the destination of the submit;
where do I go wrong?December 27, 2021 at 7:43 pm #102704admin
KeymasterHi Giovanni,
Could you please provide a full example which shows your use case? I would like to suggest you to look at the Form Events online example, too. You can use Form Properties and/or Events to get the Form’s value, if you use Smart.Form. For example: https://www.htmlelements.com/demos/form/events/. The example shows how to get the value of a form dynamically.
Best regards,
Peter StoevSmart UI Team
https://www.htmlelements.com/December 28, 2021 at 10:09 am #102707ParticipantHi, Peter,
I don’t have problems getting the values of the elements in the form; my problem is the “submit”-event; if I look which data are arriving from the submitting form, I find all textboxes and checkboxes (for these ones: only if the are selected), but I don’t get any information about dropdown-select values;
I put here a form-example, changed to submit via GET (instead of normal POST) just to look at the values sent the easier way; as you can see, no one of the selected dropdownlistvalues are submitted;
I’m now working with a workaround without directly submitting the form:
– button calls a js-function
– actual values are read on the client by js
– js submit the calculated data to the server
this works perfectly, but it’s obviously “handmade” and not (as expected) automatically from the component;
so it’s not urgent anymore, but one probably expects to have the job done without “manual corrections” … maybe in one of the next versions?
thanks!<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<script type=”text/javascript” src=”smart.elements.js”></script>
<link rel=”stylesheet” type=”text/css” href=”smart.default.css” />
</head>
<body>
<div id=”content”></div><script language=javascript>
var objFormElements=
[
{
“dataField”: “Descrizione_I”,
“controlType”: “template”,
“label”: “Descrizione”,
“template”: “<input type=text size=50 maxlength=300 class=dataInput value=\”Advertising\”>”,
“labelPosition”: “”,
“name”: “Descrizione_I”,
“custom”: true
},
{
“dataField”: “Codice”,
“controlType”: “template”,
“label”: “Codice”,
“template”: “<input type=text size=20 maxlength=20 class=dataInput value=\”ADV\”>”,
“labelPosition”: “”,
“name”: “Codice”,
“custom”: true
},
{
“name”: “Tipologia”,
“dataField”: “Tipologia”,
“controlType”: “dropdownlist”,
“label”: “Visualizzazione”,
“controlOptions”: {
“dataSource”: [
{
“label”: ” “,
“value”: “0”
},
{
“label”: “Elenco magazine”,
“value”: “182”
},
{
“label”: “Home”,
“value”: “177”
},
{
“label”: “News”,
“value”: “179”
},
{
“label”: “Numero magazine”,
“value”: “183”
},
{
“label”: “Redazione”,
“value”: “178”
},
{
“label”: “Rubriche”,
“value”: “202”
},
{
“label”: “Standard”,
“value”: “181”
}
]
},
“labelPosition”: “”,
“custom”: true
},
{
“dataField”: “Link”,
“controlType”: “template”,
“label”: “Link”,
“template”: “<input type=text size=50 maxlength=300 class=dataInput value=\”\”>”,
“labelPosition”: “”,
“name”: “Link”,
“custom”: true
},
{
“dataField”: “Pos”,
“controlType”: “template”,
“label”: “Posizione”,
“template”: “<input type=text size=5 maxlength=5 class=dataInput value=\”\”>”,
“labelPosition”: “”,
“name”: “Pos”,
“custom”: true
},
{
“name”: “Tipologia_2”,
“dataField”: “Tipologia_2”,
“controlType”: “dropdownlist”,
“label”: “Autore”,
“controlOptions”: {
“dataSource”: [
{
“label”: ” “,
“value”: “0”
},
{
“label”: “test”,
“value”: “54”
},
{
“label”: “test ok”,
“value”: “46”
},
]
},
“labelPosition”: “”,
“custom”: true
},
{
“name”: “Tipologia_3”,
“dataField”: “Tipologia_3”,
“controlType”: “dropdownlist”,
“label”: “Rubrica”,
“value”: “1”,
“controlOptions”: {
“dataSource”: [
{
“label”: ” “,
“value”: “0”
},
{
“label”: “I personaggi”,
“value”: “1”
},
{
“label”: “I viaggi”,
“value”: “6”
}
]
},
“labelPosition”: “”,
“custom”: true
},
{
“dataField”: “-G2”,
“controlType”: “group”,
“columns”: 2,
“controls”: [
{
“dataField”: “is_Group”,
“controlType”: “boolean”,
“label”: “è un raggruppamento”,
“value”: false,
“labelPosition”: “”,
“name”: “is_Group”,
“custom”: true
},
{
“dataField”: “Inattivo”,
“controlType”: “boolean”,
“label”: “inattivo”,
“value”: false,
“labelPosition”: “”,
“name”: “Inattivo”,
“custom”: true
}
],
“labelPosition”: “”,
“name”: “-G2”,
“custom”: true
},
{
“name”: “SAVE”,
“label”: “salva”,
“controlType”: “submit”,
“labelPosition”: “”,
“dataField”: “SAVE”,
“custom”: true
}
];var _tx=”<form name=’formTest’ id=’formTest’ action=’test.html’ method=GET></form>”;
document.getElementById(“content”).innerHTML=_tx;
var objForm=new Smart.Form(“#formTest”,{ controls: objFormElements });</script>
</body>
</html> -
AuthorPosts
- You must be logged in to reply to this topic.