兩個相同的表單中提交按鈕

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

防止在.click裏面使用.submit函數，它不起作用，你必須抓住表單併發布它。

NO

$("#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.. 

記住你的按鈕類型必須是類型= 「按鈕」，而不是默認類型= 「提交」

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

Answer 2

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

簡單圖案我使用（基於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 4

你可以做一些事情如下：

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

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

 
function companyAdd() { 
 
    // your code to add company 
 
\t 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>

UPDATE

如果你不希望使用前者的例子，你可以簡單地做到以下幾點。不是在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