CODEWITHSUNDEEP
javascriptnode.jsejs
Sumit Aggarwal
Sumit Aggarwal

Reputation: 841

How to submit a form without refresh in node.js and ejs?

<form action="" method="post">
    <div class="bottom_wrapper clearfix">
    <div class="message_input_wrapper" id="eventForm">

    <input class="message_input" name="msg" placeholder="Type your message here..." />
        </div>

    <input type="submit" name="submit">
        <div>

</form>   

<script>
    $('#eventForm').submit(function (e) {
        e.preventDefault();
        var fd = new FormData($(this)[0]);
        $.ajax({
            url: '/messages/'<%= id %>,
            data: fd,
            processData: false,
            contentType: false,
            type: 'POST',
            success: function(data){
                console.log(data);
            }
        });
    });

</script>

The above code I am using in front end and in the node.js controller

 BASE.APP.post('/messages/:id', function(req,res)
     {
      var body = req.body;
         console.log('postdata',body);

     });

While post the data it's give me blank.
Actually it's a chat msg window where I want to send msgs without refresh the page.

Upvotes: 0

Views: 2762

Answers (1)

adeneo
adeneo

Reputation: 318212

The form doesn't have the ID eventForm, that's a DIV, which doesn't have a submit event.

Add the ID to the form instead of the DIV.
Also, you have a typo, one of the closing </div> tags aren't really closing anything, but opening.

<form action="" method="post" id="eventForm">
    <div class="bottom_wrapper clearfix">
        <div class="message_input_wrapper">
            <input class="message_input" name="msg" placeholder="Type your message here..." />
        </div>
        <input type="submit" name="submit">
    </div>
</form>   

<script type="text/javascript">
      $('#eventForm').submit(function (e) {
          e.preventDefault();
          var fd = new FormData(this);

          $.ajax({
               url: '/messages/'<%= id %>,
               data: fd,
               processData: false,
               contentType: false,
               type: 'POST',
               success: function(data){
                   console.log(data);
               }
          });
     });
</script >

Upvotes: 1

Related Questions