Dev Faq
0
votes

Comment montrer une alerte bootstrap sur le bouton Cliquez sur JavaScript / JQuery?

J'ai une page de formulaire d'inscription créée sur asp.net.

Lorsque l'utilisateur cliquer sur Soumettre le bouton strong> Je souhaite afficher un message d'alerte Bootstrap en haut de la page pendant 5 secondes que dire "enregistré avec succès" ". p>

Si l'utilisateur cliquer sur Soumettre strud> et que l'utilisateur n'a pas rempli les champs requis, il ne doit pas afficher le message d'alerte avant de Remplissez tous les champs et soumettez. P>

J'ai essayé le code suivant, mais rien n'arrive après avoir rempli tous les champs et soumettre. P> 

<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
 <link href="Styles/styles.css" rel="stylesheet" type="text/css" />
    <link href="Styles/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <title></title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>
<body>
            <div class="container">

            <div id="messages" class="hide" role="alert">
              <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <div id="messages_content"></div>
            </div>

    <form id="form1" runat="server">
        <asp:ScriptManager runat="server"></asp:ScriptManager>
        <div class="form">
            <label for="FN">
                <br />
                <br />
                First Name:</label>
            <input type="text" id="txtFirstname" runat="server" />
            <br />
            <br />
            <label for="LN">Last Name:</label>
            <input type="text" id="txtLastname" runat="server" />
            <br />
            <br />
            Password<span style="color: red">*</span>:
            <asp:TextBox ID="txtPassword" TextMode="Password" runat="server"></asp:TextBox>
            <label for="BT">
                <asp:RequiredFieldValidator ID="Pw" runat="server" ControlToValidate="txtPassword" ErrorMessage="Please Provide a password !">Required</asp:RequiredFieldValidator>
            </label>
            <br />
            <br />
            E-mail<span style="color: red">*</span>:
            <asp:TextBox ID="txtEmail" TextMode="Email" runat="server"></asp:TextBox>
            <asp:RequiredFieldValidator ID="EM" runat="server" ControlToValidate="txtEmail" ErrorMessage="Please Provide an Email">Required</asp:RequiredFieldValidator>
            <br />
            <br />
            <asp:Literal ID="ltrTable" runat="server"></asp:Literal>
            <label for="BT">Blood Type:</label>
            <telerik:RadComboBox runat="server" Skin="Telerik">
                <Items>
                    <telerik:RadComboBoxItem Value="1" Text="A+" />
                    <telerik:RadComboBoxItem Value="2" Text="A-" />
                    <telerik:RadComboBoxItem Value="3" Text="B+" />
                    <telerik:RadComboBoxItem Value="4" Text="O" />
                    <telerik:RadComboBoxItem Value="5" Text="O+" />
                </Items>
            </telerik:RadComboBox>
 <button class="btn btn-default"  id="btnSubmit" onclick="insertData()">Submit</button>
<asp:Button ID="btnCancel" runat="server" CausesValidation="False" OnClick="Button1_Click" Text="Cancel" />
    </form>
                </div>

        <script type="text/javascript">
            $('#form').submit(function(e) {
                $('#messages').removeClass('hide').addClass('alert alert-success alert-dismissible').slideDown().show();
                $('#messages_content').html('<h4>registration successful message </h4>');
                $('#modal').modal('show');
                e.preventDefault();
            });
        </script>
</body>
</html>

<script type="text/javascript">

    $(document).ready(function () {

        //insertData();
        fill_table();

    })
    function insertData() {
        var firstname = document.getElementById("txtFirstname").value;
        var lastname = document.getElementById("txtLastname").value;
        var password = document.getElementById("txtPassword").value;
        var email = document.getElementById("txtEmail").value;

        if (firstname == "") {
            alert("fails");
        } else {
            $.ajax({
                type: "POST",
                contentType: "application/json;charset=utf-8",
                url: "Home.aspx/test",
                data: "{firstname: '" + firstname + "',lastname: '" + lastname + "', email: '" + email + "' , password: '" + password + "'}",
                dataType: "json",
                async: false,
                success: function (resdata) {
                }
            });
        }
    }
