Start Free Trial

asked on

URGENT-JAvascript+JSP modifications

html>
<head>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

</SCRIPT>

</head>
<body>
<form action="volunteer.jsp" method="post" name="form1" onSubmit="return Validate(this)">
<
<%
String myskill="select * from skill";
Statement stmt=connection.createStatement();
ResultSet rs2=stmt.executeQuery(myskill);
%>

Existing Skills :

<select name="choose"
>

<%
int x = 0;
while(rs2.next()){
%>
<script>
colorDesc[<%=x%>] = "<%=rs2.getString(2).trim()%>"
</script>
<option value=<%=x%>><%=rs2.getString(1).trim()%>

</option>

<%
x++;
}%></select>

<a href="#" onclick="displayDesc(document.form1.choose.value);return false;">Desc</a>

<input type=button value="Add" onClick="AddMe(this.form)"> </p>

<input type=button value="Delete" onClick="DeleteMe(this.form)">

<input type="submit" value="Submit">
</form>

</body>

</html>

Hi, i posted this question bef and i got solved, my probllme is at the option value, the result of database that is red, blue should be added into the textarea,but by using this 0, 1 gets added, how do i modify.

First, thankyou ;-) I haven't done any JavaScript before, so this was a good learning experience for me :-)

In the <option value= line, I think that instead of using <%=x%>, you should use the same value as you have for the option contents. ie.

<option value=<%=x%>><%=rs2.getString(1).trim()%>

should be:

<option value=<%=rs2.getString(1).trim()%>><%=rs2.getString(1).trim()%>

Oops. Perhaps that should be:

<option value="<%=rs2.getString(1).trim()%>"><%=rs2.getString(1).trim()%>

if rs2.getString(2) gives u desc then it should be like this
<option value="<%=rs2.getString(2).trim()%>"><%=rs2.getString(2).trim()%>
and even u don't need id any where because in popop u want to display desc and in text field u want to show the same text.

ASKER

Hi,
Actually i did try that initially:

<option value="<%=rs2.getString(2).trim()%>"><%=rs2.getString(2).trim()%>,

but no id was being sent to the javascript function, when i print out the x value it is o,1 and etc.So, i guesss id is needed .

Thanks

Are you happy with the answer, or do you need to coninue?

;-)

Jim.

(or even "continue" ;-))

ASKER

hi,

yes, i would like to continue pls, my problem is not solved.

Thanks

In your result set, what do the columns 1 and 2 contain?

Well, I'm off to bed.

Here is the cut-down version of your page that I created for testing. The addition/deletion seem to work OK here, so I think the key is to make sure you use the correct column values in the "value" attribute of the option tag:

<html>
<head>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
function AddMe(theForm) {
if(theForm.skill.value == '')
{
theForm.skill.value = theForm.choose.options[theForm.choose.selectedIndex].value;
}
else
{
theForm.skill.value = theForm.skill.value + ', ' + theForm.choose.options[theForm.choose.selectedIndex].value;

}
}
</SCRIPT>
</head>
<body>
<form action="volunteer.jsp" method="post" name="form1" onSubmit="return Validate(this)">
Existing Skills :
<textarea name="skill">
</textarea>
<select name="choose">

<script>
colorDesc[0] = "Red"
colorDesc[1] = "Blue"
</script>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
</select>

<a href="#" onclick="displayDesc(document.form1.choose.value);return false;">Desc</a>

<input type=button value="Add" onClick="AddMe(this.form)"> </p>

<input type=button value="Delete" onClick="DeleteMe(this.form)">

<input type="submit" value="Submit">
</form>

</body>

</html>

Sorry. Typo there. I didn't test the delete.

ASKER

Hi,
Actually there is nothing wrong with the add and delete function.

My problem is that when a user clicks desc the description of the color would pop up, and since id is being use the id is being added to the textarea, but if i would to put rs.., then the id would not be sent to the above javascript function to popup the description,

Thanks

ASKER

....I tried assigning an array but i am getting out of vbounds

<select name="choose"
>

<%
int x = 0;

//if(rs.next()){

//}

