CODEWITHSUNDEEP
jqueryjsonformsget
Ronnie
Ronnie

Reputation: 13

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

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;
});

Upvotes: 0

Views: 171

Answers (2)

Andy Cheung
Andy Cheung

Reputation: 125

<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'

Upvotes: 1

vijayP
vijayP

Reputation: 11512

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.

Upvotes: 0

Related Questions