Radio Button Select to complete input field

**hamfast** · 10-29-2007, 12:23 PM

Hello there

Hope you can help.

What is the easiest way of populating an input field with information selected via a radio button.

ie

Radio Button 1 = Red
Radio Button 2 = Blue
Radio Button 3 = Yellow

By selecting Radio Button 3 - the text 'Yellow', in this case, would complete an input field?

Thanks

Hamfast

**jscheuer1** · 10-29-2007, 02:53 PM

Do you mean populate or complete? Do you want the input to be otherwise editable or not?

To populate the field would be to overwrite any value it already had, to complete it would be to add to its current value. I'm just going to guess:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function radioPop(el, field){
for (var i = 0, buts=el.form.elements; i < buts.length; i++)
if(buts[i].name==el.name&&buts[i].checked)
el.form.elements[field].value=buts[i].value;
}
</script>
</head>
<body>
<form action="#">
<div>
<input type="text" name="color" readonly><br>
<input onclick="radioPop(this, 'color');" type="radio" name="colors" value="Red"> Red<br>
<input onclick="radioPop(this, 'color');" type="radio" name="colors" value="Blue"> Blue<br>
<input onclick="radioPop(this, 'color');" type="radio" name="colors" value="Yellow"> Yellow
</div>
</form>
</body>
</html>

**hamfast** · 10-29-2007, 03:22 PM

John

Thanks for replying. Yes, the field, if possible, should be otherwise editable.

It's just that I've got a whole load of options to choose from and it would be preferable if those using the website could just click on the PANTONE colour that they're after rather than having to type in the often annoyingly long winded name.

However, to have the option to type it in would be agreeable.

Cheers
Hamfast

**jscheuer1** · 10-29-2007, 04:03 PM

Just remove:

readonly

**hamfast** · 10-30-2007, 04:19 PM

That's worked a treat. Ta muchly.

But what's the best way of turning this into a php form so that details of colour choices can be sent to my email address?

Cheers
hamfast

**jscheuer1** · 10-30-2007, 04:32 PM

You would do that the same way that you would do it for any other PHP form. I imagine this varies, at least slightly, from server to server. You could ask in the PHP section. I think it might also require that the host have permissions set to allow that. A mail program on the server might be required, and even if not, could be used if present.

One thing though, without javascript enabled, you could end up with a form with one value for colors and another for color. It might be best to write out using javascript either the radio buttons or the text input, depending upon which one you want to be mandatory for the non-javascript enabled browser. Whatever is hard coded is all that the non-javascript enabled person would see.

**hamfast** · 10-30-2007, 04:56 PM

John

Thanks for coming back to me about that.

I'll ask this in the php section if you can't help

Is it possible to get a php form to work when it's split across more than 1 div?

That is to say:

The page is divided into narrow right and left columns and a big fat centre column.

The existing php form is in the right hand side but the color picker you've helped me with is too vast to fit there and therefore sits in the middle column. When i fill in the requisite sections in the php form on the right hand side it all works well but the color picker option is not being included.

Does that make any sense?

Many, many thanks
hamfast

**jscheuer1** · 10-30-2007, 05:21 PM

Well, a split form can work, but it all needs to be inside the one set of:

HTML Code:

<form></form>

tags. You can have various divisions inside that, but you should check with a validator if you try to do something like so, which I believe will mess up at least some browsers:

HTML Code:

<div>
<form>
</div>
<div>
</form>
</div>

This though, would be fine:

HTML Code:

<form>
<div>
</div>
<div>
</div>
</form>

**Twey** · 10-30-2007, 05:23 PM

Hm... I'd've done it more like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Radio Buttons to Text -- Demo</title>
    <style type="text/css">
      label {
        display: block;
      }
    </style>
    <script type="text/javascript">
      function clearRadioButtons(frm, name) {
        for(var i = 0, e = frm.elements[name], n = e.length; i < n; ++i)
          e[i].checked = false;
      }

      function radioToText(frm, rdio, txt) {
        var radioChangeHandler = function() {
          if(this.checked) {
            this.form.elements[txt].value = this.value;
            break;
          }
        };

        for(var i = 0, f = frm.elements, e = f[rdio], n = e.length; i < n; ++i)
          e[i].onchange = radioChangeHandler;

        f[txt].onchange = function() {
          clearRadioButtons(this.form, rdio);
        };

        f = frm = e = null;
      }
    </script>
  </head>
  <body>
    <form action="" id="some_form">
      <div>
        <input type="text" name="colour">
        <label>
          <input type="radio" name="colours" value="Red">
          Red
        </label>
        <label>
          <input type="radio" name="colours" value="Green">
          Green
        </label>
        <label>
          <input type="radio" name="colours" value="Blue">
          Blue
        </label>
      </div>
    </form>
    <script type="text/javascript">
      radioToText(document.getElementById("some_form"), "colours", "colour");
    </script>
  </body>
</html>

That's somewhat more efficient, as well as being neater (none of those obtrusive onchange events, and using labels instead of abusing <br>).

But what's the best way of turning this into a php form so that details of colour choices can be sent to my email address?

It's already a "PHP form" if by this you mean its results can be sent to a PHP script. A script to perform an action on form data is entirely separate from the form itself (which is just plain HTML); for the PHP to do this, you can use one of the many floating about the Web, or ask in our PHP forum if they don't suit you and we'll help you write your own.

EDIT: As an added gimmick,

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Radio Buttons to Text -- Demo</title>
    <style type="text/css">
      label {
        display: block;
      }
    </style>
    <script type="text/javascript">
      function clearRadioButtons(frm, name) {
        for(var i = 0, e = frm.elements[name], n = e.length; i < n; ++i)
          e[i].checked = false;
      }

      function radioToText(frm, rdio, txt) {
        var radioChangeHandler = function() {
          if(this.checked) {
            var e = this.form.elements[txt];
            e.value = e.style.backgroundColor = this.value;
            break;
          }
        };

        for(var i = 0, f = frm.elements, e = f[rdio], n = e.length; i < n; ++i)
          e[i].onchange = radioChangeHandler;

        f[txt].onchange = f[txt].onkeyup = function() {
          clearRadioButtons(this.form, rdio);
          this.style.backgroundColor = this.value;
        };

        f = frm = e = null;
      }
    </script>
  </head>
  <body>
    <form action="" id="some_form">
      <div>
        <input type="text" name="colour">
        <label>
          <input type="radio" name="colours" value="Red">
          Red
        </label>
        <label>
          <input type="radio" name="colours" value="Green">
          Green
        </label>
        <label>
          <input type="radio" name="colours" value="Blue">
          Blue
        </label>
      </div>
    </form>
    <script type="text/javascript">
      radioToText(document.getElementById("some_form"), "colours", "colour");
    </script>
  </body>
</html>

**hamfast** · 10-31-2007, 09:05 AM

Thanks very much for the responses. Can't believe how helpful you guys are. Thanks again.
Hamfast.

Thread: Radio Button Select to complete input field

Thread Tools

Search Thread

Radio Button Select to complete input field

Bookmarks

Bookmarks

Posting Permissions