CODEWITHSUNDEEP
javascriptjqueryhtml
TheFallenOne
TheFallenOne

Reputation: 1686

To find if a button is selected

Ive got HTML code with a button group and a submit button. The script code checks if it is selected or not and submits based on that selection. If none of the buttons are selected, then display the alert.

$("#Save").on("click", Save);

function Save(e) {
    if (GeneralStatusAlert(e) == false) {
        return;
    } else {
        $('#frmSubmit').submit();
    }
}

function GetGeneralStatus() {
    var value = "";
    var row = $("#btnGeneral").closest(".row")   
    var object = $(this).find(".btn-group");
    value = $(object).find(".selected");
    return value;
}      

function GeneralStatusAlert(e) {
    var value = GetGeneralStatus();
    if (value.length < 1) {
        alert("Please set Status.");
        return false;
    }
    return true;
}

$('.testRow button').click(function () {    
    $(this).addClass("selected");    
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="row testRow">
    <div class="btn-group btnGeneral">
        <button type="button" class="btn btn-success btnStatus" value="Open">Open</button>
        <button type="button" class="btn btn-danger btnStatus" value="Closed">Closed</button>
    </div>
</div>
     
<br/> 
<br/> 
<div class="row">
    <button id="Save" class="btn btn-primary"><i class="fa fa-share-square-o"></i> Save</button> 
</div>

It does not work. What am I missing?

EDIT : Added the select button class on button click.

Upvotes: 0

Views: 970

Answers (2)

DNKROZ
DNKROZ

Reputation: 2852

I've updated your JS a little:

$("#Save").on("click", Save);

$(".btnStatus").on("click", function(){
    $(".btnStatus").removeClass("selected");
    $(this).addClass("selected");
});

function Save(e) 
{
if (GeneralStatusAlert(e) == false) {
    return;
}
else{
     $('#frmSubmit').submit();
    }
}


function GetGeneralStatus() {
    var value = "";  
    value = $("div.btn-group").find(".selected");
    return value;
}      

function GeneralStatusAlert(e) {
    var value = GetGeneralStatus();
    if (value.length < 1) {
        alert("Please set Status.");
        return false;
    }
    return true;
}

Basically you weren't adding the selected class when clicking your status buttons. Also your code var object = $(this).find(".btn-group"); wasn't finding anything. (Due to using this)

Upvotes: 2

Deep
Deep

Reputation: 9794

There are few issues in your sample code

1: bootstrap.js is dependent on JQuery, so need to add that first.

2: Missing code to add selected class on status button

3: There is no element with id btnGeneral, you are using wrong selector. btnGeneral is a class and should be accessed by .

4: You may meant $(row) instead of $(this)

    var row = $("#btnGeneral").closest(".row")   
    var object = $(this).find(".btn-group");

Updated sample code.

$("#Save").on("click", Save);

$(".btn").on("click", function(){
     $(this).addClass("selected");
     $(this).siblings().removeClass("selected");
});

function Save(e) {
    if (GeneralStatusAlert(e) == false) {
        return;
    } else {
        alert("Submitting");
        $('#frmSubmit').submit();
    }
}

function GetGeneralStatus() {
    var value = "";
    var row = $(".btnGeneral").closest(".row")   
    var object = $(row).find(".btn-group");
    value = $(object).find(".selected");
    return value;
}      

function GeneralStatusAlert(e) {
    var value = GetGeneralStatus();
    if (value.length < 1) {
        alert("Please set Status.");
        return false;
    }
    return true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet"/>



<div class="row">
    <div class="btn-group btnGeneral">
        <button type="button" class="btn btn-success btnStatus" value="Open">Open</button>
        <button type="button" class="btn btn-danger btnStatus" value="Closed">Closed</button>
    </div>
</div>
     
<br/> 
<br/> 
<div class="row">
    <button id="Save" class="btn btn-primary"><i class="fa fa-share-square-o"></i> Save</button> 
</div>

Upvotes: 1

Related Questions