Why need e.preventDefault

Question

I'm using below code to send an email. it's not working if i remove the e.preventDefault();. Why do i need to disable the default submit behavior of the form? how can i achieve it without e.preventDefault();?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#divLoading').hide();
            $('#appointment').submit(function (e) {
                e.preventDefault();



                var serviceURL = 'WebService.asmx/SendMail';
                var Name = $("#fname").val();
                var Email = $("#email").val();
                var Telephone = $("#phone").val();
                var Comment = $("#comment").val();

                if ($("#fname").val().length == 0) {
                    alert("Please Enter Name");
                    $("#fname").focus();
                    return false;
                }

                if ($("#email").val().length == 0) {
                    alert("Please Enter Your Email Address.");
                    $("#email").focus();
                    return false;
                }

                if (Email.indexOf("@") == -1) {
                    alert("Please Enter Your Email Address.");
                    $("#email").focus();
                    return false;
                }
                if (Email.indexOf(".") == -1) {
                    alert("Please Enter Your Email Address.");
                    $("#email").focus();
                    return false;
                }

                $('#divLoading').show();

                $.ajax({
                    type: "POST",
                    url: serviceURL,
                    data: '{"name":"' + Name + '","address":"' + Email + '","telephone":"' + Telephone + '","comment":"' + Comment + '"}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: successFunc,
                    error: errorFunc
                });

                function successFunc(data, status) {

                    //  alert("Mail Sent!");
                    $('#divLoading').hide();
                    window.location = "contat-submit.php";

                }

                function errorFunc() {
                    // alert('error');
                }

            });

        });

</script>
</head>
<body>
   <form name="appointment" id="appointment" method="post" action="About.aspx">
    <div>
    </div><div id="leftcolumn4"><div class="h2">Contact Form</div>
      <form name="appointment" id="Form1" method="post" action="send_contact.php">
Full Name:
<br />
<label>
  <input name="fname" type="text" class="form-input" id="fname" size="30" />
</label> 
<br /><br />

Email Address:<br />
<label>
  <input name="email" type="text" class="form-input" id="email" size="30" />
</label><br /><br />
Telephone:
<br />
<label>
  <input name="phone" type="text" class="form-input" id="phone" size="30" />
</label> 
<br /><br />
Your Comment:<br />
<label>
<textarea name="comment" cols="28" rows="4" class="form-input-box" id="comment"></textarea><br />

      <br />
&nbsp;</label><input name="submit" type="submit" class="form-input-submit" value="Submit" id="btnMail"/>
    </div>
    </form>
</body>
</html>

Because the form is submitted with `$.ajax(...)`. Without `e.preventDefault()` the form would get submitted twice and the page would be redirected to `about.aspx` — Andreas, Apr 30 '13 at 06:18

GitaarLAB · Accepted Answer · 2013-04-30T06:35:04.807

3

This code relies on disabling the default submit behavior of the form because the form-data is being sent with ajax (instead of a GET or POST request, which would also make the browser navigate to About.aspx).

You can achieve it without e.preventDefault(); by returning false.
Or by not using ajax, in which case you'd get the POST data on the server-side using: Page.Request.QueryString["htmlElementName"]

edited Apr 30 '13 at 06:35

answered Apr 30 '13 at 06:21

GitaarLAB

14,536
11
60
80

score 2 · Answer 2 · edited May 23 '17 at 12:04

2

The event.preventDefault() method stops the default action of an element from happening.

instead of that you can use return false.

For example, clicked anchors will not take the browser to a new URL. We can use event.isDefaultPrevented() to determine if this method has been called by an event handler that was triggered by this event.

edited May 23 '17 at 12:04

Community

1
1

answered Apr 30 '13 at 06:12

Suresh Atta

120,458
37
198
307

score 1 · Answer 3 · answered Apr 30 '13 at 06:17

1

If you don't use e.preventDefault(), the default behaviour of form submit will fire. It will send browser to the action property of form and browser will disappeared that you don't want it.

answered Apr 30 '13 at 06:17

score 1 · Answer 4 · answered Apr 30 '13 at 06:31

You are using ajax, which means you don't need the form to submit at all. If you'd still like the page to redirect to about.aspx after sending the email, change your success function to be:

function successFunc(data, status) {
    $('#divLoading').hide();
    window.location = "about.aspx";
}

If you allow the form's default post behaviour, the form will post before your ajax request is complete, and will interfere with your email being sent.

As a side note, you have 2 forms with the name appointment, which may be causing you some confusion. Your code is referencing the first one, not the second.

Why need e.preventDefault

4 Answers4