Wednesday, 26 April 2017

Trigger multiple POST requests from a single HTML form

I'm building my first, basic CRUD app using NodeJS, Express, Mongoose and Handlebars. Title may suggest a possible solution, and as much as I think it is what I need, it would be better for me to explain what I want to achieve.

Firstly, I'm rendering a handlebars template using data from entire collection with the use of Mongoose.

router.get('/get_query', function(req,res) {
    regretModel.find({}).exec(function(err, result) {
        if (err) 
            throw err;
    }).then(function(MongoDBdata){ 
        var data = { items: [] };
        index = [];
        for(var i=0; i < MongoDBdata.length; i++){
        data.items.push({
            index: i+1,
            Name: MongoDBdata[i].Name,
            Category: MongoDBdata[i].Category,
            Frequency: MongoDBdata[i].Frequency,
            id: MongoDBdata[i]._id
        })}
        res.render('search', {all: data.items})
    })
})

Secondly, in handlebars template I am displaying all the data with the possibility of deleting any of the objects within the collection.


    <article class="item">
    <div class="cornerNumber"> </div>
    <ol>
        <li>Name:  </li>
        <br>
        <li>Category:  </li>
        <br>
        <li>Frequency:  </li>
        <br>
        </ol>
        <form method="POST" action="delete/" autocomplete="off">
        <button>DELETE</button>
        </form>
    </article>


Thirdly, I display three radio buttons for every object rendered using handlebars and give the user option to submit independently each object with two paramaters: ValueForm & Name.


    <article class="item">
    <div class="cornerNumber"> </div>
    <ol>
        <li>Name:  </li>
        <br>
        <li>Category:  </li>
        <br>
        <li>Frequency:  </li>
        <br>
        </ol>
        <form method="POST" action="post_form_data" autocomplete="off">
        <input type="radio" name="ValueForm" value="0" checked> 0
        <input type="radio" name="ValueForm" value="0.5"> 0.5
        <input type="radio" name="ValueForm" value="1"> 1
        <input type="hidden" name="Name" value="">
        <button>SUBMIT</button>
        </form>                
        <form method="POST" action="delete/" autocomplete="off">
        <button>DELETE</button>
        </form>
    </article>


Lastly, is exactly where I am stuck. How can I render a single form rendering all objects from the collection, and allow the user to click a single button to submit all values ? If I wrap a form around & then the name values inside radio buttons are the same, as if it was a single input.

I'd like to know how to do it in two ways:

  1. multiple small objects (multiple requests sent for each, I suppose?)
  2. single large object containing all data (but then need a dynamic schema?)

Any guidance or comment the question or code would be highly appreciated.

Thanks,



via user7861743

No comments:

Post a Comment