Question

我有一个问题，即jquery在提交表单时检测＆＃34;输入＆＃34; 键而不是鼠标点击提交按钮。

首次尝试时，提交按钮效果很好，之后只能使用输入键。

表格代码

    <a class="btn btn-xs btn-info"  onclick="gModal(<?php echo $group['Group']['id'];?>,'<?php echo $group['Group']['name'];?>')"><?php echo __('Edit'); ?></a>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <p id="groupId"></p>

                <?php echo $this->Form->create('Group',array('class'=>'edit-group'));?>
                <?php echo $this->Form->input('group_id',array('class'=>'group-id','type'=>'hidden'));?>
                <?php echo $this->Form->input('name',array('class'=>'form-control group-name','type'=>'text'));?>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <?php echo $this->Form->button('Save Changes',array('class'=>'btn btn-default'));?>
                <?php echo $this->Form->end();?>
            </div>
        </div>
    </div>
</div>

Jquery代码

//handle modal 
function gModal(groupId,groupName){
        console.log(groupId);
        $('.group-name').empty();
        $('.group-name').val(groupName);
        $('.group-id').val(groupId);
        $('#groupId').html(" ");
        $('#groupId').append(groupId);

        $('#myModal').modal('toggle');
    }


//handle form submit
    var request;

        function editGroup(){
            $('.edit-group').on('submit', function(event) {
                console.log('clicked form');
                event.preventDefault();

                var $form = $(this).find("input");
                var url = "<?php echo Router::url(array('plugin' => 'auth_acl','controller' => 'groups','action' => 'edit')); ?>";

                var serializedData = $form.serialize();

                request = $.ajax({
                    url: url,
                    type: 'post',
                    dataType: 'json',
                    data: serializedData,
                });

                request.done(function(data) {
                    console.log(data);
                    $('#myModal').modal('toggle');
                    $('#container').load('<?php echo $this->webroot; ?>auth_acl/groups');
                });

                request.fail(function(data) {
                    console.log(data);
                });

            });


        }


$(document).ready(function($) {
    editGroup();
});

我现在不知道。谢谢你的时间。

Answer 1

Replace

<?php echo $this->Form->button('Save Changes',array('class'=>'btn btn-default'));?>

This code with

 <? echo $this->Form->button('Submit Form', array('class'=>'btn btn-default','type' => 'submit'));?>

Button Type should be Submit

Answer 2

I think you can use onchange event for representing enter event. For example <button type="button" onchange="theFunction();">Submit</button>

Jquery检测＆＃34;输入＆＃34;按键而不是鼠标点击

2 个答案: