Chcę użycia, aby wybrać przynajmniej wyboru, aby wyświetlić błąd w tej samej stronie Chcesz wyświetlić na innej stronie.How, aby zrobić to za pomocą jQuery.i am Callowa w jQuery. Czy ktoś może pomóc pomocy?

Mój kod jest,

<?php
include_once "../header/header.php";
$_SESSION['user_id'];
$_SESSION['project_name']; 
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Create Test</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>    
    <!-- The below url are required for dropdown -->
    <link href="http://localhost/Performance/Test/css/fselect.css" rel="stylesheet">
    <script src="http://localhost/Performance/Test/js/fSelect.js"></script>
    <script>
    (function($) {
        $(function() { 
            $('#filename').fSelect();
        });
    })(jQuery);
    </script>

</head>
<?php
    include_once "database.php";
if(isset($_POST['submit'])){
if(empty(isset($_POST['filename']))){
    echo "error";
  }
 }  
?>

<body style="background-color: white">
    <form method="post" action="RunTest.php" autocomplete="off">
    <input style="position:fixed; top:40px; right:25px; margin-right:4cm;" class="btn btn-success col-sm-1" type="submit" name="submit"  value="Save"/>
    <!--<input style="position:fixed; top:40px; right:10px;" class="btn btn-success col-sm-1" type="submit" onclick="ClearFields();" value="Clear"/>-->
            <div>       
                <select  name="filename[]" id="filename" multiple="multiple">
                    <optgroup label="Filename">
                        <?php
                            while ($row = mysqli_fetch_array($result_fsql)) {
                                echo "<option id='file' value='".$row['script']."'>".$row['script']."</option>";
                            }
                        ?>
                    </optgroup>
                </select>
            </div><br/>
        </form> 
   </body>
</html>

Fselect.js.

