form troubled

wright67uk · 11-04-2012, 04:37 PM

When a user types some input, the input disapears as soon as they click in a second input box.
I don't know what I can do to stop this from happening any ideas would be great.

Www.1pw.co.UK/theme/contact.html

Code:

 <html> <head> <title>Axia Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;" /> <meta name="apple-mobile-web-app-capable" content="yes" />

<link type="text/css" rel="stylesheet" href="styles/style.css" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript" src="js/main.js"></script>

</head>

<body> <div id="page"> <!-- Page wrapper --> <div id="menu"> <!-- Top menu --> <div><a href="about.html"><img src="images/home_buttons/agent.png" alt="About" /><br /><span>About</span></a></div> <div><a href="services.html"><img src="images/home_buttons/briefcase.png" alt="Services" /><br /><span>Services</span></a></div> <div><a href="blog.html"><img src="images/home_buttons/chat-.png" alt="Blog" /><br /><span>Blog</span></a></div> <div><a href="portfolio.html"><img src="images/home_buttons/addressbook.png" alt="Portfolio" /><br /><span>Portfolio</span></a></div> <div class="active"><a href="contact.html"><img src="images/home_buttons/email.png" alt="Contact" /><br /><span>Contact</span></a></div> </div> <div id="main"> <!-- Main content area --> <h2>Contact us</h2> <p>AxiaMobile comes with <b>full working PHP contact form</b> with simple one-click set-up.</p> <p><img class="bordered_picture fullwidth" src="http://maps.googleapis.com/maps/api/staticmap?center=-4,30&zoom=11&size=1600x1200&sensor=true"></p> <form id="form" method="post" action="contact.php"> <input type="text" required="required" name="name" value="Your name..." onclick="this.value=''" onblur="this.value='Your name...'" /> <input type="text" required="required" value="Your email..." name="email" onclick="this.value=''" onblur="this.value='Your email...'" /> <textarea cols="10" required="required" rows="10" name="message" onclick="this.value=''" onblur="this.value='Your message...'">Your message...</textarea> <input type="submit" class="button FancyBlue" value="Send message" /> </form>

</div> <div id="footer"> <!-- Footer --> <a href="index.html"><button><img src="images/home.png" alt="Home" />Home</button></a> <button onclick="$('html, body').animate({scrollTop: '0'}, 700);">Top</button> </div>

</div> </body>

Excavator · 11-04-2012, 05:42 PM

Hello wright67uk,
What is onblur="this.value='Your name...'" doing for you? What happens when you remove that?

wright67uk · 11-04-2012, 07:34 PM

Hi,

Thank you for your reply.

I've removed the onblur, and now the form submits the users input well.

The only problem now is that if i type a message into the form and then click in the form field again (let's say i want to edit the message or correct a typo) then everything i've just written disappears.

How would I go about;

1) ensuring that if the the form field is empty then then field will read
"message"

2) the message wont delete if the user clicks in the form field a second time.

thankyou for your time

Excavator · 11-04-2012, 08:15 PM

Quote:

The only problem now is that if i type a message into the form and then click in the form field again (let's say i want to edit the message or correct a typo) then everything i've just written disappears.

It was doing that in your first version too. It's your onclick that removes it, which is what it's supposed to do. Here is a pretty sweet trick to removing that input field tip but not the text the user enters - http://kuttler.eu/post/html-forms-and-onclick-onfocus/