javascript - display input field on new line ( based on radio select ) -



javascript - display input field on new line ( based on radio select ) -

ok found great code on stack. have adapted slightly.

but in essence have radio box group, in form. , onclick of 1 of these radio buttons, input field displayed.

i need show input field on new line ( preferably new label ) struggling.

the code is: 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 price"/> </div> </div>

js:

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/

essentially, prefer cost first option. onclick input field displays below radio selections new label.

any suggestions please

to recap sorry:

i prefer html so:

<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 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>

why don't reorder radio buttons?

<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 price"/> </div>

seems trick, doesn't it?

javascript css

Comments

Popular posts from this blog

How do I check if an insert was successful with MySQLdb in Python? -

delphi - blogger via idHTTP : error 400 bad request -

postgresql - ERROR: operator is not unique: unknown + unknown -