PDA

View Full Version : Form cursor jumping


happydunk
09-06-2011, 03:18 PM
Hi All

I have built a form with a massive amount of help from EDBR with a PHP script behind to send to my email address.

I have one last problem, when using my mouse to move from box to box this sometimes jumps up several boxes and I have to use the tab key to move down. Not good for my users.

I think this has something to do with my submit button my values etc are all set to submit from what I understand when the submit is hit the form action command takes over. I am using Dreaweaver, please see the form at

http://africanoverlanders.com/InfoPage.html

Thanks for any help

gentleone
09-06-2011, 06:08 PM
I think it's because you have two select boxes with a lot of options which you devide in groups, but they are coded wrong. I can't even (in Firefox 6 on the Mac) select a country because of this.

If you want to devide them into groups you should use the optgroup tag. Here's an article that explains how:
http://reference.sitepoint.com/html/optgroup

happydunk
09-06-2011, 07:15 PM
Thank you Gentleone

I have tried that and brilliant for making a better form but it unfortunately doesn't work, thank you for that but any other help would be great.

gentleone
09-06-2011, 07:35 PM
There are more errors in your form such as input and paragraph tags wrapped in label tags and unclosed labels and divs. If you sort these out first then you can rule them out as the cause of the problem.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fafricanoverlanders.com%2FInfoPage .html

happydunk
09-08-2011, 11:53 AM
Thank you again

I have rebuilt the form and it is now working nearly perfectly, so thank you.

If I can ask one last question on

http://africanoverlanders.com/InfoPage.html

I have three check boxes for people to decide if they want container, roro or motorbike box, some people will want a comparison between container and roro for example and so can check both boxes but when you submit, only the last checked box comes up and not both in the result, see the results page.

Is this to do with the PHP or to do with the way I have set up the form.

Thanks for your help

gentleone
09-08-2011, 02:37 PM
Is this to do with the PHP or to do with the way I have set up the form.

Thanks for your help
Your welcome!

The checkbox thing has to do with your PHP, but I can't help you with that (not my expertise). You'll have to wait till edbr comes home.

happydunk
09-08-2011, 02:58 PM
Thank you Gentlemedia, I will wait for edbr to see if he can help.

edbr
09-09-2011, 01:06 AM
it has to be sent as an array which needs {} to be added in your form then a slight alteration to your mail script probably. if ypou post both eth form and script as it is now ill look later.

happydunk
09-09-2011, 06:57 AM
Thank you again, my PHP script is now


<!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>Thank You</title>
<style type="text/css">
<!--
body {
background-color: #F3E7A9;
background-image: url();
background-repeat: no-repeat;
}
-->
</style></head>

<body>
<p align="center"><img src="Images/African-Overlanders-Banner.jpg" alt="African Overlanders Banner" width="700" height="175" /></p>
<div align="center" id="sendit">
<?php

// Edit these values

$email = "africanoverlanders@live.com";
$reply = "africanoverlanders@live.com";
$from = "africanoverlanders@live.com";
$subject ="Quote from African Overlanders";


// This allows us to set the from header, the reply to header, and the x-mailer
$headers="Content-Type: text/html; charset=windows-1252\n";
$headers.= "From: " . $from . "\r\n" ;
$headers."Reply-To: " ;
$headers.$reply . "\r\n" ;
$headers. "X-Mailer: PHP/" . phpversion();


if(empty($_POST['Email'])) {
die("You did not enter an email address please use the back button and complete. Thank you");
}


// validate email form field $_POST['Email']
if (!preg_match("/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/", $_POST['Email'])) {
echo "<h4>Invalid email address</h4>";
echo "<a href='javascript:history.back(1);'>Back</a>";
}




// Now we need to send the message


$text = "Results from form:\n\n";

foreach ($_POST as $key => $value)
{
$line= "<br>";
$space = " ";

if ($value == '')
{$value="No body"."\n";
}
else {

$conc = "$key.$space.$value.$line";
}
$conc = "$key.$space.$value.$line";
$text .= $conc;



}


if (mail($email , $subject, $text, $headers)) {
echo "<h4>Thank you for sending email</h4>";}
else {
echo "<h4>Can't send email</h4>";
}

