Hi there, I have added a validation script to this page http://antobbo.webspace.virginmedia.com/webediting/documents.htm but it is not working the way I want it to, I am sure I made some silly mistake.
Basically I want to make sure that people actually input something in the form below before submitting it. If they attempt to submit it blank they get a pop up window saying that they should type something inside but unfortunately after clicking ok on the box the form gets submitted (goes to a php page with the thank you message).
Now, when the pop up window with the alert message comes up I would like to be able to click OK and prevented from submitting the form till I type something in.
The full script I have is this:

<!--BEGINNING JAVA SCRIPT -->
<script type="text/javascript">
<!--

function showCommentBox()
{

var feedback_box = document.getElementById('comment');


feedback_box.className='visible' ;
feedback_box.className='comment_box';

}

function validation(field,message)
{
if(field.value.length==0)
	{

	alert(message);
	field.focus();
	return false;

	}
return true;

}
//-->
</script>
<!-- END JAVA SCRIPT-->

and this is the html element:

<form action="email.php" method="post" onsubmit="validation(document.getElementById('commentsid'),'Enter a value')">

<p><input type="button" value="Comment" onclick="showCommentBox()"><br></p>

<div class="hidden" id="comment">
<p>Comments and suggestions:<br><textarea name="comments" id="commentsid" rows="3" cols="30"></textarea><br><br>

<input type="submit" value="Send"></p>
</div> <!-- end of comment_box-->
</form>

Is it because the function validation() is trying to pass the id="commentsid" before it is declared? If so, can I move the function call to validation() where the Send button in so that it reads:

<form action="email.php" method="post" >

<p><input type="button" value="Comment" onclick="showCommentBox()"><br></p>

<div class="hidden" id="comment">
<p>Comments and suggestions:<br><textarea name="comments" id="commentsid" rows="3" cols="30"></textarea><br><br>

<input type="submit"  onclick="validation(document.getElementById('commentsid'),'Enter a value')" value="Send"></p>
</div> <!-- end of comment_box-->
</form>

WOuld that work?
Thanks

Recommended Answers

All 21 Replies

your form onsubmit needs to return false if nothing entered:
http://www.isolani.co.uk/articles/simpleJavascriptAndForms.html

Also, I would recommend putting the comment button below the comment form. As is, when I scroll all the way down, then click the comment button, I have no idea the form was displayed...unless I happen to notice the scroll bar extended a bit.

Have an onsubit="return validate(paramters)". If the form detects something is wrong (depending on your script), it will return as false and won't submit the form.

Using "return function(args)" has one down side -- it will always perform the function regardless what buttons you click (except reset type). If you have only 'submit' button, then it should work fine.

Thanks guys I have updated the script and now it works. http://www.antobbo.webspace.virginmedia.com/webediting/documents.htm
SolidSolutions good point about the button, I managed to move it but unfortunately when the box appears the button slides next to it...
I tried to clear:both; in the CSS but it doesn't work..not sure how to move that box down, or is it a question more for the HTML forum?
thanks

you could put it back the way you had it and use a scroll in your function after the form is shown:

window.scrollBy(0,100);

Also, it might be good to hide the comment button once clicked as well.

