Log in

View Full Version : Radio button and input text


syntaxerror
05-06-2009, 11:13 AM
hi,
can anyone please help me...
i have radio buttons and a text field
if the radio button is selected the text field is disabled
and if the radio button of a text field is selected the text field is enabled

my code is:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<script type="text/javascript">
var textbox = function(me){
if(me.checked == false){
var textb = document.createElement('input');
textb.type = "Objection";
textb.name = "Objection";
me.parentNode.appendChild(textb);
}
setInterval(function(){
if(me.checked == false){
me.parentNode.removeChild(textb);
return false;
}
}, 50);
};
</script>
<form action="form2.php" method="post">
<table>
<tr bgcolor="#e8e8e8">
<TD WIDTH="36%" class="main">
&nbsp;&nbsp;:Punctuation after “objection”
</TD>
<TD WIDTH="64%" class="main" valign="top">
<input name="Objection" type="radio" value="3"<? print($pref_info['Objection'] == '3')? " checked" : ""; ?>> Objection. Vague, asumes facts not in evidence.<br />
<input name="Objection" type="radio" value="2"<? print($pref_info['Objection'] == '2')? " checked" : ""; ?>> Objection. Vague; asumes facts not in evidence.<br />
<input name="Objection" type="radio" value="1"<? print($pref_info['Objection'] == '1')? " checked" : ""; ?>> Objection. Vague. Assumes facts not in evidence.<br />
<input name="Objection" type="radio" value="0"<? print($pref_info['Objection'] == '0')? " checked" : ""; ?>> Objection; vague, assumes facts not in evidence.<br />
<input type="radio" name="Objection" onmouseup="textbox(this)"/>Other:<noscript><input name="Objection" width="250" type="text" value="<?php echo $pref_info['Objection']; ?>" /></noscript>
</TD>
</tr>
<tr>
<TD WIDTH="36%" class="main">
&nbsp;&nbsp;:Ante meridiem/post meridiem abbreviation preference
</TD>
<TD WIDTH="64%" class="main" valign="top">
<input name="Meridiem" type="radio" value="2"<? print($pref_info['Meridiem'] == '2')? " checked" : ""; ?>> a.m./p.m.&nbsp;&nbsp;
<input name="Meridiem" type="radio" value="1"<? print($pref_info['Meridiem'] == '1')? " checked" : ""; ?>> AM/PM&nbsp;&nbsp;
<input name="Meridiem" type="radio" value="0"<? print(!isset($pref_info['Meridiem']) || $pref_info['points'] == '0')? " checked" : ""; ?>> A.M./P.M. </TD>
</tr>
<tr bgcolor="#e8e8e8">
<TD WIDTH="36%" class="main">
&nbsp;&nbsp;:Spelling out words or “stitching” preference
</TD>
<TD WIDTH="64%" class="main" valign="top">
<input name="Stitching" type="radio" value="2"<? print($pref_info['Stitching'] == '2')? " checked" : ""; ?>> All caps with dashes (C-A-T)<br />
<input name="Stitching" type="radio" value="1"<? print($pref_info['Stitching'] == '1')? " checked" : ""; ?>> Lowercase with dashes (c-a-t)<br />
<input name="Stitching" type="radio" value="0"<? print( $pref_info['Stitching'] == '0')? " checked" : ""; ?>> First-letter cap with dashes (C-a-t)<br />
<input type="radio" name="Stitching" onmouseup="textbox(this)"/>Other:<noscript><input name="Stitching" width="250" type="text" value="<?php echo $pref_info['Stitching']; ?>" /></noscript>
</TD>
</tr>
<tr>
</table>
</form>
</body>
</html>



the problem is the data in second radiobutton with text field isnt submited or captured when submited.

please help

thanks
forum_amnesiac
05-06-2009, 11:48 AM
The initial problem you have is that in the function you have set textb.type = "Objection", this should be textb.type = "text".

This is basically setting the input type="text".

The second problem is that you cannot use this function, as it is, to set 2 field values.

As it is at the moment it can only set the value for the field named "Objection".

