Advertisement

08.21.2008 at 10:25AM PDT, ID: 23667717
[x]
Attachment Details
[x]
The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

  • The Grade of the Solution
  • The Zone Rank of the Expert Providing the Solution
  • The Number of Author and Expert Comments
  • The Number of Experts Contributing
  • The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!
9.2

Traversing through a row and making an element inside it invisivble/disabled using javascipt

Asked by Ashwin_shastry in JavaScript, C# Programming Language, JavaScript Frameworks

Tags: ,

Hello,

Iam a novice in Javascript and would like to achieve the follwing with your help.

I have a dynamic form which generates questions and answers. A question may or may not have a subquestion.

Depending on the answer to the main question I would display the subquestion.

Now the problem Iam facing is the following

Lets take a question and answer sample

1)   Do you want to display the Secondary Question   (This would be the Primary Question)
          RadioButtonList -> YES  NO                                (This would be the Primary Answer)
            ( Required field Validator Control on the Primary answer which tells the user that u need to answer this question )

Now based on the answer to the Primary Question , If the answer is YES then a new row would display liek below

2) This is the Secondary Question (Secondary Question)
      This is the Secondary Answer ( Secondary Answer )
         ( Required field Validator Control on the Secondary answer which tells the user that u need to answer this Secondary question )

***** I have attached the HTML code snippet tooo for reference ************

Now when the user asnwers the Primary question with a YES then the row ID of the row which contains the secondary question and answer is passed to a javascript function which then makes the display style in line and the user then sees the secondary row with the secondary question and answer.

***** I have attached the Javsscript code snippet tooo for reference ************

Now the problem is since this a dynamic control , I wouldnt know till runtime if the secondary answer is required or not. In case where the secondary answer is required,  this is what happens.

Say suppose the user answers by clicking on the NO of Primary answer radio button list. Since the user clicked a NO the secondary question would not be shown (style = display:none for the row)

but when the user presses the submit button  nothing happens cus althouhg the secondary question answer row is invisible to the user , it is still there on the html page and the required field validator is still expecting the answer to the secondary question.

Hence , since in the javascript which receieves the ID of the secondary row , I would like to traverse this row and find the required field validator and disable it so that it wouldnt work when the row is invisible so that the user can submit the form.

I would suggest if you could copy paste the html code and the javascript  in an aspx or html form to get a better understanding.

So basically i would need to traverse a row for its elements given the row ID , find the required field validator and disable it when the row is not visible.

Can this be done ??

Hoping for some help ASAP.

THanks in advance.
Ashwin











   





Start Free Trial 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:

