多个提交输入，根据单击的输入执行某些操作

时间：2014-08-29 12:54:03

标签： javascript jquery html forms

我遇到了路障。我在表单中有3个不同的按钮submit，delete和cancel。根据被击中的那个，它应该获得输入名称或ID。我目前删除按钮的代码就是这个。

if ($("input[value=delete]").click()) {
    myApp.alert($(this).attr("name"));
    myApp.confirm('Are you sure?', 'Delete Staff', function () {
        check_url(url, "delete");

    });
    return false;
}

以下是check_url()函数，如果有帮助的话：

function check_url(recieve_url, type) {
    if (recieve_url == undefined || recieve_url == null) {
        alert("recieve_url is not set!");
    }
    $.ajax({
        url : recieve_url,
        type : 'POST',
        dataType : 'json',
        data : "type="+type,
        success : function (result) {
            //alert(result['bg'] + result['message'] + result['caption'])
            myApp.alert(result['message'], result['title']);
            if (result['redirect'] != null || result['redirect'] != undefined){
                window.location = "<?php echo $this->url;?>"+result['redirect'];
            }
            //notify_response(result['message'], result['bg'], result['caption']);
        },
        error : function (xhr, ajaxOptions, thrownError) {
            myApp.alert(xhr.responseText);
            myApp.alert(xhr.status);
            myApp.alert(thrownError);
        }
    })

}

我尝试了else if并使用了"input[value=submit]"，但其他提交按钮将改为使用此delete。有什么我目前缺少的吗？

修改 

<form onsubmit="return submit_edit(this.action);" method="post" action="<?php echo $this->url."Staff/EditSubmit/".$value['id']; ?>">
    <div class="content-block-title"><?php echo $value['first_name'].' '.$value['last_name']?></div>
    <div class="list-block inset">
        <ul>
            <li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">Phone Number</div>
                        <div class="item-input">
                            <input type="tel" value="<?php echo $value['phone_number']?>">
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">Address</div>
                        <div class="item-input">
                            <input type="text" value="<?php echo $value['address']?>">
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <label class="label-checkbox item-content">
                    <!-- Checked by default -->
                    <?php if($value['admin'] == 1): ?>
                        <input type="checkbox" name="admin_check" value="true" checked="checked">
                    <?php else: ?>
                        <input type="checkbox" name="admin_check" value="false">
                    <?php endif ?>
                    <div class="item-media">
                        <i class="icon icon-form-checkbox"></i>
                    </div>
                    <div class="item-inner">
                        <div class="item-title">Admin</div>
                    </div>
                </label>
            </li>
            <li>
                <label class="label-checkbox item-content">
                    <!-- Checked by default -->
                    <?php if($value['staff'] == 1): ?>
                        <input type="checkbox" name="staff_check" value="true" checked="checked">
                    <?php else: ?>
                        <input type="checkbox" name="staff_check" value="false">
                    <?php endif ?>
                    <div class="item-media">
                        <i class="icon icon-form-checkbox"></i>
                    </div>
                    <div class="item-inner">
                        <div class="item-title">Staff</div>
                    </div>
                </label>
            </li>
            <li>
                <label class="label-checkbox item-content">
                    <!-- Checked by default -->
                    <?php if($value['disabled'] == 1): ?>
                        <input type="checkbox" name="disabled_check" value="true" checked="checked">
                    <?php else: ?>
                        <input type="checkbox" name="disabled_check" value="false">
                    <?php endif ?>
                    <div class="item-media">
                        <i class="icon icon-form-checkbox"></i>
                    </div>
                    <div class="item-inner">
                        <div class="item-title">Disabled</div>
                    </div>
                </label>
            </li>
            <li>
                <label class="label-checkbox item-content">
                    <!-- Checked by default -->
                    <?php if($value['active'] == 1): ?>
                        <input type="checkbox" name="active_check" value="true" checked="checked">
                    <?php else: ?>
                        <input type="checkbox" name="active_check" value="false">
                    <?php endif ?>
                    <div class="item-media">
                        <i class="icon icon-form-checkbox"></i>
                    </div>
                    <div class="item-inner">
                        <div class="item-title">Active</div>
                    </div>
                </label>
            </li>
        </ul>
    </div>
    <div class="list-block inset">
        <div class="row">
            <div class="col-33">
                <input id="submit" type="submit" name="submit" value="Submit" class="button button-big button-fill color-green">
            </div>
            <div class="col-33">
                <input id="delete" type="submit" name="delete" value="Delete" class="button button-big button-fill color-red">
            </div>
            <div class="col-33">
                <input id="cancel" type="submit" name="cancel" value="Cancel" class="button button-big button-fill color-blue">
            </div>
        </div>
    </div>
</form>

以下功能：

function submit_edit(url) {
    if ($("input[value=delete]").click()) {
        myApp.confirm('Are you sure?', 'Delete Staff', function () {
            check_url(url, "delete");
        });
        return false;
    }
}

