VPF::Как отправить на сервер только выбранные радио

Cheizer

Дата 30.4.2014, 14:33 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 89
Регистрация: 28.1.2011

Репутация: нет
Всего: нет

Цитата(ksnk @ 30.4.2014, 14:13)

Цитата(Aliance @ 30.4.2014, 13:18

)

, логически не верно помещать 2 элемента формы

А вот в чем дело!

Тогда так

Код


...
getValFromLabel:function(label){
    var input=$('input,textarea',label);
    if((input.length>0 && input[0].type=='radio'){
       input = $(':checked',input);
    }
    if(input.length>0 && input[0].type=='radio' && !input[0].checked) return 'nope';
    var val=input.val()
        ,defVal=label.data('defVal')                                
    return label.length?val==defVal?'nope':val:'nope'
}
...

Добавлено @ 14:15
Иногда проще на jsfiddle.net сделать тестовый пример. Его и отлаживать можно коллегиально, а не методом "удаленного тыка"

убрал ошибку в строке if((input.length>0 && input[0].type=='radio'){

но форма теперь не отправляется, уже все перепробовал, суть в том что этот скрипт, принимает все инпуты которые есть в форме, и передает php все значения, и не понятно как ЧЕКЕД у радио кнопок передавать в него :( ему наплевать на чекед, есть инпут в html, у него есть переменная, все, он ее наполяет после отправки фолрмы и отдает php. а php щлет все значения всех радио на странице на почту, бред конечно :(

Это сообщение отредактировал(а) Cheizer - 30.4.2014, 14:58

Aliance

Дата 30.4.2014, 14:55 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137

Скобочку дублирующую удалить нужно. Что ж на каждых пых-то постить, это же и самому можно найти и исправить smile

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Cheizer

Дата 30.4.2014, 14:59 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 89
Регистрация: 28.1.2011

Репутация: нет
Всего: нет

Цитата(Aliance @ 30.4.2014, 14:55)

опередили сообщением, убрал smile

но не помогло, перестала просто отправляться без ошибок уже smile

Aliance

Дата 30.4.2014, 15:26 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137

Давайте посмотрим внутрь функции getValFromLabel:
первой строчкой по получаем ссылку на коллекцию input внутри конкретного label. В случае с radio, это коллекция будет содержать в себе 2 элемента input=radio (что по логике не правильно)
ksnk, написал хак, при котором в случае, если в коллекции есть хотя бы один элемент и тип первого из этих элементов = radio, то итоговый элемент заменяется на выбранный (:checked) среди изначальной коллекции.
далее, идет второй хак, который в случае с input=radio отправляет nope, если элемент не отмечен.
по логике все верно и должно работать, хотя я не костылил бы, а изменил верстку по правилу 1 label - 1 input, и тогда первого хака не потребуется.
если не работает - нужно дебажить, продампать например переменные в разных участках кода. за вас это без примера на jsfiddle делать никто не будет, так что либо самому, либо все же набросать скелетон на jsfiddle =)

Добавлено через 13 минут и 3 секунды
Вот, я создал скелетон: http://jsfiddle.net/Aliance/TYBN6/
В дальнейшем, просьба все изменения делать в рамках этой ссылки, чтобы все могли понимать о чем вы говорите.

Я изменил input = $(':checked',input); на input = $('input:checked', label); и все заработало.

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Cheizer

Дата 30.4.2014, 15:55 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 89
Регистрация: 28.1.2011

Репутация: нет
Всего: нет

Цитата(Aliance @ 30.4.2014, 15:26)

Давайте посмотрим внутрь функции getValFromLabel:
первой строчкой по получаем ссылку на коллекцию input внутри конкретного label. В случае с radio, это коллекция будет содержать в себе 2 элемента input=radio (что по логике не правильно)
ksnk, написал хак, при котором в случае, если в коллекции есть хотя бы один элемент и тип первого из этих элементов = radio, то итоговый элемент заменяется на выбранный (:checked) среди изначальной коллекции.
далее, идет второй хак, который в случае с input=radio отправляет nope, если элемент не отмечен.
по логике все верно и должно работать, хотя я не костылил бы, а изменил верстку по правилу 1 label - 1 input, и тогда первого хака не потребуется.
если не работает - нужно дебажить, продампать например переменные в разных участках кода. за вас это без примера на jsfiddle делать никто не будет, так что либо самому, либо все же набросать скелетон на jsfiddle =)

Добавлено @ 15:39
Вот, я создал скелетон: http://jsfiddle.net/Aliance/TYBN6/
В дальнейшем, просьба все изменения делать в рамках этой ссылки, чтобы все могли понимать о чем вы говорите.

Я изменил input = $(':checked',input); на input = $('input:checked', label); и все заработало.

Да, ваш пример работает на jsfiddle.net: но на сайте моем немного изменил начало, так как ругался ошибка, сделал так:

Код


getValFromLabel:function(label){
    var input=$('input,textarea',label);

    if (input.length>0 && input[0].type=='radio')
       input = $('input:checked', label);
    if (input.length>0 && input[0].type=='radio' && !input[0].checked)
        return 'nope';

    var val = input.val(), defVal = label.data('defVal');
    return label.length 
        ? (val==defVal ? 'nope' : val)
        : 'nope';
}

в функции отправки написал так:

Код

kol:$('input.kol',_.form).val()||'nope',

Код


,submitFu:function(){
                        _.validateFu(_.labels)                            
                        if(!_.form.has('.'+_.invalidCl).length)
                            $.ajax({
                                type: "POST",
                                url:_.mailHandlerURL,
                                data:{
                                    name:_.getValFromLabel($('.name',_.form)),
                                    email:_.getValFromLabel($('.email',_.form)),
                                    phone:_.getValFromLabel($('.phone',_.form)),
                                    gate:$('input.gate',_.form).val()||'nope',
                                    key:$('input.key',_.form).val()||'nope',
                                    count:_.getValFromLabel($('.count',_.form)),
                                    
                                    kol:$('input.kol',_.form).val()||'nope',
                                    
                                    twok:$('input.twok',_.form).val()||'nope',
                                    sam:$('input.sam',_.form).val()||'nope',
                                    deliw:$('input.deliw',_.form).val()||'nope',
                                    posta:$('input.posta',_.form).val()||'nope',
                                    
                                    fax:_.getValFromLabel($('.fax',_.form)),
                                    //message:_.getValFromLabel($('.message',_.form)),
                                    message:$('textarea.message',_.form).val()||'nope',
                                    
                                    pro_duct:_.product,
                                    owner_email:_.ownerEmail,
                                    stripHTML:_.stripHTML
                                },
                                success: function(){
                                    _.showFu()
                                }
                            })            
                    },

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

Это сообщение отредактировал(а) Cheizer - 30.4.2014, 15:56

Aliance

Дата 30.4.2014, 16:01 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137

Никто же не знает, что у вас на сайте. Если работает на фиддле, а не работает на сайте - какой вывод делаем? smile

В консоле что выдает эта надпись: $('input.kol',_.form).val() ? А что должна?

Ajax запрос отправляется? Если нет - видимо, проблема в валидации и это не в рамках этого топика уже. Если отправляется - то в чем проблема, данные не те посылаются или что?

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Cheizer

Дата 30.4.2014, 16:14 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 89
Регистрация: 28.1.2011

Репутация: нет
Всего: нет

Цитата(Aliance @ 30.4.2014, 16:01)

Никто же не знает, что у вас на сайте. Если работает на фиддле, а не работает на сайте - какой вывод делаем? smile

В том то и дело что ничего не выдает :(

вот полный код из файла, в html все просто. Обычная форма.

Код


//forms
;(function($){
    $.fn.forms=function(o){
        return this.each(function(){
            var th=$(this)
                ,_=th.data('forms')||{
                    errorCl:'error',
                    emptyCl:'empty',
                    invalidCl:'invalid',
                    notRequiredCl:'notRequired',
                    successCl:'success',
                    successShow:'4000',
                    mailHandlerURL:'bat/MailHandler.php',
                    ownerEmail:'[email protected]',
                    product:'Заказ',
                    stripHTML:true,
                    smtpMailServer:'localhost',
                    targets:'input,textarea',
                    controls:'a[data-type=reset],a[data-type=submit]',
                    validate:true,
                    rx:{
                        ".state":{rx:/.{2}/,target:'input'},
                        ".state":{rx:/^[a-zA-Z'][a-zA-Z-' ]+[a-zA-Z']?$/,target:'input'},
                        ".email":{rx:/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i,target:'input'},
                        ".phone":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
                        ".fax":{rx:/^\+?(\d[\d\-\+\(\) ]{5,}\d$)/,target:'input'},
                        ".message":{rx:/.{15}/,target:'textarea'}
                    },
                    preFu:function(){
                        _.labels.each(function(){
                            var label=$(this),
                                inp=$(_.targets,this),
                                defVal=inp.val(),
                                trueVal=(function(){
                                            var tmp=inp.is('input')?(tmp=label.html().match(/value=['"](.+?)['"].+/),!!tmp&&!!tmp[1]&&tmp[1]):inp.html()
                                            return defVal==''?defVal:tmp
                                        })()
                            trueVal!=defVal
                                &&inp.val(defVal=trueVal||defVal)
                            label.data({defVal:defVal})                                
                            inp
                                .bind('focus',function(){
                                    inp.val()==defVal
                                        &&(inp.val(''),_.hideEmptyFu(label),label.removeClass(_.invalidCl))
                                })
                                .bind('blur',function(){
                                    _.validateFu(label)
                                    if(_.isEmpty(label))
                                        inp.val(defVal)
                                        ,_.hideErrorFu(label.removeClass(_.invalidCl))                                            
                                })
                                .bind('keyup',function(){
                                    label.hasClass(_.invalidCl)
                                        &&_.validateFu(label)
                                })
                            label.find('.'+_.errorCl+',.'+_.emptyCl).css({display:'block'}).hide()
                        })
                        _.success=$('.'+_.successCl,_.form).hide()
                    },
                    isRequired:function(el){                            
                        return !el.hasClass(_.notRequiredCl)
                    },
                    isValid:function(el){                            
                        var ret=true
                        $.each(_.rx,function(k,d){
                            if(el.is(k))
                                ret=d.rx.test(el.find(d.target).val())                                        
                        })
                        return ret                            
                    },
                    isEmpty:function(el){
                        var tmp
                        return (tmp=el.find(_.targets).val())==''||tmp==el.data('defVal')
                    },
                    validateFu:function(el){                            
                        el.each(function(){
                            var th=$(this)
                                ,req=_.isRequired(th)
                                ,empty=_.isEmpty(th)
                                ,valid=_.isValid(th)                                
                            
                            if(empty&&req)
                                _.showEmptyFu(th.addClass(_.invalidCl))
                            else
                                _.hideEmptyFu(th.removeClass(_.invalidCl))
                            
                            if(!empty)
                                if(valid)
                                    _.hideErrorFu(th.removeClass(_.invalidCl))
                                else
                                    _.showErrorFu(th.addClass(_.invalidCl))                                
                        })
                    },
                    
                    
                    /*getValFromLabel:function(label){
                        var val=$('input,textarea',label).val()
                            ,defVal=label.data('defVal')                                
                        return label.length?val==defVal?'nope':val:'nope'
                    }*/


//////////////////////////////
getValFromLabel:function(label){
    var input=$('input,textarea',label);

    if (input.length>0 && input[0].type=='radio')
       input = $('input:checked', label);
    if (input.length>0 && input[0].type=='radio' && !input[0].checked)
        return 'nope';

    var val = input.val(), defVal = label.data('defVal');
    return label.length 
        ? (val==defVal ? 'nope' : val)
        : 'nope';
}
///////////////////////////////////
        
                    ,submitFu:function(){
                        _.validateFu(_.labels)                            
                        if(!_.form.has('.'+_.invalidCl).length)
                            $.ajax({
                                type: "POST",
                                url:_.mailHandlerURL,
                                data:{
                                    name:_.getValFromLabel($('.name',_.form)),
                                    email:_.getValFromLabel($('.email',_.form)),
                                    phone:_.getValFromLabel($('.phone',_.form)),
                                    gate:$('input.gate',_.form).val()||'nope',
                                    key:$('input.key',_.form).val()||'nope',
                                    count:_.getValFromLabel($('.count',_.form)),
                                    
                                    kol:$('input.kol',_.form).val()||'nope',
                                    
                                    twok:$('input.twok',_.form).val()||'nope',
                                    sam:$('input.sam',_.form).val()||'nope',
                                    deliw:$('input.deliw',_.form).val()||'nope',
                                    posta:$('input.posta',_.form).val()||'nope',
                                    
                                    fax:_.getValFromLabel($('.fax',_.form)),
                                    //message:_.getValFromLabel($('.message',_.form)),
                                    message:$('textarea.message',_.form).val()||'nope',
                                    
                                    pro_duct:_.product,
                                    owner_email:_.ownerEmail,
                                    stripHTML:_.stripHTML
                                },
                                success: function(){
                                    _.showFu()
                                }
                            })            
                    },
                    showFu:function(){
                        _.success.slideDown(function(){
                            setTimeout(function(){
                                _.success.slideUp()
                                _.form.trigger('reset')
                            },_.successShow)
                        })
                    },
                    controlsFu:function(){
                        $(_.controls,_.form).each(function(){
                            var th=$(this)
                            th
                                .bind('click',function(){
                                    _.form.trigger(th.data('type'))
                                    return false
                                })
                        })
                    },
                    showErrorFu:function(label){
                        label.find('.'+_.errorCl).slideDown()
                    },
                    hideErrorFu:function(label){
                        label.find('.'+_.errorCl).slideUp()
                    },
                    showEmptyFu:function(label){
                        label.find('.'+_.emptyCl).slideDown()
                        _.hideErrorFu(label)
                    },
                    hideEmptyFu:function(label){
                        label.find('.'+_.emptyCl).slideUp()
                    },
                    init:function(){
                        _.form=_.me                        
                        _.labels=$('label',_.form)

                        _.preFu()
                        
                        _.controlsFu()
                                                        
                        _.form
                            .bind('submit',function(){
                                if(_.validate)
                                    _.submitFu()
                                else
                                    _.form[0].submit()
                                return false
                            })
                            .bind('reset',function(){
                                _.labels.removeClass(_.invalidCl)                                    
                                _.labels.each(function(){
                                    var th=$(this)
                                    _.hideErrorFu(th)
                                    _.hideEmptyFu(th)
                                })
                            })
                        _.form.trigger('reset')
                    }
                }
            _.me||_.init(_.me=th.data({forms:_}))
            typeof o=='object'
                &&$.extend(_,o)
        })
    }
})(jQuery)
$(window).load(function(){
    $('#form').forms({
        ownerEmail:'[email protected]',
        product:'ЗАКАЗ ОБРАТНОГО ЗВОНКА (верх)'
    })
})
$(window).load(function(){
    $('#form1').forms({
        ownerEmail:'[email protected]',
        product:'ЗАКАЗ ОБРАТНОГО ЗВОНКА (низ)'
    })
})
$(window).load(function(){
    $('#form2').forms({
        ownerEmail:'[email protected]',
        product:'ЗАЯВКА НА 5 КОМПЛЕКТОВ (верх)'
    })
})
$(window).load(function(){
    $('#form3').forms({
        ownerEmail:'[email protected]',
        product:'ЗАЯВКА НА ПОКУПКУ ОПТОМ'
    })
})
$(window).load(function(){
    $('#form4').forms({
        ownerEmail:'[email protected]',
        product:'ЗАЯВКА НА 5 КОМПЛЕКТОВ (низ)'
    })
})
$(window).load(function(){
    $('#order0').forms({
        ownerEmail:'[email protected]',
        product:'ЗАКАЗ ПРОДУКЦИИ от 1 КОПМПЛЕКТА'
    })
})
$(window).load(function(){
    $('#order2').forms({
        ownerEmail:'[email protected]',
        product:'ЗАКАЗ ПРОДУКЦИИ от 3 КОПМПЛЕКТОВ'
    })
})
$(window).load(function(){
    $('#order3').forms({
        ownerEmail:'[email protected]',
        product:'ЗАКАЗ ПРОДУКЦИИ от 5 КОПМПЛЕКТОВ'
    })
})

Aliance

Дата 30.4.2014, 16:40 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137

Ну так не выдает-то наверное потому, что селектор составлен не правильно? У вас написано input.kol, а нужно label.kol input:radio:checked

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Cheizer

Дата 30.4.2014, 16:47 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 89
Регистрация: 28.1.2011

Репутация: нет
Всего: нет

Цитата(Aliance @ 30.4.2014, 16:40)

написал так:

Код


kol:$('label.kol input:radio:checked',_.form).val()||'nope',

ничего не изменилось, тишина, ни ошибки ни отправки, только в консоли такое предупреждение висит: event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

Aliance

Дата 30.4.2014, 17:28 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 17
Всего: 137

Ставьте дампы (например, console.log) по коду, смотрите куда он не заходит (а должен бы), выясняйте причину, исправляйте.
Делайте дампы переменных, чтобы знать, что в них находится.

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Cheizer

Дата 5.5.2014, 08:47 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 89
Регистрация: 28.1.2011

Репутация: нет
Всего: нет

Цитата(Aliance @ 30.4.2014, 17:28)

Всем спасибо, видно реально этот код не заточен изначально для таких элементов, а переписывать пол кода не зная JS методом тыка, не дело это. smile

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »