Jump to content

Bootstrap toggle JS not sending data


Muiter

Recommended Posts

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.

Knipsel.JPG.1a9d5a630bf96ceda69e205aaa8f9d86.JPG

 

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)

Link to comment
Share on other sites

    <!-- 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.

Link to comment
Share on other sites

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 by Muiter
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

 

 

image.png.dc0c559d1d4b8f21e3051196fe58c1d5.png

Link to comment
Share on other sites

  • 3 years later...

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.

Knipsel.JPG.1a9d5a630bf96ceda69e205aaa8f9d86.JPG

 

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)

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.