</script>

1 commentaires

vs. code> $ ('# formulaire'). Soumettre (...)

3 Réponses :

0
votes 
 <button type="submit" class="btn btn-danger float-right" onclick="return confirmDel();"><i class="fa fa-remove mr-5"></i> Firma Sil</button>


<script language="javascript">
    function confirmDel() {
        var agree = confirm("Are you sure you can delete this company?\nBu işlem geri alınamaz!");
        if (agree) {
            return true;
        }
        else {
            return false;
        }
    }
</script>
1 commentaires

Bonjour Enes! J'ai testé votre code, mais ce dont j'ai besoin, c'est d'afficher le message d'alerte à l'aide de la conception des alertes BOOTSTRAP n'est pas la valeur par défaut. Et dans votre code, seul le bouton est conçu à l'aide de BS4 et non au message d'alerte.

0
votes 
You need to add the message alert enable script on the ajax success method as below

$.ajax({
                type: "POST",
                contentType: "application/json;charset=utf-8",
                url: "Home.aspx/test",
                data: "{firstname: '" + firstname + "',lastname: '" + lastname + "', email: '" + email + "' , password: '" + password + "'}",
                dataType: "json",
                async: false,
                success: function (resdata) {
  $('#messages').removeClass('hide').addClass('alert alert-success ').slideDown().show();
$('#messages_content').html('registration successful message ');
                    }
                });
4 commentaires

Bonjour @ronanki Viswanadham! Oh, c'était mon erreur, j'ajoutais le script en dehors du succès de l'Ajax. Mais le problème lorsque je clique sur Soumettre maintenant, le message apparaît et disparaît si vite que je ne peux pas essayer de lire. Comment puis-je ajouter un temps à ce message pour apparaître comme 5 secondes.

Le code mis à jour ne montre plus le message d'alerte et rien n'arrive après que je clique sur Soumettre @ronanki Viswanadham

Essayez le code mis à jour ci-dessus .. L'ancien code fonctionne en supprimant la classe de congraison, je pense

J'ai essayé le code mis à jour par le message d'alerte continuer à disparaître si vite. Aussi, j'ai enlevé la classe limitée et je l'essaie de fonctionner avec le temps de timeout rien ne se passe. Et merci de suivre mon problème ... @ Ronanki Viswanadham

0
votes 
 <div id="messages" class="hidden" >
              <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <div id="messages_content"></div>
            </div>

$.ajax({
                type: "POST",
                contentType: "application/json;charset=utf-8",
                url: "Home.aspx/test",
                data: "{firstname: '" + firstname + "',lastname: '" + lastname + "', email: '" + email + "' , password: '" + password + "'}",
                dataType: "json",
                async: false,
                success: function (resdata) {
                   $('#messages').removeClass('hidden').addClass('alert alert-success ');
                $('#messages_content').html('registration successful message ');
               } 
});
6 commentaires

S'il vous plaît vérifier cela une fois @ smithbz

Même avec celui-ci, le message alter après la soumission disparaît vite ... c'est bizarre

Rechargez-vous la même page après le succès? . Si vous pouvez partager le code et l'API actuels .. Je peux examiner le problème

Nope, chaque fois que je déboque la page pour la tester à nouveau. Donc, à partir de la première fois, il disparaît si vite.

Jetez un coup d'œil ici: Pastebin.com/p6jh02us Le code complet de la page @ronanki Viswanadham

Des nouvelles ? @Ronanki Viswanadham

Articles qui pourrait vous intéresser :

Select2 ne s'affiche pas correctement dans le mode bootstrap
datetimepicker ne fonctionne pas avec bootstrap 4?
L'appel Ajax n'affiche pas de réponse en cas de succès
django admin - Comment ajouter du javascript à la fin d'un fichier