while(rs2.next()){
String[] color=new String[]{rs2.getString(2).trim()};
%>
<script>
colorDesc[<%=x%>] =<=%color[x]%>="<%=rs2.getString(2).trim()%>"
</script>
<option value=<%=color[x]%>><%=rs2.getString(1).trim()%>

</option>

thanks

ASKER

Forgot to meantion that when i put this:

<option value="<%=rs2.getString(2).trim()%>"><%=rs2.getString(2).trim()%>,
i get undefined.

Thanks

I think I see where you are going with this.

As far as I can tell, what you are saying is that your "skill" table contains two columns (at least), the first two columns being:

color and color description. These contain items like:

red a hot color
blue a cold color

etc.

so rs.getString(1) would return "red" and rs.getString(2) would return "a hot color".

You can use an array, but because you can't get the size of the ResultSet, it's easier to use a container (eg. ArrayList)

ArrayList color = new ArrayList();
ArrayList colorDesc = new ArrayList();
while(rs2.next()){
color.add(rs2.getString(1));
colorDesc.add(rs2.getString(2));
}
%>

I would also recommend changing the rs2.getString(...) lines to use the column names instead of numbers (for clarity), eg:

rs.getString("colordescription");

I'm not sure if there is an easy way to get the content of the ArrayLists into arrays for use within JavaScript, but you could do this, following the above loop:

<script>
String color = new String[<%= color.size() %>]
String colorDesc = new String[<%= color.size() %>]
<%
for (int i = 0; i < color.size(); i++)
{
%>
color[i] = <%= (String)color.get(i) %>
colorDesc[i] = <%= (String)colorDesc.get(i) %>
<%
}
%>
</script>

This should leave you with two JavaScript arrays, color and colorDesc, containing the Stings read from the database.

All of this is based on the assumption I have had to make about the content of your "skill" table.

ASKER

Hi,
what you are assummed is right, but when the desc button is press, the value that gets send still needs to be, 0,1(index).

a href="#" onclick="displayDesc(document.form1.choose.value);return false;">Desc</a>

Thanks

Hang on. I think I've been going in the wrong direction:

>> still needs to be, 0,1(index)

You mean you *want* 0 or 1 instead of the text "Red", "Blue" etc.?

If so, I'm very sorry. I've been trying to tell you how to do it the wrong way :-(

I think I now understand. "Add" works, but "Desc" doesn't. This is because the displayDesc function is receiving the actual color description string now, instead of the 0 or 1.

If I'm right and this is the case, can you just use the string that is received instead of looking up the string from the array?

ASKER

Hi,
so sorry , for all the trouble.0,1 needs to be sent because the javascript function above needs to receive numbers because of the choose.value...
but if i were to change that into rs.., then index will not set,

So sorry , for confusing things,

Thanks

Don't worry about the confusion. I should have been reading more carefully ;-)

I'm not sure if I've lost track of what works and what doesn't.

If you have the "colorDesc" array with the color descriptions in, then I think we can sort this quite easily :-) (let us hope ;-))

OK. The "value" attribute in the options doesn't really matter, because you don't need to use it. So long as the colors in the option list appear in the same order as your color descriptions, you can use the following:

theForm.choose.selectedIndex will give you 0 or 1 depending upon which item is selected
theForm.choose.options[theForm.choose.selectedIndex].value will give you the text of the currently selected item

so, colorDesc[theForm.choose.selectedIndex] will give you the description for the currently selected option.

I would say two things at this stage.

