LebGeeks

A community for technology geeks in Lebanon.

You are not logged in.

#1 June 15 2012

eddyfarj
Member

Need it to appear in a container on the same page

Write a solution to display news that are entered by the user in a form. The solution must ask the user to enter the title, author, email, date and description. Once entered, the data is validated. If valid, the data is added into a container, within the same page, displaying the news so far.

To enter the data, the solution must validate the following:

    all fields are not empty
    the email address must have an @ symbol in it

If all data is valid, the news content must be added into the container as follows:

This is where title appears
Author: John Doe
Date: June 11, 2012

Lorem ipsum dolor sit amet convoi bristo barley ipsum dolor sit amet convoi bristo barley ipsum dolor sit amet convoi bristo barley ipsum dolor sit amet convoi bristo barley ipsum dolor sit amet convoi bristo barley ipsum dolor sit amet convoi bristo barley.

This is where another title appears
Author: John Smith
Date: June 9, 2012

Lorem ipsum dolor sit amet convoi bristo barley ipsum dolor sit amet convoi bristo barley ipsum dolor sit amet convoi bristo barley ipsum dolor sit amet convoi bristo barley ipsum dolor sit amet convoi bristo barley ipsum dolor sit amet convoi bristo barley.

Guidelines:

    Clicking on the author name will open the default email client to send an email message to the author's email address.

I CAN'T FIGURE OUT HOW THE DATA CAN BE SHOWN ON THE SAME PAGE IN A CONTAINER WHEN SUBMIT OR VALIDATE IS CLICKED.

CAN YOU PLEASE HELP?

Offline

#2 June 15 2012

Joe
Member

Re: Need it to appear in a container on the same page

eddyfarj, you need to:

- <edited out />
- review the formatting of your post. You simply copy/pasted your problem and thought that asking your questions in all caps would be enough. That's incredibly disrespectful and a serious breach of the Netiquette.
- read this post first. We will not solve your homework for you.
- show that you tried something. Show us some code you've written.


Only then will you get help from the LebGeeks community.

Offline

#3 June 15 2012

eddyfarj
Member

Re: Need it to appear in a container on the same page

<html>
<body >
<form action="/examples/jsp/proces.jsp" method=post>
<center>
<table cellpadding=2 cellspacing=1 border="1" bgcolor="lightblue">
<th bgcolor="lightblue" colspan=2>
<font size=5>User Registration</font>
<br>
<font size=2 color="red"><sup>*</sup> Required Fields</font>
</th>
<tr bgcolor="lightblue">
<td valign=top> 
<b>First Name<sup>*</sup></b> 
<br>
<input type="text" name="firstName" value="" size=20 maxlength=20></td>
<td valign=top>
<b>Last Name<sup>*</sup></b>
<br>
<input type="text" name="lastName" value="" size=15 maxlength=20></td>
</tr>
<tr bgcolor="lightblue">
<td valign=top>
<b>E-Mail<sup>*</sup></b> 
<br>
<input type="text" name="email" value="" size=25 maxlength=125>
<br></td>
<td valign=top>
<b>Zip Code<sup>*</sup></b> 
<br>
<input type="text" name="zip" value="" size=10 maxlength=8></td>
</tr>
<tr bgcolor="lightblue">
<td valign=top colspan=2>
<b>User Name<sup>*</sup></b>
<br>
<input type="text" name="userName" size=20 value="" maxlength=10>
</td>
</tr>
<tr bgcolor="lightblue">
<td valign=top>
<b>Password<sup>*</sup></b> 
<br>
<input type="password" name="password1" size=10 value="" maxlength=10></td>
<td valign=top>
<b>Confirm Password<sup>*</sup></b>
<br>
<input type="password" name="password2" size=10 value="" maxlength=10></td>
<br>
</tr>
<tr bgcolor="lightblue">
<td valign=top colspan=2>
<b>What Technology are you interested in?</b>
<br>
<input type="checkbox" name="faveTech" value="Java">Java 
<input type="checkbox" name="faveTech" value="JSP">JSP 
<input type="checkbox" name="faveTech" value="Struts 1.1">Struts 1.1<br>
<input type="checkbox" name="faveTech" value="Ajax">Ajax 
<input type="checkbox" name="faveTech" value="Struts 2.0 ">Struts 2.0 
<input type="checkbox" name="faveTech" value="Servlets">Servlets<br>
</td>
</tr>
<tr bgcolor="lightblue">
<td valign=top colspan=2>
<b>Would you like to receive e-mail notifications on our special 
sales?</b>
<br>
<input type="radio" name="notify" value="Yes" checked>Yes 

<input type="radio" name="notify" value="No" > No 
<br><br></td>
</tr>
<tr bgcolor="lightblue">
<td align=center colspan=2>
<input type="submit" value="Submit"> <input type="reset"  value="Reset">
</td>
</tr>
</table>
</center>
</form>
</body>
</html>

Offline

#4 June 15 2012

samer
Admin

Re: Need it to appear in a container on the same page

This looks like homework. Your lecture should talk about the DOM and how to interact with it using JavaScript. Start there.

Offline

#5 June 15 2012

rolf
Member

Re: Need it to appear in a container on the same page

You might want to look into jQuery

Offline

#6 June 15 2012

m0ei
Member

Re: Need it to appear in a container on the same page

Oh God, please do yourself and the others a favor and indent next time!

Offline

#7 June 15 2012

MrClass
Member

Re: Need it to appear in a container on the same page

rolf wrote:

You might want to look into jQuery

Amen to that. JQuery can pull that off easily. Though your question is so vague; no one will present a clear answer. How will you store the news? What kind of server side scripting / database are you using?

Plus if you don't indent as m0ei said, we'll smack you in the face, period.

Offline

#8 June 15 2012

xterm
Moderator

Re: Need it to appear in a container on the same page

Problems with your question/post

1- It's clearly a homework.
2- Your code is not indented, no one will read it.
3- You've made no effort in explaining what you're doing in the code
4- You have not specified whether the form should post to the server or whether there's no server interaction whatsoever.

-

Despite the above, I'll comment on #4. Pick one of the following two and build upon it.

Client Side

1- Use standard DOM through javascript.
2- Use JQuery to make your life easier.
3- Your Container ought to be a Div.
4- Hook up your button(s) to a javascript function or use jquery events.
5- Upon the button action, fetch the data within the form through their respective IDs and validate them
6- If validated (YOU validate them), append the content of the container (mentioned in #3) with the respective template you'd build (which by the looks of it could be a simple <p>

Server Side

1- Fetch the data posted to your (assumed) jsp page.
2- Validate
3- Either store them in the database or store them in the session.
4- Within your single page, have a loop block that iterates over the resultset of the database or the session variable you're using. Again this could be a simple <p>

Pseudo that you can refer to

<% for(entry in collection) { %>
  <p>
    Author: <%= entry.getAuthorName()  %>
    <!-- etc... -->
  </p>
<% } %>

P.S.: You can take it further in the Client Side example by using JQuery templating, but this is beyond the scope of your homework

Offline

Board footer