дисплей поле ввода на новой линии (на основе радиовыхода)

Question

Хорошо, нашел отличный код на Stack. Немного приспособились.

Но в сущности у нас есть группа радио-ящиков в форме. При нажатии на один из этих переключателей отображается поле ввода.

Мне нужно показать это поле ввода на новой строке (желательно с новой меткой тоже), но борется.

Код: HTML

<div class="s_row_2 clearfix"> 
     <label><strong>Price</strong></label> 
      <div class="s_full"> 
       <label class="s_radio"><input type="radio" checked="checked" name="r" id="r1" onchange="disableTxt()"/> Free</label> 
       <label class="s_radio"><input type="radio" name="r" id="r2" onchange="disableTxt()"/> Swap/Trade</label> 
       <label class="s_radio"><input type="radio" name="r" id="r3" onchange="disableTxt()"/> Lets Talk</label> 
       <label class="s_radio"><input type="radio" name="r" id="r3" onchange="enableTxt()"/> Price</label> 
        <input type="text" name="r" id="price" style="display:none;width:212px;" size="30" placeholder="Type your price"/> 
      </div> 
    </div> 

ЯШ:

var temp = ''; 
    function disableTxt() { 
     var field = document.getElementById("price"); 
     if(field.value != '') { 
      temp = field.value; 
     } 
     field.style.display = "none"; 
     field.value = ''; 
    } 
    function enableTxt() { 
     document.getElementById("price").style.display = "inline"; 
     document.getElementById("price").value = temp; 
    } 

Fiddle: http://jsfiddle.net/ozzy/mnxRr/

По существу, я предпочел бы цену в качестве первого варианта. Таким образом, при отображении поля ввода ниже выбора радио с новой меткой.

Любые предложения, пожалуйста,

резюмировать жаль:

Я предпочитаю HTML так:

<div class="s_full"> 
       <label class="s_radio"><input type="radio" name="r" id="r3" onchange="enableTxt()"/> Price</label> 
        <input type="text" name="r" id="price" style="display:none;width:212px;" size="30" placeholder="Type your price"/> 
       <label class="s_radio"><input type="radio" checked="checked" name="r" id="r1" onchange="disableTxt()"/> Free</label> 
       <label class="s_radio"><input type="radio" name="r" id="r2" onchange="disableTxt()"/> Swap/Trade</label> 
       <label class="s_radio"><input type="radio" name="r" id="r3" onchange="disableTxt()"/> Lets Talk</label> 
      </div> 

Answer 1

Почему вы не просто изменить порядок кнопок радио?

<div class="s_full"> 
    <label class="s_radio"><input type="radio" name="r" id="r3" onchange="enableTxt()"/> Price</label> 
    <label class="s_radio"><input type="radio" checked="checked" name="r" id="r1" onchange="disableTxt()"/> Free</label> 
    <label class="s_radio"><input type="radio" name="r" id="r2" onchange="disableTxt()"/> Swap/Trade</label> 
    <label class="s_radio"><input type="radio" name="r" id="r3" onchange="disableTxt()"/> Lets Talk</label><br /> 
    <input type="text" name="r" id="price" style="display:none;width:212px;" size="30" placeholder="Type your price"/> 
</div> 

, похоже, делает трюк, не так ли?