I have a node.js express application which is trying to make a post request and query the contents of a database. I am trying to execute the post request without have to redirect the user from the form page or reloading the page.

index.jade

form.well(id="newEntryForm", method="post", action="/addEntry")
    label Key:
    br
    input(name="key", id="key", class="new-entry", type="textbox")
    br
    br
    label Value:
    br
    input(name="value", id="value", class="new-entry", type="textbox")
    br
    br
    button.btn(type="submit") Add Entry

app.js

app.post('/addEntry', function(req, res){
   //database query
});

This ends up redirecting me to the URL localhost:3000/addEntry. I know I can add res.redirect("/"); within the callback for the post method, but that will reload the page. How do I acplish this without reloading the page?

EDIT

I added a javascript method to execute on submitting the form, but it ends up appending the POST request parameters on the URL bar. How do I avoid this?

Javascript method

$(function() {
    $('#newEntryForm').submit(function() {
        var data = {key: 'a', value: 'b'};
        // build a json object or do something with the form, store in data
        $.post('/addRule', data, function(resp) {
            alert(resp);
            console.log("post response: " + resp);
            // do something when it was successful
        });
    });
});

I have a node.js express application which is trying to make a post request and query the contents of a database. I am trying to execute the post request without have to redirect the user from the form page or reloading the page.

index.jade

form.well(id="newEntryForm", method="post", action="/addEntry")
    label Key:
    br
    input(name="key", id="key", class="new-entry", type="textbox")
    br
    br
    label Value:
    br
    input(name="value", id="value", class="new-entry", type="textbox")
    br
    br
    button.btn(type="submit") Add Entry

app.js

app.post('/addEntry', function(req, res){
   //database query
});

This ends up redirecting me to the URL localhost:3000/addEntry. I know I can add res.redirect("/"); within the callback for the post method, but that will reload the page. How do I acplish this without reloading the page?

EDIT

I added a javascript method to execute on submitting the form, but it ends up appending the POST request parameters on the URL bar. How do I avoid this?

Javascript method

$(function() {
    $('#newEntryForm').submit(function() {
        var data = {key: 'a', value: 'b'};
        // build a json object or do something with the form, store in data
        $.post('/addRule', data, function(resp) {
            alert(resp);
            console.log("post response: " + resp);
            // do something when it was successful
        });
    });
});

• javascript
• jquery
• node.js
• post
• express

• You need to use client-side Javascript and AJAX. – SLaks Commented Jun 12, 2014 at 20:07
• I tried doing so. I had some trouble executing the javascript method on submitting the form, also when I did get it to submit, the post request information was appended to the URL. Could you provide an example? – RagHaven Commented Jun 12, 2014 at 20:12

1 Answer 1

As a ment said, you need to use client side javascript+ajax.

$(function() {
    $('#newEntryForm').submit(function(event) {
        event.preventDefault(); // Stops browser from navigating away from page
        var data;
        // build a json object or do something with the form, store in data
        $.post('/addEntry', data, function(resp) {
            alert(resp);
            // do something when it was successful
        });
    });
});