HTML/XHTML Problems

s20001321 · #1 (**permalink**) 05-04-09, 04:41 AM

I am a newbie in HTML/XHTML…I have met some problems when performing the specific tasks…

1 –
…

Code:

<script type = "text/javascript">

function EmailCheck()
    {
        var mail =  document.getElementById("email").value;
        var pattern = /([0-9a-zA-Z_-]+)@([0-9a-zA-Z_-]+)\.([0-9a-zA-Z_-]+)/;
        if (!pattern.test(mail)) 
        {
            alert("Invalid Email Address");
        }
        else
        {
            alert("valid Email Address");
        }
    }
</script>

…

HTML Code:

<form  method="get" action="h ttp://xxxxxx.php">
<table border="1" cellspacing="0" cellpadding="2">
    <tr> 
      <th colspan="2">Newsletter Signup</th>
   </tr>
    <tr> 
      <td>Email</td>
      <td><input id="Email" type="text" /><input type="button" value="Check" /></td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>Please send me newsletter<input id="monthly" type="checkbox" /></td>
    </tr>
    <tr> 
      <td>&nbsp;</td>
      <td><input type="submit" id="Send" value="Send" /></td>
    </tr>
  </table>
</form>

How to validate the E-mail address and send the email address to "h ttp://xxxxxx.php" at the same time by using “get” method when click the “Send” button?? Also, how to “Stop” action when the e-mail address is incorrect?

2 –
…

HTML Code:

<form id="feedback" method="post" action="h ttp://xxxxxx.php">
<table border="1" cellspacing="0" cellpadding="2">
    <tr> 
      <th colspan="2">Feedback Form</th>
    </tr>
    <tr> 
      <td>Name</td>
      <td><input id="name" type="text" /></td>
    </tr>
    <tr> 
      <td>Email</td>
      <td><input id="Email" type="text" /></td>
    </tr>
    <tr> 
      <td>Subject</td>
      <td><input id="Subject" type="text" /></td>
    </tr>
    <tr> 
      <td>Comments</td>
      <td><textarea id="textarea" cols="30" rows="10"></textarea></td>
    </tr>
    <tr> 
      <td>&nbsp;</td>
      <td><input type="submit" id="Send" value="Send" /></td>
    </tr>
  </table>
</form>

How to use JavaScript to validate all of the above fields including verifying the email address? Also, how to use “Post” method to send the information to "h ttp://xxxxxx.php" ??

3 –
…

HTML Code:

  <table border="2" cellspacing="3" cellpadding="4">
    <tr> 
      <th colspan="10">aaa</th>
    </tr>
    <tr> 
      <td><a href="xxx.htm"><img src="yyy.jpg" alt="zzz" /></a></td>

…

For this part, it needs to read the data from .txt file and is separated by “,”…and then display the content in the .htm...How to do it???

These are the few lines in .txt:
itemname,Price,size,in stock,colour

[Bedroom]
single bed,$160,single,yes,wood
double bed,$300,double,yes,wood
…

Million thanksss…

job0107 · #2 (**permalink**) 05-04-09, 08:19 AM

In the first example you need to add the onsubmit event listener to the form element and the onclick event listener to the Check button.

Javascript Code:

<script type = "text/javascript">
var email_ok = 0;
function EmailCheck()
{
var mail = document.getElementById("email").value;
var pattern = /([0-9a-zA-Z_-]+)@([0-9a-zA-Z_-]+)\.([0-9a-zA-Z_-]+)/;
if (!pattern.test(mail))
{
alert("Invalid Email Address");
}
else
{
email_ok = 1;
alert("valid Email Address");
}
}
function sendForm()
{
 if(email_ok == 0){alert("You did not validate the email address");return false;}
 if(document.getElementById("monthly").checked == false)
 {
  var con = confirm("Do you want to subscribe to our news letter.");
  if(con == true){document.getElementById("monthly").checked = true;}
  }
 return true;
 }
</script>
<form method="get" action="http://xxxxxx.php" onsubmit="return sendForm()">
<table border="1" cellspacing="0" cellpadding="2">
<tr>
<th colspan="2">Newsletter Signup</th>
</tr>
<tr>
<td>Email</td>
<td><input id="Email" type="text" /><input type="button" value="Check" onclick="EmailCheck()"/></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>Please send me newsletter<input id="monthly" type="checkbox" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" id="Send" value="Send" /></td>
</tr>
</table>
</form>

This is a simple way to do the second example.

Javascript Code:

