How to pass search query into ArcGIS Online url?

[jasonramsey1]

Hello I am attempting to add a form to an existing html that allows the user to type in a search term and query and existing ArcGIS Online map. For example, a person would enter a coordinate into the form such as:

 

The resulting url should be (unencoded) : www.arcgis.com/apps/webappviewer/index.html?find=-112.111 33.3456

encoded it should look like: www.arcgis.com/apps/webappviewer/index.html?find=-112.111%2033.3456

The problem is that because the parameter (find) is after the "?" the whitespace in the url is encoded with a "+" instead of "%20". The url becomes: www.arcgis.com/apps/webappviewer/index.html?find=-112.111+33.3456

This causes  the feature search to search for : which results in not finding the coordinate.

My question is how can I get a url form to pass the search query either unencoded, or having the whitespace encoded as "%20" instead of "+"? I am using the get method and have tried having a javascript function replace the whitespace with "%20", but the % symbol gets encoded. Any suggestions would be greatly appreciated!

-Jason

[BillGrow]

Hi Jason,

Could you just replace the search input content with JavaScript, after the page has been loaded?

document.getElementById("search_input").value = document.getElementById("search_input").value.replace("+", ", ")

[jasonramsey1]

Hello Bill. Your response sounds promising, but I am not sure how to go about doing that. Would the JavaScript be in the original html that contains the form? Or would the replacement function somehow be passed in the url? I am pretty novice when it comes to javascript and the HTML. Any direction/guidance would be appreciated!

[BillGrow]

If you're using WAB Developer edition, you can use the . replace(a, b) method in the Find widget JavaScript code (After it parses the URL params).

If, however, you don't have access to the code (arcgis.com), and are passing the data from another form, you'll probably want to encode the URI before sending, and submit the form using JavaScript.  Something like:

var findParam = document.getElementById("lat-lon-input-field").value

var rootAppURL = "https://myapp.com/app"

encodedURL = encodeURI( rootAppURL + "?find=" + findParam)

window.location = encodedURL

Hopefully one of those methods answers your original question.

Ref: http://www.w3schools.com/jsref/jsref_encodeURI.asp

*There are cleaner ways to write this code, but that should get you started.

[RobertScheitlin__GISP]

Jason,

  Why are you using a space between the lat and lon? The documentation states use a comma or semicolon:

• You can use commas or semicolons as separators. Use semicolons if your numbers use colons as their decimals.

Use URL parameters—Web AppBuilder for ArcGIS | ArcGIS

[jasonramsey1]

Thanks Robert for the input on the spaces. Spaces are accepted and that is the way that non-GIS personnel are used to. In addition, spaces are needed to enter an address in to the HTML form which is then passed incorrectly into the query string of the URL. Basically, if the attribute that is needed to be entered into the URL after the ?find= has a space in it then it will fail to find the feature with the + symbol substituted for the space.

Jason

[RobertScheitlin__GISP]

Jason,

  I am really confused where the plus is coming from. The substituting of a space with a plus is not a normal encoding method that I am aware of. What does your from html and or JS look like?

[jasonramsey1]

Robert,

The plus is normal encoding in the query string (?)when using the "get" method in an HTML form.

Jason

[BillGrow]

You could also use my code above, to clean up user input before sending it correctly on to the application; as long as you don’t need to do any server side stuff.

JavaScript String Methods

[jasonramsey1]

Thanks Bill. I definitely will experiment with your code tomorrow when I am back at work.

Jason