I'm just learning jQuery and I've been able to get the following code working:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8"></script>
</head>
<body>
<header>
<h1></h1>
</header>
<form name="myForm" method="GET" action="">
Text Field Populated With XML Value.</br>
<input type="text" id="text1" name="text1" />
</br></br>
Dropdown Populated With XML Data.</br>
<select id="cdLDAP">
<option/>
</select>
</form>
</div>
<script type="text/javascript">
// variables declaration
var XML_PATH = "XML/ou.xml";
// load XML file
$(function() {
$.ajax({
type: "GET",
url: XML_PATH,
dataType: "xml",
success: function(xml) {
$(xml).find('LDAP').find('OU').each(function(i) {
var ou = $(this).text();
$('#cdLDAP').append("<option class='ddheader'>"+ou+"</option>");
});
$(this).find('Name').each(function() {
var name = $(this).text();
$('#cdLDAP').append("<option class='ddindent' value='"+ name +"'>"+name+"</option>");
});
}
});
});
</script>
</body>
</html>
This works great; it is able to read the following XML:
<?xml version= "1.0" encoding="UTF-8"?>
<DropDown>
<LDAP>
<OU>1</OU>
<OU>2</OU>
<OU>3</OU>
<OU>4</OU>
<OU>5</OU>
<OU>6</OU>
<OU>7</OU>
</LDAP>
</DropDown>
And it displays the values 1,2,3,4,5,6,7 in the dropdown cdLDAP with no problems.
So far so good.
The problem I'm having is populating a simple text file...in this case:
<input type="text" id="text1" name="text1" />
Say I just want the first value from the xml file, namely the "1" from:
<OU>1</OU>
to be displayed in the text field on the HTML5 form. How do I do that? Nothing I've tried seems to work. I think I'm getting confused with the .each part, as in .each(function(i) and also what to put for
$('#text1').append(
2 Answers 2
Input elements behave slightly differently from other HTML elements. Instead of trying to insert the value into its HTML, you need to modify the value property of the element.
This can be accomplished using jQuery:
$('#text1').val(...)
or just plain old DOM property reassignment:
$('#text1')[0].value = ...
Comments
If your looking to set the value of #text1 to the first OU value then you could use the .index() method to determine which :eq is present. Just remember that .index() is 0 based values so we would be looking for $('OU:eq(0)'):
$(xml).find('LDAP').find('OU').each(function(i) {
var ou = $(this).text();
if($(this).index()==0){
$('#text1').val(ou)
}
$('#cdLDAP').append("<option class='ddheader'>"+ou+"</option>");
});
or you could use:
success: function(xml) {
$('#text1').val( $(xml).find('LDAP').find('OU:eq(0)').text() )
// rest of code
}