web-dev-qa-db-fra.com

Arrêter onclick de tirer lorsque onclientclick est faux?

Est-il possible d'utiliser la propriété onclientclick d'un bouton pour effectuer une vérification côté client? Si la vérification renvoie true, activez l'événement onclick. Si la vérification côté client renvoie false, ne déclenchez pas l'événement onclick.

Est-ce possible?

METTRE À JOUR:

Ces 2 fonctionnent:

Stops the form from submitting:
OnClientClick="return false;"

Allows the form to submit:
OnClientClick="return true;"

Les 2 prochains ne fonctionnent pas:

// in js script tag
function mycheck() {
    return false;
}

// in asp:button tag
OnClientClick="return mycheck();"

// in js script tag
function mycheck() {
    return true;
}

// in asp:button tag
OnClientClick="return mycheck();"

Il soumet le formulaire les deux fois.

Pourquoi donc?

asp.netvb.netasp.net-3.5onclientclick
24
oshirowanen

Vous souhaitez ajouter return dans OnClientClick après l’appel d’une fonction. Sinon, le bouton reviendra même si la fonction renvoie false.

<asp:button ID="Button1" runat="server" OnClick="Button1_Click" 
    OnClientClick="return checkValidation()" Text="Submit" />

<script type="text/javascript">
    function checkValidation() {
        return confirm('Everything ok?');
    }
</script>
41
Win

Sûr. Si vous utilisez return false dans votre OnClientClick, cela empêchera toute navigation. Donc, votre code ressemblerait à ceci:

<asp:LinkButton runat="server" OnClientClick="if(!ValidatePage()) { return false;}" />
7
Steven V

Oui, vous pouvez, en appel de fonction onclientClick, utiliser preventDefault()

function onclientClickFun(e)
{
  if(!IsValidationSuccess)
 {
   e.preventDefault();
 }

}

OU

function onclientClickFun(e)
{
  if(!IsValidationSuccess)
 {
   return false;
 }

}
2
Subin Jacob

Dans la page du serveur, créez le bouton : 

var button1 = new Button();  
button1.ServerClick += new EventHandler(button1_ServerClick);
button1.OnClientClick = SetJsForSaveBtn();
button1.Attributes.Add("UseSubmitBehavior", "false");
panel.Controls.Add(button1 );

// contient le code du serveur

private void saveBtn_ServerClick(object sender, EventArgs e)
{
   //do something if ClientClick returns true
}

// contient le code JS de la page

LiteralControl js = new LiteralControl();
panel.Controls.Add(js);
js.Text =@"<script type='text/javascript'> 
$(document).ready(function(){
 function CheckValidationOnClient(){
   if(!ValidatePage()){
    return false;
   }
   else{
    return true;
   }
 };
});
</script>   ";

private string SetJsForSaveBtn()
{
  var jsfunc = @" return CheckValidationOnClient()";
  return jsfunc ;
}
1
chri3g91

Je suis tombé sur ce problème aussi. N'aimait pas avoir à mettre le OnClientClick = retourne faux sur chaque lien. Avec une simple page, il est tout simplement plus facile d’utiliser une ancre et d’éviter de remplir le href pour vous.

Cependant, ce n'est pas toujours possible. Donc, une conclusion simple consiste à hériter du LinkButton et à ajouter une variable comme AutoPostBack. si false, remplacez simplement la sortie par le code HTML ou ajoutez le code OnClientClick. Je n'aime pas vraiment les balises inline.

namespace My.WebControls {
    [ToolboxData("<{0}:LinkButton runat=server ID=btn></{0}:LinkButton>"), ParseChildren(true), ToolboxItem(true)]
    public class LinkButton : System.Web.UI.WebControls.LinkButton {

         private bool _postback = true;
         [Bindable(true), Category("Behavior"), DefaultValue(true), Description("Gets or Sets the postback click behavior")]
         public bool AutoPostBack { get { return _postback; } set { _postback = value; } }


         protected override void Render(System.Web.UI.HtmlTextWriter writer) {
             if(!AutoPostBack){
                 this.OnClientClick = "return false";
             }
             base.Render(writer);
         }
    }
}

De nombreux attributs doivent être gérés dans un ViewState mais dans ce cas, je pense que nous sommes bons;

1
Mike