finding a specific javascript tutorial

Page 1 of 1

6 Replies - 368 Views - Last Post: 24 March 2012 - 09:03 PM

#1 mindiapolis  Icon User is offline

  • D.I.C Head

Reputation: -4
  • View blog
  • Posts: 147
  • Joined: 31-October 11

finding a specific javascript tutorial

Posted 20 March 2012 - 10:33 AM

Hi, I'm relatively new to javascript and I need to find a tutorial that will add more textboxes if a checkbox is checked. if someone could recommend a tutorial I would really appreciate it.
Is This A Good Question/Topic? 0
  • +

Replies To: finding a specific javascript tutorial

#2 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 115
  • View blog
  • Posts: 748
  • Joined: 25-October 08

Re: finding a specific javascript tutorial

Posted 23 March 2012 - 07:04 PM

Not a tutorial, but should give you a start at seeing what needs to be done.
<html>
<head>
<script type="text/javascript"> <!-- archaic form: language="javascript" -->
function addElement(type) {
    var foo = document.getElementById("fooBar");
    var element = document.createElement('<br>');
    foo.appendChild(element);
 
//Create an input type dynamically.
    element = document.createElement("input");
 
//Assign different attributes to the element.
    element.setAttribute("type", type);
    element.setAttribute("value", type);
    element.setAttribute("name", type);
//Append the element in page (in span).
    foo.appendChild(element);
 
}
function fooBarContents(IDS) {
  var str = '';
  var sel = document.getElementById(IDS).getElementsByTagName('input');
  for (var i=0; i<sel.length; i++) {
    str += sel[i].value+'\n';
  }
  return str;
}
</SCRIPT>
</head>
 
<body>
<form name="myForm" action="" method="post" onsubmit="return false">

<INPUT type="button" value="New Textbox" onclick="addElement(fooBar.value='')"/>
<input type="button" value="List values" onclick="alert(fooBarContents('fooBar'))">

<span name="fooBar" id="fooBar">&nbsp;</span>

</form>
</body>
<html>

Was This Post Helpful? 0
  • +
  • -

#3 mindiapolis  Icon User is offline

  • D.I.C Head

Reputation: -4
  • View blog
  • Posts: 147
  • Joined: 31-October 11

Re: finding a specific javascript tutorial

Posted 23 March 2012 - 07:08 PM

thank you so much!
Was This Post Helpful? 0
  • +
  • -

#4 mindiapolis  Icon User is offline

  • D.I.C Head

Reputation: -4
  • View blog
  • Posts: 147
  • Joined: 31-October 11

Re: finding a specific javascript tutorial

Posted 24 March 2012 - 12:32 PM

I got it to display one textbox with this code 
<html>
<head>
    <title>Javascript Checkbox Visibility</title>
    
    <script type="text/javascript">
    
        function showHide()
        {
            if(document.getElementById('Checkbox1').checked)
            {
                document.getElementById('Name:  Text1').style.visibility = 'visible';
            }
            else
            {
                document.getElementById('Text1').style.visibility = 'hidden';
            }
        }

    </script>

</head>
<body>

    <p>
        Check mark the checkbox to set the visiblity property of textbox.
        It will allow you to show/hide the textbox control dynamically.
    </p>
    
    <p>
        <input id="Checkbox1" type="checkbox" onclick="showHide();" checked="checked" /><label for="Checkbox1">I have more dogs.  </label><br /><br />
        <input id="Text1" type="text" /> 
    </p>

</body>
</html>


but how do I get it display multiple textboxes like repeating these if the checkbox is checked? 
  <tr>
	  <td>  Name: <br /> 
	      <input name="petName" type="text" value="<?=$pet_name?>" size="10" maxlength="20" />	  </td>  
	<td>   Age: <br />
	<select name="age">  
<?php
  for ($i =1; $i <=20; $i ++)
 	{
		echo "<option value=\"$i\"";
		if($age == $i){
			echo ' SELECTED';
		}
		echo ">$i</option>"; 
	}
