同一个表单中的两个提交按钮

Question

我有一个带有两个提交按钮的表单，一个用于创建，一个用于编辑

<div class="modal-footer">
    <button name="add" class="companyCreateSubmitBtn ladda-button btn btn-primary" data-style="zoom-in" data-spinner-size="25" onclick="CompanyCreate()">Add</button>
    <button name="edit" class="companyEditSubmitBtn ladda-button btn btn-primary" data-style="zoom-in" data-spinner-size="25" onclick="CompanyEdit()">Save</button>
</div>

这是我的 onclick 函数：

function CompanyCreate() {
    //work experience create
    $("#companyForm").submit(function (event) {
        //validate form
        if (!$(this).valid()) {
            return;
        }

        //serialize the form
        serializedForm = $(this).serializeArray();
        cvId = $("#CVId").val();
        serializedForm.push({ name: "cvId", value: cvId });

        //ajax post
        $.ajax({
            url: "@Url.Action("CompanyCreate", "CV")",
            type: "POST",
            data: serializedForm,
            beforeSend: function () {
                l.ladda("start");
            },
            success: function (result) {
                if (result.success) {
                    //add row to table
                    cTable.fnAddData([
                        result.id,
                        result.name,
                        result.title,
                        result.city,
                        result.country,
                        $.datepicker.formatDate("dd/mm/yy", new Date(parseInt(result.startdate.substr(6)))),
                        $.datepicker.formatDate("dd/mm/yy", new Date(parseInt(result.enddate.substr(6)))),
                        result.description,
                        "<button class='companyEditBtn btn'' title='Edit Work Experience'><i class='icon-pencil'></i></button>" + " " + "<button class='companyDeleteBtn btn'><i class='icon-trash'></i></button>"
                    ]);

                    //success
                    toastrSuccess(result.message);
                } else {
                    //fail
                    toastrError(result.message);
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                //fail
                toastrError(textStatus);
            },
            complete: function () {
                //stop ladda button loading
                l.ladda("stop");
                //hide modal
                $(".modal").modal("hide");
            }
        });

        //prevent default submit behaviour
        event.preventDefault();
        event.stopImmediatePropagation();
    });
}



function CompanyEdit() {
    //work experience edit
    $("#companyForm").submit(function (event) {
        //validate form
        if (!$(this).valid()) {
            return;
        }

        //serialize the form
        serializedForm = $(this).serialize();

        //ajax post
        $.ajax({
            url: "@Url.Action("CompanyEdit", "CV")",
            type: "POST",
            data: serializedForm,
            beforeSend: function () {
                l.ladda("start");
            },
            success: function (result) {
                if (result.success) {
                    //update row of table
                    cTable.fnUpdate([
                        result.id,
                        result.name,
                        result.title,
                        result.city,
                        result.country,
                        $.datepicker.formatDate("dd/mm/yy", new Date(parseInt(result.startdate.substr(6)))),
                        $.datepicker.formatDate("dd/mm/yy", new Date(parseInt(result.enddate.substr(6)))),
                        result.description,
                        "<button class='companyEditBtn btn'' title='Edit Work Experience'><i class='icon-pencil'></i></button>" + " " + "<button class='companyDeleteBtn btn' title='Delete Work Experience'><i class='icon-trash'></i></button>"
                    ], position);

                    toastrSuccess(result.message);
                } else {
                    toastrError(result.message);
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                toastrError(textStatus);
            },
            complete: function () {
                //stop ladda button loading
                l.ladda("stop");
                //hide modal
                $(".modal").modal("hide");
            }
        });

        //prevent default submit behaviour
        event.preventDefault();
        event.stopImmediatePropagation();
    });
}

每次我点击保存按钮时，它都会转到 CompanyCreate() 函数而不是 CompanyEdit() 函数，我做错了什么？

Answer 1

<div class="modal-footer">
    <button type="button" id="CompanyCreate" name="add" class="companyCreateSubmitBtn ladda-button btn btn-primary" data-style="zoom-in" data-spinner-size="25">Add</button>
    <button type="button" id="CompanyEdit"  name="edit" class="companyEditSubmitBtn ladda-button btn btn-primary" data-style="zoom-in" data-spinner-size="25">Save</button>
</div>

jquery代码是

      $(document).ready(function () {


        $("#CompanyCreate").click(function () {
            //your code here
        });
        $("#CompanyEdit").click(function () {
            //your code here
        });
    });

Answer 2

我使用的简单模式（基于 MVC）： 1. 创建自定义属性

[AttributeUsage(AttributeTargets.Method)]
public class MultipleButtonAttribute : ActionNameSelectorAttribute
{
    public string Name { get; set; }
    public string Argument { get; set; }

    public override bool IsValidName(ControllerContext controllerContext, string actionName, MethodInfo methodInfo)
    {
        var isValidName = false;
        var keyValue = string.Format("{0}:{1}", Name, Argument);
        var value = controllerContext.Controller.ValueProvider.GetValue(keyValue);

        if (value != null)
        {
            controllerContext.Controller.ControllerContext.RouteData.Values[Name] = Argument;
            isValidName = true;
        }

        return isValidName;
    }
}

2。控制器

MultipleButton(Name = "action", Argument = "Action1")

public ActionResult Action1(MyModel model)

{...}

[MultipleButton(Name = "action", Argument = "Action2")

public ActionResult Action2(MyModel model)")]

{...}

3。查看

@using (Ajax.BeginForm("Action1", "Search", new AjaxOptions { }))
{

   <button type="submit" name="action:Action1" >Action1</button>

   <button type="submit" name="action:Action2" >Action2</button>
}

Answer 3

防止在.click中使用.submit函数，它不起作用，你必须抓住表单并发布它。

否

$("#companyCreateSubmitBtn").click(function () {
    $("#companyForm").submit(function (event) {
        //validate form
        if (!$(this).valid()) {
            return;
        }

        //prevent default submit
        event.preventDefault();

        //ajax post etc...

是

$("#companyCreateSubmitBtn").click(function () {
    //get the form
    var form = $("#companyForm");
    //validate form
    if (!form.valid()) {
        return;
    }

    //ajax post etc..

记住你的按钮类型必须是 type="button" 而不是默认的 type="submit"

<button id="companyCreateSubmitBtn" name="add" class="ladda-button btn btn-primary" data-style="zoom-in" data-spinner-size="25" type="button">Add</button>

Answer 4

你可以这样做：

$('#companyForm').on('submit', function(e) {
	e.preventDefault(); // stops form from being submitted
  
  // get the clicked button name
  var clickedButton = $(document.activeElement).attr('name');
  
  if (clickedButton === 'edit') {
  	companyEdit();
  }
  
  if (clickedButton === 'add') {
  	companyAdd();
  }
});

function companyEdit() {
    // your code to edit company
	alert('editing company');
}

function companyAdd() {
    // your code to add company
	alert('adding company');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-footer">
    <form id="companyForm">
      <button name="add" class="companyCreateSubmitBtn ladda-button btn btn-primary" data-style="zoom-in" data-spinner-size="25">Add</button>
      <button name="edit" class="companyEditSubmitBtn ladda-button btn btn-primary" data-style="zoom-in" data-spinner-size="25">Save</button>
    </form>
</div>

更新

如果您不想使用前一个示例，您可以简单地执行以下操作。并不是说在 dom 中使用像 onclick 这样的事件被认为是不好的做法，应该在 javascript 中完成。

$('.companyEditSubmitBtn').on('click', function(e) {
    e.preventDefault(); // stops form from being submitted

  alert('editing company');
});

$('.companyCreateSubmitBtn').on('click', function(e) {
    e.preventDefault(); // stops form from being submitted

  alert('creating company');
});

这里正在工作js-fiddle