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 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Sending FormInput to Areabox

    I am having trouble with a school assignment. I don't know much javascript and I am having trouble getting a radio selection to appear inside an areaBox. Here is my code that is not working correctly.
    Code:
    <html>
    <head>
    
    <script type="text/javascript"> 
    		function write(selection)
    		{
    		var string= "You have selected" +selection;
    		return string
    		
    		}
    		
    		function textWrite()
    		{
    		sizeSelection = document.getElementByName('size').value;
    		
    		var result=write(sizeSelection);
    		document.getElementById('outputID').value = result;
    		return result;
    		}
    
    </script>
    </head>
    <body>
    
    		<form>
    			<p>What Size Pizza?</p>
    			<script>
    			var sizeSelection;
    			</script>
    			  <input type=radio name="size" onClick="sizeSelection='Personal'" />Personal.
    				<br />
    			  <input type=radio name="size" onClick="sizeSelection='Small'" />Small.
    				<br />
    			  <input type=radio name="size" onClick="sizeSelection='Medium'" />Medium.
    				<br />
    			  <input type=radio name="size" onClick="sizeSelection='Large'" />Large.
    			   <br />
    			  <input type=radio name="size" onClick="sizeSelection='Extra-Large'" />Extra-Large.
    			   <br />
    			  <input type=radio name="size" onClick="sizeSelection='OMG'" />OMG.
    				
    				<p><input type="button" value="Submit" onclick="textWrite();" /></p>			
    		    
    			        <p>
    					<b>Output</b>: <textarea TYPE="text" NAME="output" ID="outputID" SIZE="50"/></textarea>
    					</p>
    				  
    				</form>
    					
    					
    				</select>
    				
    </form>
             
             
    </body>
    </html>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,084
    Thanks
    80
    Thanked 4,552 Times in 4,516 Posts
    This line is bogus:
    Code:
    		sizeSelection = document.getElementByName('size').value;
    Just get rid of it.

    Put
    Code:
    var sizeSelection = "No size selected yet";
    as the first line of JS code.

    This isn't an elegant solution, but it should work.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Redwards34 (11-06-2012)

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Why exactly does that work?

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,084
    Thanks
    80
    Thanked 4,552 Times in 4,516 Posts
    Because your code is doing it!

    You are doing onClick="sizeSelection='Small'" so you *ARE* setting the (now global) variable sizeSelection according to what was clicked on.

    When you were doing
    Code:
        sizeSelection = document.getElementByName('size').value;
    that code was wrong and was WIPING OUT the value that the onclick had already put there.

    When you are ready, go looking (you can search in this forum) for how to get the value of the checked radio button in a set of radio buttons. Then you won't need the onclick handlers any more.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I was able to an extra radio button but I came up on a problem when I was trying to access the info from a multi-selection form. I tried basing my code for this off of this page.

    http://www.javascript-coder.com/java...t-select.phtml

    The biggest problem I am coming up with is how to display the info from the multi-selection with the current info. I understand that I have to call the function somewhere but I don't know how to display the info of an array in javascript in this situation.



    Code:
    <html>
    <head>
    
    <script type="text/javascript"> 
    		function write(crustSelection,sizeSelection)
    		{
    		var string= "You have selected " +sizeSelection+ " as your size " + "\n\n" + "You have Selected " + crustSelection + " as your crust";
    		return string
    		
    		}
    		function getSelectedOptions(oList)
    		{
    		   var sdValues = [];
    		   for(var i = 1; i < oList.options.length; i++)
    		   {
    			  if(oList.options[i].selected == true)
    			  {
    			  sdValues.push(oList.options[i].value);
    			  }
    		   }
    		   return sdValues;
    		}
    		
    		function textWrite(crustSelectionFinal,sizeSelectionFinal)
    		{
    		
    		var result=write(crustSelectionFinal,sizeSelectionFinal);
    		document.getElementById('outputID').value= result;
    		return result;
    		}
    
    </script>
    </head>
    <body>
    
    		<form>
    			<p>What Size Pizza?</p>
    			<script>
    			var sizeSelection = "No size selected yet";
    			</script>
    			  <input type=radio name="size" onClick="sizeSelection='Personal'" />Personal.
    				<br />
    			  <input type=radio name="size" onClick="sizeSelection='Small'" />Small.
    				<br />
    			  <input type=radio name="size" onClick="sizeSelection='Medium'" />Medium.
    				<br />
    			  <input type=radio name="size" onClick="sizeSelection='Large'" />Large.
    			   <br />
    			  <input type=radio name="size" onClick="sizeSelection='Extra-Large'" />Extra-Large.
    			   <br />
    			  <input type=radio name="size" onClick="sizeSelection='OMG'" />OMG.
    				
    
    		    
    			<p>What Type of Crust?</p>
    			<script>
    			var crustSelection = "No crust selected yet";
    			</script>
    			  <input type=radio name="crust" onclick="crustSelection='Thin'" />Thin.
    				<br />
    			  <input type=radio name="crust" onclick="crustSelection='Thick'" />Thick.
    				<br />
    			  <input type=radio name="crust" onclick="crustSelection='Sicilian'" />Sicilian.
    				<p><input type="button" value="Submit" onclick="textWrite(crustSelection,sizeSelection)" /></p>
    			
    			<p>What toppings? (May choose more than 1)</p>
    				<select name="topping" id='slt_topping' size="8" multiple="yes">
    					<option value='1'>Sausage</option>
    					<option value='2'>Pepperoni</option>
    					<option value='3'>Mushrooms</option>
    					<option value='4'>Olives</option>
    					<option value='5'>Pineapple</option>
    					<option value='6'>Extra Chesse</option>
    					<option value='7'>Bacon</option>
    					<option value='8'>Anchovies</option>
    					<br />
    					
    					
    
    			        <p>
    					<b>Output</b>: <textarea TYPE="text" NAME="output" ID="outputID" SIZE="50"/></textarea>
    					</p>
    				  
    				</form>
    					
    					
    				</select>
    				
    </form>
             
             
    </body>
    </html>

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,084
    Thanks
    80
    Thanked 4,552 Times in 4,516 Posts
    Look into Array.join

    But I think you are making a mistake using
    Code:
        sdValues.push(oList.options[i].value);
    instead of
    Code:
        sdValues.push(oList.options[i].text);
    How useful is it to say "Your topping choices are: 1,7,8"??
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Redwards34 (11-07-2012)

  • #7
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Look into Array.join

    But I think you are making a mistake using
    Code:
        sdValues.push(oList.options[i].value);
    instead of
    Code:
        sdValues.push(oList.options[i].text);
    How useful is it to say "Your topping choices are: 1,7,8"??
    Ok I tried that and I think I am a bit closer. I think the problem I am running into is that I am not sending up the array for the toppings properly.


    Code:
    <html>
    <head>
    
    <script type="text/javascript"> 
    		function write(crustSelection,sizeSelection)
    		{
    		var toppingSelectionArray=getSelectedOptions(oForm.elements["topping"];)
    		var toppingSelection=toppingSelectionArray.join();
    		var string= "You have selected " +sizeSelection+ " as your size " + "\n\n" + "You have Selected " + crustSelection + " as your crust" + "\n\n"+ " You have selected " +toppingSelection +" as your topping(s)";
    		return string
    		
    		}
    		function getSelectedOptions(oList)
    		{
    		   var sdValues = [];
    		   for(var i = 1; i < oList.options.length; i++)
    		   {
    			  if(oList.options[i].selected == true)
    			  {
    			  sdValues.push(oList.options[i].text);
    			  }
    		   }
    		   return sdValues;
    		}
    		
    		function textWrite(crustSelectionFinal,sizeSelectionFinal)
    		{
    		
    		var result=write(crustSelectionFinal,sizeSelectionFinal);
    		document.getElementById('outputID').value= result;
    		return result;
    		}
    
    </script>
    </head>
    <body>
    
    		<form>
    			<p>What Size Pizza?</p>
    			<script>
    			var sizeSelection = "No size selected yet";
    			</script>
    			  <input type=radio name="size" onClick="sizeSelection='Personal'" />Personal.
    				<br />
    			  <input type=radio name="size" onClick="sizeSelection='Small'" />Small.
    				<br />
    			  <input type=radio name="size" onClick="sizeSelection='Medium'" />Medium.
    				<br />
    			  <input type=radio name="size" onClick="sizeSelection='Large'" />Large.
    			   <br />
    			  <input type=radio name="size" onClick="sizeSelection='Extra-Large'" />Extra-Large.
    			   <br />
    			  <input type=radio name="size" onClick="sizeSelection='OMG'" />OMG.
    				
    
    		    
    			<p>What Type of Crust?</p>
    			<script>
    			var crustSelection = "No crust selected yet";
    			</script>
    			  <input type=radio name="crust" onclick="crustSelection='Thin'" />Thin.
    				<br />
    			  <input type=radio name="crust" onclick="crustSelection='Thick'" />Thick.
    				<br />
    			  <input type=radio name="crust" onclick="crustSelection='Sicilian'" />Sicilian.
    				<p><input type="button" value="Submit" onclick="textWrite(crustSelection,sizeSelection)" /></p>
    			
    			<p>What toppings? (May choose more than 1)</p>
    				<select name="topping" id='slt_topping' size="8" multiple="yes">
    					<option value='1'>Sausage</option>
    					<option value='2'>Pepperoni</option>
    					<option value='3'>Mushrooms</option>
    					<option value='4'>Olives</option>
    					<option value='5'>Pineapple</option>
    					<option value='6'>Extra Chesse</option>
    					<option value='7'>Bacon</option>
    					<option value='8'>Anchovies</option>
    					<br />
    					
    					
    
    			        <p>
    					<b>Output</b>: <textarea TYPE="text" NAME="output" ID="outputID" SIZE="50"/></textarea>
    					</p>
    				  
    				</form>
    					
    					
    				</select>
    				
    </form>
             
             
    </body>
    </html>

    I think I solved the problem by changing

    var toppingSelectionArray=getSelectedOptions(oForm.elements["topping"]

    to
    var toppingSelectionArray=getSelectedOptions(document.getElementById('slt_topping'));
    Last edited by Redwards34; 11-06-2012 at 09:00 PM.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,084
    Thanks
    80
    Thanked 4,552 Times in 4,516 Posts
    Yes, because no place had you defined oForm. You could have also solved it by simply defining oForm.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Yes, because no place had you defined oForm. You could have also solved it by simply defining oForm.
    Yes I realized that. I just wan't sure how I would define oForm. Would it be a form id?

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,084
    Thanks
    80
    Thanked 4,552 Times in 4,516 Posts
    Well, since your form is declared as only <form>, you could do

    Code:
    var oForm = document.forms[0]; // first form in the page
    But yes, in general you should give an id to a <form> and then reference it via document.getElementById().
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Redwards34 (11-07-2012)

  • #11
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Well, since your form is declared as only <form>, you could do

    Code:
    var oForm = document.forms[0]; // first form in the page
    But yes, in general you should give an id to a <form> and then reference it via document.getElementById().
    I see, each form is placed in an array regardless I assume. Thank you for your help, I am not familiar with implied languages for programming and have been having difficulty.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,084
    Thanks
    80
    Thanked 4,552 Times in 4,516 Posts
    I don't think what you have here is an "implied language".

    JavaScript is pretty darned explicit.

    What you have is an "implied conversion of the HTML of a page into the Document Object Model (DOM)."

    Yes, sometimes that conversion is by no means clear. As in the case of all forms being stuffed into the document.forms collection. Trust me, you will find worse (more obscure) to come.

    But don't blame JavaScript. The DOM is *NOT* part of the language. In fact, in MSIE, you can reference all DOM elements, et al., using VBScript language. And yes, all the quirks of the DOM are identical then, in either JavaScript of VBScript.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    I don't think what you have here is an "implied language".

    JavaScript is pretty darned explicit.

    What you have is an "implied conversion of the HTML of a page into the Document Object Model (DOM)."

    Yes, sometimes that conversion is by no means clear. As in the case of all forms being stuffed into the document.forms collection. Trust me, you will find worse (more obscure) to come.

    But don't blame JavaScript. The DOM is *NOT* part of the language. In fact, in MSIE, you can reference all DOM elements, et al., using VBScript language. And yes, all the quirks of the DOM are identical then, in either JavaScript of VBScript.
    I don't know why I said implied I meant to say interpreted. I am so used to using a compiler to tell me my syntax errors right away. I learned to do things a little bit more piece by piece with javascript though.

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,084
    Thanks
    80
    Thanked 4,552 Times in 4,516 Posts
    LOL! On that we are 100% agreed.

    However, if you learn to use a JavaScript debugger (I like the one in Chrome, but MSIE 9 is almost identical and Firebug for FireFox is nearly as good), you *will* get all your syntax errors, and more. Not at "compile time" but at least, for syntax errors, as soon as the page is loaded.

    But I'm with you. I *LIKE* compiled languages. Java, C++, C#, even VB.NET in STRICT mode.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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