Home/ Questions/Q 7077045
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T06:22:27+00:00

Ok found some great code on Stack. Have adapted it slightly. But in essence

  • 0

Ok found some great code on Stack. Have adapted it slightly.

But in essence we have a radio box group, in a form. And onclick of one of these radio buttons, an input field is displayed.

I need to show this input field on a new line ( preferably with a new label too ) but 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 your 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, I would prefer price as the first option. So that onclick the input field displays below the radio selections with a new label.

Any suggestions please

to recap sorry:

I prefer html like 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 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Why don’t you simply reorder your 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 your price"/>
</div>

    seems to do the trick, doesn’t it?

    • 0