[![(function($) {

    $.fn.fSelect = function(options) {

        if ('string' === typeof options) {
            var settings = options;
        }
        else {
            var settings = $.extend({
                placeholder: 'Select some options',
                numDisplayed: 3,
                overflowText: '{n} selected',
                searchText: 'Search',
                showSearch: true,
                optionFormatter: false
            }, options);
        }


        /**
         * Constructor
         */
        function fSelect(select, settings) {
            this.$select = $(select);
            this.settings = settings;
            this.create();
        }


        /**
         * Prototype class
         */
        fSelect.prototype = {
            create: function() {
                this.settings.multiple = this.$select.is('\[multiple\]');
                var multiple = this.settings.multiple ? ' multiple' : '';
                this.$select.wrap('<div class="fs-wrap' + multiple + '" tabindex="0" />');
                this.$select.before('<div class="fs-label-wrap"><div class="fs-label">' + this.settings.placeholder + '</div><span class="fs-arrow"></span></div>');
                this.$select.before('<div class="fs-dropdown hidden"><div class="fs-options"></div></div>');
                this.$select.addClass('hidden');
                this.$wrap = this.$select.closest('.fs-wrap');
                this.$wrap.data('id', window.fSelect.num_items);
                window.fSelect.num_items++;
                this.reload();
            },

            reload: function() {
                if (this.settings.showSearch) {
                    var search = '<div class="fs-search"><input type="search" placeholder="' + this.settings.searchText + '" /></div>';
                    this.$wrap.find('.fs-dropdown').prepend(search);
                }
                this.idx = 0;
                this.optgroup = 0;
                this.selected = \[\].concat(this.$select.val()); // force an array
                var choices = this.buildOptions(this.$select);
                this.$wrap.find('.fs-options').html(choices);
                this.reloadDropdownLabel();
            },

            destroy: function() {
                this.$wrap.find('.fs-label-wrap').remove();
                this.$wrap.find('.fs-dropdown').remove();
                this.$select.unwrap().removeClass('hidden');
            },

            buildOptions: function($element) {
                var $this = this;

                var choices = '';
                $element.children().each(function(i, el) {
                    var $el = $(el);

                    if ('optgroup' == $el.prop('nodeName').toLowerCase()) {
                        choices += '<div class="fs-optgroup-label" data-group="' + $this.optgroup + '">' + $el.prop('label') + '</div>';
                        choices += $this.buildOptions($el);
                        $this.optgroup++;
                    }
                    else {
                        var val = $el.prop('value');

                        // exclude the first option in multi-select mode
                        if (0 < $this.idx || '' != val || ! $this.settings.multiple) {
                            var disabled = $el.is(':disabled') ? ' disabled' : '';
                            var selected = -1 < $.inArray(val, $this.selected) ? ' selected' : '';
                            var group = ' g' + $this.optgroup;
                            var row = '<div class="fs-option' + selected + disabled + group + '" data-value="' + val + '" data-index="' + $this.idx + '"><span class="fs-checkbox"><i></i></span><div class="fs-option-label">' + $el.html() + '</div></div>';

                            if ('function' === typeof $this.settings.optionFormatter) {
                                row = $this.settings.optionFormatter(row);
                            }

                            choices += row;
                            $this.idx++;
                        }
                    }
                });

                return choices;
            },

            reloadDropdownLabel: function() {
                var settings = this.settings;
                var labelText = \[\];

                this.$wrap.find('.fs-option.selected').each(function(i, el) {
                    labelText.push($(el).find('.fs-option-label').text());
                });

                if (labelText.length < 1) {
                    labelText = settings.placeholder;
                }
                else if (labelText.length > settings.numDisplayed) {
                    labelText = settings.overflowText.replace('{n}', labelText.length);
                }
                else {
                    labelText = labelText.join(', ');
                }

                this.$wrap.find('.fs-label').html(labelText);
                this.$wrap.toggleClass('fs-default', labelText === settings.placeholder);
                this.$select.change();
            }
        }


        /**
         * Loop through each matching element
         */
        return this.each(function() {
            var data = $(this).data('fSelect');

            if (!data) {
                data = new fSelect(this, settings);
                $(this).data('fSelect', data);
            }

            if ('string' === typeof settings) {
                data\[settings\]();
            }
        });
    }


    /**
     * Events
     */
    window.fSelect = {
        'num_items': 0,
        'active_id': null,
        'active_el': null,
        'last_choice': null,
        'idx': -1
    };

    $(document).on('click', '.fs-option:not(.hidden, .disabled)', function(e) {
        var $wrap = $(this).closest('.fs-wrap');
        var do_close = false;

        if ($wrap.hasClass('multiple')) {
            var selected = \[\];

            // shift + click support
            if (e.shiftKey && null != window.fSelect.last_choice) {
                var current_choice = parseInt($(this).attr('data-index'));
                var addOrRemove = ! $(this).hasClass('selected');
                var min = Math.min(window.fSelect.last_choice, current_choice);
                var max = Math.max(window.fSelect.last_choice, current_choice);

                for (i = min; i <= max; i++) {
                    $wrap.find('.fs-option\[data-index='+ i +'\]')
                        .not('.hidden, .disabled')
                        .each(function() {
                            $(this).toggleClass('selected', addOrRemove);
                        });
                }
            }
            else {
                window.fSelect.last_choice = parseInt($(this).attr('data-index'));
                $(this).toggleClass('selected');
            }

            $wrap.find('.fs-option.selected').each(function(i, el) {
                selected.push($(el).attr('data-value'));
            });
        }
        else {
            var selected = $(this).attr('data-value');
            $wrap.find('.fs-option').removeClass('selected');
            $(this).addClass('selected');
            do_close = true;
        }

        $wrap.find('select').val(selected);
        $wrap.find('select').fSelect('reloadDropdownLabel');

        // fire an event
        $(document).trigger('fs:changed', $wrap);

        if (do_close) {
            closeDropdown($wrap);
        }
    });

    $(document).on('keyup', '.fs-search input', function(e) {
        if (40 == e.which) { // down
            $(this).blur();
            return;
        }

        var $wrap = $(this).closest('.fs-wrap');
        var matchOperators = /\[|\\{}()\[\]^$+*?.\]/g;
        var keywords = $(this).val().replace(matchOperators, '\\$&');

        $wrap.find('.fs-option, .fs-optgroup-label').removeClass('hidden');

        if ('' != keywords) {
            $wrap.find('.fs-option').each(function() {
                var regex = new RegExp(keywords, 'gi');
                if (null === $(this).find('.fs-option-label').text().match(regex)) {
                    $(this).addClass('hidden');
                }
            });

            $wrap.find('.fs-optgroup-label').each(function() {
                var group = $(this).attr('data-group');
                var num_visible = $(this).closest('.fs-options').find('.fs-option.g' + group + ':not(.hidden)').length;
                if (num_visible < 1) {
                    $(this).addClass('hidden');
                }
            });
        }

        setIndexes($wrap);
    });

    $(document).on('click', function(e) {
        var $el = $(e.target);
        var $wrap = $el.closest('.fs-wrap');

        if (0 < $wrap.length) {

            // user clicked another fSelect box
            if ($wrap.data('id') !== window.fSelect.active_id) {
                closeDropdown();
            }

            // fSelect box was toggled
            if ($el.hasClass('fs-label') || $el.hasClass('fs-arrow')) {
                var is_hidden = $wrap.find('.fs-dropdown').hasClass('hidden');

                if (is_hidden) {
                    openDropdown($wrap);
                }
                else {
                    closeDropdown($wrap);
                }
            }
        }
        // clicked outside, close all fSelect boxes
        else {
            closeDropdown();
        }
    });

    $(document).on('keydown', function(e) {
        var $wrap = window.fSelect.active_el;
        var $target = $(e.target);

        // toggle the dropdown on space
        if ($target.hasClass('fs-wrap')) {
            if (32 == e.which) {
                $target.find('.fs-label').trigger('click');
                return;
            }
        }
        // preserve spaces during search
        else if (0 < $target.closest('.fs-search').length) {
            if (32 == e.which) {
                return;
            }
        }
        else if (null === $wrap) {
            return;
        }

        if (38 == e.which) { // up
            e.preventDefault();

            $wrap.find('.fs-option.hl').removeClass('hl');

            var $current = $wrap.find('.fs-option\[data-index=' + window.fSelect.idx + '\]');
            var $prev = $current.prevAll('.fs-option:not(.hidden, .disabled)');

            if ($prev.length > 0) {
                window.fSelect.idx = parseInt($prev.attr('data-index'));
                $wrap.find('.fs-option\[data-index=' + window.fSelect.idx + '\]').addClass('hl');
                setScroll($wrap);
            }
            else {
                window.fSelect.idx = -1;
                $wrap.find('.fs-search input').focus();
            }
        }
        else if (40 == e.which) { // down
            e.preventDefault();

            var $current = $wrap.find('.fs-option\[data-index=' + window.fSelect.idx + '\]');
            if ($current.length < 1) {
                var $next = $wrap.find('.fs-option:not(.hidden, .disabled):first');
            }
            else {
                var $next = $current.nextAll('.fs-option:not(.hidden, .disabled)');
            }

            if ($next.length > 0) {
                window.fSelect.idx = parseInt($next.attr('data-index'));
                $wrap.find('.fs-option.hl').removeClass('hl');
                $wrap.find('.fs-option\[data-index=' + window.fSelect.idx + '\]').addClass('hl');
                setScroll($wrap);
            }
        }
        else if (32 == e.which || 13 == e.which) { // space, enter
            e.preventDefault();

            $wrap.find('.fs-option.hl').click();
        }
        else if (27 == e.which) { // esc
            closeDropdown($wrap);
        }
    });

    function setIndexes($wrap) {
        $wrap.find('.fs-option.hl').removeClass('hl');
        $wrap.find('.fs-search input').focus();
        window.fSelect.idx = -1;
    }

    function setScroll($wrap) {
        var $container = $wrap.find('.fs-options');
        var $selected = $wrap.find('.fs-option.hl');

        var itemMin = $selected.offset().top + $container.scrollTop();
        var itemMax = itemMin + $selected.outerHeight();
        var containerMin = $container.offset().top + $container.scrollTop();
        var containerMax = containerMin + $container.outerHeight();

        if (itemMax > containerMax) { // scroll down
            var to = $container.scrollTop() + itemMax - containerMax;
            $container.scrollTop(to);
        }
        else if (itemMin < containerMin) { // scroll up
            var to = $container.scrollTop() - containerMin - itemMin;
            $container.scrollTop(to);
        }
    }

    function openDropdown($wrap) {
        window.fSelect.active_el = $wrap;
        window.fSelect.active_id = $wrap.data('id');
        window.fSelect.initial_values = $wrap.find('select').val();
        $wrap.find('.fs-dropdown').removeClass('hidden');
        $wrap.addClass('fs-open');
        setIndexes($wrap);
    }

    function closeDropdown($wrap) {
        if ('undefined' == typeof $wrap && null != window.fSelect.active_el) {
            $wrap = window.fSelect.active_el;
        }
        if ('undefined' !== typeof $wrap) {
            // only trigger if the values have changed
            var initial_values = window.fSelect.initial_values;
            var current_values = $wrap.find('select').val();
            if (JSON.stringify(initial_values) != JSON.stringify(current_values)) {
                $(document).trigger('fs:closed', $wrap);
            }
        }

        $('.fs-wrap').removeClass('fs-open');
        $('.fs-dropdown').addClass('hidden');
        window.fSelect.active_el = null;
        window.fSelect.active_id = null;
        window.fSelect.last_choice = null;
    }

})(jQuery);

enter image description here

0
Vidya 4 czerwiec 2018, 13:43

3 odpowiedzi

Najlepsza odpowiedź

Próbowałem tak, to działa dobrze.

<script>
    //error showing if user does not select any uploaded jmx file.
  function validateForm() {
        var x = document.forms["myForm"]["filename"].value;  
        if (x == ''){
          jQuery('#filechoose_error').show();
          return false;             
       }
  }
</script>

Formalnie,

<form name="myForm" method="post" action="RunTest.php" onsubmit="return validateForm();" autocomplete="off">
    <div>
        <div class="col-xs-5">
            <span><b>Filename</b></span>
                </div>
                <select  name="filename[]" id="filename" multiple="multiple">
                    <optgroup label="Filename">
                        <?php
                            while ($row = mysqli_fetch_array($result_fsql)) {
                            echo "<option id='file' value='".$row['script']."'>".$row['script']."</option>";
                                }
                    </optgroup>
                </select>
            <!--display error-->
        <div style="display:none; text-align:center; color:red" class="error" id="filechoose_error" >&emsp;&emsp;&emsp;  * select a file</div>
    </div>
</form>
0
Vidya 19 czerwiec 2018, 11:48
$('#checkboxId').is(':checked')

Spowoduje to powrót True lub False, zależy od statusu wyboru

0
user3050767 19 czerwiec 2018, 11:53

Możesz użyć AJAX, aby osiągnąć to, co chcesz. Po pierwsze, muszę powiedzieć, że osobiście używam jQuery AJAX, a na ogół notacji jquery dla mojego javascript. Jest po prostu dużo kodu prosta i łatwa do odczytania. Jeśli chcesz zrobić to samo, będziesz musiał zainstalować bibliotekę jQuery i dołączyć go w swoim pliku, jak w przypadku każdego normalnego pliku JavaScript lub CSS.

Funkcja Ajax:

function sendData()
{
    $.ajax({
        type : "POST",
        url : "some_page.php",
        data : { checkBox : $("#idOfCheckbox:checked").val() },
        success: function (html) {
            //Success handling
            if( html.includes('notCheckedError') ) {
                //Show error message in an element by id
                $("#errorContainer").html("Error! You have not checked the checkbox.")
            }
            else {
               //Perform redirect
               window.location.href="/other_page.php";
           }
        }
    })
}

Zdecydowałem się wykluczyć funkcję Ajax w inną funkcję, która może być nazywana ONCLICK, lub jednak wybierzesz go. Możesz także umieścić funkcję Ajax w funkcji dokumentu. Właśnie wybrałem tę metodę, ponieważ zapewnia łatwe zrozumienie.

Informacje o funkcji Ajax definiujemy typ danych. Najczęstsze zastosowania to POST i GET. W naszym przypadku wybrałem się z POST. Możesz dowiedzieć się więcej o tych typach danych Oto. Następnie określamy adres URL, w którym wysyłamy naszą zmienną danych. Następnie określamy dane. Po pierwsze zdefiniujemy naszą zmienną, CheckBox , w tym przypadku. Następnie ustawia zmienną, która ma być wartością wybranego pola wyboru. Przynosimy tę wartość, kierując identyfikatorem pole wyboru. Masz wiele opcji, w jaki sposób możesz wybrać różne elementy, ID, klasa, nazwa itp.

Następnie doszczymy do naszego sukcesu, gdzie sprawdzamy, czy HTML zawiera (jest to HTML z naszej Some_Page.php ) określony ciąg, który zdefiniowaliśmy. Ten ciąg jest tym, co będziemy echo jako błąd w naszym pliku PHP. Jeśli plik PHP nie zawiera łańcucha, to będzie kontynuowane przez przekierowanie, w jaki sposób wklei nasze zdefiniowane komunikat o błędzie z funkcji AJAX do kontenera błędu.

Teraz, po nazwisku naszej funkcji, nasze some_page.php otrzyma wybranie pola wyboru Zmiennie , czy nie. W naszym pliku PHP będziemy musieli wykonać czek, czy post faktycznie zawiera wartość, czy nie. Jeśli wartość jest pusta, rzucamy błąd, który sprawdzamy w naszej funkcji AJAX. To znaczy. notcheckEkedError .

Plik PHP będzie wyglądał w ten sposób:

<?php
if(!$_POST['checkBox']) {
    echo 'notCheckedError';
}
else {
    //Everything is ok, the AJAX will perform the redirect.
}
?>

Teraz nie wiem, jak wygląda twój HTML w odniesieniu do twojego pola wyboru, ale może to wyglądać:

<input type="checkbox" id="idOfCheckbox" name="nameOfCheckbox" value="1">

Możesz mieć przycisk, aby zadzwonić do funkcji AJAX,

<button onclick="sendData();">Send data!</button>

Kontener błędu (może być element Div lub Span itp.):

<div id="errorContainer"></div>

Warto zauważyć , możesz ustawić właściwość pola wyboru, korzystając z właściwości checked:

<input type="checkbox" id="idOfCheckbox" name="nameOfCheckbox" value="1" checked>

Lub przy użyciu jQuery:

$("#idOfCheckbox").attr('checked', true);

Lub,

$("#idOfCheckbox").prop('checked');

W ten sposób twój użytkownik nie będzie musiał aktywnie kliknąć, aby go sprawdzić.

Inną opcją jest sprawdzenie wartości boolowskiej pola wyboru, aby sprawdzić, czy został sprawdzony, czy nie. Następnie możesz wywołać funkcję AJAX na podstawie prawdą ocenę.

Aby uzyskać wartość boolowską pola wyboru:

$("#idOfCheckbox").is(':checked');

Możesz to zrobić,

if( $("#idOfCheckbox").is(':checked') ) {
    //logic for check goes here
}
else {
    //Error
}

Mam nadzieję, że to pomogło. :)

0
Martin 9 czerwiec 2018, 14:32