I need help implementing a MySQL database into Netbeans.
Basically, I've got two databases - one called Words, with 5,014 different words in and one called definitions with all the words definitions in.
I have implemented the Words database into a drop down list in NetBeans so that it presents all 5,014 words but I'm stumped as how to implement the other database so that when the user clicks, say for example, "Abandon" and the Submit button the resulting definition page will only display the definition for Abandon, which I have in the Definition database.
Here's my code for the opening page:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Online English Dictionary</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 align="center">Hello and welcome to my Online English Dictionary</h1>
<table align="center">
<thead>
<tr>
<th>This Online English Dictionary uses a 5,000 word list
compiled by Professor Mark Davies of Brigham Young University
in Provo, Utah.</th>
</tr>
</thead>
<tbody>
<tr>
<td>To view a definition of a particular word, please select
from the list below.</td>
</tr>
<tr>
<td>
<form action="submit.jsp">
<strong>Select a word:</strong>
<select name="word_id">
<c:forEach var="row" items="${words.rowsByIndex}">
<option><c:out value="${row[1]}"/></option>
</c:forEach>
</select>
<input type="submit" value="submit" name="submit" />
</form>
</td>
</tr>
</tbody>
</table>
</body>
While this is the code to create my Definition database:
DROP TABLE IF EXISTS Definition;
CREATE TABLE Definition (
definition_id SMALLINT,
definition VARCHAR (2500),
word_id VARCHAR (17),
PRIMARY KEY (definition_id),
FOREIGN KEY (word_id) REFERENCES Words(word_id)
);
INSERT INTO Definition (definition)
VALUES ('1. The first letter of the modern English alphabet.
2. Any of the speech sounds represented by the letter a.
3. The first in a series.
4. Something shaped like the letter A.
5. A The best or highest in quality or rank: grade A milk.
6. Music
a. The sixth tone in the scale of C major or the first tone in the relative minor scale.
b. A key or scale in which A is the tonic.
c. A written or printed note representing this tone.
d. A string, key, or pipe tuned to the pitch of this tone.
7. A One of the four major blood groups in the ABO system. Individuals with this blood group have the A antigen on the surface of their red blood cells, and the anti-B antibody in their blood serum.'),
('vb (tr)
1. to forsake completely; desert; leave behind: to abandon a baby; drivers had to abandon their cars.
2. (Nautical Terms) abandon ship the order given to the crew of a ship that is about to sink to take to the lifeboats
3. to give up completely: to abandon a habit; to abandon hope.
4. to yield control of or concern in; relinquish: to abandon office.
5. to give up (something begun) before completion: to abandon a job; the game was abandoned.
6. to surrender (oneself) to emotion without restraint
7. (Insurance) to give (insured property that has suffered partial loss or damage) to the insurers in order that a claim for a total loss may be made
n
8. freedom from inhibitions, restraint, concern, or worry: she danced with abandon.');
If anyone can help it would be great!
Thanks,
James
Well you would need to set that to the session and then in submit.jsp read this value and then fire another query.
That being said, I would like to recommend not to use jstl tags for SQL queries and use an MVC model instead where this can be easily taken care of.
Setting up the values in the controller and returning to the jsp.
onChange of the dropdown - fire an ajax request to get the details.
Show the details then and there in a separate div without navigating to other pages.
If you would still like to continue with jstl here is a great tutorial if you have some time.
For MVC with JSP, you can check out couple of tutorial links : here and here.
HTH.
Related
I'm a newbie to the CheckMarx and preventing XSS attacks. I've got this error:
Method %> at line 1 of \app\src\web\searchresults.jsp gets user input for the getSearchResults element. This element’s value then flows through the code without being properly sanitized or validated and is eventually displayed to the user in method %> at line 1 of \app\src\web\searchresults.jsp. This may enable a Cross-Site-Scripting attack.
This is the line that it complaining about in the code snip below:
<c:forEach var="combo" items="${searchForm.searchResults}">
Code snip from a searchresults.jsp (code modified to protect the innocent)
<% int i = 0;%>
<c:forEach var="combo" items="${searchForm.searchResults}">
<tr <%=i++%2==0?"":"class='odd'"%>>
<td align="center" style="width: 40px;"><c:out value="${combo.stay.status}"/></td>
<c:choose>
<c:when test="${hasDetailAccess}">
<c:url var="detailLink" value="/detail.do">
<c:param name="code" value="${searchForm.code}"/>
<c:param name="brandCode" value="${searchForm.brandCode}"/>
<c:param name="smUni" value="${combo.object1.smUni}"/>
<c:param name="shUni" value="${combo.object1.shUni}"/>
<c:param name="searchType" value="${searchForm.searchType}"/>
</c:choose>
<td style="width: 80px;"><fmt:formatDate pattern="MMM dd yyyy" value="${combo.object1.dateMade.date}"/></td>
<td style="width: 80px;"><c:out value="${combo.object1.lastName}"/></td>
<td style="width: 80px;"><c:out value="${combo.object1.firstName}"/></td>
</c:forEach>
The part that I'm not for sure of how to fix is that the "searchForm.searchResults" is an queueCombo that can refer to multiple objects, for this instance, "object1".
My thought is to do the clean-up on the object. My method of doing this would be to add the needed attributes the page is using (as the "object1" is HUGE number of attributes) and put as single values and populate them when the object is constructed.
I don't have a specific solution for sanitizing your "queueCombo" after that it has been built, but generally the best-practices for securing the user inputs are:
as soon as the value is received from the user (early control): here before building your object. Most sanitizations made early intend to remove forbidden characters and control values formats. Eg: here the first and last names should not contain anything else than alphabetical characters.
You should not perform a transformation of variables early if the transformation aims to encode the data in a specific format (eg HTML output) because it could made the use of the objects in other contexts (eg: DB queries) harder to do.
just before using the variable (late control). Eg: SQL sanitization prior making a SQL query, or HTML encoding prior printing the values.
I think, in regards of your code snippet, that the latter should do.
Checkmarx is alerting on the loop line, but the issue is not really there. It lies in the value= statements that follow, the sanitization should be made here.
Tip for other readers: do not forget that any sanitization process should be made server side. If made client-side, it is mostly cosmetical.
I'm trying to make a bot in order to determine the optimal way to play Harvard's Guess my Word! game. I discovered that there is some sort of post request using chrome's "inspect element" feature when a user submits a guess. I wish to be able to POST the guesses made by my program to the server and retrieve a reponse to determine if my bot's guess is before the word, after the word, or equal to the word. As of late, the method I've been using only retrieves the starting page for the game. Here is the code I'm using to send the request and get a response:
public static void testJSoup( )
{
Document document;
try
{
document = Jsoup.connect( "http://www.people.fas.harvard.edu/~pahk/dictionary/guess.cgi" )
.data( "by", "joon" )
.data( "date", "" )
.data( "stattime", "1432230543" )
.data( "guesses", "pickle" )
.data( "guesses", "fumble" )
.data( "upper", "pickle" )
.data( "lower", "fumble" )
.userAgent( "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2228.0 Safari/537.36" )
.post();
System.out.println( document );
} catch ( IOException e )
{
e.printStackTrace();
}
}
Here is what I am currently getting as output:
<h2>Guess my word!</h2>
<p>I'm thinking of an uncapitalized English word, which you can try to guess. I'll tell you if my word is before or after your guess in alphabetical order. My word can be of any length from 1 to 15 letters. If my word starts with your word (e.g. my word is "cottage" and you guess "cot"), then it is considered to be after your word. You can only guess English words. The goal is to guess my word in as short a time as possible, or in as few guesses as possible, or whatever else you want to set as your goal. For leaderboard purposes, your time (starting when you make your first guess) and number of guesses will be tracked, but entering your name on the leaderboard is optional. There will be a new word every day.</p>
<p>This game has words chosen by joon. You might also want to try to guess words chosen by: mike</p>
<p>This word was updated on 09:00 Eastern, 5/21/2015. This game has been played 101 times today. View the FAQ, or the leaderboard.</p>
<form action="/~pahk/dictionary/guess.cgi" method="post" name="myform">
<div align="center">
What is your guess?
<input type="text" name="guess" size="15" maxlength="15" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
<input type="submit" value="Guess">
<input type="submit" name="result" value="no">
</div>
<input type="hidden" name="by" value="joon">
<input type="hidden" name="date" value="">
<input type="hidden" name="starttime" value="">
</form>
<table>
<tbody>
<tr>
<td> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FGuess-My-Word%2F169577026415164&width=292&colorscheme=light&connections=10&stream=false&header=false&height=255" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:255px;" allowtransparency="true"></iframe> </td>
<td> Updates:
<ul>
<li>2/12/15: The game didn't reset this morning due to a server error. I've manually reset it as of 11:26 am Eastern. </li>
<li>12/9/14: I fixed the leaderboard. I still don't really understand why it broke in the first place; that may remain forever mysterious. The fix involved replacing a few perfectly good lines of code with equivalent lines of code. Maybe it was a perl upgrade on the server or something that caused a few things to break. Anyway, it's all better now, but the unfortunately the leaderboard data from the last three weeks was never saved and can't be recovered. This includes plays of today's words prior to about 12:30 pm Eastern. </li>
<li>11/19/14: The leaderboard seems to be toast. I have no idea why. You can still play normally, but when you enter your name for the leaderboard, nothing happens (and data is not being collected for overall leaderboard purposes). I'm working on it, but I don't have the faintest idea what's going wrong. </li>
<li>11/15/14: There was a hiccup this morning, so I had to manually reset the game at 11 am. Not sure if it'll resurface tomorrow. </li>
<li>5/28/14: Another tiny change: autocorrect, autocomplete, and spellcheck have been disabled for the guess entry field, so whatever you type in will be transmitted verbatim as your guess.</li>
<li>5/16/14: A tiny update that will hopefully be invisible: when somebody's queue runs out, the program will now randomly select a word from a pared-down dictionary of basic English. It'll be less interesting than most words hand-picked by me or Mike, but it also won't be obscure.</li>
<li>1/9/14: GMW didn't auto-reset this morning due to an issue on another server, but as of right now (noon Eastern) I've manually reset it.</li>
<li>4/14/13: For various reasons, I've gone back and uncluttered the archive of GMW answers and gueses from 2010-11. (I still have them; they're just not online.) Unless you were diligently going back and playing through those archives, the only effect that this may have on you is that repeats of words that Mike or I used more than 16 months ago are now possible.</li>
<li>8/31/12: Thanks to an Orwellian bureaucratic disaster that would be funny if it weren't so annoying, Harvard managed to delete my account today. I have successfully managed to have it restored, but two days' worth of GMW data were lost. Well, we will all live. My apologies if you did especially well on one of those two days.</li>
<li>5/31/12: More server issues: although the game itself appears to work fine, the script that auto-posts to the blog every morning is now failing. Until I can figure out how to fix it, I'll just manually post every day as soon as I remember/get around to it.</li>
<li>5/29/12: Due to a server error this morning, GMW was out of commission until now (3 pm Eastern).</li>
<li>4/20/12: I've added functionality for a rudimentary overall leaderboard for people who use the same name on the leaderboard every day. You shouldn't take these results too seriously, both because people often <em>don't</em> use the same name every day, and because it doesn't (can't) distinguish between giving up and not playing at all (so that if you're really concerned about your overall averages, you're better off giving up if you are taking too many guesses/too much time). But anyway, it's there.</li>
<li>2/13/12: There seem to have been slight delays in getting the word reset today and yesterday, but I can't figure out what went wrong, and anyway, the reset did happen, just 25 or so minutes late. If it persists I'll try harder to figure out what's going on.</li>
<li>12/9/11: There have been problems in the last couple of days that have caused the reset script not to run automatically at 9 am. I have been running the reset manually and will continue to do so until I can figure out what's wrong. Sorry for the inconvenience.</li>
<li>10/27/11: I've added a link from the leaderboard to construct a word cloud formed by all of the guesses for that word, courtesy of Wordle. A word cloud is a graphical representation in which the font size of a word is proportional to the number of times it was guessed.</li>
<li>10/7/11: Okay, I'm ditching the Facebook page, since they've announced that they'll be cutting discussion functionality at the end of the month. Instead, I'm starting a new (content-free!) blog, on which you'll be able to comment on the day's words. It'll autopost every day so that each day's words will get its own thread. (I'm not going to separate my word and Mike's word into different posts.)</li>
<li>9/1/11: Mike's queue ran out again, and he's out of contact for a few days, so I cut and pasted a few of my words into his queue. As of 10:15 am his word is playable, but it's not really "his" (it was chosen by me).</li>
<li>8/11/11: Mike's queue ran out earlier today, but it's been restored.</li>
<li>4/16/11: It should no longer be possible to have exact repeats between the two word lists (Joon's and Mike's), <i>except</i> in the pathological case where both lists have the same word on the same day. Otherwise, once one list uses a word, it will be removed from the other person's list.</li>
<li>12/10/10: Facebook page, take two. There's now a Facebook page for Guess My Word. That'll be where you can discuss the words. Try to keep the Wall spoiler-free, because posts on the Wall might show up in my feed before I've had a chance to guess today's word. Instead, use the Discussions tab.</li>
<li>12/9/10: I'm trying out this Facebook "Like" button. If I understand this correctly, it'll mean that there'll be a little Facebook page for this guessing game. The practical implication is that if you (are on Facebook and) Like the game, you'll be able to use the "wall" of the Facebook page as a discussion board for the words. Feel free to post spoilers there. Might take a day or two for the page to autovivify. We'll see, I guess.</li>
<li>12/8/10: "New feature" is a euphemism here, but there have been some little bugs recently that caused the loss of some leaderboard data. I think I've got them all ironed out now, but do let me know if you see something amiss.</li>
<li>11/11/10: Updated the FAQ, and added a dictionary link for people who give up.</li>
<li>9/3/10: Leaderboard now includes the guess history for each solver (as a mouseover).</li>
<li>9/3/10: The leaderboard now tracks both solving time and number of guesses. The timer starts when you make your first guess.</li>
<li>9/3/10: Old words are playable (although you won't be added to old leaderboards).</li>
<li>8/31/10: Old leaderboards are viewable.</li>
</ul> </td>
</tr>
</tbody>
</table>
</body>
</html>
Here is the source for the webpage that I have based my request from (essentially my desired result):
<!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" lang="en-US" xml:lang="en-US">
<head>
<title>Guess my word!</title>
<meta name="og:site_name" content="Harvard" />
<meta name="fb:admins" content="jpahk" />
<meta name="og:url" content="http://www.people.fas.harvard.edu/~pahk/dictionary/guess.cgi" />
<meta name="og:type" content="game" />
<meta name="og:description" content="A simple alphabetical word-guessing game" />
<meta name="og:image" content="http://www.people.fas.harvard.edu/~pahk/dictionary/icon.jpg" />
<meta name="og:title" content="Guess My Word!" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body onload="document.myform.guess.focus()">
<h2>Guess my word!</h2>
<p>Your guesses so far:</p>
<ol>
<li><span style="color:blue">fumble</span></li>
<li><span style="color:red">pickle</span></li>
</ol>
<p align="center">My word is before pickle.</p>
<form action="/~pahk/dictionary/guess.cgi" method="post" name="myform">
<div align="center">What is your guess?
<input type="text" name="guess" size="15" maxlength="15" autocomplete="off"
autocorrect="off" autocapitalize="off" spellcheck="false">
<input type="submit" value="Guess">
<input type="submit" name="result" value="I give up! Tell me!" value="no">
</div>
<input type="hidden" name="by" value="joon">
<input type="hidden" name="date" value="">
<input type="hidden" name="starttime" value="1432230543">
<input type="hidden" name="guesses" value="fumble">
<input type="hidden" name="guesses" value="pickle">
<input type="hidden" name="upper" value="pickle">
<input type="hidden" name="lower" value="fumble">
</form>
</body>
</html>
Inspecting the POST it seems to have the last guess in a diferent parameter called guess. Then you must do:
document = Jsoup.connect( "http://www.people.fas.harvard.edu/~pahk/dictionary/guess.cgi" )
.data( "by", "joon" )
.data( "date", "" )
.data( "stattime", "1432230543" )
.data( "guess", "pickle" )
.data( "guesses", "fumble" )
.data( "upper", "pickle" )
.data( "lower", "fumble" )
.userAgent( "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2228.0 Safari/537.36" )
.post();
And you will obtain the desired response.
I hope it will help.
I am developing an MVC web app using spring framework.
At some point I have a jsp that is listing study case objects as sown below
<tbody>
<c:forEach items="${studycases}" var="studycase">
<tr>
<td>
<a href='<spring:url value="/studycase/${studycase.study_case_number}.html"/>'>
${studycase.study_case_number}
</a>
</td>
<td>
${studycase.dateOFHospitalAdmission}
</td>
<td>
${studycase.dateOfWardAdmission}
</td>
<td>
${studycase.dateOfWardDischarge}
</td>
</tr>
</c:forEach>
</tbody>
as you can see there is a spring:url that is directing to a jsp with details about the spesific study case, that is being handled by the below controller :
#RequestMapping("/studycase/{studyCaseNumber}")
public String detail(Model model, #PathVariable String studyCaseNumber)
{
model.addAttribute("studyCase", studyCaseService.findOne(studyCaseNumber)) ;
model.addAttribute("measurements", measurementService.findAllOfThem(studyCaseNumber)) ;
return "study-case-detail" ;
}
The problem is that as the study cases listed in the first jsp could be thousands I will need to make it possible for the user to enter the study_case_number of a study case in a input field and get the details of the study case having the study case number inputed . So what I am doing is this:
<form action="<spring:url value="/studycase/study-case-detail2"/>" method="GET">
Study Case Number : <input type="text" name="studyCaseNumber">
<br/>
<input type="submit" value="Submit" />
</form>
That is being handled by an other controller and directs to an other jsp with more or less the same structure and data :
#RequestMapping("/studycase/study-case-detail2")
public String detail2(Model model, #RequestParam("studyCaseNumber") String std)
{
model.addAttribute("measurements", measurementService.findAllOfThem(std)) ;
return "study-case-detail2" ;
}
My question is this : Is this a good way to go having different controllers and different views even if they are presenting more or less the same thing ? What are other alternatives ??
Is there any source that you can direct me to containing best practices catalogue or guide on how to handle similar situations ??
Looking at your code, your controllers are not doing exactly the same thing (e.g. different model attributes, and they return different views).
Other than that, in general, it's not the best practice to do what you're doing as it somewhat in conflict with "Do Not Repeat Yourself" principle (also known as DRY principle).
One suggestion would be to use javascript to do redirect on id from input box rather than a form.
It seems you're using Spring Data too. If that's the case then one additional (not exactly related) suggestion to DRY up your code would be to use Spring Data's domain class converters to avoid calls studyCaseService.findOne(studyCaseNumber) in your StudyCase related controllers.
With domain class converters in place, you could then write controller method like this:
public String detail(Model model, #PathVariable("studyCaseNumber") StudyCase studyCase)
and avoid call to repository's findOne method as the converters would automatically convert ID to entity.
Take a look at DomainClassConverter in "Basic Web Support" section of Spring Data manual:
http://docs.spring.io/spring-data/data-commons/docs/1.6.1.RELEASE/reference/html/repositories.html
Lets say we have a table of people. In each row there is a picture, a name, a city and some social buttons, like PM, add as friend, follow.
How can I "Add as friend" a certain person?
There are 10 people, there are 10 "Add as friend" buttons, and I have a name - lets say George Busch.
I don't know which place is his profile going to take out of those 10, when the page is generated, I just want to click the "add as friend" link that is NEAREST to George Busch.
EDIT: I will use the example code provided from the accepted answer, to demonstrate my case:
<table id="addfriendstable" class="colouredgrid">
<tr id="person65894" class="resultsrow odd">
<td>George Busch</td>
<td><button class="befriend">Add as friend</button></td>
</tr>
<tr id="person3244" class="resultsrow even">
<td>Jimmy Corker</td>
<td><button class="befriend">Add as friend</button></td>
</tr>
<tr id="person91236" class="resultsrow odd">
<td>Abraham Linton</td>
<td><button class="befriend">Add as friend</button></td>
</tr>
</table>
EDIT: This is my real-life example. I can't connect the xpaths right
These are the user's clickable name xpaths:
xpath=(//a[contains(text(),'Justin Timberlake')])[2]
//div[#id='main']/div/section/section/ul/li[2]/article/section/section/a
xpath=(//a[contains(#href, '/users/justin-timberlake')])[4]
//li[2]/article/section/section/a
and these are the different variants of the "Add as friend" button:
xpath=(//a[contains(text(),'Add as Friend')])[2]
//div[#id='main']/div/section/section/ul/li[2]/article/section/section/div/a
//a[contains(#href, '/users/1/friendships?friend_id=51c027d7f325db7ee7000032&origin=search')]
//li[2]/article/section/section/div/a
You can make an xpath which identifies the table cell containing the text 'George Busch', and then tracks over to the cell containing the button. This is concise and efficient.
Exactly how the xpath is constructed depends on your overall html structure, but I'll show you a simple worked example.
HTML
<table id="addfriendstable" class="colouredgrid">
<tr id="person65894" class="resultsrow odd">
<td>George Busch</td>
<td><button class="befriend">Add as friend</button></td>
</tr>
<tr id="person3244" class="resultsrow even">
<td>Jimmy Corker</td>
<td><button class="befriend">Add as friend</button></td>
</tr>
<tr id="person91236" class="resultsrow odd">
<td>Abraham Linton</td>
<td><button class="befriend">Add as friend</button></td>
</tr>
</table>
Building the xpath
The first part of the xpath is to uniquely identify the td cell with your text in it. For now, I'm assuming that you know for certain that the person's name won't show up anywhere else in the screen's html:
//td[text()='George Busch']
The next part of the xpath uses the double-dot .. notation to represent the parent, because we want to go back up the hierarchy one level to the tr table row:
//td[text()='George Busch']/..
And the next part of the xpath goes down the hierarchy a level to find the button; for now, I'm assuming that each row of the table has only one button:
//td[text()='George Busch']/../td/button
So the overall pattern is concentrating on two elements, the person name and the button; the xpath finds the person name first, then tracks back up the hierarchy as far as the common parent, then back down to the button.
Tweaking the xpath
Depending on your overall html structure, my example xpath might need changing. For example, maybe the screen has a number of different tables where the text 'George Busch' might occur? In that case, you need to uniquely identify the table, for example by using the id like this:
//table[#id='addfriendstable']//td[text()='George Busch']/../td/button
Or maybe the table has several buttons in each row? If so, we need to uniquely identify which button we want, for example by using the class:
//td[text()='George Busch']/../td/button[#class='befriend']
Firepath
I really recommend using Firepath for firefox - it's a great tool for checking that your xpaths are working. I've used it to verify the example xpaths in this answer.
Well this is a very common scenario when comes to working with grids. The best way to do this is by using xpath. The trick is to get the row which contains the name George Busch no matter where the row is in the grid. In the row click on the button. Will give a simple example using the grid in the following website.
http://demos.kendoui.com/web/grid/index.html
.The grid customer database there are many users. I will show the xpath which will get the age for person with first name Margaret. If you show the html probably something similar to this can be given. The xpath is as follows.
//tr[td[text() = 'Margaret']]/descendant::td[text()= '55']
Write a selector so that a findElements() will return 10 elements (one for each person)
On each element, do a element.getText(), and test to see if it contains George Busch.
If it does, then on the next element, do a element.findElement("") selector that will return the link, and click on it.
I'd like to know if you can display more than one div or table content of same id from onchange value. Like if I select an option from drop down and it displays its content but i want to display another content from elsewhere in my page when same option is selected.
My code is as follows:
<select name="debitOrderType" id = "debitOrderType"
onChange="display(this,'BANK','CARD','INVOICE');">
<option>Please select...</option>
<option value="BANK" selected>Debit Order (Monthly)</option>
<option value="CARD">Credit Card (Monthly)</option>
<option value="INVOICE">Invoice (Yearly)</option>
</select>
Then when selecting Invoice from dropdown it displays the following:
<tbody id="INVOICE" style="display: none;">
<tr>
<td class="field">Thank you for selecting to pay yearly in advance. By doing so you
are receiving one month's free listing.
</td></tr>
</tbody>
But now i want to display the following ALSO when Invoice is selected but in another part of the page:
<tbody id="INVOICE" style="display: none;">
<tr><td height="5"></td></tr>
<tr><td align="right">This is your discounted yearly price</td></tr>
</tbody>
But only the first part is showing and not both. It looks like you can't display more than one content from same Id.
Hope you can help me?
Thanks in advance!
You mustn't define two elements with the same id in HTML, it's meant to be a unique identifier. Classes can be used multiple times, so use that!
First of all it is bed practice to assign same id to more than one element, although DOM will never find 2nd element of same id. Assign class to both table and make it visible on onChange event of combo box, then it will work.
If you want to display or apply css on single object then you should use ID. And if you want to display or apply css on multiple object then you should use CLASS.
In your example you should avoid ID and use class.
avoid this
id="INVOICE"
Use this
class="INVOICE"
Hope it will help you.