Results 1 to 4 of 4

Thread: how to get related values in textarea using javascript

  1. #1
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default how to get related values in textarea using javascript

    Hi friends,

    i have xnl file like

    Code:
    <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
    Code:
    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
    Last edited by jscheuer1; 07-09-2011 at 02:03 PM. Reason: format code

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:
    Code:
    <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:
    HTML Code:
    <!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/s...jax/fridge.htm
    Last edited by jscheuer1; 07-10-2011 at 06:23 AM. Reason: code change to format text for IE in live installation (.each())
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Oh, you did kind of say that. What threw me off was this from your original code:

    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:

    Code:
    <!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/s...x/fridge_3.htm
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •