Results 1 to 5 of 5

Thread: Need to show output as HTML

  1. #1
    Join Date
    Oct 2012
    Posts
    180
    Thanks
    22
    Thanked 1 Time in 1 Post

    Default Need to show output as HTML

    I have this script and I'd really like to show the results as an HTML output. Not sure how to do this myself. I know it can be done with innerHTML. Or maybe there's a better way. Hope you can help. As long as the script can read tags. Thanks!!

    Code:
    (function(d) {
    
    	function nodeFlush(e) {
    		while (e.firstChild) e.removeChild(e.firstChild);
    	}
    
    	function nodeAdd(e, node) {
    		e.appendChild(typeof node == 'object' ? node : d.createTextNode(node));
    	}
    
    	function nodeReplace(e, node) {
    		nodeFlush(e);
    		nodeAdd(e, node);
    	}
    
    	function eventAdd(e, eventName, handler) {
    		if (e.addEventListener) e.addEventListener(eventName, handler, false);
    			else e.attachEvent('on' + eventName, handler);
    	}
    
    	var
    		target = d.getElementById('selections'),
    		output = d.getElementById('selectionsResults'),
    		inputs = target.getElementsByTagName('input');
    
    	function checkInputs() {
    		var result = [];
    		for (var i = 0; i < inputs.length; i++) {
    			if (inputs[i].checked) result.push(inputs[i].value);
    		}
    		nodeReplace(output, result.length ? result.join('<br>') : '0');
    
    	}
    
    	for (var i = 0; i < inputs.length; i++) {
    		eventAdd(inputs[i], 'change', checkInputs);
    		eventAdd(inputs[i], 'click', checkInputs);
    	}
    
    	checkInputs();
    
    })(document);

    This is the script if you want to see what it currently does: http://jsfiddle.net/T5Pm7/180/
    Last edited by qwikad.com; 09-08-2015 at 11:32 AM.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    I'd really like to show the results as an HTML output
    Its doing that already - the checked checkbox values are being added to the DOM inside <span id="selectionsResults"></span>

    As long as the script can read tags.
    What do you mean by this?

    Additionally, it might help if you show what you want the resulting HTML output to be.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Oct 2012
    Posts
    180
    Thanks
    22
    Thanked 1 Time in 1 Post

    Default

    Sorry if I wasn't clear. I want it to convert tags as if it's an HTML page. Currently, it show tags like <b>a</b>. It should show b. (HTML markup that is). Hope this clarifies.

    This is the script if you want to see what it currently does: http://jsfiddle.net/T5Pm7/180/
    Last edited by qwikad.com; 09-07-2015 at 04:26 PM.

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,881
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default

    Quote Originally Posted by qwikad.com View Post
    Sorry if I wasn't clear. I want it to convert tags as if it's an HTML page. Currently, it show tags like <b>a</b>. It should show b. (HTML markup that is). Hope this clarifies.
    This does what you want:
    Code:
    <form method="get">
    <div id="selections">
    <input type="checkbox"  value="<b>a</b>">First<br>
    <input type="checkbox"  value="<i>b</i>">Second<br>
    <input type="checkbox"  value="<span style='font-family: verdana; font-size: 16px; color: red'>c</span>">Third<br>
    <input type="checkbox"  value="<u>d</u>">Forth<br><br>
    <div>You Selected: <span id="selectionsResults"></span></div>
    </div>
    </form>
    
    <script>
    (function(d) {
    
    	function nodeFlush(e) {
    		while (e.firstChild) e.removeChild(e.firstChild);
    	}
    
    	function nodeAdd(e, node) {
    		e.appendChild(typeof node == 'object' ? node : d.createTextNode(node));
    	}
    
    	function nodeReplace(e, node) {
    		nodeFlush(e);
    		nodeAdd(e, node);
    	}
    
    	function eventAdd(e, eventName, handler) {
    		if (e.addEventListener) e.addEventListener(eventName, handler, false);
    			else e.attachEvent('on' + eventName, handler);
    	}
    
    	var
    		target = d.getElementById('selections'),
    		output = d.getElementById('selectionsResults'),
    		inputs = target.getElementsByTagName('input');
    
    	function checkInputs() {
    		var result = [];
    		for (var i = 0; i < inputs.length; i++) {
    			if (inputs[i].checked) result.push(inputs[i].value);
    		}
    		nodeReplace(output, result.length ? result.join(', ') : 'nothing');
            	document.getElementById('selectionsResults').innerHTML=document.getElementById('selectionsResults').textContent;
    
    	}
    
    	for (var i = 0; i < inputs.length; i++) {
    		eventAdd(inputs[i], 'change', checkInputs);
    		eventAdd(inputs[i], 'click', checkInputs);
            
    	}
    
    	checkInputs();
    
    })(document);
    </script>

  5. #5
    Join Date
    Oct 2012
    Posts
    180
    Thanks
    22
    Thanked 1 Time in 1 Post

    Default

    Again, very much appreciated. Not the first time you have helped me.

Similar Threads

  1. Show variable as a link in form output?
    By pgheagle in forum JavaScript
    Replies: 13
    Last Post: 08-04-2012, 02:06 AM
  2. html for an output calculator
    By shadybuck in forum HTML
    Replies: 0
    Last Post: 11-11-2010, 04:38 PM
  3. html tags in output
    By gurmeet in forum PHP
    Replies: 7
    Last Post: 10-12-2010, 02:23 PM
  4. HTML Output from Text Search
    By PatrickK64 in forum JavaScript
    Replies: 0
    Last Post: 11-13-2008, 12:28 AM
  5. XML>HTML output on several pages
    By tugg in forum PHP
    Replies: 1
    Last Post: 09-29-2007, 03:29 AM

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
  •