当 onClientClick 返回 true 时，OnClick 事件不会触发

Question

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" />

Answer 1

Try like this:

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

If the function returns true , onclick will definitely work!

Answer 2

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.net button control

OnClientClick="return validatePwd();" 

OnClick="btnsubmit_Click"  

Answer 3

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