post checked checkbox value , get in node js and save in mongodb

my HTML code is :

<body>
    <form method="POST">
        <div>
            <input type="checkbox" name="color" value="red">red
            <br>
            <input type="checkbox" name='color' value="blue">blue
            <br>
            <input type="checkbox" name='color' value="Green">green
            <br>
            <input type="checkbox" name='color' value="black">black
            <br>
        </div>
        <br>
        <br>
        <div>
            <input type="checkbox" name='cars' value="benz">Benz
            <br>
            <input type="checkbox" name='cars' value="BMW">BMW
            <br>
            <input type="checkbox" name='cars' value="Kia">Kia
            <br>
            <input type="checkbox" name='cars' value="Mazzerati">Mazzerati
            <br>
        </div>
        <input type="button" onclick="sendOPT()" value="send">
    </form>
    <div id="show"></div>
</body>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    function sendOPT() {
        $.ajax({
            url: '/send',
            method: 'post'
        }).done(message => {
            $(show).html("its Done");
        })
    }
</script>

and i wanna to send checked checkBox item into my backend (node js) and save them into my database(Mongodb) i write my backend side like :

app.post('/send', async(req, res) => {
    try {
        console.log("start");
        const body = _.pick(req.body, ['colors', 'cars'])
        console.log(body);

        let test = new fav({
            favcolor: body.colors,
            favcar: body.cars
        })
        await test.save();
        console.log(test);
        res.send('ok')


    } catch (e) {
        res.status(400).json({
            ERROR: `Something wend wrong and err is ${e}.`
        })
    }
});

and when i checked and click for send , i have no thing, i have test my database and backend by any input like as raido or text and it working good, but in this situation,not working :(

please read and send me a response

Note that ( i use (express,Mongoose,body-parse,lodash,....)

1 answer

  • answered 2020-01-18 15:16 Shivaji Mutkule

    There are few changes required in HTML page

    1. Add action to form
    2. change button type to submit
    3. first checkbox name is changed to "colors" as per node.js code

      <form method="POST" action="send">
      <div>
          <input type="checkbox" name="colors" value="red">red
          <br>
          <input type="checkbox" name='colors' value="blue">blue
          <br>
          <input type="checkbox" name='colors' value="Green">green
          <br>
          <input type="checkbox" name='colors' value="black">black
          <br>
      </div>
      <br>
      <br>
      <div>
          <input type="checkbox" name='cars' value="benz">Benz
          <br>
          <input type="checkbox" name='cars' value="BMW">BMW
          <br>
          <input type="checkbox" name='cars' value="Kia">Kia
          <br>
          <input type="checkbox" name='cars' value="Mazzerati">Mazzerati
          <br>
      </div>
      <input type="submit" value="send">
      

      Above code is sending POST form data that I observed on network tab. Please check end to end with your backend code.

    OR

    You can use jquery AJAX as well but you forgot to add "data" attribute. Note: form data will not be automatically added to ajax call.