表格有问题

Question

如何使用 Enter key

提交表单

我可以使用 button click

提交表单

这是我的代码：

<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" />
        </div>  
    </div>   
    <div class="col-sm-9">
        <button type="button" data-style="expand-right" id="btn_reg" class="btn btn-info ladda-button">
    </div>
</form>

Answer 1

您可以为此使用 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 2

在您的代码中添加以下脚本

<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 3

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

type="button"不会在输入时提交表单 type="submit" 因此它将在输入时提交表单

 type="submit"

Answer 4

为您的输入添加一个侦听器以检查 Javascript 中的正确键码。注意 onkeydown-attribute 添加到您的输入

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

});

表格有问题

Having Issue with form

html

submit