Arrêter le formulaire de soumission, en utilisant Jquery
J'essaie d'empêcher mon formulaire de soumettre si une validation échoue. J'ai essayé de suivre ce post précédent mais je ne travaille pas pour moi. Ce qui me manque?
<input id="saveButton" type="submit" value="Save" />
<input id="cancelButton" type="button" value="Cancel" />
<script src="../../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("form").submit(function (e) {
$.ajax({
url: '@Url.Action("HasJobInProgress", "ClientChoices")/',
data: { id: '@Model.ClientId' },
success: function (data) {
showMsg(data, e);
},
cache: false
});
});
});
$("#cancelButton").click(function () {
window.location = '@Url.Action("list", "default", new { clientId = Model.ClientId })';
});
$("[type=text]").focus(function () {
$(this).select();
});
function showMsg(hasCurrentJob, sender) {
if (hasCurrentJob == "True") {
alert("The current clients has a job in progress. No changes can be saved until current job completes");
if (sender != null) {
sender.preventDefault();
}
return false;
}
}
</script>
5 réponses
Encore une fois, AJAX est asynchrone. Ainsi, la fonction showMsg ne sera appelée qu'après une réponse réussie du serveur.. et l'événement de soumission de formulaire n'attendra pas le succès D'AJAX.
Déplacer le e.preventDefault(); comme première ligne dans le gestionnaire de clic.
$("form").submit(function (e) {
e.preventDefault(); // this will prevent from submitting the form.
...
Voir code ci-dessous,
Je veux qu'il soit autorisé HasJobInProgress = = False
$(document).ready(function () {
$("form").submit(function (e) {
e.preventDefault(); //prevent default form submit
$.ajax({
url: '@Url.Action("HasJobInProgress", "ClientChoices")/',
data: { id: '@Model.ClientId' },
success: function (data) {
showMsg(data);
},
cache: false
});
});
});
$("#cancelButton").click(function () {
window.location = '@Url.Action("list", "default", new { clientId = Model.ClientId })';
});
$("[type=text]").focus(function () {
$(this).select();
});
function showMsg(hasCurrentJob) {
if (hasCurrentJob == "True") {
alert("The current clients has a job in progress. No changes can be saved until current job completes");
return false;
} else {
$("form").unbind('submit').submit();
}
}
Utilisez ceci aussi:
if(e.preventDefault)
e.preventDefault();
else
e.returnValue = false;
Becoz E. preventDefault () n'est pas pris en charge dans IE( certaines versions ). Dans IE c'est E. returnValue = false
Essayez le code ci-dessous. E. preventDefault () a été ajouté . Cela supprime l'action d'événement par défaut pour le formulaire.
$(document).ready(function () {
$("form").submit(function (e) {
$.ajax({
url: '@Url.Action("HasJobInProgress", "ClientChoices")/',
data: { id: '@Model.ClientId' },
success: function (data) {
showMsg(data, e);
},
cache: false
});
e.preventDefault();
});
});
En outre, vous avez mentionné que vous vouliez que le formulaire ne soit pas soumis sous la prémisse de la validation, mais je ne vois pas de validation de code ici?
Voici un exemple de validation supplémentaire
$(document).ready(function () {
$("form").submit(function (e) {
/* put your form field(s) you want to validate here, this checks if your input field of choice is blank */
if(!$('#inputID').val()){
e.preventDefault(); // This will prevent the form submission
} else{
// In the event all validations pass. THEN process AJAX request.
$.ajax({
url: '@Url.Action("HasJobInProgress", "ClientChoices")/',
data: { id: '@Model.ClientId' },
success: function (data) {
showMsg(data, e);
},
cache: false
});
}
});
});
Une approche différente pourrait être
<script type="text/javascript">
function CheckData() {
//you may want to check something here and based on that wanna return true and false from the function.
if(MyStuffIsokay)
return true;//will cause form to postback to server.
else
return false;//will cause form Not to postback to server
}
</script>
@using (Html.BeginForm("SaveEmployee", "Employees", FormMethod.Post, new { id = "EmployeeDetailsForm" }))
{
.........
.........
.........
.........
<input type="submit" value= "Save Employee" onclick="return CheckData();"/>
}
C'est un code JQuery pour empêcher Submit
$('form').submit(function (e) {
if (radioButtonValue !== "0") {
e.preventDefault();
}
});