Replacing form action with custom URL

Question

Learning HTML and JavaScript, I'm trying to form a custom URL for an API request, based on input submitted via a form. I've been able to craft most of the URL, but I'm having an issue getting the URL string to concatenate past the '?' when submitting the action. I made it this far based on documentation and forum posts alone, but cannot figure out how to complete this action and just wanted to ask someone.

<div id="stock_quote_iex">
    <form id="get_stock_quote_form" onsubmit="get_stock_quote()" method="GET">
        <p>Enter Symbol and API Key</p>
        <input id="symbol" type="text" placeholder="Symbol">
        <input id="api_key" type="text" placeholder="API_KEY">
        <input type="submit" value="Submit">
    </form>
</div>

<script language="javascript" type="text/javascript">
    function get_stock_quote()
    {
        var form = document.getElementById('get_stock_quote_form')
        var symbol = document.getElementById('symbol').value
        var api_key = document.getElementById('api_key').value
        var action_src = "https://sandbox.iexapis.com/stable/stock/" + symbol + "/quote?token=" + api_key

        form.action = action_src;
    }
</script>

Example inputs:
symbol = NFLX
API_KEY = pk_s0m3rand0mphra5e

Expected output:
https://sandbox.iexapis.com/stable/stock/NFLX/quote?token=pk_s0m3rand0mphra5e

Actual output:
https://sandbox.iexapis.com/stable/stock/NFLX/quote?

The code seems to be doing what you want, see my [JSFiddle](https://jsfiddle.net/840shvor/) where it's concatenating just fine. Is it showing up `https://sandbox.iexapis.com/stock/NFLX/quote?` in the URL when you hit submit? — EGC, Jan 17 '20 at 02:46
Alternatively, would using `location.href = action_src;` instead have the same effect for what you're trying to achieve? — EGC, Jan 17 '20 at 02:49
@EGC That is correct. The portion after the ? is being stripped. The API request is returning with "An API key is required to access this data and no key was provided." — Jim Diroff II, Jan 17 '20 at 02:55
@EGC Putting ```location.href = action.src``` in place of ```form.action = action_src``` produces ```localhost/?``` — Jim Diroff II, Jan 17 '20 at 02:58
Looks like this is a well known issue, have a read of this [submitting a GET form with query string params and hidden params disappear](https://stackoverflow.com/questions/1116019/submitting-a-get-form-with-query-string-params-and-hidden-params-disappear) - looks like it strips everything after the `?` in most browsers — EGC, Jan 17 '20 at 03:00
Ok. Thanks for this. So, it would look like any information I need to have in the request after the ? must be included inside the form itself. I'll try that configuration. — Jim Diroff II, Jan 17 '20 at 03:05
I'm with @EGC on this. It certainly seems like since you just want to do a GET to another URL, why wouldn't you just do a redirect by setting `location.href = action_src;`? Isn't it functionally the same? Submitting a form with a GET is pretty much the same as redirecting. — jwatts1980, Jan 17 '20 at 03:07
@EGC I was able to get this working by removing all concatenation after "/quote", using form.action, and naming the API_KEY input to "token". — Jim Diroff II, Jan 17 '20 at 03:18

score 1 · Accepted Answer · answered Jan 17 '20 at 03:27

Corrected by removing the query parameters from the string concatenation, and using the name attribute on API_Key instead.

<div id="stock_quote_iex">
    <form id="get_stock_quote_form" onsubmit="get_stock_quote()" method="GET">
        <p>Enter Symbol and API Key</p>
        <input id="symbol" type="text" placeholder="Symbol">
        <input id="api_key" name="token" type="text" placeholder="API_KEY">
        <input type="submit" value="Submit">
    </form>
</div>

<script language="javascript" type="text/javascript">
    function get_stock_quote()
    {
        var form = document.getElementById('get_stock_quote_form')
        var symbol = document.getElementById('symbol').value
        var action_src = "https://sandbox.iexapis.com/stable/stock/" + symbol + "/quote"

        form.action = action_src;
    }
</script>

Replacing form action with custom URL

1 Answers1