<script type = "text/javascript">
function validateForm()
{
 var name = document.getElementById("name");
 var emailCheck = EmailCheck();
 var subject = document.getElementById("Subject");
 var ta = document.getElementById("textarea");
 if(name.value == ""){alert("You must enter your name.");return false;}
 if(emailCheck == 0){alert("You did not enter a valid email.");return false;}
 if(subject.value == ""){alert("You did not enter a subject.");return false;}
 if(ta.value == ""){alert("You did not enter any comments.");return false;}
 return true;
 }
 
function EmailCheck()
{
var mail = document.getElementById("Email").value;
var pattern = /([0-9a-zA-Z_-]+)@([0-9a-zA-Z_-]+)\.([0-9a-zA-Z_-]+)/;
if (!pattern.test(mail))
{
return 0;
}
else
{
return 1;
}
}
</script>
<form id="feedback" method="post" action="h ttp://xxxxxx.php" onsubmit="return validateForm();">
<table border="1" cellspacing="0" cellpadding="2">
<tr>
<th colspan="2">Feedback Form</th>
</tr>
<tr>
<td>Name</td>
<td><input id="name" type="text" /></td>
</tr>
<tr>
<td>Email</td>
<td><input id="Email" type="text" /></td>
</tr>
<tr>
<td>Subject</td>
<td><input id="Subject" type="text" /></td>
</tr>
<tr>
<td>Comments</td>
<td><textarea id="textarea" cols="30" rows="10"></textarea></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" id="Send" value="Send" /></td>
</tr>
</table>
</form>

For your third question, I have never worked with the FileSystemObject, I always use PHP to perform those tasks.
But you can read on it here:
http://www.java2s.com/Tutorial/JavaS...stemObject.htm

s20001321 · #3 (**permalink**) 05-04-09, 08:47 PM

Thank very much for your solutions...
and both of them are helpful for me!!

But there has a problem in Part1...
I can't go to the correct pages when sumbit the form@@...
Are there any mistakes in my code?

Code:

function EmailCheck()
{
var mail = document.getElementById("Email").value;
var pattern = /([0-9a-zA-Z_-]+)@([0-9a-zA-Z_-]+)\.([0-9a-zA-Z_-]+)/;
if (!pattern.test(mail)){
	return 0;
}
else{
	return 1;
}
}

function sendForm()
{
var emailCheck = EmailCheck(); 
if(emailCheck == 0){
	alert("You did not validate the email address");
	return false;
}
if(document.getElementById("monthly").checked == false) { 
var con = confirm("Do you want to subscribe to our news letter.");
if(con == true)
{document.getElementById("monthly").checked = true;}
}
return true; 
}
</script>
…
<h2 id="signup">Why not sign up for our newsletter and receive the latest furniture news!</h2>
<form id="newsletter" method="get" action="h ttp://mercury.it.swin.edu.au/wd000000/signup.php" onsubmit="return sendForm()" >
<table border="1" cellspacing="0" cellpadding="2">
    <tr> 
      <th colspan="2">Newsletter Signup</th>
   </tr>
    <tr> 
      <td>Email</td>
      <td><input name="Email" type="text" /></td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>Please send me the monthly newsletter<input name="monthly" type="checkbox" /></td>
    </tr>
    <tr> 
      <td>&nbsp;</td>
      <td><input type="submit" name="Send" value="Send" /></td>
    </tr>
  </table>
</form>
…

job0107 · #4 (**permalink**) 05-05-09, 05:37 AM

I see two problems.

First, the action value in the form element isn't spelled right.
You have a space in the "http" part. (ie: h ttp)

And second, you are referencing the input elements by id, but you didn't give them any id's.

I also noticed that in my code I gave the input elements ids but not names.
You will need both to get your code working.

Javascript Code:

<html>
<head>
<script>
function EmailCheck()
{
 var mail = document.getElementById("Email").value;
 var pattern = /([0-9a-zA-Z_-]+)@([0-9a-zA-Z_-]+)\.([0-9a-zA-Z_-]+)/;
 if(!pattern.test(mail)){return 0;}
 else{return 1;}
 }
 
function sendForm()
{
 var emailCheck = EmailCheck();
 if(emailCheck == 0)
 {
  alert("You did not validate the email address");
  return false;
  }
 if(document.getElementById("monthly").checked == false)
 {
  var con = confirm("Do you want to subscribe to our news letter.");
  if(con == true){document.getElementById("monthly").checked = true;}
  }
 return true;
 }
