locked
Why postback? RRS feed

  • Question

  • User746671234 posted

    I am calling ajax function but I don't know why my page is firing postback event.  Please check the code below

    HTML

    <div class="col-lg-8 col-md-7 col-sm-12 col-xs-12">
    <div class="news-right text-center">
    <form id="newform">
    <input id="mcemail" type="email" name="mcemail" placeholder="Type Your Email Address..." />
    <button type="submit" class="text-uppercase">send</button>
    <div class="mailchimp-alerts text-centre fix">
    <span id="msgDiv"></span>
    </div>
    </form>
    </div>
    </div>

    JS

    $(function () {
    $('#newform').submit(function (event) {
    var mailname = $('#mcemail').val();
    var mesg = $("#msgDiv")[0];

    if (mailname.length < 10) {
    $('#msgDiv').removeClass('success');
    $('#msgDiv').addClass('error');
    mesg.innerHTML = 'Invalid email address';
    mesg.style.display = 'block';
    $('#mcemail').focus();
    return false;
    }
    else {
    $.ajax({
    type: "POST",
    url: "comsubmit.aspx/AddNews",
    data: '{mailadd: "' + mailname + '" }',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) {
    if (response.d == 'dup') {
    $('#msgDiv').removeClass('success');
    $('#msgDiv').addClass('error');
    mesg.innerHTML = 'Email already subscribed with us';
    mesg.style.display = 'block';
    $('#mc-email').focus();
    return false;
    }

    if (response.d == 'success') {
    $('#msgDiv').removeClass('error');
    $('#msgDiv').addClass('success');
    mesg.innerHTML = 'We registered your mail id';
    mesg.style.display = 'block';
    return true;
    }
    },
    failure: function (response) {
    mesg.style.display = 'none';
    alert(response);
    }
    });


    }
    });

    });

    It postback the page if 'dup' or 'success'.  Why?

    Saturday, March 17, 2018 9:58 AM

Answers

  • User475983607 posted

    It postback the page if 'dup' or 'success'.  Why?

    AJAX is asynchronous.  The success function callback that executes when there is a response from the AJAX request.  This is far too late to stop the submit.

    Use event.preventDefault(); to stop the submit behavior within the code.  Keep in mind event.preventDefault() will not work within the success callback.

                $('#newform').submit(function (event) {
                    event.preventDefault();
    
                    var mailname = $('#mcemail').val();

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, March 17, 2018 12:14 PM

All replies

  • User475983607 posted

    It postback the page if 'dup' or 'success'.  Why?

    AJAX is asynchronous.  The success function callback that executes when there is a response from the AJAX request.  This is far too late to stop the submit.

    Use event.preventDefault(); to stop the submit behavior within the code.  Keep in mind event.preventDefault() will not work within the success callback.

                $('#newform').submit(function (event) {
                    event.preventDefault();
    
                    var mailname = $('#mcemail').val();

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, March 17, 2018 12:14 PM
  • User746671234 posted

    Yeh it works now. Thank you brother

    Saturday, March 17, 2018 5:24 PM