Перейти к URL на основе ввода формы с помощью переключателей - PullRequest
Новая
       7

Перейти к URL на основе ввода формы с помощью переключателей

2 голосов
/ 02 декабря 2011

Как использовать только выбранный переключатель для отображения в URL? То, что у меня всегда есть, использует первый переключатель независимо от того, какой из них выбран: 

<form id="urlForm">
   <div id="bounds">
      <label><input type="radio" name="toggle" id="key"><span>On</span></label>
      <label><input type="radio" name="toggle" id="key"><span>Off</span></label>
   </div>
</form> 

<script>
$(document).ready(function() {
$('#urlForm').submit( function() {                        
   goUrl = '/?constraint=' + $('#key').val() + '+' + $('#key2').val();          
   window.location = goUrl;          
   return false;  // Prevent the default form behaviour     
    });
});
</script>

Ответы [ 3 ]

1 голос
/ 02 декабря 2011

Ваши радиовходы должны иметь уникальные идентификаторы. 

  <label><input type="radio" name="toggle" id="key1" value="on"><span>On</span></label>
  <label><input type="radio" name="toggle" id="key2" value="off"><span>Off</span></label>

И ваш JavaScript близок, но, поскольку вы выбираете по идентификатору (который не совсем подходит для переключателей), вам необходимо изменить селекторы для радиовходов: 

$(document).ready(function() {
    $('#urlForm').submit( function() {
        window.location = '/?constraint=' + $('input[name="toggle"]:checked').val();          
        return false;  // Prevent the default form behaviour     
    });
});

$('input[name="toggle"]:checked'): выбор формы для ввода с атрибутом имени, установленным на toggle, и также проверяется. Это делает работу, но довольно неэффективный селектор.

Вот jsfiddle: http://jsfiddle.net/jasper/HFBwH/

0 голосов
/ 02 декабря 2011

У вас есть пара проблем в вашем коде.

Первое: вы должны использовать функцию .preventDefault (), чтобы предотвратить событие по умолчанию.

Второе: у вас есть два элемента вВаш HTML с тем же идентификатором.Идентификаторы должны быть уникальными.

Третье: вам не хватает атрибутов value на ваших радиокнопках

После того, как они исправлены, вы можете использовать следующий фрагмент, чтобы получить значение радиокнопок... $('input:radio[name=bar]:checked').val();

0 голосов
/ 02 декабря 2011

У вас не должно быть 2 элементов с одинаковым идентификатором. Используйте это:

HTML: 

<form id="urlForm">
   <div id="bounds">
      <label><input type="radio" name="toggle" id="key1" value="On"><span>On</span></label>
      <label><input type="radio" name="toggle" id="key2" value="Off"><span>Off</span></label>
   </div>
</form>

JavaScript: 

$(document).ready(function() {
    $('#urlForm').submit( function() {                        
        goUrl = '/?constraint=' + $('#key1:checked, #key2:checked').val();
        window.location = goUrl;          
        return false;  // Prevent the default form behaviour     
    });
});

Вот скрипка: http://jsfiddle.net/cgyeY/

P.S. Вам действительно не нужна эта return false; часть, поскольку вы уходите со страницы ...

...