Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   input + cookie (https://javascript.ru/forum/jquery/44376-input-cookie.html)

piraids 17.01.2014 12:58

input + cookie
 
Помогите написать скрипт, который будет сохранять введенные значения input при перезагрузке страницы

Есть блок ввода количества товара:
<button onClick="if (document.getElementById('count_<?=$id?>').value > 1) {document.getElementById('count_<?=$id?>').value -= 1;} check(); return false;">
            <span>-</span>
            </button>
            <input type="text" onClick="check();" name="count1" id="count_<?=$this->id?>" value='1' onChange="if (this.value <= 0) {this.value = '1';}">
            <button onClick="document.getElementById('count_<?=$id?>').value = Math.round(document.getElementById('count_<?=$id?>').value)+1; check(); return false;">
            <span>+</span></button>


здесь пример

$id содержит массив (1,2,3,4,5 и т.д.)

Мне необходимо, чтобы при изменении значения input > 1, его значение записывалось в cookie, при значении 1 - cookie чистилось бы

Пробую написать так:
<script type="text/javascript">
                $(document).ready(function() {
    var inputChange = $('input[name="count1"]');
    inputChange.change(function (e){
      var inputValue = $(e.target).val(),
      elemIdInput = $(e.currentTarget).attr("id"); // переменная с сохранением id в input выбранном                          
      //alert(inputValue);
      $.cookie('valueInput' + elemIdInput, inputValue, { expires: 1}); //сохраняем наши значения в куки
    });

    for(var i = 0; i < inputChange.length; i++){
        inputChange.eq(i).val($.cookie('valueInput' + inputChange.eq(i).attr('id')));
    };
});
            </script>

но работает не так как хотелось бы, во первых убирает значение из инпута - ставит пустое, во вторых не сохраняет значение инпута если кликнуть + или - ,в третьих - как написать проверку на удаление?

piraids 17.01.2014 13:23

Дописал проверку, если значение input 1 то удалять куки:
$(document).ready(function() {
                    var inputChange = $('input[name="count1"]');
                    inputChange.change(function (e){
                        var inputValue = $(e.target).val(),
                            elemIdInput = $(e.currentTarget).attr("id"); // переменная с сохранением id в input выбранном                          
                        //alert(inputValue);
                        $.cookie('valueInput' + elemIdInput, inputValue, { expires: 1}); //сохраняем наши значения в куки
                        if(inputValue = 1){
                            $.cookie('valueInput' + elemIdInput, null);
                        }
                    });
                    
                    for(var i = 0; i < inputChange.length; i++){
                        inputChange.eq(i).val($.cookie('valueInput' + inputChange.eq(i).attr('id')));
                    };
                });


Как обновлять переменную по клику на + и -, и как выводить значение input если нет cookie?

piraids 17.01.2014 18:45

<script type="text/javascript">
    $(document).ready(function() {  
        var inputChange = $('input[name="count1"]'),
            minus = $('button.minus'),
            plus = $('button.plus');
        
        inputChange.change(function (e){
            var inputValue = $(e.target).val(),
                elemIdInput = $(e.currentTarget).attr("id");                          
            if(inputValue <= 0){ 
                inputValue = 1;
                $(e.target).attr('value', inputValue);
            }
            
            $.cookie('valueInput' + elemIdInput, inputValue, { expires: 1});                      
        });
        
        minus.click(function (e){
            var inputValue = $('input').val()-1,
                elemIdInput = $(e.currentTarget).attr("id");                           
            if(inputValue <= 0){ 
                inputValue = 1;
                $(e.target).attr('value', inputValue);
            }
            
            $.cookie('valueInput' + elemIdInput, inputValue, { expires: 1});                      
        });
        
        
        for(var i = 0; i < inputChange.length; i++){
            if($.cookie('valueInput' + inputChange.eq(i).attr('id')) == null){
                inputChange.eq(i).val('1');
            }
            else{
                inputChange.eq(i).val($.cookie('valueInput' + inputChange.eq(i).attr('id')));
            }
        };                    
        
    });
    
</script>


на onChange работает все ок, а как сделать по onClick чтобы еще работало, щас при клике на "-" все скидывает на 1 и не записывает в куки

Vlasenko Fedor 17.01.2014 19:51

Как вариант. При чем если странницы вывода инпутов разные придется рассмотреть механизм сохранения для разных страниц значений http://fiddle.jshell.net/vlasenkofedor/Y9WMp/

piraids 17.01.2014 19:58

Poznakomlus,
а если конкретно для моего варианта, можно как то?

piraids 17.01.2014 20:59

помогите по этому примеру сделать так же только для:
<input type="text" name="count1" id="count_1" value="1"/>
<input type="text" name="count1" id="count_3" value="1"/>
<input type="text" name="count1" id="count_3" value="1"/>

Vlasenko Fedor 17.01.2014 21:28

а чем тебя не устраиваеет. Вот через куки
http://fiddle.jshell.net/vlasenkofedor/Y9WMp/2/


Часовой пояс GMT +3, время: 10:46.