[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3113
  • Last Modified:

manipulating multibox using javascript on a jsp.

I've been looking for multibox javascript reference and I all i keep finding is checkbox javascript reference. Do you have link for that? But anyways here is my problem

using struts architecture.
I have a jsp page with 5 columns which are labeled with name/sex/age/race/single.
The name just means a persons name.
The sex shows the person's sex.
The age shows the person's age.
The race shows the person's race.
The single just shows true or false depending on if they are single or not.
The multibox goes around the name column.
I have a "select single" button that I want to press and when I press it, it will select all the people that are single. I have an external java script file that I call to do this. I need help with the java script function. I know how to do a select all function call.


here is my jsp code.

<html:form>
<some iterate statement>

<html:multibox property="nameBox">
<jsp:getProperty name="someBean" property="name">
</html:multibox>
<jsp:getProperty name="someBean" property="name">

<jsp:getProperty name="someBean" property="sex">
<jsp:getProperty name="someBean" property="age">
<jsp:getProperty name="someBean" property="race">
<jsp:getProperty name="someBean" property="single">


<html:multibox property="nameBox" value="select single" onclick="checkSingle(this)" />
<html:multibox property="nameBox" value="check all" onclick="checkAll(this)" />

</end some iterate statement>
</html:form>

so i need my java script function to do something like this:

function checkSingle(arg)
{
find all the values of "single" that are "true"
correlate that with the name associated with it
return the multibox with the correct boxes checked.
}



function checkAll(box)
abox = box.form[box.name];

for (i = 0; i < abox.length - 1; i++)
  {  
  abox[i].checked = true;
  }
}



I need some help or any pointers... TIA.
0
jaxkewl
Asked:
jaxkewl
  • 8
  • 6
1 Solution
 
archrajanCommented:
Can u post the generated html , ur view source from the browser
0
 
jaxkewlAuthor Commented:
i have dumbed down my problem a lot with the question i am asking above and also I dont have access to my source code at the moment.
0
 
archrajanCommented:
function selectsingle(sel)
{
for(i=0; i <sel.length;i++)
{
if(sel.options[i].value == 'true')
sel.options[i].selected = true;
else
sel.options[i].selected = false;
}
}

call the function like

<input type = "button" onclick = "selectsingle(document.formname.selectboxname)" value = "Select Single">
where
formname is the name of your form
and selectboxname is the name of ur select box

if u r having an id to ur select box call it like this
<input type = "button" onclick = "selectsingle(document.getElementById('selectboxid')" value = "Select Single">
where selectboxid is the id of your select box

And note that the function selects all the items in that selectbox whose value is set to true
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
jaxkewlAuthor Commented:
Im a little confused. How am I submitting the information to the function selectSingle to use the "singles" information?

There are 2 parts to this problem.
1 is "submitting" both the singles information and the name information.
2 is using the singles information to manipulate the name multiboxes.

im sure its obvious i am kinda new to java script.
0
 
archrajanCommented:
jaxkewl,
i need to see the view source of your page to see the html in there.
and that wud make me understand ur structure and u cud get a more straightforward solution
0
 
jaxkewlAuthor Commented:
ok, i made up a quick one... and here is the view source from it.


<script type="text/javascript" src="pages/functions.js"></script>

<form name="testForm" method="post" action="/JTI/submitInfo.do">
<input type="submit" name="action" value="Submit Info">
<input type="reset" value="Reset All">
<br>

<table border=1>

<tr>
<td>

<input type="checkbox" name="checkedNames" value="1">
<b>Mike</b>

    <td>Hispanic</td>
    <td>M</td>
    <td>22</td>
    <td>true</td>
  </tr>
 
<tr>
<td>

<input type="checkbox" name="checkedNames" value="2">
<b>Sandy</b>

    <td>White</td>
    <td>F</td>
    <td>20</td>
    <td>true</td>
  </tr>
 
<tr>
<td>

<input type="checkbox" name="checkedNames" value="3">
<b>Jill</b>

    <td>Asian</td>
    <td>F</td>
    <td>26</td>
    <td>true</td>
  </tr>
 
<tr>
<td>

<input type="checkbox" name="checkedNames" value="4">
<b>Caroline</b>

    <td>Black</td>
    <td>F</td>
    <td>24</td>
    <td>false</td>
  </tr>
 
</table>
<br>
<input type="button" name="checkedNames" value="Select All" onclick="changeAll(this);">
<input type="button" name="checkedNames" value="Select All single" onclick="?????">
</form>
0
 
jaxkewlAuthor Commented:
ooops this one is right, disregard the other one.



<script type="text/javascript" src="pages/functions.js">

</script>



<br>
<form name="testForm" method="post" action="/JTI/submitInfo.do">
<input type="submit" name="action" value="Submit Info">
<input type="reset" value="Reset All">
<br>


<table border=1>

<tr>
<td>

<input type="checkbox" name="checkedNames" value="Mike">
<b>Mike</b>

    <td>Hispanic</td>
    <td>M</td>
    <td>22</td>
    <td>true</td>
  </tr>
 
<tr>
<td>

<input type="checkbox" name="checkedNames" value="Sandy">
<b>Sandy</b>

    <td>White</td>
    <td>F</td>
    <td>20</td>
    <td>true</td>
  </tr>
 
<tr>
<td>

<input type="checkbox" name="checkedNames" value="Jill">
<b>Jill</b>

    <td>Asian</td>
    <td>F</td>
    <td>26</td>
    <td>true</td>
  </tr>
 
<tr>
<td>

<input type="checkbox" name="checkedNames" value="Caroline">
<b>Caroline</b>

    <td>Black</td>
    <td>F</td>
    <td>24</td>
    <td>false</td>
  </tr>
 
</table>
<br>
<input type="button" name="checkedNames" value="Select All" onclick="changeAll(this);">
<input type="button" name="checkedNames" value="Select All single" onclick="?????">
</form>
0
 
jaxkewlAuthor Commented:
changeAll is just a function that changes the selection. i.e. if the multibox is already selected then deselect and if its not selected then select it.
0
 
archrajanCommented:
You are having the data inside a <td> tag....
u shud either have it as a value in the checkbox...
otherwise its very hard to manipulate
or is it possible to have a id attribute for that particular td tag
0
 
archrajanCommented:
This is the only way i know using DOM
Try it out

<script type="text/javascript">
function selectsingle()
{
var chk = document.getElementsByTagName('input')
for(i =0; i <chk.length; i++)
{
if(chk[i].type =='checkbox')
{
if(chk[i].parentNode.parentNode.innerHTML.indexOf('true')!= -1)
chk[i].checked = true;
else
chk[i].checked = false;
}
}
}
</script>



<br>
<form name="testForm" method="post" action="/JTI/submitInfo.do">
<input type="submit" name="action" value="Submit Info">
<input type="reset" value="Reset All">
<br>


<table border=1>

<tr>
<td>

<input type="checkbox" name="checkedNames" value="Mike" id = "me">
<b>Mike</b>

    <td>Hispanic</td>
    <td>M</td>
    <td>22</td>
    <td>true</td>
  </tr>
 
<tr>

<td>

<input type="checkbox" name="checkedNames" value="Sandy">
<b>Sandy</b>

    <td>White</td>
    <td>F</td>
    <td>20</td>
    <td>true</td>
  </tr>
 
<tr>
<td>

<input type="checkbox" name="checkedNames" value="Jill">
<b>Jill</b>

    <td>Asian</td>
    <td>F</td>
    <td>26</td>
    <td>true</td>
  </tr>
 
<tr>
<td>

<input type="checkbox" name="checkedNames" value="Caroline">
<b>Caroline</b>

    <td>Black</td>
    <td>F</td>
    <td>24</td>
    <td>false</td>
  </tr>
 
</table>
<br>
<input type="button" name="checkedNames" value="Select All" onclick="changeAll(this);">
<input type="button" name="checkedNames" value="Select All single" onclick="selectsingle();">
</form>

</body>
</html>
0
 
jaxkewlAuthor Commented:
your code works, but when i tried to use it in my jsp page i get an error that says
document.getElementsByTagName is not a function.
0
 
jaxkewlAuthor Commented:
do DOM methods and and attributes not work for jsp, but only for html?
0
 
archrajanCommented:
u shud post ur view source to see what went wrong there
0
 
jaxkewlAuthor Commented:
here is the code that i used that worked with my jsp, i changed it around to match our example.

function selectSingle()
{
  var checkBox = window.document.testForm.checkedNames;
  var single = window.document.testForm.isSingle;

  for (i=0; i < single.length; i++)
  {
    if (single[i].value == "true")
      checkBox[i].checked = true;
    else
      checkBox[i].checked = false;
  }
}


pretty simple javascript. the trick was using a html:hidden tag around the data that we wanted to get at later. i referenced it with an id tag of id=isSingle. Thanks for the help. Im awarding you the points.
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 8
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now