Why does "e.preventDefault()" and "return false" disable the post?

Question

I have encountered a problem today. I have solved it. I solved it heuristically, however I want scientific explanation (We should not be a programmer, a scientific person also :) )

Here is my initial View code of my MVC project:

    //shortened for brevity

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)

    <fieldset>

        <div class="editor-label">
            @Html.LabelFor(model => model.UserName)

        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.UserName, new { onkeyup = "InputToLower(this);" })
            @Html.ValidationMessageFor(model => model.UserName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.UserPassword)
        </div>
        <div class="editor-field">
            <input type="password" name="password1" id="password1" />
        </div>
        <div class="editor-label">
            <label for="male">Lütfen şifrenizi tekrar giriniz: </label>
        </div>
        <div class="editor-field">
            <input type="password" name="password2" id="password2" />
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.UserEmail)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.UserEmail)
            @Html.ValidationMessageFor(model => model.UserEmail)
        </div>

        <p>                
                <input type="submit" id="registerButton" value="Kayıt Ol" />            
        </p>

    </fieldset>
     }

  <script type="text/javascript">


    $(function () {
        $("#registerButton").click(function (e) {
           // e.preventDefault();
            var errorSummary = $('.validation-summary-errors');
            if (errorSummary.length == 0) {
                $('#listError').remove();
                $('<div class="validation-summary-errors"></div>').insertAfter($('.validation-summary-valid'));
                $(".validation-summary-errors").append("<ul id='listError'><li>0 karakter giremezsiniz. OSI-122 </li></ul>");
            }
            else if (errorSummary.length == 1) {
                $('#listError').remove();
                $(".validation-summary-errors").append("<ul id='listError'><li>You cannot enter more than 20 characters.</li></ul>");
            }
            //return false;
        });

    });

</script>

Code is shortened for brevity. When I disable e.preventDefault() and return false, posting has been done. How and why e.preventDefault() and return false prevent posting? Do you recommend any book that mentions that kind of issue? Thanks in advance.

https://api.jquery.com/event.preventdefault/ and http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false and they are not issue, its there behaviour to prevent posting. — Satpal, Dec 18 '15 at 12:42
Thank you for your answer mr Satpal. It seems searching in the internet is the obvious way. — tahasozgen, Dec 18 '15 at 12:49
for JS visit https://developer.mozilla.org/en-US/docs/Web/JavaScript — Satpal, Dec 18 '15 at 12:51

score 0 · Accepted Answer · answered Dec 18 '15 at 12:54

registerButton is submit button and behavior of submit is to post form's data to the action that is mentioned in form tag. If you have not mentioned any action attribute in form tag then it will hit post action of same get action.

event.preventDefault() and return false stops your post back or further events.

Why does "e.preventDefault()" and "return false" disable the post?

1 Answers1