Can't seem to adjust display of Input Type Checkbox in Form...

[Tigerbat]

I'm using PHP to make a very simple contact form, however when I use the input type checkbox, it shows as being so WIDE and the text that goes with the checkbox is very far from the box itself.

Also, in IE7 (but not in Firefox) the background color is White and doesn't match the page.

I tried to add a style to the checkbox to change the color but it didn't work.

I'm stuck.

 

<form name="volunteerForm" action="volunteer.php" method="post" onsubmit="return checkRequired();">


<b>Name:  </b>

<input name="name" value="" size="30" />

<br /><br />

<b>Email Address:  </b>

<input name="email" value="" size="30" />

<br /><br />

Which days work best for you?

<br /><br />

<input type="checkbox" value="yes" name="Monday Afternoon" />Monday 2:30pm to 4:30pm

<br /><br />

<input type="checkbox" value="yes" name="Tuesday Afternoon" />Tuesday 2:30pm to 4:30pm

<br /><br />

<input type="checkbox" value="yes" name="Wednesday Afternoon" />Wednesday 2:30pm to 4:30pm

<br /><br />

<input type="checkbox" value="yes" name="Thursday Afternoon" />Thursday 2:30pm to 4:30pm

<br /><br />

<input type="checkbox" value="yes" name="Friday Afternoon" />Friday 2:30pm to 4:30pm

<br /><br />

<input type="checkbox" value="yes" name="Saturday Morning" />Saturday Morning 10:00am to 12:00pm

<br /><br />

<input type="submit" name="submit" value="Submit" />

</form>

 

[attachment deleted by admin]

[Mark Baker]

Try assigning a type to your input fields

<input name="name" type="text" value="" size="30" />

 

Otherwise, we'd probably need to see your styles or any table wrappings you might have around the form

[Tigerbat]

Mark,

 

I did what you recommended...but it had no effect on shortening the width of the checkboxes, nor did it fix the white background that occurs in IE7.

 

As for styles, I have no styles for the form yet. Its just what you see.

 

[Mark Baker]

There must be something else that we're not seeing here. I cut and paste your html into a file here, and it looks perfectly OK... but your image shows green background so what's setting it to green? The problem may well lie in the markup that lies around the form rather than within the form itself

[Tigerbat]

The green is the background color for the body of the webpage.

 

Why is the checkbox so wide? Why doesnt the text (Monday...) show as being next to the checkbox, why so far?

[Tigerbat]

BUMP

 

Please help. I really need some competant help with this.

[Axeia]

You posted this in the wrong part of the forums, you think you're having an HTML problem but posted in the PHP forums.

Quite sure this however is a CSS problem and the width is being inherited from somewhere.

 

These sort of problems are best tackled by using Firefox with the Firebug extension. It allows you to 'inspect' the element. Simply put you click select, click the checkbox and it shows you all the CSS affecting the checkbox on the bottomright.. where most likely something is applying a size other than the default.

 

Asking for help in the right part of the forums along with a link to the actual site would be of great help.

[Tigerbat]

 

Thanks Axeia, with your help and Firebug, I found the CSS element that was effecting the width of the checkbox.

[Axeia]

You're welcome, you may want to change the status of the thread to solved so people trying to help others can skip reading this one.

[Tigerbat]

actually now i have a question regarding this topic and thats how to write the php that handles the checkboxes.

 

I know how to do it for drop-down, textarea, etc, but not for checkboxes.

[Axeia]

Checkboxes require you to put [] at the end of the name.

I see you're using a space in their name.. not sure if that's allowed, never tried.. but I'll exclude them from the example I give below to make sure the example should at least work.

 

so for example picking a small fraction of your code:

<input type="checkbox" value="yes" name="Wednesday Afternoon" />Wednesday 2:30pm to 4:30pm
<br /><br />
<input type="checkbox" value="yes" name="Thursday Afternoon" />Thursday 2:30pm to 4:30pm
<br /><br />
<input type="checkbox" value="yes" name="Friday Afternoon" />Friday 2:30pm to 4:30pm

 

You'd have to rewrite it to:

<input type="checkbox" value="yes" name="Wednesday_Afternoon[]" />Wednesday 2:30pm to 4:30pm
<br /><br />
<input type="checkbox" value="yes" name="Thursday_Afternoon[]" />Thursday 2:30pm to 4:30pm
<br /><br />
<input type="checkbox" value="yes" name="Friday_Afternoon[]" />Friday 2:30pm to 4:30pm

 

Then you're stuck with another problem.. all your values are the same so it doesn't make any sense. So you most likely want to have something like:

<input type="checkbox" value="Wednesday 2:30pm to 4:30pm" name="Wednesday_Afternoon[]" />Wednesday 2:30pm to 4:30pm
<br /><br />
<input type="checkbox" value="Thursday 2:30pm to 4:30pm" name="Thursday_Afternoon[]" />Thursday 2:30pm to 4:30pm
<br /><br />
<input type="checkbox" value="Thursday 2:30pm to 4:30pm" name="Friday_Afternoon[]" />Friday 2:30pm to 4:30pm

 

Now say the user selects the first and the last checkbox in this example.. on your page receiving the post request $_POST['Friday_Afternoon'] will be an array containing both "Wednesday 2:30pm to 4:30pm" and "Friday 2:30pm to 4:30pm"

 

(Someone please correct me if I'm wrong.. haven't worked with this stuff for ages)

[Tigerbat]

Actually I was trying to learn from a tutorial and changed it all around but it still doesn't work.

 

I get the error:

"Warning: htmlentities() expects parameter 1 to be string, array given in /home3/public_html/volunteer.php on line 9"

 

Here's the HTML:

 

<form name="volunteerForm" action="volunteer.php" method="post" onsubmit="return checkRequired();">


<b>Name:  </b>

<input name="name" type="text" value="" size="30" />

<br /><br />

<b>Email Address:  </b>

<input name="email" type="text" value="" size="30" />

<br /><br />

Which days work best for you?

<br /><br />

<input name="availability[]" value="Monday Afternoon" type="checkbox" />  Monday 2:30pm to 4:30pm

<br /><br />

<input name="availability[]" value="Tuesday Afternoon" type="checkbox" />  Tuesday 2:30pm to 4:30pm

<br /><br />

<input name="availability[]" value="Wednesday Afternoon" type="checkbox" />  Wednesday 2:30pm to 4:30pm

<br /><br />

<input name="availability[]" value="Thursday Afternoon" type="checkbox" />  Thursday 2:30pm to 4:30pm

<br /><br />

<input name="availability[]" value="Friday Afternoon" type="checkbox" />  Friday 2:30pm to 4:30pm

<br /><br />

<input name="availability[]" value="Saturday Morning" type="checkbox" />  Saturday Morning 10:00am to 12:00pm

<br /><br />

<input type="submit" name="submit" value="Submit" />

</form>

 

 

And here's the PHP:

 

<?php

$name = trim(htmlentities($_POST['name'],ENT_QUOTES,'utf-8'));

$email = trim(htmlentities($_POST['email'],ENT_QUOTES,'utf-8'));

$phone = trim(htmlentities($_POST['phone'],ENT_QUOTES,'utf-8'));

$availability = trim(htmlentities($_POST['availability'],ENT_QUOTES,'utf-8'));


$to = "myemail@gmail.com";

$subject = "Volunteer work";

$message = "Name: ".$name;

$message.="\n\nEmail: ".$email;

$message.="\n\nAvailability: ".$availability;

$headers = "From: $email";

$headers .="\nReply-To: $email";

$success = mail($to, $subject, $message, $headers);


if ($success)

print ("<b>Thank you $name. You'll be hearing from us soon.</b>");

print ("<br /><br />");

print ("<b><a href=\"index.htm\">Click here to go back to the Home Page</a></b>");


?>

 

 

By the way, here is the Javascript I am using to prevent the form from sending if all the fields are not filled out or the email is not in proper format, this also DOES NOT WORK:

 

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function isEmpty(str)
{
    for(var intLoop=0; intLoop<str.length; intLoop++)
      if(str.charAt(intLoop)!=" ")
        return false;
    return true;
}

function checkRequired ()
{
var f= document.volunteerForm;
var strError= "";

if (isEmpty(f.name.value)) {
         strError +="\n Name";
}
if (isEmpty(f.email.value)) {
         strError +="\n Email";
} else if (!validEmail(f.email.value)) {
	 strError +="\n Invalid Email Address";
}
if (isEmpty(f.availability[].name)) {
         strError +="\n Availability";
}

//display error message
    if(strError !="") {
	alert("The following required data is missing or not valid:\n" + strError);
	return false;
    } else {
	return true;
}
}

function validEmail(emailS) {
  if (emailS.indexOf("@") > 0 && emailS.indexOf(".") != -1 && emailS.lastIndexOf(".") < (emailS.length-2) && 

emailS.lastIndexOf(".")>0 && (emailS.lastIndexOf(".") - emailS.lastIndexOf("@") > 1) ) 
  {
    return true;
  } else {
    return false;
  }	
}