is it possible to create input forms within pop-up's?

3209
5
04-21-2016 01:35 PM
SorinCiolofan1
New Contributor

Hi!

I would like to offer a user the possibility to insert some input values in a submit form in a pop-up. As far I saw just how to configure pop-up's to display some attributes or a chart, but is possible to create a form inside a pop-up? If not what would be the alternatives for submitting input data in a dialog? Some examples/tutorials on how to do this would be highly appreciated.

Thanks

Sorin

0 Kudos
5 Replies
RobertScheitlin__GISP
MVP Emeritus

Sorin,

  As far as I know it is. Popups can have all kind of content Dijits, Widgets, Charts, Images, etc.

0 Kudos
SorinCiolofan1
New Contributor

I am working with arcgis online and with pop-up's from a layer.

Configure-pop up option does not show anything to create a form here. Do you know any example I can read on how to do this?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Sorin,

It is not going to be possible using the AGOL popup configurator. But you can add just about anything to a popup using the JS API.

InfoTemplate | API Reference | ArcGIS API for JavaScript

0 Kudos
RolleyTickner
New Contributor

Yes mate it is perfectly possible.

Set your popup.content to your designed HTML including the form elements. Then take advantage of the actions of the popup to process any user input on those form elements. Capture the values of the form elements by using the built in Dojo api or use native js querySelector to capture what you need.

Very doable, I just did it this morning.

0 Kudos
RolleyTickner
New Contributor

for example: .. I wouldn't code it exactly like this but its just to illustrate the concept at an easy level (and take note that dom.byID would require the relevant Dojo lib in the includes, alternatively, just use querySelector):

layer.popup.content = "html including form inputs, lets pretend there's an input with the ID of 'input'";

layer.popup.actions = [ { title: "Submit", id: "submit", className: "seri-icon-upload" } ];

layer.popup.on("trigger-action", function(event){

     if (event.action.id === "submit") {

          var x = dom.byID("submit").value;

          ... and ..?? do what ever else needs to be done with it.

     }

}

0 Kudos