jquery - Trigger enter key -
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <title>nutrition-dossier</title> <style type="text/css"> h1 { text-align: center; color: #000080; font-size: 60; } table, th, td { margin:10px 0; border:solid 1px #333; padding:2px 4px; font:15px verdana; } th { font-weight:bold; } table { margin-left: auto; margin-right: auto; } table { border-collapse: separate; border-spacing: 5px; background: #3090c7 url("gradient.gif") bottom left repeat-x; color: ; } td, th { background: #fff; color: #000; } .btngetnutrition { -moz-box-shadow:inset 0px 39px 0px -24px #e67a73; -webkit-box-shadow:inset 0px 39px 0px -24px #e67a73; box-shadow:inset 0px 39px 0px -24px #e67a73; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e4685d), color-stop(1, #eb675e)); background:-moz-linear-gradient(top, #e4685d 5%, #eb675e 100%); background:-webkit-linear-gradient(top, #e4685d 5%, #eb675e 100%); background:-o-linear-gradient(top, #e4685d 5%, #eb675e 100%); background:-ms-linear-gradient(top, #e4685d 5%, #eb675e 100%); background:linear-gradient(to bottom, #e4685d 5%, #eb675e 100%); filter:progid:dximagetransform.microsoft.gradient(startcolorstr='#e4685d', endcolorstr='#eb675e',gradienttype=0); background-color:#e4685d; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; border:1px solid #ffffff; display:inline-block; cursor:pointer; color:#ffffff; font-family:verdana; font-size:13px; font-weight:bold; font-style:italic; padding:6px 15px; text-decoration:none; text-shadow:0px 1px 6px #b23e35; } .btngetnutrition :hover { background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #eb675e), color-stop(1, #e4685d)); background:-moz-linear-gradient(top, #eb675e 5%, #e4685d 100%); background:-webkit-linear-gradient(top, #eb675e 5%, #e4685d 100%); background:-o-linear-gradient(top, #eb675e 5%, #e4685d 100%); background:-ms-linear-gradient(top, #eb675e 5%, #e4685d 100%); background:linear-gradient(to bottom, #eb675e 5%, #e4685d 100%); filter:progid:dximagetransform.microsoft.gradient(startcolorstr='#eb675e', endcolorstr='#e4685d',gradienttype=0); background-color:#eb675e; } .mybutton:active { position:relative; top:2px; } </style> <style style="text/css"> body { background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcsmt8kp8jgpmmtczmlayxcylkl-cpgc7gwcnppabtpadhraq2yirq"); background-size: 1350px 700px; background-repeat:no-repeat; } </style> </head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <h1><blink>nutrition dossier</blink></h1> <form> <center><font face="verdana" size="03" style="color:darkgreen" text="bold">enter food keyword: <input type="text" name="food" id="txtfood"></b></center><br /></font> <center><button id= "btngetnutrition" class= btngetnutrition type="button" value = 'get nutrition data'>get food details</button></center><br/><br/> <center><font face="verdana" size= "03" color="brown">search results below:</font></center> <div id="resultdiv"> </div> <br/> </form> <script> $('#btngetnutrition').click(function () { var resultelement = $('#resultdiv'); resultelement.html(''); $('#txtfood').keypress(function (e) { var key = e.which; if(key == 13) // enter key code { $('input[name = btngetnutrition]').click(); return false; } }); var requestdata = $('#txtfood').val(); if(requestdata=='') { alert('enter valid food keyword obtain nutrition dossier'); } var nutrientdataurl; var nutrientdata; var fooddataurl = 'https://api.nal.usda.gov/ndb/search/?format=json&q=' + requestdata + '&sort=n&max=01&offset=0&api_key=xahkl10hpcqkkmh8b9xai5uubchsx8ihvgouhwux'; var fooddata; $.getjson(fooddataurl, function(data) { fooddata = data; }).then(function() { nutrientdataurl = 'https://api.nal.usda.gov/ndb/nutrients/?format=json&api_key=xahkl10hpcqkkmh8b9xai5uubchsx8ihvgouhwux&nutrients=205&nutrients=204&nutrients=208&nutrients=269&ndbno=' + fooddata.list.item[0].ndbno; $.getjson(nutrientdataurl, function(data) { nutrientdata = data; }).then(function() { $('#resultdiv').append('<table><caption>' + nutrientdata.report.foods[0].name + '</caption><tr><th>nutrient</th><th>unit</th><th>value</th></tr>'); nutrientdata.report.foods[0].nutrients.foreach(function(item, index){ $('#resultdiv table').append('<tr><td>' + item.nutrient + '</td><td>' + item.unit + '</td><td>' + item.value + '</td></tr>'); }) $('#resultdiv table').append('</table>'); }).fail(function() { alert('failed'); }); }); }); </script> </body> </html> enter code here on hitting enter site should same clicking button.
when click enter button,it should display data without tap key keyboard.
at present data appearing if hit tab , enter.so, want functionality in program.
also,i want utilize source code [ upload in websites]
you using $('input[name=btngetnutrition]').click(); should use $('input[id=btngetnutrition]').click();
since button has id , not name
<button id="btngetnutrition" class="btngetnutrition" type="button" value='get nutrition data'>get food details</button>
you have $('#txtfood').keypress(function(e) inside $('#btngetnutrition').click(function(e) {. move $('#txtfood').keypress out of it.
i've added console.log("click trigger") inside click function can see triggers on enter keypress
working example
$('#txtfood').keypress(function(e) { var key = e.which; if (key == 13) // enter key code { console.log(key) $('#btngetnutrition').trigger("click"); return false; } }); $('#btngetnutrition').click(function(e) { console.log("click trigger") var resultelement = $('#resultdiv'); resultelement.html(''); var requestdata = $('#txtfood').val(); if (requestdata == '') { alert('enter valid food keyword obtain nutrition dossier'); } var nutrientdataurl; var nutrientdata; var fooddataurl = 'https://api.nal.usda.gov/ndb/search/?format=json&q=' + requestdata + '&sort=n&max=01&offset=0&api_key=xahkl10hpcqkkmh8b9xai5uubchsx8ihvgouhwux'; var fooddata; $.getjson(fooddataurl, function(data) { fooddata = data; }).then(function() { nutrientdataurl = 'https://api.nal.usda.gov/ndb/nutrients/?format=json&api_key=xahkl10hpcqkkmh8b9xai5uubchsx8ihvgouhwux&nutrients=205&nutrients=204&nutrients=208&nutrients=269&ndbno=' + fooddata.list.item[0].ndbno; $.getjson(nutrientdataurl, function(data) { nutrientdata = data; }).then(function() { $('#resultdiv').append('<table><caption>' + nutrientdata.report.foods[0].name + '</caption><tr><th>nutrient</th><th>unit</th><th>value</th></tr>'); nutrientdata.report.foods[0].nutrients.foreach(function(item, index) { $('#resultdiv table').append('<tr><td>' + item.nutrient + '</td><td>' + item.unit + '</td><td>' + item.value + '</td></tr>'); }) $('#resultdiv table').append('</table>'); }).fail(function() { alert('failed'); }); }); });h1 { text-align: center; color: #000080; font-size: 60; } table, th, td { margin: 10px 0; border: solid 1px #333; padding: 2px 4px; font: 15px verdana; } th { font-weight: bold; } table { margin-left: auto; margin-right: auto; } table { border-collapse: separate; border-spacing: 5px; background: #3090c7 url("gradient.gif") bottom left repeat-x; color: ; } td, th { background: #fff; color: #000; } .btngetnutrition { -moz-box-shadow: inset 0px 39px 0px -24px #e67a73; -webkit-box-shadow: inset 0px 39px 0px -24px #e67a73; box-shadow: inset 0px 39px 0px -24px #e67a73; background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #e4685d), color-stop(1, #eb675e)); background: -moz-linear-gradient(top, #e4685d 5%, #eb675e 100%); background: -webkit-linear-gradient(top, #e4685d 5%, #eb675e 100%); background: -o-linear-gradient(top, #e4685d 5%, #eb675e 100%); background: -ms-linear-gradient(top, #e4685d 5%, #eb675e 100%); background: linear-gradient(to bottom, #e4685d 5%, #eb675e 100%); filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#e4685d', endcolorstr='#eb675e', gradienttype=0); background-color: #e4685d; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; border: 1px solid #ffffff; display: inline-block; cursor: pointer; color: #ffffff; font-family: verdana; font-size: 13px; font-weight: bold; font-style: italic; padding: 6px 15px; text-decoration: none; text-shadow: 0px 1px 6px #b23e35; } .btngetnutrition :hover { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #eb675e), color-stop(1, #e4685d)); background: -moz-linear-gradient(top, #eb675e 5%, #e4685d 100%); background: -webkit-linear-gradient(top, #eb675e 5%, #e4685d 100%); background: -o-linear-gradient(top, #eb675e 5%, #e4685d 100%); background: -ms-linear-gradient(top, #eb675e 5%, #e4685d 100%); background: linear-gradient(to bottom, #eb675e 5%, #e4685d 100%); filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#eb675e', endcolorstr='#e4685d', gradienttype=0); background-color: #eb675e; } .mybutton:active { position: relative; top: 2px; } body { background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcsmt8kp8jgpmmtczmlayxcylkl-cpgc7gwcnppabtpadhraq2yirq"); background-size: 1350px 700px; background-repeat: no-repeat; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1> <blink>nutrition dossier</blink> </h1> <form> <center> <font face="verdana" size="03" style="color:darkgreen" text="bold">enter food keyword: <input type="text" name="food" id="txtfood"></b> </center><br /></font> <center><button id="btngetnutrition" class=b tngetnutrition type="button" value='get nutrition data'>get food details</button></center><br/><br/> <center> <font face="verdana" size="03" color="brown">search results below:</font> </center> </form> <div id="resultdiv"> </div> <br/>
Comments
Post a Comment