Question

如何使用HTML5

提交表单

我可以使用Enter key

提交表单

这是我的代码：

button click

Answer 1

<button type="button" data-style="expand-right" id="btn_reg" class="btn btn-info ladda-button">

type="button"不会在输入时提交表单 type="submit"所以它会在回车

上提交表格

 type="submit"

Answer 2

在输入中添加一个监听器，以检查Javascript中的正确密钥代码。注意添加到输入的onkeydown属性

HTML：

<form role="form" method="post" class="form-horizontal" id="leave_days">
    <div class="form-group">
        <label class="col-sm-2 control-label">Category Name</label>
            <div class="col-sm-9">
                <input type="text" name="txt_catname" id="txt_catename" class="form-control" placeholder="Enter Category Name" onkeydown="checkForEnter(this, event);" />
            </div>  
    </div>

    <div class="col-sm-9">
        <button type="button" data-style="expand-right" id="btn_reg" class="btn btn-info ladda-button">Submit</button>
    </div>
</form>

在输入的键码13上，获取表格并提交。

使用Javascript：

function checkForEnter(element, event) {
    if(event.keyCode == 13) // 13 is enter
        document.getElementById("leave_days").submit();
}

https://jsfiddle.net/8L5t119L/

或者只需将您的按钮更改为表单标记内的提交输入，如下所示：

<input type="submit" data-style="expand-right" id="btn_reg" class="btn btn-info ladda-button" value="Submit" />

Answer 3

您可以使用jQuery：

<script type="text/javascript">
    $(document).ready(function () {

        var makeAllFormSubmitOnEnter = function () {
            $('form input, form select').live('keypress', function (e) {
                if (e.which && e.which == 13) {
                    $(this).parents('form').submit();
                    return false;
                } else {
                    return true;
                }
            });
        };

        makeAllFormSubmitOnEnter();
    });
</script>

Answer 4

在代码中添加以下脚本

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $('#txt_catename').keypress(function (e) {
          if (e.which == 13) {
            $("#leave_days").submit();
          }
        });
    });
</script>

Answer 5

最后我得到了回答

$("#leave_days").keyDown(function(e)){
                var fromto = $("#txt_catename").val();
                var key = e.which;
                if (key == 13) {
                    if(fromto ==""){
                        alert("Please Enter Category Name");
                        document.getElementById('txt_catename').focus();
                        return false;
                    }
                    if(fromto !=""){

                    $.ajax({
                    type : "post",
                    url : "category-mgt/ajax/add-cat.php",
                    data : "category="+fromto,
                    success : function(data) {
                        //alert(data); return false;
                        if (data==1) {  
                            alert('Category Added'); 
                            $('#leave_days').trigger("reset");
                            $('#dataTable').DataTable().ajax.reload();                          
                        }else if(data==2){
                            alert('Category Allready Exist'); 
                            $('#leave_days').trigger("reset");
                        } else {
                            alert('something is going wrong please check this..');
                            return false;
                            //location.reload();
                        }
                    }
                });

              }
                return false;
            }               
        });

});

有表格问题

5 个答案: