Блог

TL:DR У меня тоже есть страница, на которой пользователи могут добавлять свои социальные профили.

На странице есть форма для создания, а затем для каждой созданной ими формы для редактирования ссылок в социальных сетях.

Форма работает и имеет два входа, помимо кнопки для отправки. Один из них позволяет пользователям искать значки (шрифт потрясающий) на основе ввода строки и значения значка с помощью радиовхода. Два — это ввод текста для поля URL. Я сделал значок поиска функцией для быстрого повторного использования.

Моя проблема в том, что если у меня есть более одного экземпляра этой функции на странице, она выполняет поиск сразу по всем формам. (Создайте новую и отредактируйте все существующие формы профилей в социальных сетях)

Может ли кто-нибудь указать мне в правильном направлении, как сделать эту функцию только в том экземпляре, который будет использовать пользователь? Я все еще изучаю javascript и jquery, но добираюсь туда.

Вот что у меня уже есть.

Код:

 //The Form
<form name="updateSMM" action="./" method="post" autocomplete="off">
    <div class="form-group">
        <label class="form-label">Icon</label>
        <?php echo displayFontAwesome($the_icon, "iconArea", "icon"); ?>
    </div>
    <div class="form-group">
        <label class="form-label">URL</label>
        <input type="text" class="form-control " name="url" value="<?php echo $the_url; ?>">
    </div>

    <div class="form-group">
        <button type="submit" class="btn btn-primary btn-block updateSMM" name="updateSMM">Update</button>
    </div>
</form>

//The PHP Class
<?
function displayFontAwesome($current_icon, $area_id, $input_name) {
    //this is an array of all icon classes. Ex: fab fa-wikipedia-w
    $font_awesome_array = arrayFontAwesome5_7_1(); 
    
    
    //create the list of options from the array
    $fa_icon_options = '';
    foreach($font_awesome_array as $faa) {
        $checked = ""; 
        if($current_icon == $faa) { $checked = "checked"; }
        $fa_icon_options .= '
        <div class="button_div mr-1 mt-1 selectedIcon iconDisplay">
            <label class="'.btn_xs_primary.'" for="radio-button-'.$faa.'">
                <input type="radio" id="radio-button-'.$faa.'" name="'.$input_name.'" value="'.$faa.'" '.$checked.'> <i class="'.$faa.' fa-2x"></i>
            </label>
        </div>';
    }
    
    //puts all options into the search input for the form
    $_return = '
    <div class="iconSearching">
        <input class="form-control myIconSearch" area-id="'.$area_id.'" type="text" placeholder="Search.. '.$current.' == '.$faa.'">
        <div class="icons-list-demo myIconsArea myIconsArea-'.$area_id.'" style="max-height: 195px; overflow-y: scroll;">
                '.$fa_icon_options.'
        </div>
    </div>';

    return $_return;
}
?>

//The Javascript/Jquery
<script>
$(document).ready(function() {

    $('.myIconSearch').keyup(delay(function (e) {
        var searchVal = $(this).val(); //Get the value of the item typed into the search box
        var areaID = $(this).attr('area-id'); //My attempt at making the forms unique to search
        var inputSearching = $(".myIconsArea-" areaID " :input[value*=" searchVal "]");
        if(inputSearching.val()) {
            inputSearching.closest(".iconDisplay").show();
            $(":radio").not(inputSearching).closest(".iconDisplay").hide();
        } else {
            $(":radio").hide();
        }
    }, 500));
    
});
</script>