Comment empêcher le formulaire de se réinitialiser à l'envoi

Question

J'ai un formulaire simple qui déclenche un appel ajax mais dès que le bouton "submit" est cliqué, le formulaire se réinitialise et efface toutes les entrées. Savez-vous comment empêcher cela ? Je voudrais avoir le contrôle sur le moment où le formulaire est effacé. Le code est ci-dessous. Je pense que je dois abandonner la fonction submit et détecter l'événement "click" sur un bouton.

JQuery

$("#Formid").submit(function(){loadAjax();});

HTML

    <form id="Formid" method="put">
       Name<BR/>
       <input type="text" name="name"/><BR/><BR/>
       Node Id<BR/>
       <input type="text" name="node_id"/><BR/><BR/>
       Type<BR/> 
       <input type="text" name="type"/><BR/><BR/>
       Parent<BR/> 
       <input type="text" name="parent_id"/><BR/><BR/>
       Longitude<BR/> 
       <input type="text" name="longitude"/><BR/><BR/>
       Latitude<BR/>
       <input type="text" name="latitude"/><BR/><BR/>           
       Description<BR/>          
       <textarea name="description" rows="5" cols="40">Insert description  here</textarea><BR/><BR/>           
       <input type="submit" value="Add Node"/>

    </form>

Answer 1

Vous pouvez utiliser preventDefault de l'objet événement.

$("#Formid").submit(function(event){
   loadAjax();
   event.preventDefault()
})

Answer 2

Vous pouvez utiliser e.preventDefault() o return false; dans un gestionnaire d'événements jQuery :

$("#Formid").submit(function (e) {
   loadAjax();
   e.preventDefault(); // or return false;
});

e.preventDefault() empêchera l'événement par défaut de se produire, e.stopPropagation() empêchera l'événement de se produire, et retournera false fera les deux.

Answer 3

Vous pouvez également utiliser event.returnValue = false ;

$("#Formid").submit( function(e) {
  loadAjax();
  e.returnValue = false;
});

Cela fonctionne de la même manière que "return false ;", sauf que cela ne quittera pas la fonction.

Answer 4

J'ai empêché la suppression du formulaire de recherche pour mon site web mrnams.com.

Voir

@using (@Html.BeginForm("Search", "Home", FormMethod.Post, new { @class = "navbar-form navbar-right pull-right" }))
{
    <div class="input-group">
        <input id="input-searchQuery" type="text" class="form-control" placeholder="Search this site" name="q">
        <span class="input-group-btn">
            <button type="submit" class="btn btn-default">
                <span class="glyphicon glyphicon-search"></span>
            </button>
        </span>
    </div>
}

Fonctions jQuery dans la vue

@section scripts{
  <script type="text/javascript">
    $(function () {
        var queryReturned = '@ViewBag.SearchQuery';
        $("#input-searchQuery").val(queryReturned); 
    });
  </script>
}

Et voici le contrôleur.

public class Home : Controller
{            
  public ActionResult Search(string q)
  {
    ViewBag.SearchQuery = q;
  }
}

Pour une démonstration, visitez https://mrnams.com/