Sorry I meant how to move the button down, not the comment box itself. I had a look at the window.scrollTo function (couldn't find anywhere any reference to window.scrollBy )but I seem to understand that it is just to set the focus to an element of the page at the coordinates specified, whereas the issue with the button might be more to do with CSS, is that correct?
Good point about hiding the comment button though, I will see if I can achieve that creating a new "hidden" class and call it from the script, which turned out to be not that easy.
I basically created another class in my CSS:

/*hiding the comment box*/
p.comment_button
{
display:none;
}

to hide the button and now my <form> looks like this:

<form action="email.php" method="post" onsubmit="return validation(document.getElementById('commentsid'),'Enter a value')">



<div class="hidden" id="comment">
<p>Comments and suggestions:<br><textarea name="comments" id="commentsid" rows="3" cols="30"></textarea><br><br>

<input type="submit" value="Send"></p>
</div> <!-- end of comment_box-->

<p><input type="button" value="Comment" class="comment_button" onclick="showCommentBox()"><br></p>
</form>

I modified the javascript to be

<script type="text/javascript">
<!--

function showCommentBox()
{

var feedback_box = document.getElementById('comment');


feedback_box.className='visible' ;
feedback_box.className='comment_box';
feedback_box.className='comment_button';


}

function validation(field,message)
{
if(field.value.length==0)
	{

	alert(message);
	field.focus();
	return false;

	}
return true;

}
//-->
</script>

Have I done anything wrong?

The 'clear' attribute is for clearing 'float'.

Do you want the 'feedback_box' to use all 3 classes in CSS? If so, do as followed...

// change these lines
feedback_box.className='visible' ;
feedback_box.className='comment_box';
feedback_box.className='comment_button';

// to
feedback_box.className='visible comment_box comment_button';

Because you assign the class over the previous one, your 'feedback_box' is being assigned only 'comment_button' class. If you want all properties of CSS from all 3 classes, you must concatenate them using a white space as delimeter.

"Sorry I meant how to move the button down, not the comment box itself"

I was suggesting putting it back the way you had it, not moving the comment box. Put it back to the button above the form since that was working. Then, just hide the button on click, have the comment box show up and then scroll the page so the comment box is in view.

thanks guys.

Do you want the 'feedback_box' to use all 3 classes in CSS? If so, do as followed

Taywin, I thought I wanted to do that, (and thanks for the tip I didn't know I had to have them all in the same call) but I noticed that if I do that the "Comment" button doesn't show up in the first place...sorry I am getting lost doing what should probably be quite easy. Is it because I have to call .comment_button not at the same time as the other classes?
At the moment I have (it is not live on the website thought, still testing) in my CSS:

...
/*hiding the comment box*/
.comment_button /* In my previous version I think I had p.comment_button, sorry*/
{
display:none;
...
}

and this is the <form>

<form action="email.php" method="post" onsubmit="return validation(document.getElementById('commentsid'),'Enter a value')">



<div class="hidden" id="comment">
<p>Comments and suggestions:<br><textarea name="comments" id="commentsid" rows="3" cols="30"></textarea><br><br>

<input type="submit" value="Send"></p>
</div> <!-- end of comment_box-->

<p><input type="button" value="Comment" class="comment_button" onclick="showCommentBox()"><br></p>
</form>

If I want the "Comment" button to disappear when the comment box appears I thought that I had to call that class at the same time as the other ones but that doesn't sem to be the case. Does it mean that it needs to be called after?

SolidSolutions, I have used the function you suggested window.scrollBy() and it works fine thanks, but I have a question on that. On this page http://www.antobbo.webspace.virginmedia.com/webediting/documents.htm I used window.scrollBy(0,150) but then if I want to use it on another page which is longer/shorted I will have to modify the function I suppose. So isn't there a way to automate it?
thanks

Correct. You have the 'display:none' property in your style. An element will be effected by all properties in classes you add. One problem, I am not sure how a browser determines which property value it will use from a class if you have the same property (with different values) in different classes.

OK, let me try to do what you are trying to do...

// CSS part
/*hiding the comment box*/
/* notice that this style will be applied to 'p' tag only */
p.comment_button { display: none; }
/* I assume that you also have this class in your CSS list */
/* but instead of specify what element type would be able to */
/* use this class, you simply declare it anonymous using only dot */
.hidden { display: none; }
// HTML part
<form action="email.php" method="post" onsubmit="return validation(document.getElementById('commentsid'),'Enter a value')">

<div class="hidden" id="comment">
  <p>
  Comments and suggestions:<br>
  <textarea name="comments" id="commentsid" rows="3" cols="30"></textarea>
  <br><br>

  <input type="submit" value="Send">
  </p>
</div>
<!-- end of comment_box-->

<p>
  <!-- I change the function to accept this button DOM object in order to -->
  <!-- hide itself easily. Also, no need to have class for it right now -->
  <input type="button" value="Comment" onclick="showCommentBox(this)"><br>
</p>
</form>
// JavaScript part
<script type="text/javascript">
<!--
function showCommentBox(buttonObject) {
  var feedback_box = document.getElementById('comment');

  // remove the hidden class from the element implies display
  feedback_box.className = "";
  buttonObject.className = "hidden"  // now hide the button
}

function validation(field, message) {
  // If the field contains only white spaces, it still passes this test
  // and return true. If you do not want it to be that way, uncomment the line below.
  // What the line does is to delete leading/tailing white spaces using
  // regular expression matching.
  // field.value = field.value.replace(/^\s+|\s$/g, "")
  if(field.value.length==0) {
    alert(message);
    field.focus();
    return false;
  }

  return true;
}
//-->
</script>

Thanks that works but I have few questions:
-I am not quite sure what the DOM object is, and I can't see the "this" object declared anywhere. Is "this" a kind of keyword or something special? From what I see you pass "this" to the function showCommentBox() which then uses it to hide the button. SO does somehow "this" stand for the button? How?
-Don't quite understand this line:

feedback_box.className = "";

What does it do? I thought I had to specify the classes to be called, so something like

feedback_box.className='comment_box'

which picks up the style of the box like in here http://www.antobbo.webspace.virginmedia.com/webediting/headings.htm. At the moment if I have it your way the box doesn't pick up the style in the style sheet (which was done with

feedback_box.className='comment_box'

, but if I add that line back it doesn't work). Also the

window.scrollBy(0,150)

doesn't work anymore. Here's the new Java script:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Web editing - Documents</title>

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

<!--BEGINNING JAVA SCRIPT -->
<script type="text/javascript">
<!--

function showCommentBox(buttonObject)
{

var feedback_box = document.getElementById('comment');


feedback_box.className = "";

buttonObject.className = "hidden" // now hide the button

window.scrollBy(0,150)


}

function validation(field,message)
{
if(field.value.length==0)
	{

	alert(message);
	field.focus();
	return false;

	}
return true;

}
//-->
</script>
<!-- END JAVA SCRIPT-->

and <forms>

<form action="email.php" method="post" onsubmit="return validation(document.getElementById('commentsid'),'Enter a value')">



<div class="hidden" id="comment">
<p>Comments and suggestions:<br><textarea name="comments" id="commentsid" rows="3" cols="30"></textarea><br><br>

<input type="submit" value="Send"></p>
</div> <!-- end of comment_box-->

<p><input type="button" value="Comment" class="comment_button" onclick="showCommentBox(this)"><br></p>
</form>

I also attached my CSS in case you want to take a look at it, but it is pretty similar to the live one:

*
{
margin:0;
padding:0;
}


h1
{
text-align:left;
font-size: 1.7em;
font-family: Arial, Verdana, sans-serif;
}

 
#banner
{
background:#81A594 url(typewriter.jpg);
background-repeat:no-repeat;
background-position:right;
height:120px;
padding:10px 50px 0 200px;
 
}

/* THIS IS THE MAIN DIV CONTAINING THE LEFT HAND NAVIGATION AND THE TEXT */

#wrapper
{
width:1024px;
margin:0 auto;

}


/*THIS IS FOR THE LEFT HAND SIDE NAVIGATION */

#navigation
{
width:200px;
float:left;
/*background-color:red;*/


}

#navigation h2
{
margin: 0 auto;
}
 
#navigation ul /* for the navigation, foreground is a2c1b2 and bg is f5d9d7*/
{

list-style:none;
padding:0;
border:0;
margin:0;


}
 
#navigation ul li
{

background: #f4d8c7 url("box.jpg") repeat-x scroll center bottom;
 
width: 11em;
display: block;
text-decoration: none;
text-align: center;
font-family: Arial, Verdana, sans-serif;
padding:10px 0 10px 0;



}


/*THIS IS THE TOP NAVIGATION */
 
#topnav ul
{
list-style: none;

margin-left:1em; /*to have some space on the left of the top navigation, but it is rendered differently in IE and firefox */
padding-left:0; /*the above problem is resolved adding the padding. Firefox and chrome seem to add some extra padding on their own */ 
}
 
#topnav li
{
float: left;
margin:1em 1.3em 0 0; /*bottom margin is because I want some space between the top navigation and the horizontal line but it is rendered differently in IE and firefox */

font-family: Arial, Verdana, sans-serif;

}
body
{
background-color:#E6E6DC; 
}
 
/* Horizontal line */
 
#horizontal_line

{
clear:both;
color:#81a594;
background-color:#81a594;
height:0.35em;
width:100%;
float:left;
margin-top:0.35em;
margin-bottom:1em;
border-style:none; /*Firefox seems to have a little border, so I removed it altogether */
}

#text_navigation

{
margin-right:15px;
margin-left:15px;
/*background-color:yellow;*/
margin-top:10px;
}

div.bullet_list
{
/*margin-left:200px;  to distantiate it from the left navigation, or a more elegant solution is the position relative below */
/*background-color:orange; */
position:relative;
left:50px;
/* width:800px; have to remove this otherwise the bullets are not displayed in IE7...*/
}


/*a:hover { text-decoration: underline; color: #ff0000; }*/

/*_______________________________________________________________*/

/*BOXES*/

/*_______________________________________________________________*/

/* Border around heading examples in the headings.htm page*/
.box 
{
border-style:solid;
border-width:1px;
width:350px;
margin: 0 auto;
background-color:#d4d4cb;

}

/*BOX AROUND THE COMMENT AND FEEDBACK*/

.comment_box
{

border-style:solid;
border-width:1px;
float:left;
background-color:#d4d4cb;
width:280px;
padding-left:20px;
padding-top:25px;
padding-bottom:10px;

}

/* make the box invisible*/
.hidden
{
	
	display: none;

}

/* box visible again in the Java script */
div.visible
{

	display: block;

}

/*hiding the comment box*/
p.comment_button
{
display:none;
}



/*________________________________________________________________________________ */

/* HOVERING PROPERTIES*/
/*________________________________________________________________________________ */

/* THIS IS TO MAKE SURE THAT THE LINKS IN THE TEXT CHANGE TO RED WHEN HOVERED ON*/

#text_navigation a:hover
{

color: #ff0000;

}

/*----------------------------------------------------------*/
/*TOP NAVIGATION */

#topnav a
{
text-decoration: none;
}

#topnav a:hover
{
text-decoration:underline; 
color: #ff0000;

}


/*----------------------------------------------------------*/

/* THIS IS TO MAKE SURE THAT THE LINK TEXT IN THE LEFT NAVIGATION IS NOT UNDERLINED*/
#navigation a
{
text-decoration: none;
}

/* THIS IS TO MAKE SURE THAT THE LINK TEXT IN THE LEFT NAVIGATION IS UNDERLINED AND CHANGE COLOUR WHEN HOVERED ON*/
#navigation a:hover
{
text-decoration:underline; 
color: #ff0000;

}

thanks for your help

thanks

I'm not sure if this is the only problem, but you need semicolons after your javascript code for each line:

buttonObject.className = "hidden" // now hide the button
window.scrollBy(0,150)

should be:

buttonObject.className = "hidden"; // now hide the button
window.scrollBy(0,150);

@SolidSolutions
The semicolon doesn't affect the code unless you want to compact the code (delete all comments & new line characters) in order to reduce the file size. As long as a new line presents, JavaScript interpreter knows that the command ends there. If the file is compact, the semicolon will be used as delimeter instead.

@Violet_82
The 'this' is a keyword as you said. It is used in JavaScript to pass in the current HTML element on the page to a JavaScript function. If you use the keyword 'this' inside an element, it will act as if it passes the element DOM pointer to the function. Now, the argument in the function will be the object of the element.

The code portion below may clarify it a bit, I hope. :)

// for example
<script type="text/javascript">
function alertElementName(element) {
  alert(element.getAttribute("name"))
}
</script>

// HTML part
<!-- notice that the this does not have quotation around it -->
<form name="aFormName" onsubmit="alertElementName(this); return false">
  <input type="text" name="inputText1" onchange="alertElementName(this)">
  <br/>
  <input type="button" name="TestName" onclick="alertElementName(this)">
  <br/>
  <input type="submit" value="Submit Form" onclick="alertElementName(this)">
</form>

Now, you mean that the given website is what you are dealing with? I am not sure why you need window.scrollBy() for it. Anyway, it seems to display correctly from my FF browser. What doesn't work you mean by? What browser are you using? If you use FF, you could check the Java Error Console to see what actually is not working.

For this page:
http://www.antobbo.webspace.virginmedia.com/webediting/headings.htm

Add an ID for your button:

<input type="button" id="commentButton" value="Comment" onclick="showCommentBox()">

Your showCommentBox function:

function showCommentBox()
{

var feedback_box = document.getElementById('comment');

document.getElementById('commentButton').style.display = "none";
feedback_box.className='visible' ;
feedback_box.className='comment_box';

window.scrollBy(0,150);

}

@Taywin
Thanks yes it is a bit clearer thanks. Yes the website mentioned http://www.antobbo.webspace.virginmedia.com/webediting/documents.htm is the one I am working on. At the moment, the "documents" page - I mean the live one - is working fine (and it has the window.scrollBy() function in it) but what I am testing (the CSS and Java script code for the "documents" page - the one that's not online and which I posted in this thread) as said it is being a bit funny. The idea is to get the test page right and then copy the code over onto the live website
If easier I can set up a test area and set it live rather than copying and pasting code which might be confusing, sorry for that. That done, I will post the link here with the issues I am experiencing after applying the suggestions in

Correct. You have the 'display:none' property in your style. An element will be effected by all properties in classes you add.

I will do that after work.
Thanks for your help

@SolidSolution
The code on the http://www.antobbo.webspace.virginmedia.com/webediting/headings.htm page is different because I was thinking to get the code right for the http://www.antobbo.webspace.virginmedia.com/webediting/documents.htm page first and then paste it into the rest of the website

seems to me that page is in need of the same thing I mentioned:

give your button an id (id='commentButton') and then in the function hide it with:
document.getElementById('commentButton').style.display = "none";

@SolidSolution
apologies I think I misread your reply. I tried your suggestion and it works well, the "comment" button is now gone, thanks for your help, here's the link http://www.antobbo.webspace.virginmedia.com/webediting/documents.htm


@Taywin
as promised I created a test site, so I can work on that http://www.antobbo.webspace.virginmedia.com/webediting/testing/documents.htm
What I was trying to say in my last post was that I applied the suggestions you gave me but in the java script if I do

...
<script type="text/javascript">
<!--

function showCommentBox(buttonObject)
{

var feedback_box = document.getElementById('comment');


feedback_box.className = "";

buttonObject.className = "hidden" // now hide the button


}
...

then the box doesn't pick up the comment_box style anymore (compare the comment box in the test site and in the real one.) Even if I add an explicit call like

feedback_box.className = "comment_box";

it doesn't work, so I was wondering what

feedback_box.className = "";

does: why do we have empty quotes?
thanks

I haven't read to understand this whole post so I'm not sure where you are at (what you are needing) at this point.

It seems like you have it working the way you want here:
http://www.antobbo.webspace.virginmedia.com/webediting/documents.htm

Can you just apply that to:
http://www.antobbo.webspace.virginmedia.com/webediting/testing/documents.htm

If you can fill me in on where you are at and what you need done, I'll try to help too...unless you can just apply the one to the other as it seems.

@Violet_82
Oh I see. I am sorry for that. The line feedback_box.className = ""; is to remove ALL CSS classes of that element, and that is actually not correct. What you want is its display. If you keep the code I gave you (with the this keyword passing to the function), you may change it as followed instead...

// replace the 'hidden' class to 'visible comment_box'
feedback_box.className = feedback_box.className.replace(/hidden/, "visible comment_box")
// add the 'hidden' class to the button
buttonObject.className = buttonObject.className + " hidden"

@Taywin
no need to be sorry that's fine, I just wanted to understand the code : -). I suppose I can leave it as it is because it is working now and it is validating the code too. Thanks for all your help, much appreciated

@SolidSolutions
I know it's been a long thread! I think it is all sorted now, the box on http://www.antobbo.webspace.virginmedia.com/webediting/documents.htm works the way it should so I will copy the code over the rest of the pages (that's basically what we've tried to do in this thread : -) )
Thanks for all your help too, much appreciated

i'd just use a javascript submit

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.