Question

每当调用ajax时，应重新加载页面，但不应在页面加载时清除所有表单字段

我的表单

<form method='post'>
 <input type='text' placeholder='product'/>
 <input type='number' placeholder='cost'/>
 <input type='number' placeholder='tax'/>
 <button type='button' id="cust_tax"  data-toggle="collapse" data-target="#cust_tax">Custom tax</button>
<input type='number' placeholder='new tax' id="cust_tax" class="collapse"/>
<input type='button' class='apply_tax'>New tax add</button>
<input type='submit'/>
</form>

当用户点击自定义税时，有一个ajax调用，它将new_tax保存在数据库中，并自动添加到列表中。

我的ajax

$(".tax_apply").click(function() {
 var tax_name = document.getElementById("tax_name").value;
 var tax_value = document.getElementById("tax_value").value;
 ajaxPost('/myurl',{'user':user,'tax_name':tax_name,'tax_value':tax_value},function(result){
                    alert('new tax added');
                //reload page
                    });
});

现在每当调用ajax并且用户添加新税时，它应该重新加载页面，但是他输入的表单字段不应该被清除

Answer 1

所以你可以做的是将一个事件监听器附加到表单字段，将键入的内容保存到localStorage中的对象，然后在页面加载时，您可以检索该内容并将其放回相应的字段中

以下是您可能做的事情的一个示例。

$(myCollectionOfFields).keyup(function(){
    $(myFormFields).each(function(){    
        var id = $(this).attr('id');
        var value = $(this).val();
       localStorage.setItem(id, value);

    });   
});

$( document ).ready(function() {
    $(myFormFields).each(function(){    
        var id = $(this).attr('id');
        var value = localStorage.getItem(id);

        $(this).val(value);

    }); 
});

我觉得我必须指出这感觉就像一个容易出错的解决方案（例如并非每个用户都允许localStorage），而且我会解决你提到的后端问题，而不是使用这种方法。

但它可以在理论上完成这项工作。

如何使用清除表单字段重新加载ajax调用页面？

1 个答案: