[FEATURE] Custom value for on and off state on form submit

palcarazm commented 2 years ago

Is your feature request related to a problem? Please describe. When the form is submitted, the off toggles are not present in the payload.

Describe the solution you'd like Set a custom on and off values and send them in the payload depending on the toggle state.

Describe alternatives you've considered 😞

Additional context

TODO LIST

[x] Develop feature
[x] Update test app
[x] Add cypress test coverage
[x] Update docs

github-actions[bot] commented 2 years ago

Hi! :wave: Thanks for your issue. You are helping to improve Bootstrap 5 toggle.

palcarazm commented 2 years ago

Imported from https://github.com/gitbrent/bootstrap4-toggle/issues/19 by @ecrahul46

palcarazm commented 2 years ago

Debug html code

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap 5 Toggle | Debug App</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.5.0/build/styles/default.min.css">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>

    <!--Local-->
    <!--<link rel="stylesheet" href="../css/bootstrap5-toggle.css">
    <script src="../js/bootstrap5-toggle.js"></script>-->

    <!--CDN-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap5-toggle@4.2.0/css/bootstrap5-toggle.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap5-toggle@4.2.0/js/bootstrap5-toggle.min.js">
    </script>
</head>

<body class="bg-light p-4">
    <div id="appHeader" class="container">
        <div class="row align-items-center">
            <div class="col-10">
                <h1 class="text-primary fw-light">Debug App</h1>
            </div>
            <div class="col-2 text-end">
                <code>Bootstrap 5.1.3</code>
            </div>
        </div>
        <div class="px-1 text-muted fw-bolder" id="description">Form submit</div>
        <hr>
    </div>
    <main class="container bg-white px-3 py-3 rounded">
        <form>
            <div class="mb-3">
                <label for="exampleInputEmail1" class="form-label">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" name="exampleInputEmail1"
                    aria-describedby="emailHelp">
                <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
            </div>
            <div class="mb-3">
                <label for="exampleInputPassword1" class="form-label">Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1" name="exampleInputPassword1">
            </div>
            <div class="mb-3 form-check">
                <input type="checkbox" class="form-check-input" id="exampleCheck1" name="exampleCheck1" value="checked">
                <label class="form-check-label" for="exampleCheck1">Check me out</label>
            </div>
            <div class="mb-3">
                <input type="checkbox" id="exampleToggle1" name="exampleToggle1"
                    value="checked" data-toggle="toggle" data-on="checked" data-off="unchecked">
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </main>
</body>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.5.0/build/highlight.min.js"></script>
<script>
    $('input[data-toggle="toggle"]').bootstrapToggle();
    $('form').submit((e) => {
        e.preventDefault();
        $('pre').remove();
        $('main').append(
            $('<pre>').append(
                $('<code>')
                    .html(JSON.stringify($('form').serializeArray(), null, 2))
                    .addClass("highlight language-json")
            )
        );
        hljs.highlightAll();
    });
</script>

</html>

palcarazm / bootstrap5-toggle

[FEATURE] Custom value for on and off state on form submit #34