</script>
<body>
…
 <h2 id="signup">Why not sign up for our newsletter and receive the latest furniture news!</h2>
 <form id="newsletter" method="get" action="http://mercury.it.swin.edu.au/wd000000/signup.php" onsubmit="return sendForm();" >
  <table border="1" cellspacing="0" cellpadding="2">
   <tr>
    <th colspan="2">Newsletter Signup</th>
   </tr>
   <tr>
    <td>Email</td>
    <td><input id="Email" name="Email" type="text" /></td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td>Please send me the monthly newsletter<input id="monthly" name="monthly" type="checkbox" /></td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td><input type="submit" name="Send" value="Send" /></td>
   </tr>
  </table>
 </form>
…
</body>
</html>

Nico · #5 (**permalink**) 05-05-09, 05:40 AM

Quote:

Originally Posted by job0107

I see two problems.

First, the action value in the form element isn't spelled right.
You have a space in the "http" part. (ie: h ttp)

I'm guessing he did that on purpose, as his account hasn't met the requirements to post links yet.

s20001321 · #6 (**permalink**) 05-05-09, 08:18 PM

Yes..I can't post the full link since I am a newbie here>.<
However..the problem is still the same which cannot pass the e-mail address to that specific link...
Here is my full coding..Is there any problem again(except the links)?

P.S. I am using XHTML1.0 Strict (it is a must...)

function EmailCheck()
{
var mail = document.getElementById("Email").value;
var pattern = /([0-9a-zA-Z_-]+)@([0-9a-zA-Z_-]+)\.([0-9a-zA-Z_-]+)/;
if (!pattern.test(mail)){
return 0;
}
else{
return 1;
}
}

function sendForm()
{
var emailCheck = EmailCheck();
if(emailCheck == 0){
alert("You did not validate the email address");
return false;
}
if(document.getElementById("monthly").checked == false) {
var con = confirm("Do you want to subscribe to our news letter.");
if(con == true)
{document.getElementById("monthly").checked = true;}
}
return true;
}
</script>
</head>

<body>

<h2 id="signup">Why not sign up for our newsletter and receive the latest furniture news!</h2>
<form id="newsletter" method="get" action="h ttp://mercury.it.swin.edu.au/wd000000/signup.php" onsubmit="return sendForm()" >
<table border="1" cellspacing="0" cellpadding="2">
<tr>
<th colspan="2">Newsletter Signup</th>
</tr>
<tr>
<td>Email</td>
<td><input id="Email" name="Email" type="text" /></td>
</tr>
<tr>
<td> </td>
<td>Please send me the monthly newsletter<input id="monthly" name="monthly" type="checkbox" /></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Send" value="Send" /></td>
</tr>
</table>
</form>

</body>
</html>

job0107 · #7 (**permalink**) 05-05-09, 11:10 PM

This link should work:

HTML Code:

<a href="http://mercury.it.swin.edu.au/wd000000/signup.php?Email=myEmail@myMailBox.com&monthly=true&Send=Send">send</a>

And if it doesn't then there is something else wrong.

And this code should work also:

Javasecipt Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><script>function EmailCheck(){ var mail = document.getElementById("Email").value; var pattern = /([0-9a-zA-Z_-]+)@([0-9a-zA-Z_-]+)\.([0-9a-zA-Z_-]+)/; return pattern.test(mail)?mail:0; }function sendForm(){ var emailCheck = EmailCheck(); if(emailCheck == 0) {  alert("You did not validate the email address");  return false;  } if(document.getElementById("monthly").checked == false) {  var con = confirm("Do you want to subscribe to our news letter.");  if(con == true){document.getElementById("monthly").checked = true;}  } var url = "http://mercury.it.swin.edu.au/wd000000/signup.php"; var mtly = document.getElementById("monthly").checked == true ? 1 : 0; var url_temp = url + "?Email=" + emailCheck + "&monthly=" + mtly + "&Send=Send"; location.href = url_temp; }</script><style>#a1{ text-decoration:none; color:#222; border-left:2px solid #edf; border-top:2px solid #edf; border-right:2px solid #957299; border-bottom:2px solid #957299; padding-left:5px; padding-right:7px; width:50px; height:25px; margin-right:5px; background:#f0efff; }</style><body>… <h2 id="signup">Why not sign up for our newsletter and receive the latest furniture news!</h2>  <table border="1" cellspacing="0" cellpadding="2">   <tr>    <th colspan="2">Newsletter Signup</th>   </tr>   <tr>    <td>Email</td>    <td><input id="Email" type="text" /></td>   </tr>   <tr>    <td>&nbsp;</td>    <td>Please send me the monthly newsletter<input id="monthly" type="checkbox" /></td>   </tr>   <tr>    <td>&nbsp;</td>    <td><button onclick="return sendForm();">Send</a></td>   </tr>  </table> </form>…</body></html>

