HTML - Form Checkbox / Radio Selection

Hi Guys,

The form below is part of a new ticketing system i am playing around with. I dont know much about it yet but i want to add a mandatory checkbox to the form and also a text area which contains my terms and conditions.

The form below is part of submitting a new ticket and before they can do so i want them to have to check the box below my terms and conditions saying they have read and agree.

I'm no expert on forms but im guessing this could be acheived by adding a text area and a checkbox.

Most important thing >>>> If the checkbox is not checked i want a pop up warning to pop up saying please tick the box or something like that.

Heres the form anyway:

Code:

<form name="new_ticket" method="post" action="new_ticket.php" onSubmit="return validate_ticket(document.new_ticket);" enctype="multipart/form-data" >
<input type="hidden" name="act" value="openticket">

<div class="sub-heading">
	{{cClient_newtickettitle}}
</div>
	 <div class="formheading">
		<span class="label">
			{{cLogin_direct}}
		</span>
	</div>	

 <div class="formrow">
	
	<span class="label">{{cClient_fullname}}:</span>
	<span class="field"><input name="client_name" type="text" class="singleline-field" id="full_name" value="{{client_name}}" />
		<span class="mandatory-fld">	
						*
				</span>				
	</span>
	
	</div>
	<div class="formrow">
		<span class=label>
			{{cClient_phone}} : 
		</span>
		<span class="field">
			<input type="text" name="phone" value="{{phone}}" class="singleline-field"> 
		</span>
</div>
	 <div class="formrow">
		<span class="label">
			{{cClient_email}} :
		</span> 
		<span class="field">
			<input type="text" name="email" value="{{email}}" class="singleline-field">
			<span class="mandatory-fld">	
						*
				</span>				
		</span>
</div>

	<{customfields_loopstart}>
		 <div class="formrow">
		<span class="label">
			<{field_name}> :
		</span> 
		<span class="field">
			<{draw_field}>		
		</span>
		</div>
	<{customfields_loopend}>


<div class="formrow">
		<span class=label>
			{{cDepartment}} : 
		</span>	
		<span class="field">
			<select name="dept_id" class="singleline-field">
			<option value="">{{cSelect}}</option>
			<{dept_loopstart}>
			<option value="<{dept_id}>"  <{selected}> ><{dept_name}></option>
			<{dept_loopend}>
			</select>
			<span class="mandatory-fld">	
						*
				</span>				
		</span>	
</div>

<div class="formrow">
		<span class=label>
			{{cTicket_priority}} : 
		</span>	
		<span class="field">
			<select name="priority_id" class="singleline-field">
			<option value="">{{cSelect}}</option>
			<{priority_loopstart}>
			<option value="<{priority_id}>" <{selected}> ><{priority_name}></option>
			<{priority_loopend}>
			</select>
			<span class="mandatory-fld">	
						*
				</span>				
		</span>	
</div>

<div class="formrow">
	<span class=label>
		{{cTicket_subject}} : 
	</span>
	<span class="field">
		<input type="text" name="subject" value="{{subject}}" class="textarea-field"> 
		<span class="mandatory-fld">	
						*
				</span>				
	</span>
</div>
<div class="formrow">
	<span class=label>
		{{cTicket_message}} : 
	</span>
	<span class="field">
		<textarea name="message" cols="{{cols}}" rows="{{rows}}" class="textarea-field" id="comments">{{message}}</textarea>
		<span class="mandatory-fld">	
						*
				</span>				
	</span>
</div>
<{attachment_start}>
<div class="formrow">
	<span class=label>
		{{cTicket_attachment}} : 
	</span>
	<span class="field">
			<input type="file" name="attachment" value="" size="50"  /> ({{cMax}} {{attachment_size}} {{cKb}})
	</span>
</div>
<{attachment_end}>

<div class="formheading">
	<span class="label">
		{{cProvide_password}}
	</span>
</div>
<div class="formrow">
	<span class="label">
		{{cPassword}} :
	</span>
	<span class="field">
		<input type="password" name="pass_word" class="singleline-field">
		<span class="mandatory-fld">	
						*
				</span>				
	</span>
