javascript - Why is POST method sending form data twice to the server? - Stack Overflow

admin管理员组

文章数量:1391987

Why is this form sending data twice? Also, the second time, the data is "undefined".

The form:

<form action="/loginPage" method="POST" >

        Username: <input type="text" id="username"> <br><br>
        Password: <input type="text" id="password"> <br><br>

        <input type="submit" id="Login" value="Login" > 

    </form>

The client-side script:

$(document).ready(function(){

    $('form').submit(function(event){

    //event.preventDefault(); This prevents from sending data twice, but     then the page doesn't redirect to "Hi, <username>"

      $.post("/loginPage",{username: $("#username").val(),password: $("#password").val()}, function(data){
            ;
        });

    });
  });

The server-side script:

app.post('/loginPage', function(req, res) {

var username = req.body.username;
console.log("Now, "+username);
res.send("Hi, "+username);

//res.sendFile(__dirname + '/lobby.html');
});

This is the output I get when I run this code:

Hi, Sho
Hi, undefined

I'm stuck at this one for the past whole day. Please help me.

Why is this form sending data twice? Also, the second time, the data is "undefined".

The form:

<form action="/loginPage" method="POST" >

        Username: <input type="text" id="username"> <br><br>
        Password: <input type="text" id="password"> <br><br>

        <input type="submit" id="Login" value="Login" > 

    </form>

The client-side script:

$(document).ready(function(){

    $('form').submit(function(event){

    //event.preventDefault(); This prevents from sending data twice, but     then the page doesn't redirect to "Hi, <username>"

      $.post("/loginPage",{username: $("#username").val(),password: $("#password").val()}, function(data){
            ;
        });

    });
  });

The server-side script:

app.post('/loginPage', function(req, res) {

var username = req.body.username;
console.log("Now, "+username);
res.send("Hi, "+username);

//res.sendFile(__dirname + '/lobby.html');
});

This is the output I get when I run this code:

Hi, Sho
Hi, undefined

I'm stuck at this one for the past whole day. Please help me.

• javascript
• node.js
• express

Share Improve this question Follow edited Jan 17, 2015 at 16:16 Alan Wells 31.3k1616 gold badges112112 silver badges162162 bronze badges asked Jan 17, 2015 at 15:35 ShonaliShonali 6722 silver badges55 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

When you submit the first time, jQuery fires and sends the POST through AJAX. The second submit is the HTML form firing. You want to stop the HTML form from submitting and use your custom handler instead.

The reason you're getting undefined is because you don't have name attributes on the inputs in your form.

You should return false; in your jQuery handler to prevent the form from firing, and do something with the response data as well.

Your code is posting via ajax, but it's not preventing the ordinary browser action of posting the form. You don't get any parameters from the normal form post because your <input> elements don't have "name" attributes.

You can return false; from the "submit" handler to prevent the normal form submission.

Try this instead: return false in your form onsubmit to prevent it from submitting twice <form action="/loginPage" method="POST" onSubmit="return false" >

本文标签： javascriptWhy is POST method sending form data twice to the serverStack Overflow