?>   
</select></td> 
<td>   Breed:<br />

	<select name = "breed">  <option value .......  </option>  
                	</select>	</td>
</tr>
<tr>
	<td>Nutritional Needs:</td>
	<td><textarea name="nutritionalNeeds" cols="17" rows="5"></textarea>	</td>
</tr>
<tr>
	<td>Special Instructions</td>
	<td><textarea name="specialInstructions" cols="17" rows="5"></textarea></td>
</tr>

Was This Post Helpful? 0
  • +
  • -

#5 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 115
  • View blog
  • Posts: 748
  • Joined: 25-October 08

Re: finding a specific javascript tutorial

Posted 24 March 2012 - 06:33 PM

That last post uses none of the JS I provided.
What are you really trying to do?


Using a checkbox to create multiple textboxes doesn't make a lot of sense to me.
I can understand 1st check, but 2nd click changes checkbox status. Is the textbox also supposed to disappear?
If not, then is there supposed to be a new text box on the 3rd click of the checkbox?

I know nothing about PHP code, so if that is what you desire, I can be of no further help.
Was This Post Helpful? 0
  • +
  • -

#6 mindiapolis  Icon User is offline

  • D.I.C Head

Reputation: -4
  • View blog
  • Posts: 147
  • Joined: 31-October 11

Re: finding a specific javascript tutorial

Posted 24 March 2012 - 07:50 PM

I think you misunderstood my message. If a user checks the checkmark about has more dogs, I need this block of code to appear again. 
 <tr>
	  <td>  Name: <br /> 
	      <input name="petName" type="text" value="<?=$pet_name?>" size="10" maxlength="20" />	  </td>  
	<td>   Age: <br />
	<select name="age">  
<?php
  for ($i =1; $i <=20; $i ++)
 	{
		echo "<option value=\"$i\"";
		if($age == $i){
			echo ' SELECTED';
		}
		echo ">$i</option>"; 
	}
?>   
</select></td> 
<td>   Breed:<br />

	<select name = "breed">  <option value ...   
                	</select>	</td>
</tr>
<tr>
	<td>Nutritional Needs:</td>
	<td><textarea name="nutritionalNeeds" cols="17" rows="5"></textarea>	</td>
</tr>
<tr>
	<td>Special Instructions</td>
	<td><textarea name="specialInstructions" cols="17" rows="5"></textarea></td>
</tr>

Was This Post Helpful? 0
  • +
  • -

#7 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 115
  • View blog
  • Posts: 748
  • Joined: 25-October 08

Re: finding a specific javascript tutorial

Posted 24 March 2012 - 09:03 PM

View Postmindiapolis, on 20 March 2012 - 10:33 AM, said:

Hi, I'm relatively new to javascript and I need to find a tutorial that will add more textboxes if a checkbox is checked. if someone could recommend a tutorial I would really appreciate it.


I read your initial post as if you wanted to ADD more textboxes to the display with each (multiple times) setting of a single checkbox.
Your last post indicates you want a show/hide of a region with the checkbox setting.

I'll try once again, but you'll still need to modify the code to meet your needs as this is only meant as an example.
<html>
<head>
<title> Untitled </title>
<script type="text/javascript">
function ShowReg(op,ck) {
  var sel = document.getElementById(op);
  if (ck) { sel.style.display = 'block'; } else { sel.style.display = 'none'; }
}
</script>
</head>
<body>

<h3>Select registration type</h3>

<input type="checkbox" onclick="ShowReg('Car',this.checked)"> Car
 <div id="Car" style="display:none">
  VIN No. <input type="text" id="VIN" value="">
 </div>
<br>

<input type="checkbox" onclick="ShowReg('Boat',this.checked)"> Boat
 <div id="Boat" style="display:none">
  Registration No. <input type="text" id="Breg" value="">
 </div>
<br>

<input type="checkbox" onclick="ShowReg('Plane',this.checked)"> Plane
 <div id="Plane" style="display:none">
  Tail No. <input type="text" id="Ptail" value="">
  Model <input type="text" id="Pmodel" value="">
 </div>
<br>

</body>
</html>

:bananaman:
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1