Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2009
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Adding class in JS Var on checking if checkbox is selected for HTML form generator

    I'am a beginner in JS.

    I 've tried creating a HTML form generator for my internal work. I 've found a thread on the same issue - A Form That Generates HTML and built on the same lines and got it working in all aspects but one.

    Code:
    <html>
    <head>
    <title>My form</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
    window.onload = function() {
    document.getElementById('band').onsubmit=function() {
      var qno=document.getElementById('qno').value;
     var ques=document.getElementById('ques').value;
     var a1o1=document.getElementById('a1o1').value;
    
    var text="<div id=\"question"+qno+"\">\n\r<ol>\n\r<li>"+a1o1+"</li>\n\r<li>"+a1o1+"</li>\n\r</ol>\n\r</div>";
     document.getElementById('code').value=text;
    return false;
     }
    }
    </script>
    </head>
    <body>
    <form id="band" action="#">
    <label>Enter Question no: <input type="text" id="qno"></label><br />
    <label>Enter Question 1: <textarea type="text" id="ques"></textarea><br />
    <label>Option 1: <input type="text" id="a1o1"></label><input type="checkbox" name="a1" class="can"></input><br />
    <label>Option 2: <input type="text" id="a1o1"></label><input type="checkbox" name="a2" class="can"></input><br />
    <input type="submit"></input>
    Add id="correct" for the correct option li
    </form>
    
    <p>Copy this:</p>
    <textarea rows="20" cols="80" id="code"></textarea>
    </body>
    </html>
    I have put in check boxes for option 1 and option 2 labels. I'am trying to add
    Code:
    id="correct"
    in the corresponding
    Code:
    <li>
    in the text variable if the check box is selected.

    Kindly suggest how to go ahead for achieving this.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,092
    Thanks
    23
    Thanked 594 Times in 593 Posts
    Welcome to the forums amax09.
    FYI, you should always use a doctype. your header
    Code:
    <html>
    <head>
    does not help the browser know how to interpret your HTML
    Use something like this:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>My form</title>
    This is HTML5 which will soon be the standard.
    Next, IDs are unique and should be singular:
    Code:
    <label>Option 1: <input type="text" id="a1o1"></label><input type="checkbox" name="a1" class="can"></input><br />
    <label>Option 2: <input type="text" id="a1o1">
    Use something like id="a1o2" for the second input tag.
    Your javascript should be after the HTML code and before the </body> tag. Not before in the head.
    Made some changes to the form. Personally I would not have used the submit, I'd would of used a button to call a JS function instead.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>My form</title>
    </head>
    
    <body>
    <form id="band" action="#">
    <label>Enter Question no: </label><input type="text" id="qno"><br>
    <label>Enter Question 1: </label><textarea id="ques"></textarea><br>
    <label>Option 1: </label><input type="text" id="a1o1"><input type="checkbox" name="a1" id="a1" class="can"><br>
    <label>Option 2: </label><input type="text" id="a1o2"><input type="checkbox" name="a2" id="a2" class="can"><br>
    <input type="submit">
    </form>
    
    <p>Copy this:</p>
    <textarea rows="20" cols="80" id="code"></textarea>
    
    <script type="text/javascript">
    document.getElementById('band').onsubmit=function() {
    	x='';
    	if(document.getElementById('a1').checked) x='correct';
    	var qno=document.getElementById('qno').value;
    	var ques=document.getElementById('ques').value;
    	var a1o1=document.getElementById('a1o1').value;
    	var a1o2=document.getElementById('a1o2').value;
    	var text="<div id=\"question"+qno+"\">\n\r<ol>\n\r<li id=\""+x+"\">"+a1o1+"</li>\n\r<li>"+a1o1+"</li>\n\r</ol>\n\r</div>";
    
    	document.getElementById('code').value=text;
    	return false;
    }
    </script>
    </body>
    </html>
    Hope that was what you wanted or that you can get it where you want with a little tweaking.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    amax09 (03-30-2014)

  • #3
    New Coder
    Join Date
    Mar 2009
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks Sunfighter for the corrections and information. Will remember when I code in the future.

    Just another question.

    The HTML & JS generated Is used in as part of the posts in WordPress.

    In the below code I'am trying the highlight the li when its button ( toggle () ) is pressed, but Its toggling the li in the other div aswell div id="question2".

    Kindly help me identify where the error is and how to resolve it.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>My form</title>
    </head>
    <body>
    <div id="question1">
    
    <ol>
    
    <li id="correct1"></li>
    
    <li id=""></li>
    
    </ol>
    <div id="answer1" style="display:none;">
    
    </div>
    
    <button onclick="toggle('answer1');">Check / Hide Answer</button>
    
    </div>
    <hr>
    <div id="question2">
    
    <ol>
    
    <li id=""></li>
    
    <li id="correct2"></li>
    
    </ol>
    
    <div id="answer2" style="display:none;"></div>
    
    </div>
    
    <button onclick="toggle('answer2');">Check / Hide Answer</button>
    
    <script type="text/javascript">
    function toggle(id) {
    var e = document.getElementById(id);
    if(e.style.display == 'none'){
    e.style.display = 'block';
    document.getElementById("correct1").style.backgroundColor='#BCF5A9';
    document.getElementById("correct2").style.backgroundColor='#BCF5A9';
    
    }
    else{
    e.style.display = 'none';
    document.getElementById("correct1").style.backgroundColor='#FFFFFF';
    document.getElementById("correct2").style.backgroundColor='#FFFFFF';
    
    }
    }
    </script>
    </body>
    </html>

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,092
    Thanks
    23
    Thanked 594 Times in 593 Posts
    When you enter the JS you will execute the first part of your if/else:
    Code:
    if(base.style.display == 'none'){
    	base.style.display = 'block';
    	document.getElementById("correct1").style.backgroundColor='#BCF5A9'; // THESE TWO LINES SET BOTH CORRECT ANSWERS ONLY ONE SHOULD BE HERE
    	document.getElementById("correct2").style.backgroundColor='#BCF5A9';
    }
    That should work, but I don't like the <div id="answer2" style="display:none;"></div> thingy.
    Here's something in your vain that I like better See what you think:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>My form</title>
    </head>
    <body>
    <div id="question1">
    	<ol>
    		<li id="correct1"></li>
    		<li id=""></li>
    	</ol>
    	<button onclick="toggle('1');">Check / Hide Answer</button>
    </div>
    <hr>
    <div id="question2">
    	<ol>
    		<li id=""></li>
    		<li id="correct2"></li>
    	</ol>
    </div>
    <button onclick="toggle('2');">Check / Hide Answer</button>
    
    <script type="text/javascript">
    function toggle(id) {
    	if(document.getElementById("correct"+id).style.backgroundColor == 'DarkSeaGreen')
    		document.getElementById("correct"+id).style.backgroundColor = 'White';
    	else
    		document.getElementById("correct"+id).style.backgroundColor = 'DarkSeaGreen';
    }
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Tags for this Thread

    Posting Permissions

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