How can I send json GET request and add form data on submit.

Question

I have a simple form ...

<form id="myForm" >
            <div>
                <label for="airport">Airport:</label>
                <input type="text" id="airport" />
            </div>                
            <div class="button">
                <button id="submit"  type="submit">Submit</button>
            </div>
        </form>

I am trying to send a json request. When I hard code the url with parameters, it works fine. As soon as I try and add the parameter from my form, on submit..it breaks. I've tried every suggestion I can find..nothing seems to work. I'm not an expert with jquery/javascript and just learning about json. Any help would be appreciated. Thanks in advance. This is my working request...but I'd like to add the form field #airport instead of hard coding the name of the airport, ATL, in the json url string.

$(function () {    

$.getJSON('http://services.faa.gov/airport/status/ATL?format=json', function(data) {

    var output;
    output =  data.state + " | " + data.name +  " | " + data.IATA + " | " + data.status.reason + "<hr />";        
    document.getElementById("placeholder").innerHTML = output;
});

duplicate question http://stackoverflow.com/questions/1200266/submit-a-form-using-jquery — OsYYYY, Oct 09 '15 at 08:15
I had already found that answer SerMintt, but it did not help me, which is why I asked here. — Ronnie, Oct 09 '15 at 19:39

score 1 · Accepted Answer · answered Oct 09 '15 at 08:24

<script type="text/javascript">
    $(function () { 

    $("#submit").click(function(){
        $.getJSON('http://services.faa.gov/airport/status/'+$("#airport").val().trim()+'?format=json', function(data) {
            var output;
            output =  data.state + " | " + data.name +  " | " + data.IATA + " | " + data.status.reason + "<hr />";        
            document.getElementById("placeholder").innerHTML = output;
        });
        return false;
    });   

});
</script>

<form id="myForm" >
    <div>
        <label for="airport">Airport:</label>
        <input type="text" id="airport" />
    </div>                
    <div class="button">
        <button id="submit"  type="submit">Submit</button>
    </div>
</form>
<div id="placeholder"></div>

these code will help you, I think all that you missed is 'return false'

Thank you so much....it was indeed my error by omitting return false. As soon as I added that, my previous attempts all worked! Thank you for your detailed answer...it was very helpful! — Ronnie, Oct 09 '15 at 19:42

score 0 · Answer 2 · answered Oct 09 '15 at 08:24

You can try following approach:

HTML:

<form id="myForm" >
    <div>
        <label for="airport">Airport:</label>
        <input type="text" id="airport" />
    </div>                
    <div class="button">
        <button id="submit"  type="submit">Submit</button>
    </div>
</form>

JavaScript:

$(document).ready(function() {
    $('#myForm').bind('submit', function() { 
        var airportValue = $("#airport");

        $.getJSON('http://services.faa.gov/airport/status/'+airportValue+'?format=json', function(data) {
            var output;
            output =  data.state + " | " + data.name +  " | " + data.IATA + " | " + data.status.reason + "<hr />";        
            document.getElementById("placeholder").innerHTML = output;
        });

        return false; 
    });
});

On form submit we are just grabbing the value inputed by user into input#airport and preparing the URL for $getJSON call.

How can I send json GET request and add form data on submit.

2 Answers2