javascript - How to change jQuery AJAX URL with input text on form submit? -


i'm kind of new ajax , form submission. have page loads stock market data , populates fields latest price, change, high, low etc...

i'm trying change stock market symbol (ajax url) taking input field's value , changing ajax url without page refresh hopefully.

in plunkr, can see have hard-coded value ajax url pulls in data aapl , works, however, need change url whatever value in html form input field can't figure out how. needs change last stock symbol part of url. appreciate someone's help.

click eye/live-preview icon on plunker

$.ajax({ datatype: 'jsonp', url: 'http://dev.markitondemand.com/api/v2/quote/jsonp?symbol=aapl', success: function(data) { $('h1').html(data.name); $('.container #companyname').html(data.name); $('#lastprice').html(data.lastprice.tofixed(2)); $('#change').html(data.change.tofixed(2)); $('#changepercent').html("(" + data.changepercent.tofixed(2) + "%)"); $('#range p').html(data.low + '- ' + data.high); $('#open p').html(data.open.tofixed(2)); $('#volume p').html(math.round(data.volume / 100000)); $('#marketcap p').html(math.round(data.marketcap / 1000000000));  var vol = data.volume.tostring(); if (vol > 6) { $('#volume p').append('m'); }  var cap = data.volume.tostring(); if (cap > 7) { $('#marketcap p').append('b') }   var date = new date(); var hours = date.gethours() > 12 ? date.gethours() - 12 : date.gethours(); var am_pm = date.gethours() >= 12 ? "pm" : "am"; //hours = hours < 10 ? "" + hours : hours; var minutes = date.getminutes() < 10 ? "0" + date.getminutes():date.getminutes(); var seconds = date.getseconds() < 10 ? "0" + date.getseconds() :date.getseconds(); time = hours + ":" + minutes + ":" + seconds + " " + am_pm; $('#time').html('as of ' + time);  $("#getquote").submit(function(event) { var newurl = 'http://dev.markitondemand.com/api/v2/quote/jsonp?symbol=' + $('#symbolinput').val(); $.ajax({url:newurl}); event.preventdefault(); }); } });

and here html looks (it's using bootstrap):

<!doctype html> <html lang="en">  <head>   <title>stock quotes</title>   <meta charset="utf-8" />   <meta name="viewport" content="width=device-width, initial-scale=1" /> </head>  <body>   <div id="quote-module" class="col-md-12">     <h1></h1>   </div>   <hr id='hrulefat' />   <div class="container">     <div class="row">       <div class='col-md-1' id='companyname'></div>     </div>     <div id='prices'>       <div class='row'>         <div id='lastprice' class='col-md-6 pull-left'></div>         <div id='changes'>           <div id='changepercent' class='col-md-3 pull-right'></div>           <div id='change' class='col-md-3 pull-right'></div>         </div>       </div>     </div>     <hr>     <div id='range'>       <p class='pull-right'></p>range</div>     <hr>     <div id='open'>       <p class='pull-right'></p>open</div>     <hr>     <div id='volume'>       <p class='pull-right'></p>volume</div>     <hr>     <div id='marketcap'>       <p class='pull-right'></p>market cap</div>     <hr>   </div>   <div class='row'>     <div id='time' class='col-md-6 pull-right'></div>   </div>   <hr>   <div id='getquoteform' class='row'>     <form class="form-inline" id='getquote'>       <div class="form-group" id='formgroup'>         <div class='col-xs-6'>           <input type="text" class="form-control" id="symbolinput">         </div>         <div class='col-xs-6'>           <button type="submit" class="btn btn-default">get new quote</button>         </div>       </div>      </form>   </div>   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>   <script src="script.js"></script>   <link rel="stylesheet" href="style.css" /> </body> </html>

wrap ajax code in function ala..

function fireajax(data){     $.ajax({      datatype: 'jsonp',      url: data.url,      success: function(data) {        $('h1').html(data.name);        $('.container #companyname').html(data.name);        $('#lastprice').html(data.lastprice.tofixed(2));     // etc... }

then, submit code outside function. now, "can" keep , add listener onto "submit click".. concept of same.

$("#getquote").submit(function(event) {   var newurl = 'http://dev.markitondemand.com/api/v2/quote/jsonp?symbol=' + $('#symbolinput' ).val();   fireajax({url:newurl});   event.preventdefault(); });

Comments

Post a Comment

Popular posts from this blog

javascript - Bootstrap Popover: iOS Safari strange behaviour -

i looking through twitter bootstrap documentation, , i'm interested in implementing dismissible popover when button clicked. here example bootstrap's docs: http://getbootstrap.com/javascript/#dismiss-on-next-click when press "dismissible popover" button os x safari browser works fine. when access same link above ios safari, button not work. is, popover not dismissed on click. why button not working ios safari? the example linked using data-trigger="focus" attribute. try changing data-trigger="click" . <a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="click" title="dismissible popover" data-content="and here's amazing content. it's engaging. right?">dismissible popover</a>
Read more

Magento/PHP - Get phones on all members in a customer group -

i working on custom magento extension. working around adminhtml part , i've created custom form there. here form code: <?php class vivasindustries_smsnotification_block_adminhtml_sms_sendmass_edit_form extends mage_adminhtml_block_widget_form { public function _preparelayout() { $extensionpath = mage::getmoduledir('js', 'vivasindustries_smsnotification'); $head = $this->getlayout()->getblock('head'); $head->addjs('jquery.js'); $head->addjs('vivas.js'); return parent::_preparelayout(); } protected function _prepareform() { $form = new varien_data_form(array( 'id' => 'edit_form', 'action' => $this->geturl('*/*/save', array('id' => $this->getrequest()->get...
Read more

session - Logging Out Using PHP -

i have seen other programs regarding can't seem make work. doing wrong? want achieve after user logged out, going previous pages become restricted. i have 3 php files: 1. sample.php - main page username , password filled in 2. successful.php - user's page after logging in 3. logout.php - destorys session hinder user access pages after logging out sample.php </html> <form action="" method="post"> <table> <tr> <td>username:</td> <td>password:</td> </tr> <tr> <td><input type="text" name="username"></td> <td><input type="password" name="password"></td> </tr> <tr> <td><input type="submit" value="submit" name="submit"></td> </tr> </table> </form> </html> <?php $servername = "localhost"; $username = ...
Read more