Vika7
@Vika7
вебист

Почему ответ с сервера записывается во все поля?

Ребята добрый день, прошу помочь разобраться.
Динамически вывожу новый инпут
<input type="text" id="p_scnt"  name="p_scnt" value="" class="tur" placeholder="Input Value" />
с него обращаюсь на сервер за данными, получаю данные, но скрипт записывает их во все другие поля? В чем моя ошибка? Пыталась менять id поля и под него писать свой скрипт, но не помогает.

<html>
<body>
<p><a href="#" id="addScnt">Add Another Input Box</a></p>
<div id="p_scents">
    <p><label for="p_scnts">
        <input type="text" id="p_scnt"  name="p_scnt" value="" class="tur" placeholder="Input Value" /></label>
        <a href="#" id="remScnt" class="DeleteDynamicExtraField">Remove</a>
    </p>
</div>
<ul class="search_result"></ul>
<%--***************************************************--%>
<script type="text/javascript">

    $(function() {
        var scntDiv = $('#p_scents');
        var i = $('#p_scents p').size() + 1;

        $('#addScnt').live('click', function() {
            $('<p><label for="p_scnts"><input type="text" id="p_scnt" class="tur'" size="200" name="p_scnt_'+ i +'" value="" placeholder="Input Value '+ i +'" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
            i++;
            return false;
        });

        $(function(){
            //Живой поиск
            $('body').on('change keyup input click', '.tur', function() {
                if(this.value.length >= 1){
                    $.ajax({
                        type: 'post',
                        url: "UserController", //Путь к обработчику
                        data: {name: this.value},
                        response: 'text',
                        success: function(data){
                            $(".search_result").html(data).fadeIn(); //Выводим полученые данные в списке
                        }
                    })
                }
            })

            $(".search_result").hover(function(){
                $(".tur").blur(); //Убираем фокус с input
            })

            //При выборе результата поиска, прячем список и заносим выбранный результат в input
            $(".search_result").on("click", "li", function(){
                s_user = $(this).text();
                $(".tur").val(s_user); //деактивируем input, если нужно
                $(".search_result").fadeOut();
            })
        })
        $(function(){

     // удаляем строки
        $('#remScnt').live('click', function() {
            if( i > 2 ) {
                $(this).parents('p').remove();
                i--;
            }
            return false;
        });

        // удаляем первую строку
        $('.DeleteDynamicExtraField').click(function(event) {
            $(this).parent().remove();
            return false;
        });
    });
</script>
</body>
</html>
  • Вопрос задан
  • 69 просмотров
Решения вопроса 1
@AUser0
Чем больше знаю, тем лучше понимаю, как мало знаю.
Вот в таком варианте - работает:
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<p><a href="#" id="addScnt">Add Another Input Box</a></p>
<div id="p_scents">
    <p><label for="p_scnts">
        <input type="text" id="p_scnt"  name="p_scnt" value="" class="tur" placeholder="Input Value" /></label>
        <a href="#" id="remScnt" class="DeleteDynamicExtraField">Remove</a>
    </p>
</div>
<ul class="search_result"></ul>
<%--***************************************************--%>
<script type="text/javascript">
jq14 = jQuery.noConflict(true);

jq14(function() {
    var scntDiv = jq14('#p_scents');
    var i = jq14('#p_scents p').size() + 1;
    var trgt = '';

    jq14('#addScnt').on('click', function() {
        jq14('<p><label for="p_scnts"><input type="text" id="p_scnt_'+ i +'" class="tur" size="200" name="p_scnt_'+ i +'" value="" placeholder="Input Value '+ i +'" /></label> <a href="#" id="remScnt" onclick="jq14(this).parents(\'p\').remove();">Remove</a></p>').appendTo(scntDiv);
        i++;
        return false;
    });

    jq14(function(){
        //Живой поиск
        jq14('body').on('change keyup input click', '.tur', function() {
            if(this.value.length >= 1){
                jq14.ajax({
                    type: 'GET',
                    url: "UserController", //Путь к обработчику
                    data: {name: this.value},
                    response: 'text',
                    success: function(data){
                        jq14(".search_result").html(data).fadeIn(); //Выводим полученые данные в списке
                        trgt = this.id;
                    }
                });
                //jq14(".search_result").html('<ul><li>ABCD</li><li>EFGH</li></ul>').fadeIn();
                //trgt = this.id;
            }
        })

        jq14(".search_result").hover(function(){
            jq14(".tur").blur(); //Убираем фокус с input
        })

        //При выборе результата поиска, прячем список и заносим выбранный результат в input
        jq14(".search_result").on("click", "li", function(){
            if (jq14('#'+trgt)) {
                jq14('#'+trgt).val(jq14(this).text());
                trgt = '';
            }
            jq14(".search_result").fadeOut(); //деактивируем input, если нужно
        })
    });

    jq14(function(){
        // удаляем строки
        jq14('#remScnt').click(function() {
            if( i > 2 ) {
                jq14(this).parents('p').remove();
                i--;
            }
            return false;
        });

        // удаляем первую строку
        jq14('.DeleteDynamicExtraField').click(function(event) {
            jq14(this).parent().remove();
            return false;
        });
    });
});
</script>
</body>
</html>
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
alex-1917
@alex-1917
Если ответ помог, отметь решением
У вас подключается jQuery-v1.11.3,
а вы почему-то используете метод size
The .size() method is deprecated as of jQuery 1.8. Use the .length property instead.

Простыню дальше не стал смотреть.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы