Add a mandatory checkbox to a form

[Ricklord]

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:

 

<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

[Ricklord]

Oh i thought you might need the code from the new_ticket.php file the form is posted to:

 

<?php
include_once("config.php");
include_once("header.php");
if(isset($post_vars['act']))
{
$act=$post_vars['act'];
}
else
{
$act="";
}
switch($act)
{
	case NULL:
		// Open a ticekt form
		$supp_obj->open_a_ticketfrm($supp_obj,$session_vars,$generic_msg);
	break;
	case "openticket":
		$return_vars=$supp_obj->submit_ticket($supp_obj,$session_vars,$post_vars,$generic_msg,$file_vars);
		//print_R($return_vars);
		if($return_vars['status']==false)
		{
			$post_vars['status_msg']=$return_vars['status_msg'];
			$supp_obj->open_a_ticketfrm($supp_obj,$session_vars,$generic_msg,$post_vars);
		}
	break;	
}
include_once("footer.php");
?>

 

and also this is the javscript code above the form

 

<script language="JavaScript">
function validate_ticket(frm)
{
	with(frm)
	{
		var	flag1=validate_field(client_name,'{{cNoname}}');
		if(flag1==false)
		{
			return false;
		}

		if(!isEmailAddress(email.value))
		{
			alert('{{cNoemail}}');
			email.focus();
			return false;
		}

		{{custom_javascript}}

		var	flag1=validate_field(pass_word,'{{cNopassword}}');
		if(flag1==false)
		{
			return false;
		}
		if(pass_word.value!=password_confirm.value)
		{
			alert("{{cPasswordmismatch}}");
			return false;
		}

		var	flag3=validate_field(dept_id,'{{cNodepartment}}');
		if(flag3==false)
		{
			return false;
		}

		var	flag1=validate_field(priority_id,'{{cNopriority}}');
		if(flag1==false)
		{
			return false;
		}

		var	flag1=validate_field(subject,'{{cNosubject}}');
		if(flag1==false)
		{
			return false;
		}

		var	flag1=validate_field(message,'{{cNomessage}}');
		if(flag1==false)
		{
			return false;
		}


		return true;

	}
}
</script>

 

 

[Ricklord]

Any Ideas on this one peeps?

 

 

[Ricklord]

Still looking for any input on this one

 

???

 

[chronister]

Yes, just add the 2 fields you want to the form.

 

<textarea name="terms" disabled="disabled">Terms & conditions will go here</textarea>

 

<input type="checkbox" name="accept_terms" value="accepted" />

 

I am not worth a crap at javascript, so this is the best I can come up with for verifying the field client side

 

<script type="text/javascript" language="javascript">
function check_box(){	
	valid=true;
	if(FORM_NAME.accept_terms.checked==false){
			alert('Click the box ');
		valid=false;
	}
return valid;

}
</script>

 

Add this to your form tag onsubmit="return check_box()"

 

Here is a server side version.

 

<?php
if($_POST['name_of_submit_button'])
{
if(!isset($_POST['accept_terms']))
{
	echo 'Error message goes here';
}
}
?>

[Ricklord]

Thank you so much. I will get to it later today.