Node-ExpressのPOSTアクション後にEJSの要素のスタイルを変更する

Question

ユーザーがフォームに入力して[送信]ボタンを押した後に成功通知（Boostrap）を表示するフォームページがあります。私はdisplayプロパティにないnone（ブロック、インライン、インラインブロック）の成功の警告メッセージが表示されるように、後に変更するにはどうすればよい

#success_message { display: none; } 

：私のCSSではデフォルトで

<form class="well form-horizontal" action="/contact" method="post" id="contact_form"> 

... (input fields here) 

<div class="alert alert-success" role="alert" id="success_message"> Success 
    <i class="glyphicon glyphicon-thumbs-up" ></i> Thanks for contacting us, we will get back to you shortly. 
</div> 

<div class="form-group"> 
    <label class="col-md-3 control-label"></label> 
    <div class="col-md-6"> 
    <button type="submit" class="btn btn-warning" > Submit <span class="glyphicon glyphicon-send"></span></button> 
    </div> 
</div> 

、 Node-ExpressのPOSTアクション？

var router = express.Router(); 

router.post('/', function(req, res, next) { 

    const data = { 
     fname: req.body.name, 
     lname: req.body.lname, 
     ... 
     comment: req.body.comment 
    } 

    // insert data using SQL/MongoDB library 
    // refresh same page if success, the input elements cleared 
    // and show the success alert or fail alert div in rendered HTML 

     res.render('contact', { 
      fname :  '' 
      lname :  '' 
      ... 
      comment : '' 
     }); 

}); 

これはjQueryなしでも可能ですか？私はjQueryを使用しないことを好みます。

Answer 1

方法1：

GETリクエストの最初のレンダリングするsuccessプロパティを追加します。

router.get('/', function(req, res, next) { 
... 
... 
    res.render('contact', { 
     fname: '',    
     ........ 
     success: false 
    }); 
}); 

とPOSTで、あなただけのEJSで

router.post('/', function(req, res, next) { 
    ... 
    ... 
     res.render('contact', { 
      fname: '',    
      ........ 
      success: true 
     }); 
    }); 

を検証した後、上記の方法は、エラーのためにも使用することができ

<% if (success) { %> 
    <div class="alert alert-success" role="alert" id="success_message"> Success 
     <i class="glyphicon glyphicon-thumbs-up" ></i> Thanks for contacting us, we will get back to you shortly. 
    </div> 
<% } %> 

のように、あなたが何かを行うことができ、ファイルのようなもの。

方法2：

はCSSを変更するには、あなたの代わりにクラスやIDを変更することができ、少しあまりにも複雑です。

#id1 { 
... 
} 

#id2 { 
... 
} 

<div class="alert alert-success" role="alert" id=<%= success ? "id1" : "id2" %>> Success 
    <i class="glyphicon glyphicon-thumbs-up" ></i> Thanks for contacting us, we will get back to you shortly. 
</div> 

（いつもの代わりにIDの、クラスを変更します）