</div>
<div class="formrow">
	<span class="label">
		{{cPassword_confirm}} :
	</span>
	<span class="field">
		<input type="password" name="password_confirm" class="singleline-field">
		<span class="mandatory-fld">	
						*
				</span>				
	</span>
</div>

<div class="formrow">
	<span class="field">
		<input type="submit" name="Submit" value="{{cSubmit}}" class="stdbutton-field" /> 
		<input type="reset" name="reset" value="{{cReset}}" class="stdbutton-field" />
	</span>
	</div>
</form>

I also have a number of other forms i will want to add this feature too so if anyone edits the code please highlight the part you added for me to see easily and then i can just copy it to my otehr forms.

Thanks in advance

CC_DESIGN

i have a form that returns the user upon a number of errors (of course) - i'm able to retain the text input data (value="<?php echo $_POST['em_name'] ?>") upon return, but i don't know how to retain the radio button or checkbox data so that they don't have to recheck it if necessary. it's in html/php...

can someone help?

much appreciated...

GN

In my HTML page, I have two forms.

Form 1: Radio Button A, Radio Button B, Radio Button C
Form 2: Radio Button D, Radio Button E, Radio Button F.

Form 2 Radio Button are disabled. If I click on A, D will be the only button enabled, if I click on B, E will be the only button enabled, if I click on C, F will be the only button enabled.

However, when I click on one of the Radio Buttons of Form 1, if I am using the Internet Explorer (version 6), the radio buttons in Form 2 are still disabled. It is not until I click on somewhere else that the proper button will be enabled. So, if I click on A, nothing will be enabled. After I click somewhere else, only after that D is enabled. Worse, if I click B, nothing happens and when I click C next, E will be the one enabled (but when I click on somewhere else, F will be enabled). This only happens in Internet Explorer. It works fine with Mozilla Firefox.

I'd like to know if there's a solution to this if I am using the Internet Explorer.

Here's a sample of my code:

<form name="form1">
<input id="ButtonA" type="radio" name="radiobutton" value="valueA" onChange="document.form2.d.disabled=false;document.form2.e.disabled=true;document.form2.f.disabled=t rue;">
<input id="ButtonB" type="radio" name="radiobutton" value="valueB" onChange="document.form2.d.disabled=true;document.form2.e.disabled=false;document.form2.f.disabled=t rue;">
<input id="ButtonC" type="radio" name="radiobutton" value="valueC" onChange="document.form2.d.disabled=true;document.form2.e.disabled=true;document.form2.f.disabled=fa lse;">
</form>

<form name="form2">
<input id="ButtonD" id="d" type="radio" name="radiobutton" value="valueD" disabled=true>
<input id="ButtonE" id="e" type="radio" name="radiobutton" value="valueE" disabled=true>
<input id="ButtonF" id="f" type="radio" name="radiobutton" value="valueF" disabled=true>
</form>

Please kindly help. Thank you.

Best regards,
ChrisX

I have a form with radio buttons. I want it so that only one is selectable at a time and if radiobutton 1 is selected then whenever another radiobutton is selected radiobutton 1 will be deselected.

Here is the code:
HTML Code:

<html>
<head>
<title> </title>
<script src="script.js">  </script>
</head>
<body>
<form>
<input type="radio" id="hbEgg" value="hb"> <label for="hb"> Hard Boiled Egg </label> <br />
<input type="radio" id="mbEgg"> <label for="mb"> Medium Boiled Egg </label> <br />
<input type="radio" id="fbEgg" value="fb"> <label for="fb"> Full Boiled Egg </label> <br />
<input type="radio" id="ebEgg"> <label for="eb"> Extra Boiled Egg </label> <br />
</form>
</body>
</html>

Thanks in advance.

Hi

I have a web form that, on submission populates a mySQL database through PHP. Each question on the form can have up to 5 different answers. What I am trying to achieve, either through radio groups or drop-down menus is to have unique values for each number so effectively ranking them.

Example:

Rank your favourite colours from these:

Red [1][2][3][4][5]
Blue [1][2][3][4][5]
Green [1][2][3][4][5]
White [1][2][3][4][5]
Orange [1][2][3][4][5]

