CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap-3
Andrew Simpson
Andrew Simpson

Reputation: 7324

How to change this property alert alert-error hide

I have this:

<div class="row" style="display:none" id="divRegistration">
    <div class="col-xs-6">
        <div class="well">
            <div class="form-group">
                <label asp-for="EmailAddress" class="control-label"></label>
                <input type="text" class="form-control" id="EmailAddress" name="EmailAddress" value="@Model.EmailAddress" required="" title="Please enter you username" placeholder="[email protected]">
                <span class="help-block"></span>
            </div>
            <div class="form-group">
                <label asp-for="Password" class="control-label">Password</label>
                <input type="password" class="form-control" id="Password" name="Password" value="@Model.Password" required="" title="Please enter your password">
                <span class="help-block"></span>
            </div>
            <div class="form-group">
                <label asp-for="ConfirmPassword" class="control-label"></label>
                <input type="password" class="form-control" id="ConfirmPassword" name="ConfirmPassword" value="@Model.ConfirmPassword" required="" title="Please confirm your password">
            </div>
            <div id="registerErrorMsg" class="alert alert-error hide">Invalid registration</div>
            <a onclick="Register();" class="btn btn-success btn-block">Register</a>
        </div>
    </div>
    <div class="col-xs-6">
        <p class="lead">Already Registered?</p>
        <p><a onclick="showLogInPage();" class="btn btn-info btn-block">LogIn</a></p>
    </div>
</div>

(I have tried all of these)

function Register() {
        $('#registerErrorMsg').html('hi andy!');
        $("#registerErrorMsg").css("display", "none");
        $('#registerErrorMsg').fadeIn();
        $('#registerErrorMsg').show();
        alert('hi');
}

My alert box shows but my label does not?

Upvotes: 0

Views: 630

Answers (2)

gaetanoM
gaetanoM

Reputation: 42054

My alert box shows but my label does not?

This happens because the class hide is defined in boostrap as:

.hide {
  display: none !important;
}

So, it's enough to remove this class (.removeClass() or .toggleClass()).

Change from:

function Register() {
    $('#registerErrorMsg').html('hi andy!');
    $("#registerErrorMsg").css("display", "none");
    $('#registerErrorMsg').fadeIn();
    $('#registerErrorMsg').show();
    alert('hi');
}

to:

function Register() {
     $('#registerErrorMsg').html('hi andy!');
     // $("#registerErrorMsg").removeClass('hide'); 
     //  ...or
     $("#registerErrorMsg").toggleClass('hide');
}


function Register() {
    $('#registerErrorMsg').html('hi andy!');
    //$("#registerErrorMsg").removeClass('hide');
    $("#registerErrorMsg").toggleClass('hide');
}



$("#divRegistration").show();
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="row" style="display:none" id="divRegistration">
    <div class="col-xs-6">
        <div class="well">
            <div class="form-group">
                <label asp-for="EmailAddress" class="control-label"></label>
                <input type="text" class="form-control" id="EmailAddress" name="EmailAddress" value="@Model.EmailAddress" required="" title="Please enter you username" placeholder="[email protected]">
                <span class="help-block"></span>
            </div>
            <div class="form-group">
                <label asp-for="Password" class="control-label">Password</label>
                <input type="password" class="form-control" id="Password" name="Password" value="@Model.Password" required="" title="Please enter your password">
                <span class="help-block"></span>
            </div>
            <div class="form-group">
                <label asp-for="ConfirmPassword" class="control-label"></label>
                <input type="password" class="form-control" id="ConfirmPassword" name="ConfirmPassword" value="@Model.ConfirmPassword" required="" title="Please confirm your password">
            </div>
            <div id="registerErrorMsg" class="alert alert-error hide">Invalid registration</div>
            <a onclick="Register();" class="btn btn-success btn-block">Register</a>
        </div>
    </div>
    <div class="col-xs-6">
        <p class="lead">Already Registered?</p>
        <p><a onclick="showLogInPage();" class="btn btn-info btn-block">LogIn</a></p>
    </div>
</div>

Upvotes: 1

samAlvin
samAlvin

Reputation: 1678

See snippet below: First you need to change the:

<div id="registerErrorMsg" class="alert alert-error hide">Invalid registration</div>

into this statement:

<div id="registerErrorMsg" class="alert alert-error" style="display:none">Invalid registration</div>

Then change your script into:

function Register() {
        $('#registerErrorMsg').html('hi andy!');
        $("#registerErrorMsg").css("display", "block");
        $('#registerErrorMsg').fadeIn();
        $('#registerErrorMsg').show();
        alert('hi');
}

The $("#registerErrorMsg").css("display", "block"); will change the alert div style from none to block, therefore your alert will be shown.

function Register() {
        $('#registerErrorMsg').html('hi andy!');
        $("#registerErrorMsg").css("display", "block");
        $('#registerErrorMsg').fadeIn();
        $('#registerErrorMsg').show();
        alert('hi');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row" id="divRegistration">
    <div class="col-xs-6">
        <div class="well">
            <div class="form-group">
                <label asp-for="EmailAddress" class="control-label"></label>
                <input type="text" class="form-control" id="EmailAddress" name="EmailAddress" value="@Model.EmailAddress" required="" title="Please enter you username" placeholder="[email protected]">
                <span class="help-block"></span>
            </div>
            <div class="form-group">
                <label asp-for="Password" class="control-label">Password</label>
                <input type="password" class="form-control" id="Password" name="Password" value="@Model.Password" required="" title="Please enter your password">
                <span class="help-block"></span>
            </div>
            <div class="form-group">
                <label asp-for="ConfirmPassword" class="control-label"></label>
                <input type="password" class="form-control" id="ConfirmPassword" name="ConfirmPassword" value="@Model.ConfirmPassword" required="" title="Please confirm your password">
            </div>
            <div id="registerErrorMsg" class="alert alert-info" style="display:none">Invalid registration</div>
            <a onclick="Register();" class="btn btn-success btn-block">Register</a>
        </div>
    </div>
    <div class="col-xs-6">
        <p class="lead">Already Registered?</p>
        <p><a onclick="showLogInPage();" class="btn btn-info btn-block">LogIn</a></p>
    </div>
</div>

Upvotes: 1

Related Questions