How to Fix my JavaScript code to succeed in displaying "ON" or "OFF" texts with-CodePudding

The idea for me is to add on and off functionality in PHP and Ajax later. But for the moment, I am facing an on and off text display error when activating Visa and Mastercard cards whose HTML code is as follows:

<div >
                <div >
                    <div >
                        <div >
                            <div ><img src="cardimg/visa.png" alt=""></div>
                            <div ><label  for="">**** **** **** 1060</label></div>
                        </div>
                        <div >
                            <form method="post" >
                                <div >
                                    <input type="checkbox"  id="customSwitch1" name='machine_state'>
                                    <label  id="statusText1" for="customSwitch1"></label>
                                </div>
                            </form>
                        </div>
                    </div>
 
                    <div >
                            <small >
                                <span >Expiry date:</span>
                            </small>
                            <small >
                                <span>10/16</span>
                            </small>
                    </div>
                </div>
            </div>
            <div >
                <div >
                    <div >
                        <div >
                            <div ><img src="cardimg/mastercard.png" alt=""></div>
                            <div ><label  for="">**** **** **** 1060</label></div>
                        </div>
                        <div >
                            <form method="post" >
                                <div >
                                    <input type="checkbox"  id="customSwitch2" name='machine_state'>
                                    <label  id="statusText2" for="customSwitch2"></label>
                                </div>
                            </form>
                        </div>
                    </div>
 
                    <div >
                            <small >
                                <span >Expiry date:</span>
                            </small>
                            <small >
                                <span>10/16</span>
                            </small>
                    </div>
                </div>
            </div>

And a 1st JS code of ids customSwitch1 and statusText1:

function putStatus() {
    $.ajax({
        type: "GET",
        url: "https://api.srv3r.com/toggle/",
        data: {toggle_select: true},
        success: function (result) {
            if (result == 1) {
                $('#customSwitch1').prop('checked', true);
                statusText1(1);
            } else {
                $('#customSwitch1').prop('checked', false);
                statusText1(0);
            }
        }
    });
}
 
function statusText1(status_val) {
    if (status_val == 1) {
        var status_str = "On";
    } else {
        var status_str = "Off";
    }
    document.getElementById("statusText1").innerText = status_str;
}
 
function onToggle() {
    $('#toggleForm :checkbox').change(function () {
        if (this.checked) {
            //alert('checked');
            updateStatus(1);
            statusText1(1);
        } else {
            //alert('NOT checked');
            updateStatus(0);
            statusText1(0);
        }
    });
}
 
function updateStatus(status_val) {
    $.ajax({
        type: "POST",
        url: "https://api.srv3r.com/toggle/",
        data: {toggle_update: true, status: status_val},
        success: function (result) {
            console.log(result);
        }
    });
}
 
$(document).ready(function () {
    putStatus();//Set button to current status
    onToggle();//Update when toggled
    statusText1();//Last updated text
});

And the second JavaScript code of ids customSwitch2 and statusText2:

function putStatus() {
    $.ajax({
        type: "GET",
        url: "https://api.srv3r.com/toggle/",
        data: {toggle_select: true},
        success: function (result) {
            if (result == 1) {
                $('#customSwitch2').prop('checked', true);
                statusText2(1);
            } else {
                $('#customSwitch2').prop('checked', false);
                statusText2(0);
            }
        }
    });
}
 
function statusText2(status_val) {
    if (status_val == 1) {
        var status_str = "On";
    } else {
        var status_str = "Off";
    }
    document.getElementById("statusText2").innerText = status_str;
}
 
function onToggle() {
    $('#toggleForm :checkbox').change(function () {
        if (this.checked) {
            //alert('checked');
            updateStatus(1);
            statusText2(1);
        } else {
            //alert('NOT checked');
            updateStatus(0);
            statusText2(0);
        }
    });
}
 
function updateStatus(status_val) {
    $.ajax({
        type: "POST",
        url: "https://api.srv3r.com/toggle/",
        data: {toggle_update: true, status: status_val},
        success: function (result) {
            console.log(result);
        }
    });
}
 
$(document).ready(function () {
    putStatus();//Set button to current status
    onToggle();//Update when toggled
    statusText2();//Last updated text
});

The problem is that when I click on the Checkbox button, at the HTML page level, I should in principle have a toggle effect that changes from on to off with each click.

But the problem is that the statusText1 and statusText2 representing the on and off texts remain static instead of changing each time the checkbox button is clicked.

So help me to fix my JavaScript code above so that it successfully changes text from on to off every time I click.

Also is there a way to synchronize the use of the Enable and Disable Checkbox Button of the different Ids instead of doing them separately in two different codes which are almost identical ???

CodePudding user response：

I've have fixed the "On" and "Off" issue and "synchronize the use of the Enable and Disable Checkbox Button". Kindly try this code

function putStatus(target) {
    $.ajax({
        type: "GET",
        url: "https://api.srv3r.com/toggle/",
        data: {toggle_select: true},
        success: function (result) {
            if (result == 1) {
                $(target).prop('checked', true);
            } else {
                $(target).prop('checked', false);
            }
        }
    });
}
 
function updateStatus(status_val) {
    $.ajax({
        type: "POST",
        url: "https://api.srv3r.com/toggle/",
        data: {toggle_update: true, status: status_val},
        success: function (result) {
            console.log(result);
        }
    });
}
 
$(document).ready(function () {
    // putStatus('#customSwitch1');
    // putStatus('#customSwitch2');

    $('.statuses').change(function () {
        if($(this).is(':checked')){
            updateStatus(1);
            $(this).next().text('On');
        }else{
            updateStatus(0);
            $(this).next().text('Off');
        }
    });
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<div >
    <div >
        <div >
            <div >
                <div ><img src="cardimg/visa.png" alt=""></div>
                <div ><label  for="">**** **** **** 1060</label></div>
            </div>
            <div >
                <form method="post" >
                    <div >
                        <input type="checkbox"  id="customSwitch1" name="machine_state">
                        <label  for="customSwitch1">Off</label>
                    </div>
                </form>
            </div>
        </div>
        <div >
            <small >
                <span >Expiry date:</span>
            </small>
            <small >
                <span>10/16</span>
            </small>
        </div>
    </div>
</div>
<div >
    <div >
        <div >
            <div >
                <div ><img src="cardimg/mastercard.png" alt=""></div>
                <div ><label  for="">**** **** **** 1060</label></div>
            </div>
            <div >
                <form method="post" >
                    <div >
                        <input type="checkbox"  id="customSwitch2" name="machine_state">
                        <label  for="customSwitch2">Off</label>
                    </div>
                </form>
            </div>
        </div>
        <div >
            <small >
                <span >Expiry date:</span>
            </small>
            <small >
                <span>10/16</span>
            </small>
        </div>
    </div>
</div>