Now for each one, I only want the user to select a UNIQUE value so that the same two numbers cannot be submitted. On submission there must be a 1,2,3,4 & 5 (ie with no two questions having the same number)

Scratching my head on this one. Any help would be most welcome.

Thanks

Hello All,
I'm creating a form which has got several parts, divided by tables, which are radio buttons, check boxes etc. All the radio button tables work well with the exception of one where it lets you choose all three options or two, as if they were checkboxes.

The code is:
PHP Code:
<div class="roundedcornrboxorange">
   <div class="roundedcornrtoporange"><div></div></div>
      <div class="roundedcornrcontentorange">
<table width="100%">
<tr>
<td colspan="3"><h3>Which level do you think you're currently are?</h3></td>
</tr>
<tr>
<td width="30%"><input type="radio" name="level[beginner]" id="beginner" value="1"/> Beginner</td>
<td width="30%"><input type="radio" name="level[intermediate]" id="intermediate" value="1"/> Intermediate</td>
<td width="30%"><input type="radio" name="level[advanced]" id="advanced" value="1"/> Advanced</td>
</tr>
</table>

      </div>
   <div class="roundedcornrbottomorange"><div></div></div>
</div> 


Does anyone have an idea what could be going wrong?

The css (in case it helps) is:

PHP Code:
.roundedcornrboxorange {
margin: 5px 0 0 0;
width: 800px;
clear: both;
   background: #ff7b06 url(../images/roundedcornr190406grad.gif) repeat-x top left;
}
.roundedcornrtoporange div {
   background: url(../images/roundedcornr190406tl.gif) no-repeat top left;
}
.roundedcornrtoporange {
   background: transparent url(../images/roundedcornr190406tr.gif) no-repeat top right;
}
.roundedcornrbottomorange div {
   background: url(../images/roundedcornr190406bl.gif) no-repeat bottom left;
}
.roundedcornrbottomorange {
   background: transparent url(../images/roundedcornr190406br.gif) no-repeat bottom right;
}

.roundedcornrtoporange div, .roundedcornrtoporange,
.roundedcornrbottomorange div, .roundedcornrbottomorange {
   width: 100%;
   height: 10px;
   font-size: 1px;
}
.roundedcornrcontentorange { margin: 0 10px; } 


Many thanks in advance

Hey guys. I've been using local storage for my form and so far it's worked great. Most of the form is simply having the user type in an answer but I have 4 questions that need to be as radio buttons. The problem is I need these radio buttons to be calculative values. I'm pretty sure I've got the 'setting values' part down but how do I 'set item' and 'get item' using local storage? Thanks in advance!

Here's what I'm using:

HTML Code:

&nbsp;<input type="radio" name="length" value=".106" /> Less than 1 year<br />
			&nbsp;<input type="radio" name="length" value="0" /> 1-2 years<br /> 
			&nbsp;<input type="radio" name="length" value="-.053" /> More than 2 years<br />

HTML Code:

localStorage.setItem("length", this.elements["length"].value);

HTML Code:

 localStorage.getItem("length")

So I have a radio group within a form. Specifically, here is my code:

HTML Code:

<table>
          <tr>
            <td><label>
                <input type="radio" name="question_1" value="Average" id="question_1_0" />
                Average</label></td>
            <td><label>
                <input type="radio" name="question_1" value="Large" id="question_1_1" />
                Large</label></td>
            <td><label>
                <input type="radio" name="question_1" value="Gigantic" id="question_1_2" />
                Gigantic!</label></td>
            <td><label>
                <input type="radio" name="question_1" value="Getting_larger" id="question_1_3" />
                It's Getting Larger...</label></td>
          </tr>
        </table>

So I need to set an initially selected on this radio group. How do I do that? Thanks!

Hope someone can help me. I've got a html page set up so that my clients can type in their name, choose several options via radio buttons, an option to clear the form, then submit the form.

What I'm having trouble with is how to obtain the information from the form. I think I would prefer this to be retrieved via email. Is there a way I can:

1. Have the subject of the email be the name of the client (whatever they type in)
2. The results of the form sent to my email (let's say it's myemail@university.edu)

