I was looking through the articles and couldn't find anything to help me. When the user clicks submit and the name is empth I want to display a messege next to it saying username is empty. I van get the message to display but it refreshes and goes away again. I am learning javascript by myself so I am sorry if it is a easy fix. Below is my code. Thanks in advance.

<!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>Contact Us</title>

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

<script type="text/javascript">

function validate(){
 var name = document.getElementById('name').value;
 var email = document.getElementById('email').value;
 var emailC = document.getElementById('emailC').value;
 var cmt = document.getElementById('cmt').value;
 var nme = document.getElementById('nme');

 if(name == ""){
    nme.innerHTML="Please enter your name";
    nme.style.color="red";
    return false;
 }
 else{
    nme.innerHTML="Name OK";
    nme.style.color="green"; 
    return true;
 }
}

</script>

</head>

<body>
<div id="container">
<div id="header">
<div id="headText">
Ned Kelly's
</div><!--end of headText-->
<div id="headText2">
Bar Tipperary
</div><!--end of headText-->
</div><!--end of header-->
<div id="navbar">
<div id="tabs">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div><!--end of navbar-->
<div id="content">
<div id="cont">
<form action="#" method="post" name="form" id="myForm">
<h3>Our Form</h3>
<hr/>
<ul>
<li>Name: 
<input type="text" name="name" id="name"/>
<label id="nme"></label>
</li>
<li>Email: 
<input type="text" name="name" id="email"/>
</li>
<li>Confirm Email: 
<input type="text" name="name" id="emailC"/>
</li>
<li>Comment: 
<textarea rows="3" cols="16" maxlength="100" id="cmt"></textarea>
<br/>
<br/>
<br/>
<br/>
</li>
</li>
<input type="submit" value="Submit" id="submit" onclick="validate()"/>
</ul>
</form>
</div>
</div><!--end of content-->
</div><!--end of container-->
<div id="footer">
    <hr/>
    Designed by <a href="#">Edmond P Murphy</a> 2013
</div>
</body>
</html>

but it refreshes and goes away again

HTTP is stateless. every time the page is refreshed, its a new page. Since you are making changes via javascript client side, when you refresh the page, the HTML that is stored in the page is sent back to the browser. The dynamic changes you made are lost.

To keep the information from page to page, you need help from server side scripting. There are various techniques from posting your data via a form, passing paramaters in the query string, session variables, cookies, etc..

However, using just HTML alone isnt going to provide you with passing values from page to page.

Since you included a form element, where will you be sending the form values? at the moment, you are posting the page to itself "#". what server side scripting language will you be using to process the form data?

I will be using php but again I am starting out with that too. My aim is to validate the form both client and server side. I am a long way from completing this task I am guessing. Do you know a good place to start when trying to learn these new techniques?

I particularly like to use books as a source of trainng and reference. However, there are a lot of sites out there with intro tutorials. Some online training sites too.

Try codeacademy.com.

Thanks a lot I just signed up to codeacademy and it looks brilliant. Thanks for the advice.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.