HTML:
 
      <table border=0 width=100% >                   
                    <tr> 
                        <td colspan="2"> 
                            <table border=0  width="100%"> 
                                <tr> 
                                    <td class="norm" width="100%">
                                        <span id="ctl00_ContentPlaceHolder1_QuestionRepeater1_rptQuestions_ctl00_PrimaryQuestion" style="font-weight:bold;">Was a warning announced prior to going to Xtreme?</span>
                                    
                                    </td> 
                                </tr> 
                                <tr> 
                                    <td class="norm"  width="100%" > 
                                         <table id="ctl00_ContentPlaceHolder1_QuestionRepeater1_rptQuestions_ctl00_PrimaryRbList" class="norm" border="0">
	                                        <tr>
		                                        <td>
		                                           <input id="ctl00_ContentPlaceHolder1_QuestionRepeater1_rptQuestions_ctl00_PrimaryRbList_0" type="radio" name="ctl00$ContentPlaceHolder1$QuestionRepeater1$rptQuestions$ctl00$PrimaryRbList" value="30" onclick="javascript:DisplayDependentQuestion(&quot;ctl00_ContentPlaceHolder1_QuestionRepeater1_rptQuestions_ctl00_DependentQuestionAndAnswerRow&quot;,'Show');" />
		                                           <label for="ctl00_ContentPlaceHolder1_QuestionRepeater1_rptQuestions_ctl00_PrimaryRbList_0">Yes</label>
		                                         </td>
		                                         <td>
		                                            <input id="ctl00_ContentPlaceHolder1_QuestionRepeater1_rptQuestions_ctl00_PrimaryRbList_1" type="radio" name="ctl00$ContentPlaceHolder1$QuestionRepeater1$rptQuestions$ctl00$PrimaryRbList" value="31" onclick="javascript:DisplayDependentQuestion(&quot;ctl00_ContentPlaceHolder1_QuestionRepeater1_rptQuestions_ctl00_DependentQuestionAndAnswerRow&quot;,'Hide');" />
		                                            <label for="ctl00_ContentPlaceHolder1_QuestionRepeater1_rptQuestions_ctl00_PrimaryRbList_1">No</label>
		                                         </td>
	                                        </tr>
	                                     </table>  
	                                     <span id="ctl00_ContentPlaceHolder1_QuestionRepeater1_rptQuestions_ctl00_ctl00" style="color:Red;visibility:hidden;">Must select at least one choice</span>  
                                     </td> 
                                </tr> 
                            </table> 
                        </td> 
                    </tr> 
                    <tr id="ctl00_ContentPlaceHolder1_QuestionRepeater1_rptQuestions_ctl00_DependentQuestionAndAnswerRow" style="display:none">
	                <td>
	                   <table border="0">
		                    <tr>
			                    <td colspan="2">
			                        <table border="0">
				                        <tr>
					                        <td><span id="ctl00_ContentPlaceHolder1_QuestionRepeater1_rptQuestions_ctl00_lblDependentQuestion_33" class="norm">If Yes, who made the announcement ?</span></td>
				                        </tr>
				                        <tr>
					                        <td>
					                            <textarea name="ctl00$ContentPlaceHolder1$QuestionRepeater1$rptQuestions$ctl00$DependentTextArea_33" rows="2" cols="20" id="ctl00_ContentPlaceHolder1_QuestionRepeater1_rptQuestions_ctl00_DependentTextArea_33" style="height:130px;width:400px;"></textarea>
					                            <span id="ctl00_ContentPlaceHolder1_QuestionRepeater1_rptQuestions_ctl00_ctl04" style="color:Red;visibility:hidden;">This question needs to be Answered !!</span>
					                         </td>
				                        </tr>
				                        <tr>
					                        <td style="height:15px;"></td>
				                        </tr>
			                        </table>
			                  </td>
		                    </tr>	                   
	                    </table>
	               </td>
                 </tr>                             
      </table> 
 
 
 
JavaScript Function: 
 
function DisplayDependentQuestion(DependentQuestionRow,value) 
{ 
    if(value == 'Show') 
    {
        var tbl = document.getElementById(DependentQuestionRow); 
        tbl.style.display=''; 
    }
    else 
    {
        var tbl1 = document.getElementById(DependentQuestionRow); 
        tbl1.style.display='none'; 
    } 
}
Attachments:
 
Question.JPG (112 KB) (File Type Details) 
Image which shows what is being described in the question
Image which shows what is being described in the question
 
[+][-]08.22.2008 at 01:14AM PDT, ID: 22287745

Assisted solutions are selected by the member who asked the question as a comment that contributed to their question's solution.

Start your 7-day free trial to view this Assisted Solution or ask the Experts your question.

 
[+][-]08.25.2008 at 01:47PM PDT, ID: 22309119

View this solution now by starting your 7-day free trial. Setting up your free trial is quick, easy, and secure. We will return you to this solution, unlocked, when you're done.

 

About this solution

Zones: JavaScript, C# Programming Language, JavaScript Frameworks
Tags: Javascript, IE 6 and 7
Sign Up Now!
Solution Provided By: b0lsc0tt
Participating Experts: 4
Solution Grade: A
 
 
[+][-]09.13.2008 at 09:42AM PDT, ID: 22468194

At Experts Exchange, members can ask their questions to thousands of technology professionals, also known as Experts. Experts compete and collaborate to answer those questions by leaving comments like this one.

Start your 7-day free trial to view this Expert Comment or ask the Experts your question.

 
 
Loading Advertisement...
20081112-EE-VQP-42 / EE_QW_2_20070628