Solved

Pre-populate Element

Posted on 2013-06-29
2
275 Views
Last Modified: 2013-07-16
Hi All,

I have a form that is populated from a list.  Here is a piece of the form:
form
If the AOT Designator is "Yes", the "CompletionDate" and "showCompletionDatelabel" are supposed to display but they are not.

Here is an excerpt of the code:

					<tr>
									<td style="width: 313px;font-weight:bold" class="bgColor">AOT Designator</td>
									<td class="bgColorElement">
										<select name="AotDesignator" id="drpdAotDesignator">
											<option value=""></option>
											<option value="Yes">Yes</option>
											<option value="No">No</option>
										</select>
									</td>
					</tr>					
					
					<tr>
									<td style="width: 313px;font-weight:bold" class="bgColor"><span style="display:none" id="showCompletionDatelabel">
									Completion Date</span></td>
									<td class="bgColorElement">
									<span style="display:none" id="showCompletionDate">
										<input type="text" name="txtCompletionDate" id="CompletionDate">
									</span>
									</td>
					</tr>



$(xData.responseXML).find("z\\:row").each(function() 
	{  
        var Designator = $(this).attr("ows_AOTDesignator");
		$("#drpdAotDesignator").val(Designator);
		alert(Designator);
		if(Designator == "Yes")
		{
			alert("Yes Again");
			$("#showCompletionDate").css("display", "block");
			$("#showCompletionDatelabel").css("display", "block");			
		}
	}

Open in new window

0
Comment
Question by:Isaac
2 Comments
 
LVL 15

Assisted Solution

by:Jagadishwor Dulal
Jagadishwor Dulal earned 250 total points
ID: 39287776
I have slightly changed your table see the function you may add it in your existing
<script>
$(document).ready(function() {
$('#drpdAotDesignator').change(function(){
var Designator=$('#drpdAotDesignator').val();
		if(Designator =='Yes'){
			alert("Yes Again");
			$("#showCompletionDate").css("display", "block");
		}
	})
});
</script>                                  

Open in new window


And the table html is:
<tr>
									<td style="width: 313px;font-weight:bold" class="bgColor">AOT Designator</td>
									<td class="bgColorElement">
										<select name="AotDesignator" id="drpdAotDesignator">
											<option value=""></option>
											<option value="Yes">Yes</option>
											<option value="No">No</option>
										</select>
									</td>
					</tr>					
					
					<tr id="showCompletionDate" style="display:none">
									<td class="bgColor">
                                  
									Completion Date</td>
									<td class="bgColorElement">
										<input type="text" name="txtCompletionDate" id="CompletionDate">
									</td>
					</tr>

Open in new window

0
 
LVL 4

Accepted Solution

by:
ramyajanarthanan earned 250 total points
ID: 39289719
Alternatively,You can use show() or hide() too...

$("#showCompletionDate").show();

You can similarly code for any number of div or tables,list items etc.,to show and hide based on the conditions.
0

Featured Post

The Eight Noble Truths of Backup and Recovery

How can IT departments tackle the challenges of a Big Data world? This white paper provides a roadmap to success and helps companies ensure that all their data is safe and secure, no matter if it resides on-premise with physical or virtual machines or in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

733 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