1) This is my first experience of JavaScript, so I've learned a lot ;-)
2) I have a horrible feeling that you almost had this solution before we even started :-(

One question - in my JavaScript console, it's telling me that window.createPopup() is not a function. Is this because Netscape/Mozilla don't support this function?

ASKER

Hi,
I really appreciate you trying to help me .Thank you.This is also my first experience with javascript.I have used java but never jsp and javascript.

.....Actually the reason the value needs to be rs. is because if i were to use the add button, the variable (eg, red) would be added into the textarea,but lets say i would like a description, i would press desc which would give a description.

The functions for the add and delete button is :

function AddMe(theForm) {
if(theForm.skill.value == '')
{
theForm.skill.value = theForm.choose.options[theForm.choose.selectedIndex].value;
}
else
{
theForm.skill.value = theForm.skill.value + ', ' + theForm.choose.options[theForm.choose.selectedIndex].value;

}

}

function DeleteMe(theForm) {
if(theForm.skill.value == '') return
var skillToDelete = theForm.choose.options[theForm.choose.selectedIndex].value
if (theForm.skill.value==skillToDelete) {
theForm.skill.value=''
return
}
var newdata = '';
var skills = theForm.skill.value.split(', ')
for (i=0;i<skills.length;i++) {
if (skills[i]!=skillToDelete)
{
if(newdata == '')
{
newdata = skills[i];
}
else
{
newdata = newdata + ', ' + skills[i];
}
}
}
theForm.skill.value = newdata;
}

//-->

For the desc function:

var colorDesc = new Array ()
var oPopup = window.createPopup();
function displayDesc(index)
{

var oPopupBody = oPopup.document.body;
oPopupBody.style.backgroundColor = "red";
oPopupBody.style.border = "solid black 1px";
oPopupBody.innerHTML = colorDesc[index];
oPopup.show(700, 700, 100, 60, document.body);
}

...the createPopup() only works in ie for 5.5 and above...

...Thanks again for all the trouble .

Your Add and Delete methods look fine and work OK on my test page (no actual database access).

Is the problem just with the displayDesc() function now?

Have you tried:

<a href="#" onclick="displayDesc(document.form1.choose.selectedIndex);return false;">Desc</a>

What happened?

(I'm not sure why you need the "return false;")

If we get this working to your satisfaction, can I claim the points in the question you posted on the JavaScript TA too?

;-)

(ooo cheeky :-))

ASKER

.....of course you can claim the points, ....
....Let me try it out,

thanks

OK. Thanks ;-)

I'll wait until you're happy with the outcome before I post a comment to that question.

ASKER

...Actually the delete and add button has always been working , but if i don't
put rs..get at the value option, than o,1 gets inserted in the textarea,

but if i were to put o,1 than desc function works but the value that gets inserted is 0,1

Previously there wasn't any rs in the option value,but when i found out that 0,1 gets inserted i tried modiying it and was unable
..Sorry, if i am confusing things

ASKER

..I mean if i were to put rs at option, red, blue gets inserted but desc would not work...

Let's try to clarify again ;-)

1) You are using the rs in the <option> tags.
2) The drop down list contains the colors (eg. Red and Blue)
3) You have an array "colorDesc" that contains the description strings
4) Add and delete both work correctly
5) displayDesc isn't working (it is showing "0" instead of the description for Red and "1" instead of the description for Blue)
6) You are calling the displayDesc function with the following parameter:

document.form1.choose.selectedIndex

If the answer is "no" to any of the above, please describe in as much detail as possible, what is wrong ;-)

I will be around for about another 30 minutes tonight, then it's bed time ;-)

ASKER

Hi,
I have deleted that javascript question there and i would add the points here.

The questions:
) You are using the rs in the <option> tags.-yes and no, i need to put value in the textarea,so, then i need to use rs.When i use rs, i can't use the desc button, if i use the araay, i can't use the add and delete buttin
2) The drop down list contains the colors (eg. Red and Blue).yes
3) You have an array "colorDesc" that contains the description strings.yes
4) Add and delete both work correctly.yes if put rs
5) displayDesc isn't working (it is showing "0" instead of the description for Red and "1" instead of the description for Blue)-it works fine as i said above ,either i could have add delete button and not both that is desc as well
6) You are calling the displayDesc function with the following parameter:

document.form1.choose.selectedIndex//yes, and the value gets incremented with x++

Thanks

Hello again. I almost thought you'd given up ;-)

I now understand the problem you have. Either:

1) "Add" and "Delete" work

or

2) "Desc" works

I'm *really* sorry to have to ask this, but could you please post the whole page again (where add and delete work and desc doesn't).

I am absolutely determined to find out what is going on and fix this problem for you ;-)

ASKER

Thanks for being really determine, i wouldn't give up , i need to get it working :-)

FOr the add and delete function to work:

html>
<head>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

</SCRIPT>

</head>
<body>
<form action="volunteer.jsp" method="post" name="form1" onSubmit="return Validate(this)">
<
<%
String myskill="select * from skill";
Statement stmt=connection.createStatement();
ResultSet rs2=stmt.executeQuery(myskill);
%>

