Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

convert function elements to an array 1

Status
Not open for further replies.

evr72

MIS
Dec 8, 2009
265
US
Hello,

I came across a javascript that let's you hide fields depending on the answer from a drop down box. This works great, I was wondering if there is a way to turn the function into an array. I would like to implement it in my asp script

I think this is the code that would be an array, since the "position_other" is my variable in my aspcode
(I can make the "position_other" do "position_other1", "position_other2" and so on in my asp code

Code:
document.getElementById('position_other').style.display="block";

	}
	else
	{
		document.getElementById('position_other').style.display="none";

This is the whole code for the dropdown and hide field

Code:
<script type="text/javascript">
function checkToShowFormField(ddObj)
{
	if(ddObj.value=="Other")
	{
		document.getElementById('position_other').style.display="block";

	}
	else
	{
		document.getElementById('position_other').style.display="none";

	}
}
</script>
 
<p> </p>
<table width="100%" border="0">
  <tr>
    <td width="28%"><select name="position" class="admindropdowns" id="position" onChange="checkToShowFormField(this);">
      <option value="Manager">Manager</option>
      <option value="Early Years Professional Deputy">Early
      Years
      Professional
      Deputy</option>
      <option value="Supervisor/Leader">Supervisor/Leader</option>
      <option value="Assistant">Assistant</option>
      <option value="Volunteer">Volunteer</option>
      <option value="Apprentice">Apprentice</option>
      <option value="Other">Other</option>
    </select></td>
    <td width="14%"><input name="position_other" type="text" class="admintextboxes" style="display:none;" id="position_other" value="" /></td>
      </div></td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td><div align="left"></div></td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td><div align="left"></div></td>
  </tr>
</table>
<p>
  
</p>
 
I did not see Orrin77 post. the code that I found it is pretty much like the one Orrin77's has. I need to do the same as what vacunita suggested but is there a way to add more fields to show or hide? with the current code I could do this
Code:
<script type="text/javascript">
function checkToShowFormField(ddObj)
{
    if(ddObj.value=="Other")
    {
        document.getElementById('position_other').style.display="block";
document.getElementById('position_other1').style.display="block";
document.getElementById('position_other2').style.display="block";



    }
    else
    {
        document.getElementById('position_other').style.display="none";
document.getElementById('position_other1').style.display="none";
document.getElementById('position_other2').style.display="none";



    }
}
</script>

is there a way to do the same using vacunita's code?
Code:
<script>
function show_textbox(myvalue){
var a = document.getElementById(myvalue.value);
(myvalue.options[myvalue.selectedIndex].text == 'Other')? a.style.display = 'block' : 

a.style.display = 'none';

}
</script>

any help is always appreciated Thanks!!
 
I don't quite understand what it is you want to do.

I mean a function and an array are 2 completely different constructs and you can't turn one into another.

You could have a function that manipulates an array in some way, but you can't change a function to an array.

Do you have several objects with a similar ID that you want to hide?

For instance:

Code:
<div id="obj1">
</div>

<div id="obj2">
</div>

<div id="obj3">
</div>



<div id="other1">
</div>

<div id="other2">
</div>

<div id="other3">
</div>

And you would want to hide all obj1 - 3 divs and show all other1 - 3 divs together?

Like grouping them together and hiding and showing them at the same time?




----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
vacunita,

sorry for the confusion, what I am trying to accomplish is simmilar of what you describe.

I build a form with asp that has 5 question fields, and around 7 answer fields. All in the same row. All my questions are dynamic. One of the questions has a drop down box. I can serialize the dropdown name. so I could do something like this with the JavaScript
Code:
script type="text/javascript">
function checkToShowFormField(ddObj)
{
    if(ddObj.value=="Other")
    {
        document.getElementById('position_other').style.display="block";
document.getElementById('position_other1').style.display="block";
document.getElementById('position_other2').style.display="block";



    }
    else
    {
        document.getElementById('position_other').style.display="none";
document.getElementById('position_other1').style.display="none";
document.getElementById('position_other2').style.display="none";



    }
}
</script>

And the ansers input would be something like this
Code:
<td width="14%"><input name="position_other" type="text" class="admintextboxes" style="display:none;" id="position_other" value="" /></td>

<td width="14%"><input name="position_other1" type="text" class="admintextboxes" style="display:none;" id="position_other1" value="" /></td>

<td width="14%"><input name="position_other2" type="text" class="admintextboxes" style="display:none;" id="position_other2" value="" /></td>

The problem doing the JavaScript this way is that I don't know how many questions there might be. It could be 10 or it could be 200. If there were 200 or more the JavaScript would be something like this

Code:
script type="text/javascript">
function checkToShowFormField(ddObj)
{
    if(ddObj.value=="Other")
    {
        document.getElementById('position_other').style.display="block";
document.getElementById('position_other1').style.display="block";
document.getElementById('position_other2').style.display="block";
document.getElementById('position_other3').style.display="block";
document.getElementById('position_other4').style.display="block";
and so on...

is there a way to use the asp dropdown name variable?
I lookde at your code and I thought it could be possible?

Code:
<script>
function show_textbox(myvalue){
var a = document.getElementById(myvalue.value);
(myvalue.options[myvalue.selectedIndex].text == 'Other')? a.style.display = 'block' : 

a.style.display = 'none';

}
</script>
 
Let see if I got this now: So based on a selection from a drop down you want to show or hide a group of textboxes that could be over 100 of them that are generated dynamically?

You can give your texboxes a name from your asp code the same name to all the textboxes, and then use getElementsByName to get an array of all the elements that have that name.

The code you referr to posted is basically just an IF statement written slightly differently. It looks to see if the text of the selected option in a drop down is set to "Other", and then displays a textbox or hides it based on that.

But its just operating on a single drodown and a single textbox.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
vacunita,

each row has a drop down. If user selects "Other" on row 1 it will show a number of fields, if the user does not select "other" in row two it will not show the fields and so on.

like I mention before each row has 5 question fields, and around 7 answer fields.

So if I were to follo the advice wouldn't that hide all my fields in all the rows or show them if the user selects "Other"
 
I think I get it now.

Each row has a drop down

When the "Other" option is selected from a dropdown, you want to be able to show a number of fields that correspond to that row. But don't want to show or hide any fields that may correspond to another row correct?

If so, you would want to name your hideable/showable set of fields to something specific to the row they are in.

For instance:
name="row1fields"

then for your other rows:

name="row2fields"

name="row3fields"

etc...

All fields in that row should have the same name so you can target them.

Then since you want to only call a single function, you would want to pass the parameter of which row this is happening on.

Row 1 <select onChange="myfunction(this,'row1');">

Row 2 <select onChange="myfunction(this,'row2');">

Row 3 <select onChange="myfunction(this,'row3');">


Code:
<script>
function myfunction(dropdown,rowIndex){
 var fieldsname=rowIndex + "fields";
 var showablefields=document.getElementsByName(fieldsname);  [green]\\get all the fields for a particular row[/green]
 if(dropdown.value=="other"){
 var myIndex="";
 for(myIndex in showablefields){ [green]\\Loop through the fields[/green]
 showablefields.style.display="block"; [green]\\Change their display to be shown[/green]
 }

 }

}
</script>

Something like that maybe?

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
vacunita I tried the above suggestion but no luck
when I choose "Other" from my drop down, nothing happens
Code:
<script>
function myfunction(dropdown,rowIndex){
 var fieldsname=rowIndex + "fields";
 var showablefields=document.getElementsByName(fields);  \\get all the fields for a particular row
 if(dropdown.value=="Other"){
 var myIndex="";
 for(myIndex in showablefields){ \\Loop through the fields
 showablefields.style.display="block"; \\Change their display to be shown
 }

 }

}
</script>

 
<p>&nbsp;</p>
<table width="100%" border="0">
  <tr>
    <td width="28%"><select name="position" class="admindropdowns" id="position" onChange="myfunction(this);">
      <option value="Manager">Manager</option>
      <option value="Early Years Professional Deputy">Early
      Years
      Professional
      Deputy</option>
      <option value="Supervisor/Leader">Supervisor/Leader</option>
      <option value="Assistant">Assistant</option>
      <option value="Volunteer">Volunteer</option>
      <option value="Apprentice">Apprentice</option>
      <option value="Other">Other</option>
    </select></td>
    <td width="14%"><input name="position_other" type="text" class="admintextboxes" style="display:none;" id="position_other" value="" /></td>
    <td width="15%">
	
	<input name="position_other1" type="text" class="admintextboxes" style="display:none;" id="position_other1" value="" />
	</td>
    <td width="43%">
      <div align="left">
        
		<input name="position_other2" type="text" class="admintextboxes" style="display:none;" id="position_other2" value="" />
      </div></td>
  </tr>
  <tr>
    <td><select name="position" class="admindropdowns" id="position" onChange="myfunction(this);">
      <option value="Manager">Manager</option>
      <option value="Early Years Professional Deputy">Early
      Years
      Professional
      Deputy</option>
      <option value="Supervisor/Leader">Supervisor/Leader</option>
      <option value="Assistant">Assistant</option>
      <option value="Volunteer">Volunteer</option>
      <option value="Apprentice">Apprentice</option>
      <option value="Other">Other</option>
    </select></td>
    <td width="14%"><input name="position_other" type="text" class="admintextboxes" style="display:none;" id="position_other" value="" /></td>
    <td width="15%">
	
	<input name="position_other1" type="text" class="admintextboxes" style="display:none;" id="position_other1" value="" />
	</td>
    <td width="43%">
      <div align="left">
        
		<input name="position_other2" type="text" class="admintextboxes" style="display:none;" id="position_other2" value="" />
      </div></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td><div align="left"></div></td>
  </tr>
</table>
<p>
  
</p>
 
It was just an example, you would have to adapt it to your field names and code. not expect it to just work out of the box.

Also, I just wrote it straight into the reply box, I'd shocked if there isn't some minor error in that code.











----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
vacunita,
sorry if I misscommunicated, I was not intending for you to write the whole code. I should have explained a bit better. I did try to modify to my fields but did not seem to work I changed the
Code:
 function myfunction(dropdown,rowIndex){
to
Code:
function myfunction(position,rowIndex){
also the
Code:
if(dropdown.value=="other"){
to
Code:
if(position.value=="Other"){

Again sorry for the misscommunication and I really appreciate the help and advice
 
I was using fields with names like "row2fields", "row3fields", you have names like "position_other1", "position_other2' etc.. that would need to change.

Because there is no way to determine which of those belongs to which row, you would need to add some type of row identification to the name. Otherwise there's no way to tell, and no way to show or hide the correct ones if they are all named the same.

I was using the "rowX" part of the name to idenfitfy which row the fields belong to.





----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
vacunita,

I can give every field a secuential number or id. for example in asp I could do something like

Code:
<% for i = 1 to 1000 response.write  "myfield" & i next %>
I was wondering if I could do the same with the script
Code:
<script type="text/javascript">
function checkToShowFormField(ddObj)
{
    if(ddObj.value=="Other")
    {
        document.getElementById('position_other').style.display="block";
document.getElementById('position_other1').style.display="block";
document.getElementById('position_other2').style.display="block";



    }
    else
    {
        document.getElementById('position_other').style.display="none";
document.getElementById('position_other1').style.display="none";
document.getElementById('position_other2').style.display="none";



    }
}
</script>
 
You can, but as I said you need someway to determine which row they belong too. Which is why I suggested you add some sort of row id to the textbox id at the very least.

Using the code from your link, and if you can make your ASP generate the textboxes with an id in the form of row[red]X[/red]position_other[red]Y[/red]

where X is the row number, and Y is the text box number. you could do something like this.

If you run it you'll see how it works. but you will need to change your code for the Ids to make it work. Hopefully this should at least give you an idea of how it can work based o your own code.

Code:
<script>
function checkToShowFormField(dropdown,rowId){

  var boxNames=rowId + "position_other";
  var boxesYes=new Array();
  var boxesNo=new Array();


  boxesYes[0]=document.getElementById(boxNames + "1");
  boxesYes[1]=document.getElementById(boxNames + "2");
  boxesYes[2]=document.getElementById(boxNames + "3");

  boxesNo[0]=document.getElementById(boxNames + "4");
  boxesNo[1]=document.getElementById(boxNames + "5");
  var x="";
  if(dropdown.value=="yes"){
    for( x in boxesYes){
      boxesYes[x].style.display='inline';
    }

    boxesNo[0].style.display='none';
    boxesNo[1].style.display='none';
  }


  else if(dropdown.value=="no"){
    for( x in boxesYes){
      boxesYes[x].style.display='none';

    }

    boxesNo[0].style.display='inline';
    boxesNo[1].style.display='inline';
  }


  else{
    for(x in boxesYes){
      boxesYes[x].style.display='none';    
    }
      boxesNo[0].style.display='none';
      boxesNo[1].style.display='none';

  }

}


</script>


<div style="border:1px solid #DDDDDD; height:40px; padding-top:16px; padding-bottom:auto;">
<select name="position" class="admindropdowns" id="position" 

onChange="checkToShowFormField(this,'row1');">
      <option value=""></option>

      <option value="no">No</option>
      <option value="yes">Yes</option>
    </select>
|

<input name="row1position_other1" type="text" class="admintextboxes" style="display:none;" 

id="row1position_other1" value="">
<input name="row1position_other2" type="text" class="admintextboxes" style="display:none;" 

id="row1position_other2" value="" />
<input name="row1position_other3" type="text" class="admintextboxes" style="display:none;" 

id="row1position_other3" value="" />


<input name="row1position_other_N" type="text" class="admintextboxes" style="display:none;" 

id="row1position_other4" value="">
<input name="row1position_other_N" type="text" class="admintextboxes" style="display:none;" 

id="row1position_other5" value="" />

</div>
<br>

<div style="border:1px solid #DDDDDD; height:40px; padding-top:16px; padding-bottom:auto">
<select name="position" class="admindropdowns" id="position" 

onChange="checkToShowFormField(this, 'row2');">
      <option value=""></option>

      <option value="no">No</option>
      <option value="yes">Yes</option>
    </select>
|

<input name="row2position_other1" type="text" class="admintextboxes" style="display:none;" 

id="row2position_other1" value="">
<input name="row2position_other2" type="text" class="admintextboxes" style="display:none;" 

id="row2position_other2" value="" />
<input name="row2position_other3" type="text" class="admintextboxes" style="display:none;" 

id="row2position_other3" value="" />


<input name="row2position_other3" type="text" class="admintextboxes" style="display:none;" 

id="row2position_other4" value="">
<input name="row2position_other4" type="text" class="admintextboxes" style="display:none;" 

id="row2position_other5" value="" />

</div>

<br>

<div style="border:1px solid #DDDDDD; height:40px; padding-top:16px; padding-bottom:auto">
<select name="position" class="admindropdowns" id="position" 

onChange="checkToShowFormField(this, 'row3');">
      <option value=""></option>

      <option value="no">No</option>
      <option value="yes">Yes</option>
    </select>
|

<input name="row3position_other0" type="text" class="admintextboxes" style="display:none;" 

id="row3position_other1" value="">
<input name="row3position_other1" type="text" class="admintextboxes" style="display:none;" 

id="row3position_other2" value="" />
<input name="row3position_other2" type="text" class="admintextboxes" style="display:none;" 

id="row3position_other3" value="" />


<input name="row3position_other3" type="text" class="admintextboxes" style="display:none;" 

id="row3position_other4" value="">
<input name="row3position_other4" type="text" class="admintextboxes" style="display:none;" 

id="row3position_other5" value="" />

</div>

You can keep adding rows and the function will continue to work. If you have more than 2 fields for a no answer you might want to change it so it loops through the boxesNo array like I did with the boxesYes array.





----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Mr. Vacunita!!!!!

I really appreciate all the help I modified my code and it works great!!!!

Thank you!!
 
Glad I could help and call me Phil.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.
 
Tank you Phil!!!!!! I tried to give you another star but it only allows me one!!!
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top