echo "Your Message: ".$line. $text;

?>
</div>
<p align="center"><a href="home-en.html">Please click here to go back to the English home page</a></p>
<p align="center"> <a href="home-es.html">Haga clic aquí para*volver a la*página principal en español</a></p>
<p align="center"> <a href="home-gm.html">Bitte klicken Sie*hier, um*zurück auf die*deutsche Homepage zu gehen</a></p>
<p align="center"> <a href="home-fr.html">S'il vous plaît*cliquez ici pour*revenir à*la page d'accueil*française </a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>


AND THE FORM SCRIPT is at http://africanoverlanders.com/InfoPage.html. I cant post as to long

happydunk
09-15-2011, 07:15 PM
Hi Edbr

Sorry I should have thought and posted in two notices, not to bright at times

Thank you for all your help so far

<form id="Contact Form" name="Contact Form" method="post" action="sendit.php">
<p align="center"><strong>Please tell us your name</strong></p>
<p align="center">
<label>
<input type="text" name="Name" id="Name" />
</label>
</p>
<p align="center"><strong>Please tell us your email address (form will not send without this information)</strong></p>
<p align="center">
<label>
<input type="text" name="Email" id="Email" />
</label>
</p>
<p align="center"><strong>Do you wish to import or export your vehicle to/from Southern Africa?</strong></p>
<p align="center">
<label>
<input type="radio" name="Import Export" id="Import" value="Import" />
Import</label>
<label>
<input type="radio" name="Import Export" id="Export" value="Export" />
Export</label>
</p>
<p align="center"><strong>Do you wish to send vehicle by Container, RoRo
or Motorbike box please select more than one if you would like a comparisson?</strong></p>
<p align="center">
<label>
<input name="How to send" type="checkbox" id="How to send" value="Container" />
Container</label>
<label>
<input name="How to send" type="checkbox" id="How to send" value="RoRo" />
RoRo</label>
<label>
<input name="How to send" type="checkbox" id="How to send" value="Motorbike Box" />
Motorbike Box</label>
</p>
<p align="center"><strong>If motorbike what is the total weight of bike in Kgs?</strong></p>
<p align="center">
<label>
<input type="text" name="Motorbike Weight" id="Motorbike Weight" />
</label>
</p>
<p align="center"><strong>Are you willing to share a container back to Europe? This will save you money, leave the car with us and we will find somebody to share a larger container with. Car gets sent to the middle port between both owners.</strong></p>
<p align="center">
<label>
<input type="radio" name="Share Container" id="Share Container" value="Yes" />
Yes</label>
<label>
<input type="radio" name="Share Container" id="Share Container2" value="No" />
No</label>
</p>
<p align="center"><strong>Where do you wish to leave from? If you wish to send by RoRo please only use ports marked with (RoRo) these ports also handle containers.</strong></p>
<p align="center">
<select name="Departure_Port">
<optgroup label="Southern Africa">
<option selected="selected">Cape Town</option>
<option>Port Elisabeth (RoRo)</option>
<option>Durban (RoRo)</option>
<option>Walvis Bay</option>
<option>East London (RoRo)</option>
<optgroup label="Europe">
<option>Antwerp</option>
<option>Felixstowe</option>
<option>Hamburg</option>
<option>Le Havre (RoRo)</option>
<option>Rotterdam</option>
<option>Southamton (RoRo)</option>
<option>Barcelona</option>
<option>Lisbon</option>
<option>Valencia</option>
<option>Bremerhaven (RoRo)</option>
<option>Emden (RoRo)</option>
<option>Zeebrugge (RoRo)</option>
<option>Vigo (RoRo)</option>
<option>Genoa</option>
<optgroup label="North America">
<option>Boston</option>
<option>Charleston</option>
<option>Galveston</option>
<option>Long Beach</option>
<option>Miami</option>
<option>New York</option>
<option>Newark</option>
<option>New Orleans</option>
<option>Oakland</option>
<option>San Diego</option>
<option>Seattle</option>
<option>Montreal</option>
<option>Quebec</option>
<option>Vancouver</option>
<optgroup label="South America">
<option>Antofagasta</option>
<option>Callao</option>
<option>Buenos Aires</option>
<option>Montevideo</option>
<option>Rio de Janeiro</option>
<option>Valparaiso</option>
<optgroup label="Asia">
<option>Colombo</option>
<option>Hong Kong</option>
<option>Jakarta</option>
<option>Karachi</option>
<option>Manila</option>
<option>Mumbai</option>
<option>Shanghai</option>
<option>Singapore</option>
<option>Yokohama</option>
<optgroup label="Australasia">
<option>Adelaide</option>
<option>Brisbane (RoRo)</option>
<option>Darwin</option>
<option>Hobart</option>
<option>Melbourne (RoRo)</option>
<option>Freemantle (RoRo)</option>
<option>Sydney</option>
<option>Auckland</option>
<option>Lyttleton</option>
<option>Wellington</option>
<option>Kembla (RoRo)</option>
<optgroup label="Other">
<option>Other</option>
</select>
</p>
<p align="center"><strong>If other please tell us</strong></p>
<p align="center">
<label>
<input type="text" name="Departure Port Other" id="Departure Port Other" />
</label>
</p>
<p align="center"><strong>Which port do you wish to send your vehicle to? If you wish to send by RoRo please only use ports marked with (RoRo) these ports also handle containers.</strong></p>
<p align="center">
<select name="Import-_Port">
<optgroup label="Southern Africa">
<option selected="selected">Cape Town</option>
<option>Port Elisabeth (RoRo)</option>
<option>Durban (RoRo)</option>
<option>Walvis Bay</option>
<option>East London (RoRo)</option>
<optgroup label="Europe">
<option>Antwerp</option>
<option>Felixstowe</option>
<option>Hamburg</option>
<option>Le Havre (RoRo)</option>
<option>Rotterdam</option>
<option>Southamton (RoRo)</option>
<option>Barcelona</option>
<option>Lisbon</option>
<option>Valencia</option>
<option>Bremerhaven (RoRo)</option>
<option>Emden (RoRo)</option>
<option>Zeebrugge (RoRo)</option>
<option>Vigo (RoRo)</option>
<option>Genoa</option>
<optgroup label="North America">
<option>Boston</option>
<option>Charleston</option>
<option>Galveston</option>
<option>Long Beach</option>
<option>Miami</option>
<option>New York</option>
<option>Newark</option>
<option>New Orleans</option>
<option>Oakland</option>
<option>San Diego</option>
<option>Seattle</option>
<option>Montreal</option>
<option>Quebec</option>
<option>Vancouver</option>
<optgroup label="South America">
<option>Antofagasta</option>
<option>Callao</option>
<option>Buenos Aires</option>
<option>Montevideo</option>
<option>Rio de Janeiro</option>
<option>Valparaiso</option>
<optgroup label="Asia">
<option>Colombo</option>
<option>Hong Kong</option>
<option>Jakarta</option>
<option>Karachi</option>
<option>Manila</option>
<option>Mumbai</option>
<option>Shanghai</option>
<option>Singapore</option>
<option>Yokohama</option>
<optgroup label="Australasia">
<option>Adelaide</option>
<option>Brisbane (RoRo)</option>
<option>Darwin</option>
<option>Hobart</option>
<option>Melbourne (RoRo)</option>
<option>Freemantle (RoRo)</option>
<option>Sydney</option>
<option>Auckland</option>
<option>Lyttleton</option>
<option>Wellington</option>
<option>Kembla (RoRo)</option>
<optgroup label="Other">
<option>Other</option>
</select>
</p>
<p align="center"><strong>If other please let us know</strong></p>
<p align="center">
<label>
<input type="text" name="Import Port Other" id="Import Port Other" />
</label>
</p>
<p align="center"><strong>What is the make of your vehicle?</strong></p>
<p align="center">
<label>
<input type="text" name="Make of Vehicle" id="Make of Vehicle" />
</label>
</p>
<p align="center"><strong>What is the model of your vehicle?</strong></p>
<p align="center">
<label>
<input type="text" name="Model of Vehicle" id="Model of Vehicle" />
</label>
</p>
<p align="center"><strong>What are the dimensions of your vehicle at the greatest, dont include mirrors if they can be pushed in etc? </strong></p>
<p align="center">
<label>Length (m.cm)
<input name="Length" type="text" id="Length" size="5" />
</label>
</p>
<p align="center">
<label>Width (m.cm)
<input name="Width" type="text" id="Width" size="5" />
</label>
</p>
<p align="center">
<label>Height (m.cm)
<input name="Height" type="text" id="Height" size="5" />
</label>
</p>
<p align="center"><strong>What is the approximate value of the vehicle in US$? </strong></p>
<p align="center">
<label>
<input type="text" name="Value in US$" id="Value in US$" />
</label>
</p>
<p align="center"><strong>Is the vehicle on a Carnet de passage?</strong></p>
<p align="center">
<label>
<input type="radio" name="Vehicle on Carnet de Passage" id="Vehicle on Carnet de Passage" value="Yes" />
Yes</label>
<label>
<input type="radio" name="Vehicle on Carnet de Passage" id="Vehicle on Carnet de Passage2" value="No" />
No</label>
</p>
<p align="center"><strong>If NO which country is your vehicle registered in?</strong></p>
<p align="center">
<label>
<input type="text" name="Which country registered in" id="Which country registered in" />
</label>
</p>
<p align="center"><strong>Do you wish to insure your vehicle for the journey?</strong></p>
<p align="center">
<label>
<input type="radio" name="radio" id="Insurance" value="Insurance" />
Yes</label>
<label>
<input type="radio" name="radio" id="Insurance2" value="Insurance" />
No</label>
</p>
<p align="center"><strong>Do you have any other comments or questions? </strong></p>
<p align="center">
<label>
<textarea name="Comments or Questions" id="Comments or Questions" cols="45" rows="5"></textarea>
</label>
</p>
<p align="center">
<label>
<input type="submit" name="Submit" id="Submit" value="Submit" />
</label>
</p>
<p align="center">
<label>
<input type="reset" name="Reset" id="Reset" value="Reset" />
</label>
</p>
</form>

