CODEWITHSUNDEEP
javascripthtmlformssubmitbootstrap-select
Torkil Vatne
Torkil Vatne

Reputation: 97

Can't submit form with data-live-search as true (Bootstrap-select)

I'm making a issue reporting form with categories and sub categories. The form also requires the user to add their e-mail address (from a list). The list has the data-live-search = true to give them the possibility to search for it in the list.

The form submits if you first start to type in the search field for the e-mail and then selects it, but if you don't write in the search bar and just select it from the list (without typing anything), the form won't submit... This is what the form looks like (a simplified version, but still not working):

<form role="form" name="form" id="form" action="file.php" method="post">

    <!-- AUTHOR NAME -->
    <div class="form-group" id="form-group-author-name">
        <label class="sr-only" for="author-name">Author's name</label>
        <input type="text" name="author-name" id="form-author-name" placeholder="Author's name" class="form-control" required>
    </div>

    <!-- AUTHOR E-MAIL -->
    <div class="form-group" id="form-group-author-email">
        <select class="selectpicker" name="author-email" id="form-author-email" data-width="100%" title="Author's e-mail" data-live-search="true" required>
            <option>[email protected]</option>
            <option>[email protected]</option>
            <option>[email protected]</option>
            <option>[email protected]</option>
            <option>[email protected]</option>
        </select>
        <p class="help-block">Search for your e-mail.</p>
    </div>
    <button type="submit" class="btn">Submit</button>
</form>

I've also tried to add an event listener to the select field and use $("#" + "form-author-email").selectpicker('refresh'); and document.getElementById("form-author-email").value = $("#" + "form-author-email").val(); in case it was because of the field not updateing, but that wasn't working either.

If I use console.log($("#" + "form-author-email").val()); I still get the value selected, so I don't understand what the problem is.

Upvotes: 0

Views: 1753

Answers (1)

Torkil Vatne
Torkil Vatne

Reputation: 97

I've figured out the problem. I've added a jQuery validation function (for all input fields) that used e.preventDefault(); and added a error styling-class if the input was empty, which it would always be if they didn't type anything into the search bar. I've add the code below in case anybody has done the same thing: 

jQuery(document).ready(function() {

    $('.form input[type="text"]').on('focus', function() {
        $(this).removeClass('error');
    });

    $('.form').on('submit', function(e) {

        $(this).find('input[type="text"]').each(function(){
            if( $(this).val() == "" ) {
                e.preventDefault();
                $(this).addClass('error');
            }
            else {
                $(this).removeClass('error');
            }
        });

    });


});

Upvotes: 1

Related Questions