Je souhaite passer un appel à AJAX lorsqu'un bouton de soumission du formulaire est enfoncé. InFact Je ne peux pas supprimer le <form>
parce que je veux effectuer la validation côté client aussi . J'ai essayé ce code.
<form name="search" >
Name: <input type="text" name="name1"/>
Age: <input type="text" name="age1"/>
<input type="submit" name="Submit" value="Submit" onclick="makeSearch()"/>
</form>
JS
function makeSearch(){
alert("Code to make AJAX Call");
}
Après avoir utilisé ce code, alert () ne s'affiche pas mais la page est rechargée . Je souhaite bloquer le rechargement de la page et appeler la fonction JS.
Merci
Ajoutez l'attribut onsubmit
à la balise form
:
<form name="search" onsubmit="return makeSearch()" >
Name: <input type="text" name="name1"/>
Age: <input type="text" name="age1"/>
<input type="submit" name="Submit" value="Submit"/>
</form>
Et javascript ajoute return false
à la fin:
function makeSearch() {
alert("Code to make AJAX Call");
return false;
}
La manière correcte et jQuery serait:
$("form").on('submit', function (e) {
//ajax call here
//stop form submission
e.preventDefault();
});
Comme vous l'avez dit, vous pouvez également supprimer l'élément <form>
et lier simplement l'appel ajax à l'événement click
du bouton.
document.getElementById("bt1").type='submit';
document.getElementById("bt1").onclick="";
var elem = document.getElementById("bt1");
if (typeof elem.onclick == "function") {
elem.onclick.apply(elem);
}
<form id="org" action="">
<fieldset class="log">
<legend>Log in</legend>
<label for="uname">Username</label>
<input type="text" name="uname" id="uname" value="" required/><br />
<label for="pword">Password</label>
<input type="password" name="pword" id="pword" value="" required/><br />
<input type="button" onclick="organizer()" value="LOG IN" class="red-btn" id="bt1"/>
</fieldset>
</form>
utilisez jQuery.post et modifiez le bouton d'envoi.
Le bouton Soumettre est créé pour envoyer des données au serveur via POST (méthode native, pas ajax) , je suggère de l'utiliser uniquement dans des cas particuliers, par exemple lors du téléchargement d'un fichier.
Si vous continuez à utiliser le bouton d'envoi pour la requête ajax, vous rencontrerez de nombreux problèmes avec IE.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script language="javascript">
function makeSearch()
{
if(validateIdata())
{
alert("send ajax request");
return;
$.ajax({
type: 'POST',
url: url, //- action form
data: {name1:$('#name1').val(),age1:$('#age1').val()},
success: function(){
alert('success');
}
});
}
}
function validateIdata()
{
if($('#name1').val() =='')
{
alert("Invalid Name");
return false;
}
if($('#age1').val() =='')
{
alert("Invalid Age");
return false;
}
return true;
}
</script>
</head>
<body>
<form name="search" >
Name: <input type="text" id="name1" name="name1"/>
Age: <input type="text" id="age1" name="age1"/>
<input type="button" name="Submit" value="Submit" onclick="makeSearch()"/>
</form>
</body>
</html>
<form name="search" >
Name: <input type="text" name="name1"/>
Age: <input type="text" name="age1"/>
<input type="submit" name="Submit" value="Submit" onclick="return makeSearch();"/>
</form>
function makeSearch(){
alert("Code to make AJAX Call");
}
il suffit d'utiliser return dans la fonction onclick, il fera du bien pour vous