2017-11-19 8 views
0

selectタグの下で選択されたオプションの値を取得しようとしています。下は私のejsファイルのスニペットで、node.js Expressフレームワークサーバー側の言語として。以下は食品のオプションです。オプションが選択されるとすぐに、データベースから価格でテキストフィールドを取得する必要があります。選択した食品の価格を表示するには、まず選択した商品の価格が必要です。これは私が立ち往生している部分です。私はアイテムを選択するとすぐに同じようにイベントをトリガする方法を知らない。誰か助けてくれますか?前もって感謝します。 この私が午前のHTMLファイルされる: - :node.jsを使用してselectタグの選択されたオプションの値にアクセスします。

const mysql = require('mysql'), 
    express = require('express'), 
    path = require('path'), 
    parser = require('body-parser'), 
    router = express.Router(); 

var conn = mysql.createConnection({ 
    host: "localhost", 
    user: "root", 
    password: "0440", 
    database: "kfc" 
}) 

conn.connect(function(err){ 
    if(err) throw err; 
    console.log("Database connected") 
}) 

app = express(); 
app.use(parser()); 
app.use(express.static(path.join(__dirname, 'public'))); 

app.get('/login', function(req, res){ 
    res.sendFile(__dirname + '/public/login.html'); 
}) 

app.get('/dashboard', function(req, res){ 
    res.render('pages/dashboard.ejs') 
}) 

app.post('/dashboard', function(req, res){ 
    conn.query("select id from login where id = ? and pwd = ?", [req.body.login, req.body.pwd], function(err, result, fields){ 
     console.log(result); 
     if(err) throw err; 

     if(result.length > 0){ 
      res.redirect('/dashboard'); 
      console.log("Credentials verified") 
     }else{ 
      console.log("Credentials incorrect"); 
      res.redirect('/') 
     } 
    }) 
}) 

app.post('/bill', function (req, res) { 
    console.log("Hello"); //statement not getting executed 
    //HERE I AM TRYING TO CATCH THE VALUE OF THE SELECTED OPTION AND PASS IT INTO A QUERY 
}); 
app.listen(8080); 
+0

多くのコンテキストがありません。 node.jsはサーバー上にあり、選択ボックスはブラウザーにあります。あなたのサーバーは、ブラウザで誰かが選択したことをどのように知っていますか?それは、Fredが日本の家にいるアラスカとウィルマの家にいるとき、フレッドがテーブルに置かれた飼育されたウィルマを食べることができない理由を尋ねるようなものです。さて、それはまったくそうではありませんが、それは私が思い付くことができる最も愚かな類推です。 –

答えて

0

フォーム要素は名前がフォームを実行することができるようにするために属性を持っている必要があります - 以下

<!DOCTYPE html> 
<html> 
<head> 
    <title>Dashboard</title> 
</head> 
<body> 
<form action="/bill" method="post"> 
    <div class="dropdown"> 
     <select id="foodItem0"> 
      <option></option> 
      <option value="veg_hak_nood">Veg Hakka Noodles</option> 
      <option value="alo_par">Aloo Paratha</option> 
      <option value="pan_par">Panner Paratha</option> 
     </select> 
     <div class="text"><input type="text" id="rate" name="rate" size="2" 
     readonly value="0"></div> 
     <div class="btn"> 
      <button type="button" id="submit" onclick="submit()">Submit</button> 
      <button type="button">Reset</button> 
     </div> 
    </div> 
     <script> 
      document.getElementById('submit').onclick=function(){ 
      rate.value=foodItem0.value; 
     } 

     </script> 
</form> 
</body> 
</html> 

がapp.jsファイルです自動的に送信します。 ただし、フォームの送信をトリガーするメカニズムも必要です。これを行うには、javascriptまたはhtmlを使用することができます。

サーバー側では、特定の呼び出しが行われたときにトリガーされる以下のような機能が必要です。リクエストの提出方法に応じて、req.urlまたはreq.bodyのいずれかのデータを検索する必要があります。

const http = require("http"); 

function request_handler(req, res){ 
    let url_parts = url.parse(req.url, true); 
    console.log(url_parts) 
    console.log(req.body) 
    res.end(JSON.stringify("thanks for the request")) 
} 
const server = http.createServer(request_handler) 
server.listen(80, (err)=>{ 
    if(err) return console.log("error", err); 
    console.log("server listening on", port_num) 
}) 

私はあなたの質問に答えようとしました。 しかし、適切な答えを出すためには、フォームをどのように提出しているのか、どのタイプのリクエストをサーバーに送信しているのかを本当に知る必要があります。

+0

今、私は複数の問題を抱えていることを知りました。私を助けてくれてありがとう@WouldBeNerd。だから、私はそれらに遭遇するにつれ、ますます疑問を抱くようになるでしょう。 - オプションの1つを選択するとすぐに、テキストフィールドにはデータベースからフェッチされるレートが表示されなければなりません。したがって、selectイベントをトリガする必要があります。このアクションを実行するには? –

+0

@Aman Mathurは既に持っているhtmlページを表示できます。 jsスクリプトファイルを使用している場合は、それも追加します。ライブラリサーバー側を使用していますか?私はあなたにいくつかの基本的な知識が欠けていると思います。いくつかのチュートリアルを最初に実行することをお勧めします。 – WouldBeNerd

+0

私は自分のクエリを更新しました。あなたは一見を持つことができます。 –

関連する問題