Jump to content
Muiter

Bootstrap toggle JS not sending data

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)

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites
var formURL='processing/factuur_mail.php';

 

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by Muiter

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

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.