取消MVC表單提交

我使用AJAX提交表單。這些字段在部分視圖中發送到控制器操作。局部視圖位於當主窗體上的按鈕被點擊時彈出的div。如果用戶完成表單並單擊提交按鈕，則更新在控制器操作中執行，一切正常。但是，如果用戶改變主意，我想添加一個取消按鈕來隱藏表單。添加按鈕並隱藏表單按預期工作，但仍然發生對控制器操作方法的調用。我嘗試過使用取消MVC表單提交

e.preventDefault();

但是這一直沒有奏效。

我試過使用附加到取消ID的第二個JQuery方法，但我無法得到這個工作。

我JQuery的是這樣的：

$('#VisitorModal').on('submit', '#visitorform', function (e) { 
    var data = $(this).serialize(); 
    var url = '@Url.Action("CreateVisitor", "Meetings")'; 
    var text = $('#title').val() + ' ' + $('#firstname').val() + ' ' + $('#surname').val() + ' (' + $('#company').val() + ')'; // a value from the form that you want as the option text 
    $.post(url, data, function (response) { 
     if (response) { 
      $('#VisitorID').append($('<option></option>').val(response).text(text)).val(response); 
     } else { 
      dialog.hide(); 
     } 
    }).fail(function() { 
     dialog.hide(); 
    }); 
    dialog.hide(); 
    e.preventDefault(); 
    //return false; // cancel the default submit 
}); 

$('#cancel').on('click', function() { 
    dialog.hide(); 
});

這是我的操作方法：

[HttpPost] 
public JsonResult CreateVisitor(AppointmentViewModel model) 
{ 
    var visitor = new Visitor() 
    { 
     Title = model.VisitorTitle, 
     FirstName = model.VisitorFirstName, 
     LastName = model.VisitorSurname, 
     Company = model.VisitorCompany 
    }; 
    db.Visitors.Add(visitor); 
    db.SaveChanges(); 
    return Json(visitor.id); 
}

，並提交&這裏取消按鈕：

<div class="form-group"> 
    <div class="col-md-offset-2 col-md-5"> 
     <input type="submit" value="Create" class="btn btn-success" id="submit" /> 
     <input type="button" value="Cancel" class="btn btn-warning" id="cancel" /> 
    </div> 
</div>

沒有人有任何建議，可能會像我希望的那樣工作？

來源

2016-08-18 Jason James

更改您取消按鈕到'type =「按鈕」'所以它不會通過使用type =「submit」來提交 –

您正在提交表單是否提交或取消單擊這就是爲什麼它從雙方提交表格 –

我已將類型更改爲按鈕，並將點擊事件連接起來，但沒有運氣。編輯上面的代碼以反映更改。 –

由於您的形式被初始頁面已經被渲染後動態加載，則需要使用.on()一個偵聽器添加到頁面時呈現

而不是

存在的祖先用 event delegation

$('#cancel').on('click', function() { 
    dialog.hide(); 
});

使用

$(document).on('click', '#cancel', function() { 
    dialog.hide(); 
});

但替換document與存在當最近的祖先該頁面首先生成。

來源

2016-08-19 01:49:32

取消MVC表單提交

回答

相關問題