You either need to pass the function the field name you want it to set or use a copy of this function, renamed, for each field you want to have it for.
forum_amnesiac
05-06-2009, 12:16 PM
Here is your script altered so that the function works with more than field


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<script type="text/javascript">
var textbox = function(me,field){
if(me.checked == false){
var textb = document.createElement('input');
textb.type = "text";
textb.name = field;
me.parentNode.appendChild(textb);
}
setInterval(function(){
if(me.checked == false){
me.parentNode.removeChild(textb);
return false;
}
}, 50);
};
</script>
<form action="form2.php" method="post">
<table>
<tr bgcolor="#e8e8e8">
<TD WIDTH="36%" class="main">
&nbsp;&nbsp;:Punctuation after “objection”
</TD>
<TD WIDTH="64%" class="main" valign="top">
<input name="Objection" type="radio" value="3"<? print($pref_info['Objection'] == '3')? " checked" : ""; ?> Objection. Vague, asumes facts not in evidence.<br />
<input name="Objection" type="radio" value="2"<? print($pref_info['Objection'] == '2')? " checked" : ""; ?> Objection. Vague; asumes facts not in evidence.<br />
<input name="Objection" type="radio" value="1"<? print($pref_info['Objection'] == '1')? " checked" : ""; ?> Objection. Vague. Assumes facts not in evidence.<br />
<input name="Objection" type="radio" value="0"<? print($pref_info['Objection'] == '0')? " checked" : ""; ?> Objection; vague, assumes facts not in evidence.<br />
<input type="radio" name="Objection" onmouseup="textbox(this,'Objection')"/>Other:<noscript><input type="text" name="Objection" width="250" value="" /></noscript>
</TD>
</tr>
<tr>
<TD WIDTH="36%" class="main">
&nbsp;&nbsp;:Ante meridiem/post meridiem abbreviation preference
</TD>
<TD WIDTH="64%" class="main" valign="top">
<input name="Meridiem" type="radio" value="2"<? print($pref_info['Meridiem'] == '2')? " checked" : ""; ?> a.m./p.m.&nbsp;&nbsp;
<input name="Meridiem" type="radio" value="1"<? print($pref_info['Meridiem'] == '1')? " checked" : ""; ?> AM/PM&nbsp;&nbsp;
<input name="Meridiem" type="radio" value="0"<? print(!isset($pref_info['Meridiem']) || $pref_info['points'] == '0')? " checked" : ""; ?> A.M./P.M. </TD>
</tr>
<tr bgcolor="#e8e8e8">
<TD WIDTH="36%" class="main">
&nbsp;&nbsp;:Spelling out words or “stitching” preference
</TD>
<TD WIDTH="64%" class="main" valign="top">
<input name="Stitching" type="radio" value="2"<? print($pref_info['Stitching'] == '2')? " checked" : ""; ?> All caps with dashes (C-A-T)<br />
<input name="Stitching" type="radio" value="1"<? print($pref_info['Stitching'] == '1')? " checked" : ""; ?> Lowercase with dashes (c-a-t)<br />
<input name="Stitching" type="radio" value="0"<? print( $pref_info['Stitching'] == '0')? " checked" : ""; ?> First-letter cap with dashes (C-a-t)<br />
<input type="radio" name="Stitching" onmouseup="textbox(this,'Stitching')"/>Other:<noscript><input name="Stitching" width="250" type="text" value="" /></noscript>
</TD>
</tr>
<tr>
<td> <input type="submit" border=0 value="Submit" alt="Submit Enquiry" name="image"></td>
</tr>

</table>
</form>
</body>
</html>

I also put in the submit button so I could test it
syntaxerror
05-07-2009, 03:26 AM
hi,
thanks,
it works,
but what if i want to add another radio and textfield?
forum_amnesiac
05-07-2009, 08:19 AM
You can use this code for as many radio buttons with input text as you want.

In the following code just change the word 'Stitching' in value=Stitching and in textbox(this,'Stitching') to what you want the new field to be called.

Then add this code inside the <body> where you want the new field to be.


<TD WIDTH="64%" class="main" valign="top">
<input name="Stitching" type="radio" value="2"<? print($pref_info['Stitching'] == '2')? " checked" : ""; ?> All caps with dashes (C-A-T)<br />
<input name="Stitching" type="radio" value="1"<? print($pref_info['Stitching'] == '1')? " checked" : ""; ?> Lowercase with dashes (c-a-t)<br />
<input name="Stitching" type="radio" value="0"<? print( $pref_info['Stitching'] == '0')? " checked" : ""; ?> First-letter cap with dashes (C-a-t)<br />
<input type="radio" name="Stitching" onmouseup="textbox(this,'Stitching')"/>Other:<noscript><input name="Stitching" width="250" type="text" value="" /></noscript>
</TD>