edbr
09-16-2011, 12:44 AM
no prob but i dont think i have time till next week but i will if i can

happydunk
09-20-2011, 07:32 PM
Any help at any time is most appreciated, I can wait thanks for all the time you have spent.

happydunk
10-02-2011, 06:29 PM
Hi Edbr

Just wondering if you had a chance to look as yet, if not and I totally understand if you don't have time. Is it possible to use something else instead of check boxes. I have 3 options (at the moment but this could increase) I want people to be able to select 1,2 or 3 of these for me to give them a price. Is there a way to do it without using check boxes and some other method that would work with your code?

Thanks for your help

edbr
10-03-2011, 01:02 AM
sorry7 i forgot I confess, monday madness now ill try later

happydunk
10-05-2011, 07:45 AM
Thank you for all your help

edbr
10-08-2011, 04:09 AM
look im still swamped but if you change your form to this it will be a quick and dirty way to get the info. basically using 3 separate checkbox names <form id="Contact Form" name="Contact Form" method="post" action="sendit.php">
<p align="center"><strong>Please tell us your name</strong></p>
<p align="center">
<label>
<input type="text" name="Name" id="Name" />
</label>
</p>
<p align="center"><strong>Please tell us your email address (form will not send without this information)</strong></p>
<p align="center">
<label>
<input type="text" name="Email" id="Email" />
</label>
</p>
<p align="center"><strong>Do you wish to import or export your vehicle to/from Southern Africa?</strong></p>
<p align="center">
<label>
<input type="radio" name="Import Export" id="Import" value="Import" />
Import</label>
<label>
<input type="radio" name="Import Export" id="Export" value="Export" />
Export</label>
</p>
<p align="center"><strong>Do you wish to send vehicle by Container, RoRo
or Motorbike box please select more than one if you would like a comparisson?</strong></p>
<p align="center">
<label>
<input name="How_to_send1" type="checkbox" id="How to send" value="Container" />
Container</label>
<label>
<input name="How_to_send2" type="checkbox" id="How to send" value="RoRo" />
RoRo</label>
<label>
<input name="How_to_send3" type="checkbox" id="How to send" value="Motorbike-Box" />
Motorbike Box</label>
</p>
<p align="center"><strong>If motorbike what is the total weight of bike in Kgs?</strong></p>
<p align="center">
<label>
<input type="text" name="Motorbike Weight" id="Motorbike Weight" />
</label>
</p>
<p align="center"><strong>Are you willing to share a container back to Europe? This will save you money, leave the car with us and we will find somebody to share a larger container with. Car gets sent to the middle port between both owners.</strong></p>
<p align="center">
<label>
<input type="radio" name="Share Container" id="Share Container" value="Yes" />
Yes</label>
<label>
<input type="radio" name="Share Container" id="Share Container2" value="No" />
No</label>
</p>
<p align="center"><strong>Where do you wish to leave from? If you wish to send by RoRo please only use ports marked with (RoRo) these ports also handle containers.</strong></p>
<p align="center">
<select name="Departure_Port">
<optgroup label="Southern Africa">
<option selected="selected">Cape Town</option>
<option>Port Elisabeth (RoRo)</option>
<option>Durban (RoRo)</option>
<option>Walvis Bay</option>
<option>East London (RoRo)</option>
<optgroup label="Europe">
<option>Antwerp</option>
<option>Felixstowe</option>
<option>Hamburg</option>
<option>Le Havre (RoRo)</option>
<option>Rotterdam</option>
<option>Southamton (RoRo)</option>
<option>Barcelona</option>
<option>Lisbon</option>
<option>Valencia</option>
<option>Bremerhaven (RoRo)</option>
<option>Emden (RoRo)</option>
<option>Zeebrugge (RoRo)</option>
<option>Vigo (RoRo)</option>
<option>Genoa</option>
<optgroup label="North America">
<option>Boston</option>
<option>Charleston</option>
<option>Galveston</option>
<option>Long Beach</option>
<option>Miami</option>
<option>New York</option>
<option>Newark</option>
<option>New Orleans</option>
<option>Oakland</option>
<option>San Diego</option>
<option>Seattle</option>
<option>Montreal</option>
<option>Quebec</option>
<option>Vancouver</option>
<optgroup label="South America">
<option>Antofagasta</option>
<option>Callao</option>
<option>Buenos Aires</option>
<option>Montevideo</option>
<option>Rio de Janeiro</option>
<option>Valparaiso</option>
<optgroup label="Asia">
<option>Colombo</option>
<option>Hong Kong</option>
<option>Jakarta</option>
<option>Karachi</option>
<option>Manila</option>
<option>Mumbai</option>
<option>Shanghai</option>
<option>Singapore</option>
<option>Yokohama</option>
<optgroup label="Australasia">
<option>Adelaide</option>
<option>Brisbane (RoRo)</option>
<option>Darwin</option>
<option>Hobart</option>
<option>Melbourne (RoRo)</option>
<option>Freemantle (RoRo)</option>
<option>Sydney</option>
<option>Auckland</option>
<option>Lyttleton</option>
<option>Wellington</option>
<option>Kembla (RoRo)</option>
<optgroup label="Other">
<option>Other</option>
</select>
</p>
<p align="center"><strong>If other please tell us</strong></p>
<p align="center">
<label>
<input type="text" name="Departure Port Other" id="Departure Port Other" />
</label>
</p>
<p align="center"><strong>Which port do you wish to send your vehicle to? If you wish to send by RoRo please only use ports marked with (RoRo) these ports also handle containers.</strong></p>
<p align="center">
<select name="Import-_Port">
<optgroup label="Southern Africa">
<option selected="selected">Cape Town</option>
<option>Port Elisabeth (RoRo)</option>
<option>Durban (RoRo)</option>
<option>Walvis Bay</option>
<option>East London (RoRo)</option>
<optgroup label="Europe">
<option>Antwerp</option>
<option>Felixstowe</option>
<option>Hamburg</option>
<option>Le Havre (RoRo)</option>
<option>Rotterdam</option>
<option>Southamton (RoRo)</option>
<option>Barcelona</option>
<option>Lisbon</option>
<option>Valencia</option>
<option>Bremerhaven (RoRo)</option>
<option>Emden (RoRo)</option>
<option>Zeebrugge (RoRo)</option>
<option>Vigo (RoRo)</option>
<option>Genoa</option>
<optgroup label="North America">
<option>Boston</option>
<option>Charleston</option>
<option>Galveston</option>
<option>Long Beach</option>
<option>Miami</option>
<option>New York</option>
<option>Newark</option>
<option>New Orleans</option>
<option>Oakland</option>
<option>San Diego</option>
<option>Seattle</option>
<option>Montreal</option>
<option>Quebec</option>
<option>Vancouver</option>
<optgroup label="South America">
<option>Antofagasta</option>
<option>Callao</option>
<option>Buenos Aires</option>
<option>Montevideo</option>
<option>Rio de Janeiro</option>
<option>Valparaiso</option>
<optgroup label="Asia">
<option>Colombo</option>
<option>Hong Kong</option>
<option>Jakarta</option>
<option>Karachi</option>
<option>Manila</option>
<option>Mumbai</option>
<option>Shanghai</option>
<option>Singapore</option>
<option>Yokohama</option>
<optgroup label="Australasia">
<option>Adelaide</option>
<option>Brisbane (RoRo)</option>
<option>Darwin</option>
<option>Hobart</option>
<option>Melbourne (RoRo)</option>
<option>Freemantle (RoRo)</option>
<option>Sydney</option>
<option>Auckland</option>
<option>Lyttleton</option>
<option>Wellington</option>
<option>Kembla (RoRo)</option>
<optgroup label="Other">
<option>Other</option>
</select>
</p>
<p align="center"><strong>If other please let us know</strong></p>
<p align="center">
<label>
<input type="text" name="Import Port Other" id="Import Port Other" />
</label>
</p>
<p align="center"><strong>What is the make of your vehicle?</strong></p>
<p align="center">
<label>
<input type="text" name="Make of Vehicle" id="Make of Vehicle" />
</label>
</p>
<p align="center"><strong>What is the model of your vehicle?</strong></p>
<p align="center">
<label>
<input type="text" name="Model of Vehicle" id="Model of Vehicle" />
</label>
</p>
<p align="center"><strong>What are the dimensions of your vehicle at the greatest, dont include mirrors if they can be pushed in etc? </strong></p>
<p align="center">
<label>Length (m.cm)
<input name="Length" type="text" id="Length" size="5" />
</label>
</p>
<p align="center">
<label>Width (m.cm)
<input name="Width" type="text" id="Width" size="5" />
</label>
</p>
<p align="center">
<label>Height (m.cm)
<input name="Height" type="text" id="Height" size="5" />
</label>
</p>
<p align="center"><strong>What is the approximate value of the vehicle in US$? </strong></p>
<p align="center">
<label>
<input type="text" name="Value in US$" id="Value in US$" />
</label>
</p>
<p align="center"><strong>Is the vehicle on a Carnet de passage?</strong></p>
<p align="center">
<label>
<input type="radio" name="Vehicle on Carnet de Passage" id="Vehicle on Carnet de Passage" value="Yes" />
Yes</label>
<label>
<input type="radio" name="Vehicle on Carnet de Passage" id="Vehicle on Carnet de Passage2" value="No" />
No</label>
</p>
<p align="center"><strong>If NO which country is your vehicle registered in?</strong></p>
<p align="center">
<label>
<input type="text" name="Which country registered in" id="Which country registered in" />
</label>
</p>
<p align="center"><strong>Do you wish to insure your vehicle for the journey?</strong></p>
<p align="center">
<label>
<input type="radio" name="radio" id="Insurance" value="Insurance" />
Yes</label>
<label>
<input type="radio" name="radio" id="Insurance2" value="Insurance" />
No</label>
</p>
<p align="center"><strong>Do you have any other comments or questions? </strong></p>
<p align="center">
<label>
<textarea name="Comments or Questions" id="Comments or Questions" cols="45" rows="5"></textarea>
</label>
</p>
<p align="center">
<label>
<input type="submit" name="Submit" id="Submit" value="Submit" />
</label>
</p>
<p align="center">
<label>
<input type="reset" name="Reset" id="Reset" value="Reset" />
</label>
</p>
</form>

happydunk
10-10-2011, 03:53 PM
Hi Edbr

Thank you for all your help, works like a dream I am so happy with the end result.

Thank you