javascript - Basic Expressjs query -

the question might sound confusing , stupid. i've started nodejs.

anyways, i've form , when user submits want display html element response. so, used body parser , displayed jade view engine.

the problem - display result bodyparser, i've create html element variable beforehand p #{url} (it sits empty until response)and need response fadein can't view engine. there way share server side variable javascript file, can use jquery? what's best practice it?

what i've tried far - read bunch of question saying ajax wasn't able figure how response server file ajax. res.send res.json , other stuff didn't work.

index.jade

extends ../public/layouts/default  block content     #onlydiv         #onlydiv-inside             p paste url below shorten             form#urlform(action='/add', method='post')                 input#area(type='text' name='url', placeholder = 'www.facebook.com', autocomplete = 'off' required)                 input#button(type='submit')             p #{url}         

route

var express = require('express'); var url = require('.././models/first.js'); var router = express.router();   router.get('/', function(req,res) {     res.render('index');     res.end(); })  router.post('/add',function(req,res) {     var patt = /(www\.)?[-a-za-z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b([-a-za-z0-9@:%_\+.~#?&//=]*)/g;     var url = req.body.url;     if(patt.test(url) === false) {         res.render('index', {             url : 'invalid url'         })     } else {         res.render('index', {             url : 'invalid url'         })     } })  module.exports = router; 

to clarify, issue fading in element? if case move code post route jquery file first.

then like:

$('#urlform').on('submit', function(){     var patt = /(www\.)?[-a-za-z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b([-a-za-z0-9@:%_\+.~#?&//=]*)/g;     var url = $("input[name=url]").val();     if(patt.test(url) === false) {         $("#urlerr").html("invalid url").fadein("slow");         return false;     } });  <div id="onlydiv">   <div id="onlydiv-inside">     <p>paste url below shorten it</p>     <form id="urlform" action="" method="">       <input id="area" type="text" name="url" placeholder="www.facebook.com" autocomplete="off" required="required"/>       <input id="button" type="submit"/>     </form>     <p id="urlerr" style="display: none;"></p>   </div> </div> 

example fiddle