Элементы динамической формы с jQuery

Я создаю простую динамическую форму с помощью обработчика событий .live() 'jQuery.Элементы динамической формы с jQuery

Хотя форма расширяется и сжимается по мере необходимости, метод javascript «.reset» работает только частично.

Чтобы уточнить, когда выбран один из первых двух переключателей (в уровне 1), метод сброса должен отменять выбор параметров уровня 2, однако это работает только с формой первого уровня 2 (tier2Foo1), а не второй (tier2Foo2).

код ниже:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Build a Bin</title> 
<style type="text/css"> 
#first { 
    padding-top: 10px; 
    height: 250px; 
} 
#hideFoo { 
    padding-top: 10px; 
    height: 250px; 
    display: none; 
} 
#hideFoo2 { 
    background-color: black; 
    color: white; 
    width: 100px; 
    display: none; 
} 
#first, #hideFoo, #hideFoo2 { 
    margin-bottom: 10px; 
    width: 350px; 
    border: #000 1px solid; 
} 
.fieldContainer { 
    float: left; 
    width: 150px; 
    padding: 0 10px 0; 
} 
.imageContainer { 
    width: 150px; 
    height: 150px; 
    border: solid #666 1px; 
} 



</style> 
<script src="javascript/jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    //TIER ONE Options 
    $(document).ready(function() {    
     $('#Foo1').live('click', function() { 
      $('#hideFoo').show(500); 
      $('#hideFoo2').hide(500); 
     }); 
     $('#Foo2').live('click', function() { 
      $('#hideFoo2').show(500); 
      $('#hideFoo').hide(500); 
     }); 
     //uncheck and hide form element 
     //tier 1 reset for tier 2 
     $('#Foo1, #Foo2').live('click', function(){ 
      $('#tier2Foo1, #tier2Foo2')[0].reset(); 
     }) 
    }); 
    </script> 
</head> 
<body> 
<!-- ////////////// Basic form containing two options \\\\\\\\\\\\\\\\\\\\ --> 
<div id="first"> 
    <form id="tier1" action="#"> 
    <div class="fieldContainer"> 
    <div class="imageContainer"><img src="http://dummyimage.com/150x150/000/fff" alt=" " /></div> 
    <p>Foo 1</p> 
     <input type="radio" name="example" value="Foo1" id="Foo1" /> 
     <label for="Foo1">Foo 1</label> 
    </div> 
    <div class="fieldContainer"> 
    <div class="imageContainer"><img src="http://dummyimage.com/150x150/000/fff" alt=" " /></div> 
    <p>Foo 2</p> 
     <input type="radio" name="example" value="Foo2" id="Foo2" /> 
     <label for="Foo2">Foo 2</label> 
    </div> 
    </form> 
</div> 
<!-- ////////////// tier 2 for Foo1\\\\\\\\\\\\\\\\\\\\ --> 
<div id="hideFoo"> 
    <form id="tier2Foo1" action="#"> 
    <div class="fieldContainer"> 
    <div class="imageContainer"><img src="http://dummyimage.com/150x150/000/fff" alt=" " /></div> 
    <p>The complete EcoSort Recycling System.</p> 
     <input type="radio" name="example1" id="Foo1Opt1" /> 
     <label for="Foo1Opt1">Foo One Option 1</label> 
    </div> 
    <div class="fieldContainer"> 
    <div class="imageContainer"><img src="http://dummyimage.com/150x150/000/fff" alt=" " /></div> 
    <p>The complete EcoSort Recycling System.</p> 
     <input type="radio" name="example1" id="Foo1Opt2" /> 
     <label for="Foo1Opt2">Foo One Option 2</label> 
    </div> 
    </form> 
</div> 
<!-- ////////////// tier 2 for Foo2 \\\\\\\\\\\\\\\\\\\\ --> 
<div id="hideFoo2"> 
    <form id="tier2Foo2" action="#"> 
    <div> 
     <input type="radio" name="example2" id="Foo2Opt1" /> 
     <label for="Foo2Opt1">Foo Two Option 1</label> 
    </div> 
    <div> 
     <input type="radio" name="example2" id="Foo2Opt2" /> 
     <label for="Foo2Opt2">Foo Two Option 2</label> 
    </div> 
    <div> 
     <input type="radio" name="example2" id="Foo2Opt3" /> 
     <label for="Foo2Opt3">Foo Two Option 3</label> 
    </div> 
    </form> 
</div> 
</body> 
</html>

Приветствия

источник

2013-02-19 Dan382

$('#tier2Foo1, #tier2Foo2')[0].reset(); выбирает только нулевую форму коллекции, так что вы только применяя .reset к одной форме. Это довольно просто исправить:

$('#tier2Foo1, #tier2Foo2').each(function() { this.reset(); });

http://jsfiddle.net/ExplosionPIlls/ruLdA/

Кстати, .live был удален в JQuery 1.9. Использовать .on

источник

2013-02-19 12:10:05

Пятно на. Спасибо за это. – Dan382

-1

Не пробовал. Но в вашем коде кажется, что вы выбираете только первый, поэтому второй не сбрасывается.

$('#tier2Foo1, #tier2Foo2')[0].reset();

Попробуйте удалить [0].

источник

2013-02-19 12:12:18 ipeiro

'.reset' не является методом сбора jQuery, так что это не сработает. –

@ExplosionPills true, мой плохой ... – ipeiro

Элементы динамической формы с jQuery

ответ

Смежные вопросы