CODEWITHSUNDEEP
javascriptc#asp.netsharepoint-2010
Fasal
Fasal

Reputation: 21

validate asp button on submit at client side in Javascript

I was trying to find a way to call a javascript function and a button onclick event from single asp button click and i did here is the code :

My Button

<asp:Button ID="btnSubmit" name="btnSubmit" runat="server" Text="Submit" OnClientClick="checkDate()"  OnClick="btnSubmit_Click"></aspButton>

Javascript code

function checkDate() {

        var startDate = document.getElementById('<%=dtPeriodFrom.Controls[0].ClientID%>').value;
        var toDate = document.getElementById('<%=dtPriodTo.Controls[0].ClientID%>').value;

        if (new Date(startDate).getTime() > new Date(toDate).getTime()) {

            alert("To date must be greater than from date.!!");
        }
}

Here this javascript working fyn, but I want to call the OnClick="btnSubmit_Click" if the javascript return true only. If the toDate less than startDate, it should not call the OnClick="btnSubmit_Click".

Thanks All in Advance

Upvotes: 2

Views: 8800

Answers (5)

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62488

You can use jquery click event inside doucment.ready():

$(function(){

  $('#'+'<%=btnSubmit.ClientID%>').click(function(){

     var startDate = document.getElementById('<%=dtPeriodFrom.Controls[0].ClientID%>').value;
     var toDate = document.getElementById('<%=dtPriodTo.Controls[0].ClientID%>').value;

     if (new Date(startDate).getTime() > new Date(toDate).getTime()) {

        alert("To date must be greater than from date.!!");

        return false; // note this statmement will stop to call server event of click
      }

  });


});

Your button code:

<asp:Button ID="btnSubmit" 
            name="btnSubmit" 
            runat="server" 
            Text="Submit" 
            OnClick="btnSubmit_Click"></asp:Button>

Upvotes: 2

Daniel Pl.
Daniel Pl.

Reputation: 138

Button:

OnClientClick="checkDate(this); return false;" OnClick="btnSubmit_Click"

Description:

checkDate(this);

Call's your function and pass the the button-object (this).

return false;

prevents PostBack.

JavaScript:

function checkDate(btn) {
 var valid = false;
 //your Code, set valid = true; if date is correct.
 if(valid){
   __doPostBack(btn.name,"");
 }
}

Description:

//your Code

stand for your validation code.

if(valid){
       __doPostBack(btn.name,"");
}

'valid' is a variable where you save the result of your validation.

__doPostBack(btn.name, "") call's a PostBack on the control you pass in the first parameter (need's the UniqueID therefore 'btn.name')

Upvotes: 2

Fasal
Fasal

Reputation: 21

Thanks all

This code is working fyn

function checkDate() {

        var startDate = document.getElementById('<%=dtPeriodFrom.Controls[0].ClientID%>').value;
        var toDate = document.getElementById('<%=dtPriodTo.Controls[0].ClientID%>').value;

        if (new Date(startDate).getTime() > new Date(toDate).getTime()) {

            alert("To date must be greater than from date.!!");
            return false;
        }
        else
            return true;
    }
<asp:Button ID="btnSubmit" name="btnSubmit" runat="server" Text="Submit" OnClientClick="return checkDate();" OnClick="btnSubmit_Click"/>

asp:Button ID="btnSubmit" name="btnSubmit" runat="server" Text="Submit" OnClientClick="return checkToDate();" OnClick="btnSubmit_Click"

Upvotes: 0

Dgan
Dgan

Reputation: 10285

HTML code : 

OnClientClick="return checkDate();"

Javascript code:

function checkDate() {

        var startDate = document.getElementById('<%=dtPeriodFrom.Controls[0].ClientID%>').value;
        var toDate = document.getElementById('<%=dtPriodTo.Controls[0].ClientID%>').value;

        if (new Date(startDate).getTime() > new Date(toDate).getTime()) {

            alert("To date must be greater than from date.!!");
            return true;

        }
else
{
return false;
}

}

Upvotes: -1

user2778823
user2778823

Reputation:

Try something like this inside if

document.getElementById('<%= btnSubmit.ClientID %>').click();

OR

$('#<%=btnSubmit.ClientID%>').click();

OR

$("#btnSubmit").click();

Upvotes: -1

Related Questions