s20001321 · #8 (**permalink**) 05-06-09, 01:07 AM

I can see
"Missing email address?
Did you send using the GET method?"
when I click the "Send button"...
What message did you see@@?

job0107 · #9 (**permalink**) 05-06-09, 09:49 PM

Quote:

Originally Posted by s20001321

I can see
"Missing email address?
Did you send using the GET method?"
when I click the "Send button"...
What message did you see@@?

Yes, that is the error I get.
But I think I have found the problem.
The name of the email input element is "Email" when it should be "email".

Originally you gave an id="Email" but you didn't assign a name property.
So I assumed the name was also "Email".
I guess you didn't read your assignment very well.
And sense you didn't read the assignment then you didn't catch that error.

I have tried this script and it works fine every time.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type = "text/javascript">
function sendForm()
{
 var pattern = /([0-9a-zA-Z_-]+)@([0-9a-zA-Z_-]+)\.([0-9a-zA-Z_-]+)/;
 if(!pattern.test(document.getElementById("email").value)){alert("You did not validate the email address");return false;}
 if(document.getElementById("monthly").checked == false){if(confirm("Do you want to subscribe to our news letter.")){document.getElementById("monthly").checked = true;}}
 return true;
 }
</script>
</head>
<body>
<form method="get" action="http://mercury.it.swin.edu.au/wd000000/signup.php" onsubmit="return sendForm()">
<table border="1" cellspacing="0" cellpadding="2">
<tr>
<th colspan="2">Newsletter Signup</th>
</tr>
<tr>
<td>Email</td>
<td><input id="email" name="email" type="text" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>Please send me newsletter<input id="monthly" name="monthly" type="checkbox" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" iname="Send" value="Send" /></td>
</tr>
</table>
</form>
</body>
</html>

s20001321 · #10 (**permalink**) 05-07-09, 02:50 AM

Quote:

Originally Posted by job0107

Yes, that is the error I get.
But I think I have found the problem.
The name of the email input element is "Email" when it should be "email".

Originally you gave an id="Email" but you didn't assign a name property.
So I assumed the name was also "Email".
I guess you didn't read your assignment very well.
And sense you didn't read the assignment then you didn't catch that error.

I have tried this script and it works fine every time.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type = "text/javascript">
function sendForm()
{
 var pattern = /([0-9a-zA-Z_-]+)@([0-9a-zA-Z_-]+)\.([0-9a-zA-Z_-]+)/;
 if(!pattern.test(document.getElementById("email").value)){alert("You did not validate the email address");return false;}
 if(document.getElementById("monthly").checked == false){if(confirm("Do you want to subscribe to our news letter.")){document.getElementById("monthly").checked = true;}}
 return true;
 }
</script>
</head>
<body>
<form method="get" action="http://mercury.it.swin.edu.au/wd000000/signup.php" onsubmit="return sendForm()">
<table border="1" cellspacing="0" cellpadding="2">
<tr>
<th colspan="2">Newsletter Signup</th>
</tr>
<tr>
<td>Email</td>
<td><input id="email" name="email" type="text" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>Please send me newsletter<input id="monthly" name="monthly" type="checkbox" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" iname="Send" value="Send" /></td>
</tr>
</table>
</form>
</body>
</html>

Thank you very mcuh!!!!!!
Part 1 & 2 are OK now~
You are very helpful for me...^^

For part 3...
I think I need to ask the lecturer again because I and some of the net friends cannot get the meaning from the requirement...However, do you understand the meaning of the below requirement for part 3@@?

This is a single “prototype” catalogue page that contains a table (or tables) of all the product items
from one of the categories on offer. (In the second assignment, the content will be generated using
database information and server-side programming allowing all of the categories to be included!)
• For each product item show the thumbnail image and basic details: item name and cost.
o The file details.txt has all the details available. The details are separated by commas.
Hint: It may be worth “importing” and then “exporting” the text file with Excel, but make sure you
clean up the resulting HTML!
• There are many products available, but you only need to show the products for your chosen
category.
• If the visitor clicks on an image we would want to show them more details,
o This is just a prototype site and we don’t have all the images and details yet.
o Make all of the items (the text and/or images) as link to the “details_1.shtml” prototype
page. i.e. no matter which category the user selects the same product will show.
(Assignment 2 will extend this so that the selected product will show)
• You can use a table to present the catalogue data (+CSS), but you must use <th> (heading)
elements for heading cells, and provide a suitable caption and summary for the table