Existing Skills :

<select name="choose"
>

<%
int x = 0;
while(rs2.next()){
%>

<option value=<%=rs2.getString(1).trim()%>><%=rs2.getString(1).trim()%>

</option>

<%}%>
</select>

<input type=button value="Add" onClick="AddMe(this.form)"> </p>

<input type=button value="Delete" onClick="DeleteMe(this.form)">

<input type="submit" value="Submit">
</form>

</body>

</html>

For the desc button:

html>
<head>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

</SCRIPT>

</head>
<body>
<form action="volunteer.jsp" method="post" name="form1" onSubmit="return Validate(this)">
<
<%
String myskill="select * from skill";
Statement stmt=connection.createStatement();
ResultSet rs2=stmt.executeQuery(myskill);
%>

Existing Skills :

<select name="choose"
>

<%
int x = 0;
while(rs2.next()){
%>
<script>
colorDesc[<%=x%>] = "<%=rs2.getString(2).trim()%>"
</script>
<option value=<%=x%>><%=rs2.getString(1).trim()%>

</option>

<%
x++;
}%></select>

<a href="#" onclick="displayDesc(document.form1.choose.value);return false;">Desc</a>

<input type="submit" value="Submit">
</form>

</body>

</html>

Thank you

The things I'll do to solve a problem ;-) I've had to switch back to Windows XP for a short time to test this :-(

But, it works. No problems.

Please just open the following HTML file in your browser and check that it's functionality is correct.

It doesn't contain any JSP, because I didn't go as far as setting up a web application and database.

If it does what you want, then see the next comment for the changes you need to make.

(NOTE: I had to fix quite a few syntax errors. You had the <!-- comment opening, but not closing in the SCRIPT at the top and there was no } at the end of the displayDesc function.)

<html>
<head>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
var colorDesc = new Array ()
colorDesc[0] = "A hot color"
colorDesc[1] = "A cold color"
var oPopup = window.createPopup();
function displayDesc(index)
{

var oPopupBody = oPopup.document.body;
oPopupBody.style.backgroundColor = "red";
oPopupBody.style.border = "solid black 1px";
oPopupBody.innerHTML = colorDesc[index];
oPopup.show(700, 700, 100, 60, document.body);
}

function AddMe(theForm) {
if(theForm.skill.value == '')
{
theForm.skill.value = theForm.choose.options[theForm.choose.selectedIndex].value;
}
else
{
theForm.skill.value = theForm.skill.value + ', ' + theForm.choose.options[theForm.choose.selectedIndex].value;

}

}

function DeleteMe(theForm) {
if(theForm.skill.value == '') return
var skillToDelete = theForm.choose.options[theForm.choose.selectedIndex].value
if (theForm.skill.value==skillToDelete) {
theForm.skill.value=''
return
}
var newdata = '';
var skills = theForm.skill.value.split(', ')
for (i=0;i<skills.length;i++) {
if (skills[i]!=skillToDelete)
{
if(newdata == '')
{
newdata = skills[i];
}
else
{
newdata = newdata + ', ' + skills[i];
}
}
}
theForm.skill.value = newdata;
}

</SCRIPT>

</head>
<body>
<form action="volunteer.jsp" method="post" name="form1" onSubmit="return Validate(this)">

Existing Skills :

<textarea name="skill"></textarea>

<select name="choose"
>

<option value="Red">Red</option>
<option value="Blue">Blue</option>

</select>

<a href="#" onclick="displayDesc(document.form1.choose.selectedIndex);return false;">Desc</a>

<input type=button value="Add" onClick="AddMe(this.form)"> </p>

<input type=button value="Delete" onClick="DeleteMe(this.form)">

<input type="submit" value="Submit">
</form>

</body>

</html>

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

Hi,
I really can't believe it , it is working, to be honest i wanted to give up but you didn't . Thank you so much.I must admit, that the program worked mainly becoz, of your determination.
I am increasing another 150 points.

Thanks

Pls note : I have another question at
https://www.experts-exchange.com/questions/20779026/Dynamic-table.html
Could you pls look at it ???