Добавить ссылку на параметры формы радио

0

Проблема 1

Я новичок в jquery и front end в целом. Я пытаюсь изменить значение ссылки, на основе которой выбран переключатель. Когда пользователь выбирает переключатель, я хочу добавить ссылку отправки со значением соответствующего выбора радио. Важно отметить, что значение изменяется в том случае, если пользователь выбирает другой переключатель в этом выборе.

т.е. если пользователь нажимает на вариант 1 (value = "sex = male"), тогда я хочу, чтобы ссылка отправки была

Выпуск 2

Я знаю, как это сделать с помощью jquery, но я хочу знать наиболее оптимальное решение, которое связано с проблемой 1. Как только пользователь выбирает переключатель, я хочу, чтобы "сводка заказов" говорила о выборе пользователей.

  • 0
    Вот что у меня есть: jsfiddle.net/6HU6u
  • 0
    Ваша скрипка не содержит ни JavaScript, ни кода JQuery.
Показать ещё 1 комментарий
Теги:
forms
radio

3 ответа

0
Лучший ответ

Самый простой способ, который я вижу, - это следующее:

$('input[type="radio"]').change(function () {
    var queryString = $('input[type="radio"]:checked').map(function () {
        $('#' + this.name).text(this.name + ': ' + this.value);
        return this.name + '=' + this.value;
    }).get().join('&');
    $('#link').attr('href', function () {
        return 'example.com/cart?' + queryString;
    });
});

Демо-версия JS Fiddle.

Имейте в виду, что я изменил span на a (чтобы использовать собственное свойство href), а также исправил некоторые ошибки HTML и уменьшил ненужный HTML (все элементы br были не нужны, используйте CSS для презентации),

Рекомендации:

Поделиться
  • 0
    Это очень чистое и элегантное решение, спасибо! Спасибо за добавление ссылок также!
  • 0
    Отлично - я прочитаю это сейчас.
Показать ещё 1 комментарий
0

Вот как это делается:

JSFIDDLE

Обратите внимание, что ваш HTML был немного странным, поэтому я немного изменил его. Я добавил гиперссылку, чтобы установить атрибут href (#link) и диапазон, чтобы отобразить его, чтобы вы могли видеть, на что он был установлен (#linkdisplay)

javascript:

$(function(){
    var sex = 'male';
    var duration= '6';
    updateSummary(sex, duration);

    $('.sex-label').hide();
    $('.duration-label').hide();

    $("input[name='sex']").click(function(){
      sex = $(this).val();
      updateLink(sex, duration);  
      updateSummary(sex, duration);
    }); 

    $("input[name='duration']").click(function(){
      duration = $(this).val();
      updateLink(sex, duration);
      updateSummary(sex, duration);
    });
});


function updateLink(sex, duration){
    $('#link').attr('href', 'example.com/cart?sex=' + sex + '&duration=' + duration);
    $('#linkdisplay').html($('#link').attr('href'));
}

function updateSummary(sex, duration){
      $('.sex-label').hide();
      $('#sex-' + sex).show();
      $('.duration-label').hide();
      $('#duration-' + duration).show();    
}
Поделиться
0

Отправьте свой код здесь в формате SO. Пожалуйста, не указывайте только ссылку на скрипку.

jsFiddle DEMO

$('[name=sex]').change(function () {
    var sex;
    if ($(this).val().indexOf("=male") >= 0) {
        $('#sex-male').show();
        $('#sex-female').hide();
        sex = "male";
    } else {
        $('#sex-male').hide();
        $('#sex-female').show();
        sex="female"
    }
    $('#link').append("sex=" + sex + "&");
});
$('[name=duration]').change(function () {
    var duration;
    if ($(this).val().indexOf("duration=6months") >= 0) {
        $('#duration-6').show();
        $('#duration-12').hide();
        duration = 6;
    } else {
        $('#duration-6').hide();
        $('#duration-12').show();
        duration = 12;
    }
    $('#link').append("duration=" + duration + "&");
});
Поделиться
  • 0
    Спасибо Кришна. Это работает для проблемы 2, но не для проблемы 1. Если вы выбираете мужчину, а затем женщину, добавленная ссылка является ссылкой example.com/cart?sex=male&sex=female&, но она должна быть example.com/cart?sex=female

Ещё вопросы

Сообщество Overcoder
Наверх
Меню