Bootstrap toggle JS not sending data

[Muiter]

I am using Bootstrap Toggle in my script.

I have it included like this:

    <!-- jQuery -->
    <script src="vendor/jquery/jquery.min.js"></script>

    <!-- Toggele http://www.bootstraptoggle.com -->
    <script src="vendor/bootstrap-toggle/bootstrap-toggle.min.js"></script>

    <!-- Toggele CSS -->
    <link href="vendor/bootstrap-toggle/bootstrap-toggle.min.css" rel="stylesheet">

So when I use a checkbox as a normal checkbox without the Bootstrap Toggle markup the value (when box is checked) it is send with the form.
When I add the Bootstrap Toggle to this the value is not send (when checked)

<div class="col-md-2 text-center" style="padding-top: 20px;">
	<input type="checkbox" id="mail_dossier_gereed['.$i.']" name="mail_dossier_gereed" value="ja" data-width="200" data-toggle="toggle" data-toggle="toggle" data-size="large" data-onstyle="success" data-offstyle="info" data-on="Project is afgerond" data-off="Project niet afgerond" checked>
</div>

I have checked this with print_r($_POST).

The form where this checkbox is located in a bootstrap modal, this modal is located in my subfolder modal.

 

When I use this kind of checkbox in a file that is located in the root of my server, then Bootstrap Toggle is correctly sending the value (when checked).

Any suggestions why this not might work when the file is located in a modal?

The form of the modal is send thru JS, maybe that is also an issue, but I don't think so because an normal checkbox is send correctly (when checked)

[requinix]

    <!-- jQuery -->
    <script src="vendor/jquery/jquery.min.js"></script>

    <!-- Toggele http://www.bootstraptoggle.com -->
    <script src="vendor/bootstrap-toggle/bootstrap-toggle.min.js"></script>

    <!-- Toggele CSS -->
    <link href="vendor/bootstrap-toggle/bootstrap-toggle.min.css" rel="stylesheet">

When using URLs to files and paths on your own site, always use absolute URLs. They start with a slash and the path is according to the root of the site. So "vendor" is bad and should be "/vendor" instead, and "../vendor" (from your modals directory) is bad and should be "/vendor" as well.

I'm skeptical that fixing this will also fix your problem.

[Muiter]

I have changed all URLs to absolute. Did not solve the problem.

This is the JS I am using so send the form.

$(document).ready(function () {
    $(".mail_table_4").on('click', function() {
        formid=($(this).attr("alt"));
        subform_mail_table_4(formid);
    });
});
function subform_mail_table_4(formid)
{
       var postData = $("#mail_table_4"+formid).serializeArray();
       var formURL='processing/factuur_mail.php';
        $.ajax({
            url: formURL,
            type: "POST",
            data: postData,
            success: function(data, textStatus, jqXHR) {
                $('#modal_mail_table_4'+formid+' .modal-body').html(data);
                $("#submit_mail_table_4"+formid).remove();
            },
            error: function(jqXHR, status, error) {
                console.log(status + ": " + error);
            }
        });
        e.preventDefault();
}

 

Edited October 11, 2018 by Muiter

[Muiter]

When I add an extra check like this:

onclick="validate(this, '.$i.')"

<script>
function validate(selectVeld, nr)
{
    window.alert("You clicked me");
}
</script>

When I have not used the Bootstrap Toggle I get the message "You clicked me", but when I add Bootstrap Toggle I am not getting the message.

[requinix]

var formURL='processing/factuur_mail.php';

 

[Muiter]

20 hours ago, requinix said:

var formURL='processing/factuur_mail.php';

 

I don't understand what you mean?

I have checked the form output there and it is not showing up when I use Bootstrap Toggle. It showing up when I use an standard checkbox.

[requinix]

Remember what I said about using absolute URLs? That's true not just for Javascript and CSS includes but any time you need to reference some thing on your site.

[Muiter]

OK, but all the normal form textfields in the same form are not losing there data, why should be that any different for the checkbox?

(also this did not solve my problem)

Edited October 17, 2018 by Muiter

[requinix]

Like I said earlier, I doubted this was the source of your problem. But regardless it needed to be fixed.

Use your browser's network monitor to see the request that gets sent when you try to submit the form. You should be able to see the data submitted with it. First make sure that everything you see there is correct: the fields are named properly, there aren't duplicates with the same name, that sort of stuff. Then check whether the checkbox data is in there: if so then your PHP is the problem, if not then something in your markup or Javascript is the problem.

This would be easier to understand if I could see it happening for myself. Is the form online somewhere we can see? If not, can you create an HTML file that demonstrates the problem in a way that we could copy/paste the code to try on our own?

[Muiter]

OK, I moved it to an place where you can test this yourself.

See here for function without BootstrapToggele: https://torza.nl/toggle_no_issue.php

See here for function with BootstrapToggele: https://torza.nl/toggle_issue.php

Click on the mail icon to test. When te form is send I have used:

print_r($_POST); exit;

 

The form without BootstrapToggele has the correct value on the end of this ([mail_dossier_gereed] => ja), the form with BootstrapToggele  does not have this value.

 

 

[requinix]

Validate your markup. There are a few places where you're missing closing tags, like with the edit and delete forms, and that can throw off the rest of the document.

[Muiter]

The problem still exists when I remove the edit and delete forms.

[requinix]

Okay. Does your markup validate now?

[xenomorph78]

Did you ever find the resolution to your problem? I'm having the same issue, but just using a simple POST form method. It will send the value when I take data-toggle="toggle" out of the input line, but when I put it back in, the value does not pass on when I click Submit.
 

<input type="checkbox" name="disposed" id="disposed" value="YES" data-toggle="toggle" data-on="Include Disposed" data-off="Exclude Disposed" data-size="lg" data-onstyle="success" data-offstyle="dark" />

On 10/10/2018 at 1:46 PM, Muiter said:

I am using Bootstrap Toggle in my script.

I have it included like this:

    <!-- jQuery -->
    <script src="vendor/jquery/jquery.min.js"></script>

    <!-- Toggele http://www.bootstraptoggle.com -->
    <script src="vendor/bootstrap-toggle/bootstrap-toggle.min.js"></script>

    <!-- Toggele CSS -->
    <link href="vendor/bootstrap-toggle/bootstrap-toggle.min.css" rel="stylesheet">

So when I use a checkbox as a normal checkbox without the Bootstrap Toggle markup the value (when box is checked) it is send with the form.
When I add the Bootstrap Toggle to this the value is not send (when checked)

<div class="col-md-2 text-center" style="padding-top: 20px;">
	<input type="checkbox" id="mail_dossier_gereed['.$i.']" name="mail_dossier_gereed" value="ja" data-width="200" data-toggle="toggle" data-toggle="toggle" data-size="large" data-onstyle="success" data-offstyle="info" data-on="Project is afgerond" data-off="Project niet afgerond" checked>
</div>

I have checked this with print_r($_POST).

The form where this checkbox is located in a bootstrap modal, this modal is located in my subfolder modal.

 

When I use this kind of checkbox in a file that is located in the root of my server, then Bootstrap Toggle is correctly sending the value (when checked).

Any suggestions why this not might work when the file is located in a modal?

The form of the modal is send thru JS, maybe that is also an issue, but I don't think so because an normal checkbox is send correctly (when checked)