Question

我有一个带有文本框和提交按钮的表单。

<div style="float:left; padding:20px;">
<form id="crate_input" method="get">
    Create new crate: <input type="text" id="create">
    <input id="subbutton" type="submit" value="Submit">
</form>
<select id="crates">
    <option id="choose" value="choose" selected>Choose a crate</option>
    <option id="default_crate" value="default_crate">default_crate</option>
</select>
</div>

用户交互在单独的java脚本文件中处理。

$('#subbutton').click(function(event) {
    $.ajax({
        url: OC.linkTo('crate_it', 'ajax/bagit_handler.php'),
        type: 'get',
        dataType: 'text/html',
        data: {'action':'create', 'crate_name':$('#crate_input #create').val()},
        success: function(data){
            $('#crates option').filter(function(){
            return $(this).attr("id") == data.responseText;
        }).prop('selected', true);
    }
    });
});

但问题是当我为箱子输入名称并按下提交按钮时，它有时不会创建箱子。它似乎刷新了页面，但还没有创建新的包。有人知道这里有什么问题吗？

Answer 1

错误的是你没有停止默认表单提交。

$('#crate_input').submit(function(){ return false; });

应解决您的问题。

Answer 2

您不会阻止正常提交表单，因此在ajax调用返回之前会重新加载页面：

$('#subbutton').click(function(event) {
    $.ajax({
      ...
    });
    return false;
});

此外，来自return ajax处理程序的success无意义，因为
1. - 按钮点击完成后执行良好;
2. - 调用此处理程序的代码不期望任何返回值。

Answer 3

如果不知道'ajax / bagit_handler.php'的反应，就很难回答这个问题。但是我注意到以下内容

您似乎在服务器上创建了一个包，但您正在使用HTTP GET。不建议将GET用于影响服务器状态的操作。
响应数据类型以text / html格式提供。并将响应HTML与$（this）.attr（id）进行比较，其中我什么都不懂。在该上下文中，这指的是AJAX处理程序。我不确定你到底想要做什么。
最好在$（'crate_input'）上执行表单处理.resent（）而不是$（'＃subbutton'）。click（）。

如果可能的话，请添加一个jsfiddle来说明你在做什么。

点击提交按钮始终不起作用

3 个答案: