Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by mfk dn
mfk dn
37 Points

Make two different 'POST' request from form

    <html>
        <body>
            <form method='POST'>
               <p>This is data from the databse</p>
               <input type='text' placeholder='Update the current text'>
               <button id="up">Update this</button>
               <button id="del">Delete this</button>
           </form>                       
         </body>
    </html>

I just want to add update and delete button in the form and send request to the express accourding. But how can I do so?

Here data loads from the mongo db. Then how to send different post requests from same form???

2 Answers

stjarnan
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
stjarnan
Front End Web Development Techdegree Graduate 56,488 Points
stjarnan
.a{fill-rule:evenodd;}techdegree seal-36
stjarnan
Front End Web Development Techdegree Graduate 56,488 Points

Hi mfk,

I would recommend you to use a different form for each request. Like if the user would like to update, you show the update form which on submit sends the request to express, if the user wants to delete an item you ask them if they are sure (good practice to ask before you delete something for good) and then send the delete request to express.

I hope that helps

Jonas

mfk dn
mfk dn
37 Points

Ofcourse it works. I have worked on that for the whole day and I have found that:

<body>
    <form method='POST'>
        <p>This is data from the databse</p>
        <input type='text' placeholder='Update the current text'>
        <button name="action" value="update" id="up">Update this</button>
        <button name="action" value="delete" id="del">Delete this</button>
        <!--req.body.action!-->
    </form>
</body>

In js file:-

console.log(req.body.action);
//logs the value of the button clicked!!
Alexander La Bianca
Alexander La Bianca
15,960 Points

If you want to use the same form for both requests, you can do an ajax request. Hook up each button to a separate handler. And then on your express server have a handler for each request

//Update handler
$('#up').on('click',function(e) {
       e.preventDefault();
       $.ajax({
               //configure you ajax request for the update here
              //by doing a post request to say: /update

        });
});

//Delete handler
$('#del').on('click',function(e) {
       e.preventDefault();
       $.ajax({
               //configure you ajax request for the delete here
              //by doing a post request to say: /delete
        });
});

Or you can just post it all to the same post route on your express server and there decide which action needs to be taken. So if the delete button was clicked - execute a delete in the mongodb. And of course if the update button was click - execute the update in the mongodb.

stjarnan
.a{fill-rule:evenodd;}techdegree seal-36
stjarnan
Front End Web Development Techdegree Graduate 56,488 Points

If you really want to use one route, Alexander La Bianca's solution is a great one.

stjarnan
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
stjarnan
Front End Web Development Techdegree Graduate 56,488 Points
stjarnan
.a{fill-rule:evenodd;}techdegree seal-36
stjarnan
Front End Web Development Techdegree Graduate 56,488 Points

I am not quite sure I understand what you're saying, mfk dn