How to stop the form from resetting

Question

How to stop the form from resetting to it's default value?

I've already tried the AJAX way, but it seems that there is an error to it. Even though that I have the code already, it seems that it is not working, neither the console log is displaying any errors.

This is my form:

    <form method="post" accept-charset="utf-8" id="thisisform">
        <select name="account-type">
            <option value="teacher">Teacher</option>
            <option value="student">Student</option>
        </select> <br>
        <h3>Select by:</h3>
        <div id="selection">
            <input type="radio" name="selection" id="byAll" value="selectAll" checked> Select All <br>
            <input type="radio" name="selection" id="byVal" value="selectValue"> Select by Value <br><br>
        </div>
        <div id="selectNow" style="display:none;">
            <select name="search-type">
                <option value="username">Username</option>
                <option value="firstname">First Name</option>
                <option value="surname">Last Name</option>
                <option value="id">ID</option>
                <input type="text" name="searchVal" placeholder="Search now by the value" class="form-control"><br>
            </select>
        </div>
        <input type="submit" value="Search and Delete" class="btn btn-primary">
    </form>

This is the script:

<script>        
    $('#selection').click(function() {
      if($('#byVal').is(':checked')) {
        $('#selectNow').slideDown("fast");
      }
      if($('#byAll').is(':checked')) {
        $('#selectNow').slideUp("fast");
      }
    });
    $("#thisisform").submit( function(e) {
      loadAjax();
      e.returnValue = false;
    });
</script>

Possible duplicate of [Submitting HTML form using Jquery AJAX](http://stackoverflow.com/questions/16323360/submitting-html-form-using-jquery-ajax) — Liam, Apr 10 '17 at 11:23
Try this $("#Formid").submit(function(event){ loadAjax(); event.preventDefault(); }) — User6667769, Apr 10 '17 at 11:25

score 1 · Answer 1 · answered Apr 10 '17 at 11:24

1

Stop the form from submitting by using e.preventDefault();

   $("#thisisform").submit( function(e) {
      e.preventDefault(); // added code
      loadAjax();
      e.returnValue = false;
    });

answered Apr 10 '17 at 11:24

gavgrif

13,077
2
17
22

`loadAjax is not defined` error is present at the console log and the form is cannot be submitted. – Axis Apr 10 '17 at 11:31
yes I knew loadAjax() was not defined - but the point of the post was to prevent the form from submitting - your code should have the loadAjax() function - and if not - delete that line. – gavgrif Apr 10 '17 at 11:37
Well, I deleted it now and now I cannot submit the form – Axis Apr 10 '17 at 11:38
Sorry - I should have been more clear - if you are atempting to submit the form via AJAX - then you need to prevent the form submission and then you deal with the form values via serializing the inputs. If you are not submitting the form via AJAX then you will need to remove the e.preventDefault() and let the form submit as a normal form. – gavgrif Apr 10 '17 at 11:40
Sorry for not clearing my question, but my question is that you can submit your form, but the form inputs (like Select, Checkboxes, Radio Inputs) should stay where they are at the last time, and not to be reset on their default values. – Axis Apr 10 '17 at 11:42
Using ajax Yes, using regular submit No, since the page will be refreshed and the form reset, else you may have to store the values in localStorage/cookies and charge them after the submission/refresh. – Zakaria Acharki Apr 10 '17 at 11:44

How to stop the form from resetting

1 Answers1

Linked