我忘了在开头添加功能名称。

5 个答案:

答案 0 :(得分：0)

您需要使用事件处理程序而不是条件语句来处理click事件，如下所示：

$("input[value=delete]").click(function() {
    myApp.alert($(this).attr("name"));
    myApp.confirm('Are you sure?', 'Delete Staff', function () {
        check_url(url, "delete");
    });
    return false;
});

...因为if ($("input[value=delete]").click())将始终返回true。

原因是：您实际上提出 click() - 事件而不是检查现有条件。但是......你仍然得到一个响应，导致条件检查返回true，这就是为什么无论你点击什么按钮，这段代码总是运行的原因：）

您还可以使用以下方法获取所有按钮的点击次数：

$("input").click(function() {
    // Check for value of $(this).attr("value") and act accordingly
    if ($(this).attr("value") == "delete") 
    {
        // Do delete-stuff
    }
    else if ($(this).attr("value") == "submit") 
    {
        // Do other stuff
    }
});

答案 1 :(得分：0)

你应该做这样的事情我猜：

$("input[value=delete]").click(function(){
    myApp.alert($(this).attr("name"));
    myApp.confirm('Are you sure?', 'Delete Staff', function () {
        check_url(url, "delete");
    });
    return false;
});

答案 2 :(得分：0)

如果你想将所有按钮指向一个公共位置，但根据点击的按钮稍微改变一下，你可以这样做：

$(function () {
    // A single click event handler to all the submit buttons.
    $('input[type=submit]').on('click', function (event) {
        // Prevent the default behavior for the form submit.
        event.preventDefault();

        // The value of the clicked one.
        var buttonValue = $(this).attr('value');

        // Carry on with your code...
        if (buttonValue == 'delete') {
            myApp.confirm('Are you sure?', 'Delete Staff', function () {
                check_url(url, "delete");
            });   
        }
        else if (buttonValue == 'submit') {

        }
        else {

        }
    });
});

<强>更新

在评论中聊天后，我相信这就是你实际上的目标：

将此添加到您的表单：

<!-- This field will hold which submit button has been clicked -->
<input type="hidden" name="clicked" id="clicked" value="" />

改变你的剧本：

function submit_edit(url) {
    // Check which submit button has been clicked
    // by getting the hidden input value.
    var value = $('#clicked').val();

    if (value == 'delete') {
        myApp.confirm('Are you sure?', 'Delete Staff', function () {
            check_url(url, "delete");
        });   
    }
    else if (buttonValue == 'submit') {

    }
    else {

    }
}

$(function () {
    // A single click event handler to all the submit buttons.
    $('input[type=submit]').on('click', function () {
        // The value of the clicked one.
        var buttonValue = $(this).attr('value');

        // Store the value in the hidden field.
        $('#clicked').val(buttonValue);
    });
});

答案 3 :(得分：0)

为什么不将不同的函数调用绑定到不同的输入标记。像：

<input type="submit" value="Submit" onclick="javascript:SubmitClicked(parameters)">

对于删除按钮

<input type="submit" value="Delete" onclick="javascript:DeleteClicked(parameters)">

答案 4 :(得分：0)

首先，您通常不希望在表单上有多个提交按钮（正如您遇到的那样，哪一个触发提交可能会有问题）。相反，选择一个提交按钮和另外两个按钮。除此之外，我会从表单中删除onclick属性（这是不必要的，如果你定位按钮本身的点击事件，它也是多余的。）

您应该将提交视为之后发生的事情您已完成任何预处理以便对点击事件进行绑定，然后有条件地提出提交优于始终提交但有条件地停止提交。

话虽如此，您可以使用以下代码绑定到按钮的click事件和提交：

您需要使用JQuery的事件参数来帮助您识别源，如下所示：

<div id="actions">
    <form>
        <input type="submit" id="first-button" value="Submit" />
        <br />
        <input type="button" id="second-button" value="Delete" />
        <br />
        <input type="button" id="third-button" value="Cancel" />
    </form>
</div>
<script type="text/javascript">
$(function () {
    //Setup the click for all of the buttons (these could be hyperlinks or any other element as well).
    $("#actions").find("input[type='submit'], input[type='button']").click(function (e) {
        //Do some conditional stuff based on the element that triggered the event
        var sender = $(e.currentTarget);
        switch (sender.val()) {
            case "Delete":
                var shouldDelete = confirm("Are you sure you want to delete?");
                break;
            case "Submit":
                alert("Submit clicked.");
                $("#actions").find("form").submit();
                break;
            case "Cancel":
                alert("Cancelled.");
                break;
            default:
                alert("Unknown clicked.");
                break;
        } // end switch
        e.preventDefault();
    });
});
</script>

这是一个小提琴：http://jsfiddle.net/xDaevax/rhLdxjzj/

JQuery的事件参数e包含许多有关触发事件的元素的有用信息。请参阅此处的JQuery文档：http://api.jquery.com/on/

相关问题
最新问题