Log in

View Full Version : how to get related values in textarea using javascript


vsiddi
07-09-2011, 07:34 AM
Hi friends,

i have xnl file like


<DATAPACKET >
<data1>
<R_ID>101</R_ID>
<R_PRE>38</R_PRE>
<R_PRE2>39</R_PRE2>
<R_TEMP>8.35</R_TEMP>
<R_TENP2>0.64</R_TENP2>
</data1>
<data1>
<R_ID>102</R_ID>
<R_PRE>36</R_PRE>
<R_PRE2>37</R_PRE2>
<R_TEMP>7.23</R_TEMP>
<R_TENP2>1.21</R_TENP2>
</data1>
<data1>
<R_ID>103</R_ID>
<R_PRE>34</R_PRE>
<R_PRE2>36</R_PRE2>
<R_TEMP>7.21</R_TEMP>
<R_TENP2>1.95</R_TENP2>
</data1>
<data1>
<R_ID>104</R_ID>
<R_PRE>32</R_PRE>
<R_PRE2>35</R_PRE2>
<R_TEMP>6.25</R_TEMP>
<R_TENP2>2.30</R_TENP2>
</data1>
<data1>
<DATAPACKET >

then i have textbox...when i type 101 its go and get all data in the
row in text area like

101
32
6025
2.30

please give me any idea how to do this

i m try this

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera,
Safari
xmlhttp = new XMLHttpRequest();
}

else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.open("GET", "Refrigerater.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
x = xmlDoc.getElementsByTagName("ROWDATA");

//x = xmlDoc.getElementsByTagName("data1");

function displayInfo(selBox) {
x = xmlDoc.getElementsByTagName("ROWDATA");
var col = (selBox.options[selBox.selectedIndex].text);
document.getElementById("show").innerHTML = "&nbsp;" + col;

}

Please resolve my problem

Thanks
Venkat.S
jscheuer1
07-09-2011, 10:23 PM
That's not a valid xml file - I assume you mean xml, not xnl. And it has no ElementsByTagName("ROWDATA") in it.

Not to be daunted, I fixed up the xml file:

refrigerator.xml:

<DATAPACKET>
<data1>
<R_ID>101</R_ID>
<R_PRE>38</R_PRE>
<R_PRE2>39</R_PRE2>
<R_TEMP>8.35</R_TEMP>
<R_TENP2>0.64</R_TENP2>
</data1>
<data1>
<R_ID>102</R_ID>
<R_PRE>36</R_PRE>
<R_PRE2>37</R_PRE2>
<R_TEMP>7.23</R_TEMP>
<R_TENP2>1.21</R_TENP2>
</data1>
<data1>
<R_ID>103</R_ID>
<R_PRE>34</R_PRE>
<R_PRE2>36</R_PRE2>
<R_TEMP>7.21</R_TEMP>
<R_TENP2>1.95</R_TENP2>
</data1>
<data1>
<R_ID>104</R_ID>
<R_PRE>32</R_PRE>
<R_PRE2>35</R_PRE2>
<R_TEMP>6.25</R_TEMP>
<R_TENP2>2.30</R_TENP2>
</data1>
</DATAPACKET>

And, using jQuery made up this page to select its contents to a textarea based upon the R_ID values:

fridge.htm:

<!DOCTYPE html>
<html>
<head>
<title>Data from XML file to Textarea</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('#fridges').change(function(){
var v = this.value, r = '';
$.ajax({
url: 'refrigerator.xml',
success: function(data){
$(data).find('R_ID:contains("' + v + '")').parent().children().each(function(){
r += $(this).text() + '\n';
});
$('#target').val($.trim(r));
}
});
}).change();
});
</script>
<style type="text/css">
textarea {
overflow: hidden;
}
</style>
</head>
<body>
<textarea id="target" cols="20" rows="5"></textarea><br>
<select id="fridges">
<option value="101">Fridge #1</option>
<option value="102">Fridge #2</option>
<option value="103">Fridge #3</option>
<option value="104">Fridge #4</option>
</select>
</body>
</html>

Demo:

http://home.comcast.net/~jscheuer1/side/xml_data_ajax/fridge.htm
vsiddi
07-13-2011, 12:31 PM
But i am using heare text box not (select options)


when i entered textbox value thats matching and display related values ............


any one have idea
jscheuer1
07-13-2011, 05:32 PM
Oh, you did kind of say that. What threw me off was this from your original code:



var col = (selBox.options[selBox.selectedIndex].text);

You can only have that with a select.

You really are better off with a select. That way you can ensure that only available records may be selected. You could even populate the select's options from the xml file. That way as long as the file were valid, the possible choices would be too.

That said, here it is with a text box:


<!DOCTYPE html>
<html>
<head>
<title>Data from XML file to Textarea</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$('#fridges').submit(function(e){
e.preventDefault();
var v = this.elements.thefridge.value, $tel, r = '', tn, found = false;
$.ajax({
url: 'refrigerator.xml',
cache: false,
success: function(data){
$(data).find('R_ID:contains("' + v + '")').each(function(){
if($.trim(($tel = ($(this))).text()) === v){
$tel.parent().children().each(function(){
r += (tn = this.tagName).substring(2, 3) + tn.substring(3).toLowerCase() + '\t: ' + $(this).text() + '\n';
});
$('#target').val($.trim(r));
found = true;
return false; // finds first and only first exact R_ID tag match
}
});
if(!found){
alert('Record for Id#: ' + v + ' not found!');
$('#target').val('Record Not Found');
}
}
});
}).submit();
});
</script>
<style type="text/css">
textarea {
overflow: hidden;
}
</style>
</head>
<body>
<form id="fridges" action="#">
Enter Record #: <input type="text" name="thefridge" value="101"> <input type="submit" value="Go"><br>
<textarea id="target" cols="20" rows="5" readonly></textarea>
</form>
</body>
</html>

Demo:

http://home.comcast.net/~jscheuer1/side/xml_data_ajax/fridge_3.htm