使用骨干提交表单

时间:2014-09-05 04:04:36

标签: javascript php jquery forms backbone.js

我使用 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>

主链

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({});

1 个答案:

答案 0 :(得分:2)

如果您只想清除表单,那么在success回调save方法中,只需添加一些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()然后显示一条消息,说明表单已成功提交。或者将它们重定向到提交成功页面。

相关问题