javascript - OnClick event not firing when onClientClick returns true - Stack Overflow

admin管理员组

文章数量:1319953

i have a button with both onclientclick and onclick events. I also have a jquery in my page. This jquery registers the buttons click event when timer elpase. The OnclientClick calls a function that validates whether a radio button is clicked or not...when timer is running...if user clicks the (Next) button without selecting an option(radiobuttonList)...it returns false and hence the server side event is prevented.. However, if timer elapse and no item is selected, the form is submitted with blank options here is the code,

var countdownTimer, countdownCurrent;
$(document).ready(function() {
    countdownCurrent = $('#ctl00_MainContent_example2submit').val() * 100;
    countdownTimer = $.timer(function () {
    var min = parseInt(countdownCurrent / 6000);
    var sec = parseInt(countdownCurrent / 100) - (min * 60);
    var micro = pad(countdownCurrent - (sec * 100) - (min * 6000), 2);
    var output = "00"; if (min > 0) { output = pad(min, 2); }
    $('.countdowntime').html(output + ":" + pad(sec, 2) + ":" + micro);
    if (countdownCurrent == 0) {
        $('#ctl00_MainContent_btnNext').click();

    } else {
        countdownCurrent -= 7;
        if (countdownCurrent < 0) { 
            countdownCurrent = 0; 
        }
    }
}, 70, true);
$('#example2submit').bind('keyup', function (e) { 
    if (e.keyCode == 13) { 
        countdownReset(); 
    } 
});

function CheckIfOptionSelected() {
    var vFlag = true;
    var radioButton1 = document.forms[0].elements['ctl00_MainContent_rdBtnListOptions_0'];
    var radioButton2 = document.forms[0].elements['ctl00_MainContent_rdBtnListOptions_1'];
    var radioButton3 = document.forms[0].elements['ctl00_MainContent_rdBtnListOptions_2'];
    var radioButton4 = document.forms[0].elements['ctl00_MainContent_rdBtnListOptions_3'];

    if (radioButton1.checked == false && radioButton2.checked == false && radioButton3.checked == false && radioButton4.checked == false && countdownCurrent > 0) {
        vFlag = false;
    }

    else {
        countdownReset();
        vFlag = true;

    }
    return vFlag;
}

function countdownReset() {
    var newCount = parseInt($('#ctl00_MainContent_example2submit').val()) * 100;
    if (newCount > 0) { countdownCurrent = newCount; }
}

The Problem i'm facing is, If i allow the timer to elapse with nothing selected in the radiobutton list...the Onclick event fires,a successful postback, but when i select an option...and without clicking the NEXT button i allow the timer to elapse....the postback does not occur??.... The Next button is as follows:

<asp:Button ID="btnNext" runat="server" Height="26px" 
            OnClientClick="if(!CheckIfOptionSelected()){return false;};" 
            OnClick="btnNext_Click" Text="Next"
            Width="77px" CausesValidation="False" />

i have a button with both onclientclick and onclick events. I also have a jquery in my page. This jquery registers the buttons click event when timer elpase. The OnclientClick calls a function that validates whether a radio button is clicked or not...when timer is running...if user clicks the (Next) button without selecting an option(radiobuttonList)...it returns false and hence the server side event is prevented.. However, if timer elapse and no item is selected, the form is submitted with blank options here is the code,

var countdownTimer, countdownCurrent;
$(document).ready(function() {
    countdownCurrent = $('#ctl00_MainContent_example2submit').val() * 100;
    countdownTimer = $.timer(function () {
    var min = parseInt(countdownCurrent / 6000);
    var sec = parseInt(countdownCurrent / 100) - (min * 60);
    var micro = pad(countdownCurrent - (sec * 100) - (min * 6000), 2);
    var output = "00"; if (min > 0) { output = pad(min, 2); }
    $('.countdowntime').html(output + ":" + pad(sec, 2) + ":" + micro);
    if (countdownCurrent == 0) {
        $('#ctl00_MainContent_btnNext').click();

    } else {
        countdownCurrent -= 7;
        if (countdownCurrent < 0) { 
            countdownCurrent = 0; 
        }
    }
}, 70, true);
$('#example2submit').bind('keyup', function (e) { 
    if (e.keyCode == 13) { 
        countdownReset(); 
    } 
});

function CheckIfOptionSelected() {
    var vFlag = true;
    var radioButton1 = document.forms[0].elements['ctl00_MainContent_rdBtnListOptions_0'];
    var radioButton2 = document.forms[0].elements['ctl00_MainContent_rdBtnListOptions_1'];
    var radioButton3 = document.forms[0].elements['ctl00_MainContent_rdBtnListOptions_2'];
    var radioButton4 = document.forms[0].elements['ctl00_MainContent_rdBtnListOptions_3'];

    if (radioButton1.checked == false && radioButton2.checked == false && radioButton3.checked == false && radioButton4.checked == false && countdownCurrent > 0) {
        vFlag = false;
    }

    else {
        countdownReset();
        vFlag = true;

    }
    return vFlag;
}

function countdownReset() {
    var newCount = parseInt($('#ctl00_MainContent_example2submit').val()) * 100;
    if (newCount > 0) { countdownCurrent = newCount; }
}

The Problem i'm facing is, If i allow the timer to elapse with nothing selected in the radiobutton list...the Onclick event fires,a successful postback, but when i select an option...and without clicking the NEXT button i allow the timer to elapse....the postback does not occur??.... The Next button is as follows:

<asp:Button ID="btnNext" runat="server" Height="26px" 
            OnClientClick="if(!CheckIfOptionSelected()){return false;};" 
            OnClick="btnNext_Click" Text="Next"
            Width="77px" CausesValidation="False" />

• javascript
• jquery
• asp

Share Improve this question Follow edited Mar 31, 2013 at 8:43 Rytmis 32.1k88 gold badges6161 silver badges6969 bronze badges asked Mar 31, 2013 at 8:37 Mingsho NembangMingsho Nembang 4511 gold badge11 silver badge44 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Try like this:

OnClientClick="return CheckIfOptionSelected();" UseSubmitBehavior="false"

If the function returns true, onclick will definitely work!

if we use UseSubmitBehavior="false", it is not working.No need to give CausesValidation="False" also.

sample java script function below to check for null value when the user clicks submit button without entering :

    function validatePwd()
      {
        var txtpwd = document.getElementById('txtpwd').value;
        if (txtpwd == "") {
            alert("Please enter new  password");
            return false;
        }
        else {
            return true;
        }

    } 

just below events are enough in the asp button control

OnClientClick="return validatePwd();" 

OnClick="btnsubmit_Click"  

OnClientClick="return CheckIfOptionSelected(); return true;" is working perfectly fine for me.

本文标签： javascriptOnClick event not firing when onClientClick returns trueStack Overflow