javascript - Having trouble with a form using ajax -
hello everyone, i'm new jquery mobile , i'm having trouble figuring out how following.
1) need dropdown/select menu user can select from.
2) after user selects value, he/she can press submit button , miles trip link in ajax url (jonsp file). here need pass value user selected in form.
it seems simple enough said, i'm new , below far got.
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <!--body --> <body> <!-- page --> <div data-role="page" id="form_page"> <!-- header --> <div data-role="header" data-position="fixed" data-tap-toggle="false"> <h1>header</h1> </div> <!-- end header --> <!-- content --> <div data-role="main" class="ui-content"> <form method="get"> <fieldset class="ui-field-contain"> <label for="cars">select day</label> <select name="cars" id="cars" data-native-menu="false"> <option value="a">a</option> <option value="b">b</option> <option value="c">c</option> <option value="d">d</option> <option value="e">e</option> <option value="f">f</option> <option value="g">g</option> <option value="h">h</option> </select> </fieldset> <input type="submit" data-inline="true" value="submit"> </form> <div id="result"> </div> </div> <!-- end content --> <!-- footer --> <div data-role="footer" data-position="fixed" data-tap-toggle="false"> <h1>footer</h1> </div> <!-- end footer --> </div> <!-- end page --> </body> <!-- end body --> <script> $(document).ready(function(){ $("#my_button").click(function(){ $.ajax({ url: 'https://api.wmata.com/rail.svc/json/jsrcstationtodststationinfo?fromstationcode=a15&tostationcode=a12&api_key=kfgpmgvfgacx98de9q3xazww', datatype: 'jsonp', }).success(function (data){ $("#result").append($(data.stationtostationinfos[0].compositemiles)); }); }); }); </script> </html>
try this:
// catch form submission $('form').on('submit', function(){ // make ajax call $.ajax({ url: 'myurl', // url method: $('form').attr('method'), datatype: 'jsonp', data: {cars: $('#cars').val()}, // data want submit // data: $('form').serialize() if have more 1 data on form success : function(jsonp) { // jsonp returned values backend application // code $("#result").html(''); $("#result").append($(data.stationtostationinfos[0].compositemiles)); // or easier $("#result").html($(data.stationtostationinfos[0].compositemiles)); } }); // prevent default submission return false; }); 
Comments
Post a Comment