URGENT-JAvascript+JSP modifications

html>
<head>

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
<script>
  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);
}


</script>
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)">
<
<%
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.

Jasbir21Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

jimmackCommented:
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()%>
jimmackCommented:
Oops.  Perhaps that should be:

<option value="<%=rs2.getString(1).trim()%>"><%=rs2.getString(1).trim()%>
KaraaCommented:
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.
 
PMI ACP® Project Management

Prepare for the PMI Agile Certified Practitioner (PMI-ACP)® exam, which formally recognizes your knowledge of agile principles and your skill with agile techniques.

Jasbir21Author Commented:
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
jimmackCommented:
Are you happy with the answer, or do you need to coninue?

;-)

Jim.
jimmackCommented:
(or even "continue" ;-))
Jasbir21Author Commented:
hi,

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

Thanks
jimmackCommented:
In your result set, what do the columns 1 and 2 contain?
jimmackCommented:
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>
jimmackCommented:
Sorry.  Typo there.  I didn't test the delete.
Jasbir21Author Commented:
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
Jasbir21Author Commented:
....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
Jasbir21Author Commented:
Forgot to meantion that when i put this:

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

Thanks
jimmackCommented:
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.
Jasbir21Author Commented:
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
jimmackCommented:
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?
Jasbir21Author Commented:
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
jimmackCommented:
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?
Jasbir21Author Commented:
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 .
jimmackCommented:
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;")
jimmackCommented:
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 :-))
Jasbir21Author Commented:
.....of course you can claim the points, ....
....Let me try it out,

thanks

jimmackCommented:
OK.  Thanks ;-)

I'll wait until you're happy with the outcome before I post a comment to that question.
Jasbir21Author Commented:
...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

Jasbir21Author Commented:
..I mean if i were to put rs at option, red, blue gets inserted but desc would not work...
jimmackCommented:
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 ;-)
Jasbir21Author Commented:
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
jimmackCommented:
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 ;-)
Jasbir21Author Commented:
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">
<!--

 
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)">
<
<%
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">
<!--

  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);
}
//-->
</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
jimmackCommented:
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>
jimmackCommented:
1) Remove the following lines from the top of the SCRIPT section:

  colorDesc[0] = "A hot color"
  colorDesc[1] = "A cold color"

2) Add the JSP code to get the result set:

<%
String myskill="select * from skill";
Statement stmt=connection.createStatement();
ResultSet rs2=stmt.executeQuery(myskill);
%>

3) Delete the lines from <select name="choose" to </select> and replace it with the following:

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

</option>

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


Oh yes.  One more thing.  In all the clips you've posted, you haven't included a TEXTAREA named "skill", so I had to add that too.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Jasbir21Author Commented:
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
http://www.experts-exchange.com/Web/Web_Languages/JSP/Q_20779026.html
Could you pls look at it ???
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JSP

From novice to tech pro — start learning today.