Thanks in advance!

Here is the html code I have:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Bonus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<form method = "post" action = "mailto:myemail@university.edu">

<p>
Type your name in the box below then select the advancing team and click <i>submit</i> when finished.
</p>

<p>
Name: <input type = "text" name = "name" maxlength = "30"/>
</p>

<table border = "5">
<tr>
<td colspan = "2" align = "center"><b>STANLEY CUP PLAYOFF HUNT BRACKET</b></td>
</tr>
<tr>
<td width="328" align = "center">Eastern Conference</td>
<td width="359" align = "center">Western Conference</td>
</tr>
<tr>
<td><input type = "radio" name = "group1" value = "BB"/>Boston Bruins (1) <input type = "radio" name = "group1" value = "MC"/>Montreal Canadiens (8)</td>
<td><input type = "radio" name = "group2" value = "SJS"/>San Jose Sharks(1) <i>vs.</i> <input type = "radio" name = "group2" value = "AD"/>Anaheim Ducks (8)</td>
</tr>
<tr>
<td><input type = "radio" name = "group3" value = "WC"/>Washington Capitals (2)<input type = "radio" name = "group3" value = "NYR"/>New York Rangers (7)</td>
<td><input type = "radio" name = "group4" value = "DRW"/>Detroit Red Wings (2) <i>vs.</i><input type = "radio" name = "group4" value = "CBJ"/>Columbus Blue Jackets (7)</td>
</tr>
<tr>
<td><input type = "radio" name = "group5" value = "NJD"/>New Jersey Devils (3) <input type = "radio" name = "group5" value = "CH"/>Carolina Hurricans (6)</td>
<td><input type = "radio" name = "group6" value = "VC"/>Vancouver Canucks(3) <i>vs.</i><input type = "radio" name = "group6" value = "SLB"/>St. Louis Blues(6)</td>
</tr>
<tr>
<td><input type = "radio" name = "group7" value = "PP"/>Pittsburgh Penguins (4) <input type = "radio" name = "group7" value = "PF"/>Philadelphia Flyers (5)</td>
<td><input type = "radio" name = "group8" value = "CB"/>Chicago Blackhawks (4) <i>vs.</i><input type = "radio" name = "group8" value = "CF"/>Calgary Flames (5)</td>
</tr>
</table>

<p></p>

<p><input type = "reset" value = "Reset"/> <input type = "submit" value = "Submit" /></p>

</form>

</body>
</html>

Hi All,

I want to change the form action clicking on radio button.

I have two radio button. the default action is a1.jsp if I click on update button
If I click on second radio button I want to change the form action.

I want to redirect to another file (change form action if possible) if I click on second radio button


How can I do that ?

Thanks

please reply soon.

In a form, how do I define a radiobutton so that when it is selected additional form fields ara loaded onto the same page holding the text in other fields?

I am using Frontpage 2003 to build my site.

Hi All,

I want to change the form action clicking on radio button.

I have two radio button. the default action is a1.jsp if I click on update button
If I click on second radio button I want to change the form action.

I want to redirect to another file (change form action if possible) if I click on second radio button


How can I do that ?

Thanks

please reply soon.

My apologies if this belongs in a different forum.

I'm creating an order form for a site and I need to add something I've never done before. I want content to be added to the form if the user clicks on a certain radio button. At the bottom of the form there are fields for the subtotal and total of the items that they're inputting at the top of the form.

By clicking on a radio button I want to do either of the following.

1) A new table cell appears with text and an input field that has a number already in it.

2) The above cell and content are already on the page, and the clicking of the radio button only adds the info into the empty input.

The first option I assume is a little more complicated and probably deals with CSS and/or Javascript. Option 1 is preferred but if I can only do number 2 then I'll deal. Just a note, I'm not doing any actual number calculations with this form. It's just raw numbers so there's no need to take that into consideration.

Any and all help will be greatly appreciated.

Hello all I'm writing a mash up that has drag-able objects the problem is when I drag the object too fast my browser is selecting the text behind the object. So the screen behind the object keeps flashing blue. Is there a way to disable selection for a text block or change the color of what I select.