Отправить значение span на сервер

218

13 января 2018, 02:21

Я подключил к странице библиотеку jquery-ui , и использую её функционал на странице. В частности autocomplete, автозаполнение инпута метками. (вот такая штука)

сама метка представляет собой span со значением, внутри div, эти span'ы создаются на лету javasсript`ом , в исходной вёрстки их нет, вот код:

<script type="text/javascript">
        $(function(){
            //Присоединяем автозаполнение
            $("#to").autocomplete({
                //Определяем обратный вызов к результатам форматирования
                source: function(req, add){
                    //Передаём запрос на сервер
                    $.getJSON("../../components/airports_search.php?callback=?", req, function(data) {
                        //Создаем массив для объектов ответа
                        var suggestions = [];
                        //Обрабатываем ответ
                        $.each(data, function(i, val){                              
                            suggestions.push(val.index);
                        });
                        //Передаем массив обратному вызову
                        add(suggestions);
                    });
                },
                //Определяем обработчик селектора
                select: function(e, ui) {
                    //Создаем форматированную переменную friend
                    var friend = ui.item.value,
                        span = $("<span>").text(friend),
                        a = $("<a>").addClass("remove").attr({
                            href: "javascript:",
                            title: "Remove " + friend
                        }).text("x").appendTo(span);
                    //Добавляем friend к div friend 
                    span.insertBefore("#to");
                },
                //Определяем обработчик выбора
                change: function() {
                    //Сохраняем поле 'Кому' без изменений и в правильной позиции
                    $("#to").val("").css("top", 2);
                }
            });
            //Добавляем обработчки события click для div friends
            $("#friends").click(function(){
                //Фокусируемся на поле 'Кому'
                $("#to").focus();
            });
            //Добавляем обработчик для события click удаленным ссылкам
            $(".remove", document.getElementById("friends")).live("click", function(){
                //Удаляем текущее поле
                $(this).parent().remove();
                //Корректируем положение поля 'Кому'
                if($("#friends span").length === 0) {
                    $("#to").css("top", 0);
                }               
            });
        });
    </script>

А вот сам форма отправки:

<div id="searchform">
    <label id="toLabel">Индекс Аэропорта:</label>
        <div id="friends" class="ui-helper-clearfix" >
    <input id="to" type="text" name="index_icao_en">
    </div>
    ....(тут еще календарь, пару чекбоксов, но вопрос не про них)
</div>

Span`ы появляються внутри div id="friends" Выглядят они вот так. (значение и ссылка удалить)

      <span>UEBB<a class="remove" href="javascript:" title="Remove UEBB">x</a></span>

Вопрос в том как передать значения span на сервер по кнопке Отправить ,желательно post запросом?

Answer 1

В обработчике submit формы пройдитесь по вашим span-ам и сгенерируйте скрытые инпуты, которые добавьте к форме.

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

<form action="/script.php" method="POST" id="searchform">
    <label id="toLabel">Индекс Аэропорта:</label>
    <div id="friends" class="ui-helper-clearfix" >
          <input id="to" type="text" name="index_icao_en">
    </div>
    ....(тут еще календарь, пару чекбоксов, но вопрос не про них)
    <div id="ldata"></div>
</form>

Далее напишем функцию для их генерации

function preparedata(){
    $("#ldata").empty();
    var tpl = '<input type="hidden" name="labels[]">';
    $("#friends span").each(function(){
         $(tpl).val( $(this).text() ).appendTo("#ldata");
    });
    return true;
}

и вызовем ее при отправке формы

$("#searchform").submit(function(){
     return prepareData();     
});

чтобы предотвратить отправку формы (например если метки не выбраны) то надо вернуть false.

В целом, если вам просто надо оправить метки аякс-запросом, то следует банально сформировать массив, и отправить его

 var data = $("#friends span").toArray().map(function(v){ return $(v).text(); })
 $.post("script.php", { labels: data });

зы: замечу, что

метод live давно устарел, используйте on
несколько странным выглядит использование getElementById при наличии jquery.
не используйте относительные пути а-ля ../..
$("<a>").addClass("remove").attr({ href: "javascript:"}).text("x") серьезно надо все это в коде генерить? $('<a class="remove" href="#">x</a>') куда более наглядно и продуктивно.