5

I have a simple form that triggers an ajax call but as soon as the submit button is clicked the form resets and clears all entries. Do you know how to prevent this? I'd like to have control over when the form gets cleared.The code is below. I suspect I need to abandon the submit function and detect the "click" event on a button.

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>

4 Answers 4

10

You can use preventDefault method of the event object.

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

Alternatively, you could use event.returnValue = false;

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

This works similarly to "return false;", except it will not exit the function.

0
0

You can use e.preventDefault() or return false; within a jQuery event handler:

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

e.preventDefault() will prevent the default event from occuring, e.stopPropagation() will prevent the event from bubbling up and return false will do both.

1
  • 1
    stopPropagation should have no effect. The form submits because its submit method has been called or activated, which can be done many ways (input type submit, button type submit, pressing the enter key in an input, input method called directly, and so on). It does not submit because of a bubbling click event unless a listener is set for that and calls the form's submit method.
    – RobG
    Sep 19, 2012 at 3:31
0

I have prevented form clearing for search form for my website mrnams.com

View

@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>
}

jQuery functions in View

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

And here is the controller.

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

For demo visit https://mrnams.com/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.