javascript - 使用主干提交表单

Question

已关闭。此问题需要 debugging details 。目前不接受答案。

---

编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem 。这将有助于其他人回答问题。

已关闭 8 年前。

Improve this question

我正在使用Backbone提交表单。该表单驻留在 html 页面(主页)中。当表单提交时，我使用主干模型的 .save() 方法将数据保存在数据库中。我使用 e.preventDefault(); 来阻止提交并捕获值。

问题是提交后表单保持不变，这意味着输入字段填充了以前的值。如果我再次提交表单，则以前的值会插入数据库中。

提交后如何使表单像第一个状态(空白)？

代码

HTML

<form  method="post" id="my_form">                    
     <input type="text" id="name" size="30"  required autofocus/>
     <input type="email" id="email " size="30" required/>
     <input type=" text " id="catagory" size="30" required/>                        
     <input type="submit"  value="Submit"/>
</form>

Backbone

var My_view = Backbone.View.extend(
{
    el: $("body"),
    events: 
    {
        "submit #my_form": "save"    
    }, 
    initialize: function()
    {
        _.bindAll(this,'save');
    },
    save: function(e)
    {  
        e.preventDefault();
        var name = $('#name').val();
        var email = $('#email').val();  
        var catagory = $('#catagory').val(); 

        var data = {
            name : name, 
            email : email, 
            catagory : catagory 
        };

        var my_model = new My_model();              

        my_model.save(data, 
        {
            success: function(model,response) 
            {
                alert(JSON.stringify(response));
            },
            error: function(model,response)
            {
                alert(JSON.stringify(response));     
            }
        }); 
    }
});


var my_view = new My_view({});

Answer 1

如果您只想清除表单，那么在对 save 方法的 success 回调中，只需添加一些 javascript 即可执行此操作，如下所示:

my_model.save(data, 
        {
            success: function(model,response) 
            {
                alert(JSON.stringify(response));
                $('#myForm')[0].reset(); //native javascript
            },
            error: function(model,response)
            {
                alert(JSON.stringify(response));     
            }
});

请记住，这会让您的用户感到困惑 - 如果他们按下提交，然后表单似乎只是删除了他们的回复。您最好隐藏表单: $('#myForm').hide() 然后显示一条消息，说明表单已成功提交。或者将他们重定向到提交成功页面。