Question

我有一个文本字段和一个提交此文本字段的按钮，看起来像

sudo -u mongodb mongod --dbpath SM:NodeTestApp101\data

提交文本字段后，我想将文本字段的值设置为空字符串并禁用该按钮。我在javascript中用

执行此操作

<form action="/library" method='POST'>
    {{ form_add_library_category.name(size=80, class="form-control", id="new_category_field", placeholder='New category', onkeyup="stoppedTyping()", style="height:35px;width:205px;display:inline;") }}
    <button type="submit" class="btn btn-primary add_button" id="add_category" style="display: inline;margin-top:-3px;height:35px">Add</button>
</form>

因此单击按钮时会自动提交表单。并且javascript部分删除文本字段中的值并禁用按钮。但是，我注意到这个设置有两个可能的结果。可能是javascript更快，在这种情况下，textfield设置为空值，并且使用表单提交空字符串。或者表单更快，在这种情况下，一切都按预期工作。有没有办法确保在提交表单后始终执行javascript函数？谢谢卡尔

编辑：在当前回复的基础上，我将我的javascript函数更改为

<script type="text/javascript">
$(document).ready(function(){
    $("#add_category").click(function(){ 
        document.getElementById('new_category_field').value = '';
        document.getElementById('add_category').disabled = true;
    });
});
</script>

可防止表单在提交前被清空。特别是Chrome似乎在提交之前清空了表单，因此似乎需要Timeout ...即使我认为它不是很好。无论如何，空字符串的设置值仍然不起作用？

Answer 1

HTML

<form action="/library" method="POST" id="form">
...

的jQuery

$(document).ready(function() {
    $('#form').submit(function(e) {
        e.preventDefault();
        this.submit();
        $('#new_category_field').val('');
        $('#add_category').prop('disabled', true);
    });
});

未经测试，但我认为它应该有效。

编辑：以防万一，停止默认操作，提交表单，然后清除值。

表单提交后重置文本字段

1 个答案: