Solved

URGENT-JAvascript+JSP modifications

Posted on 2003-11-01
32
486 Views
Last Modified: 2010-04-01
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.

0
Comment
Question by:Jasbir21
  • 17
  • 14
32 Comments
 
LVL 15

Expert Comment

by:jimmack
Comment Utility
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()%>
0
 
LVL 15

Expert Comment

by:jimmack
Comment Utility
Oops.  Perhaps that should be:

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

Expert Comment

by:Karaa
Comment Utility
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.
 
0
 

Author Comment

by:Jasbir21
Comment Utility
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
0
 
LVL 15

Expert Comment

by:jimmack
Comment Utility
Are you happy with the answer, or do you need to coninue?

;-)

Jim.
0
 
LVL 15

Expert Comment

by:jimmack
Comment Utility
(or even "continue" ;-))
0
 

Author Comment

by:Jasbir21
Comment Utility
hi,

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

Thanks
0
 
LVL 15

Expert Comment

by:jimmack
Comment Utility
In your result set, what do the columns 1 and 2 contain?
0
 
LVL 15

Expert Comment

by:jimmack
Comment Utility
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>
0
 
LVL 15

Expert Comment

by:jimmack
Comment Utility
Sorry.  Typo there.  I didn't test the delete.
0
 

Author Comment

by:Jasbir21
Comment Utility
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
0
 

Author Comment

by:Jasbir21
Comment Utility
....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
0
 

Author Comment

by:Jasbir21
Comment Utility
Forgot to meantion that when i put this:

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

Thanks
0
 
LVL 15

Expert Comment

by:jimmack
Comment Utility
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.
0
 

Author Comment

by:Jasbir21
Comment Utility
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
0
 
LVL 15

Expert Comment

by:jimmack
Comment Utility
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?
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 

Author Comment

by:Jasbir21
Comment Utility
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
0
 
LVL 15

Expert Comment

by:jimmack
Comment Utility
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?
0
 

Author Comment

by:Jasbir21
Comment Utility
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 .
0
 
LVL 15

Expert Comment

by:jimmack
Comment Utility
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;")
0
 
LVL 15

Expert Comment

by:jimmack
Comment Utility
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 :-))
0
 

Author Comment

by:Jasbir21
Comment Utility
.....of course you can claim the points, ....
....Let me try it out,

thanks

0
 
LVL 15

Expert Comment

by:jimmack
Comment Utility
OK.  Thanks ;-)

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

Author Comment

by:Jasbir21
Comment Utility
...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

0
 

Author Comment

by:Jasbir21
Comment Utility
..I mean if i were to put rs at option, red, blue gets inserted but desc would not work...
0
 
LVL 15

Expert Comment

by:jimmack
Comment Utility
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 ;-)
0
 

Author Comment

by:Jasbir21
Comment Utility
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
0
 
LVL 15

Expert Comment

by:jimmack
Comment Utility
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 ;-)
0
 

Author Comment

by:Jasbir21
Comment Utility
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
0
 
LVL 15

Expert Comment

by:jimmack
Comment Utility
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>
0
 
LVL 15

Accepted Solution

by:
jimmack earned 250 total points
Comment Utility
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.
0
 

Author Comment

by:Jasbir21
Comment Utility
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 ???
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

Marketing can be an uncomfortable undertaking, especially if your material is technology based. Luckily, we’ve compiled some simple and (relatively) painless tips to put an end to your trepidation and start your path to success.
Learn to move / copy / export exchange contacts to iPhone without using any software. Also see the issues in configuration of exchange with iPhone to migrate contacts.
This video discusses moving either the default database or any database to a new volume.
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now