CODEWITHSUNDEEP
javascriptjqueryvalidation
KimiH
KimiH

Reputation: 39

How to show a message when a button is clicked

I want to show the following message when the button below is clicked using jQuery

<p class="msg-confirm" id="msgConf">
  Great! You got this. Let's continue.
</p>

Button:

<input type="button" value="Start" class="btn-start" id="exec">

This message is set as none in CSS:

.msg-confirm{
display: none;

}

I have this function that worked before on a similar context, but without the validation. If the checkbox below is checked, I want this function working.

    $("#exec").click(function(){
    if($('#d3').is(':checked')){
        $("#msgConf").show('slow');
    }
});

Checkbox:

<input type="radio" name="image" id="d3" class="input-step1 aheadF1"/>

Upvotes: 0

Views: 1146

Answers (2)

Alvison Hunter
Alvison Hunter

Reputation: 673

Let's make use of the simplicity of some of the new features of jQuery such as the .prop() method that will allow us to verify if a checkbox or radio button is checked. For the purpose of this example, I switched the input to a checkbox since it is more appropriate UX/UI wise speaking, however, this property can be verified in both controls. We will use the toggleClass() method of jQuery to toggle the class that hides the P tag and its content initially. I certainly hope this helps.

Happy coding!

$(document).ready(function () {
    $("#exec").click(function () {
        if ($('#d3').prop('checked')) {
            $("p").toggleClass("msg-confirm");
        } else {
            alert("Please select the checkbox to display info.");
        } 
    }); 
});
.msg-confirm {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<p class="msg-confirm">
  Great! You got this. Let's continue.
</p>
<input type="button" value="Start" class="btn-start" id="exec">
<input type="checkbox" name="image" id="d3" class="input-step1 aheadF1"/>

Upvotes: 1

Yahya Altintop
Yahya Altintop

Reputation: 224

Try this

$("#exec").on("click",function (){
    if($('#d3').is(':checked')){
       $("#msgConf").css("display","")
    }
})

Upvotes: 0

Related Questions