javascript - JQuery form submission not working with API -
i trying retrieve date form submission use in smartystreet api request. it's not outputting response api.
html:
<div class="form-style-5"> <form id="myform"> <fieldset> <legend><span class="number">1</span> input address</legend> <input type="text" id="street" name="street" placeholder="street"> <input type="text" id="city" name="city" placeholder="city"> <input type="text" id="state" name="state" placeholder="state"> <input type="submit" value="submit" /> </fieldset> </form> <fieldset> <legend><span class="number">2</span> results</legend> <div id='resultbox'> </div> </fieldset> </div>
js:
auth_id = "123456789"; auth_token = "123456789" $("myform").submit(function(event) { street = $("#street").val() city = $("#city").val() state = $("#state").val() var xhr = new xmlhttprequest(); xhr.open("get", "https://us-street.api.smartystreets.com/street-address?street=" + street + "&auth-id=" + auth_id + "&auth-token=" + auth_token, true); xhr.send(); var addresses = json.parse(xhr.responsetext); console.log('hello') $( "#resultbox" ).text(addresses).show(); event.preventdefault(); });
any appreciated, want know why isn't working , if there better way. thanks
you can use onreadystatechange property monitor state of request,when state changes function gets called, when status of request 4 (completed) , response status code 200 (ok), change address text using returned json data response text property. hope helps.
$("myform").submit(function(event) { event.preventdefault(); street = $("#street").val() city = $("#city").val() state = $("#state").val() var xhr = new xmlhttprequest(); xhr.open("get", "https://us-street.api.smartystreets.com/street-address?street=" + street + "&auth-id=" + auth_id + "&auth-token=" + auth_token, true); xhr.send(); var addresses; xhr.onreadystatechange = function() {//call function when state changes. if(xhr.readystate == 4 && xhr.status == 200) { addresses = json.parse(xhr.responsetext); $( "#resultbox" ).text(addresses).show(); console.log('hello'); } } });
Comments
Post a Comment