A nested dynamic checkbox inside my dynamic form.

pizzy · Apr 5, 2005

I am having a problem with the last results. I can't seem to be able to
get the input2A and input3A to appear. I don't seem to have a problem
with the show and hide after a number is entered and submitted. If
anyone can answer my problem I will be greatly appreciated with a
prize. I actually have submitted it more than once and I haven't had
anyone been able to answer it yet.

________
enter # of input0A |_______|

[submit] [reset]

-------------------------------------------------------
NOTE:THE RESULTS BELOW IS AFTER 2 IS ENTERED INTO THE input ABOVE

________
input1A |_______| [] "check here to add input2A and input3A"
________
input1B |_______| [] "check here to add input2B and input3B"

[submit] [reset]

-------------------------------------------------------
NOTE: THE RESULTS BELOW WHAT HAPPENS WHEN THE FIRST CHECKBOX ABOVE IS
CLICKED
________ ________ ________
input1A |_______| [] input2A |_______| input3A |_______|
________
input1B |_______| [] "check here to add input2B and input3B"

[submit] [reset]

kaeli · Apr 6, 2005

I am having a problem with the last results.

Post testable code or a URL.

--

pizzy · Apr 7, 2005

I don't have any that works.

Fred Oz · Apr 7, 2005

pizzy said:
I don't have any that works.

Now you do. Put in any value you like, it will keep adding 'em.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Add inputs </title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
</head>
<body>

<style type="text/css">
table { /* border-collapse: collapse; */ border: 1px solid blue;
padding: 1px 1 1 1;}
..tip {font-size: 90%; color: #666633;}
</style>
<script type="text/javascript">

// Create an array of the letters of the alphabet
var alpha = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');

// Add first set of inputs and checkbox
function addInputsA(f,t) {
// Clean and validate input
var n = t.value.replace(/\s+/g,'');
if (/\D+/.test(n) || 1 > n || '' == n) {
alert('Please enter an integer greater than 0');
if (t.focus) t.focus();
return;
}

// Delete the body containing the first input
delBody(t);

// Setup variables
var bA = document.getElementById('bodyA');
var i=0, oTr, oTd, oChk, txt, let;

// Add the inputs and checkboxes
do {
oTr = document.createElement('tr');
let = numToAlpha(i);
txt = 'Input-1-' + let;
addToTr(oTr,document.createTextNode(txt));

oInp = document.createElement('input');
oInp.name = txt;
addToTr(oTr,oInp);

oChk = document.createElement('input');
oChk.type = 'checkbox'
oChk.name = 'Check-1-' + let;
oChk.onclick = function() {addInputsB(this)};
addToTr(oTr,oChk);

addToTr(oTr,document.createTextNode(chkTxt(let)));

bA.appendChild(oTr);

} while (++i < n)
}

// Add second set of inputs
function addInputsB(y){
var x = y, oInp, txt;
var nBit = x.name.split('-');
// Go up to parent td
while (!/td/i.test(x.nodeName)) {
x = x.parentNode;
}
// Go to next td
x = x.nextSibling;
// Remove its content
delKids(x);

// If checkbox checked, put inputs into it
if (y.checked) {
for (var j=2; j<4; j++) {
txt = 'Input-' + j + '-' + nBit[2];
x.appendChild(document.createTextNode(txt));
oInp = document.createElement('input');
oInp.name = txt;
x.appendChild(oInp);
}
// Otherwise, put some text into it
} else {
x.appendChild(document.createTextNode(chkTxt(nBit[2])));
}
}

// Returns a string with value of 'a' appended
function chkTxt(a){
return 'Click to add inputs 2 & 3 ' + a;
}

// Deletes a tbody given any element inside the tbody to delete
function delBody(t) {
while ( !/tbody/i.test(t.nodeName)) {t = t.parentNode;}
t.parentNode.removeChild(t);
}

// Removes all child nodes of given element
function delKids(n) {
while (n.firstChild) {n.removeChild(n.firstChild)}
}

// Given a tr, append b to new cell, append cell to tr
function addToTr(a,b){
var oTd = document.createElement('td');
oTd.appendChild(b);
a.appendChild(oTd);
}

function numToAlpha(n){
var t='';
while (n > 0) {
t = alpha[n%26] + t;
n = Math.floor(n/26-1);
}
return (0 > n)? t : alpha[n] + t;
}

</script>

<form action="">
<table border="1">
<tbody>
<tr>
<td colspan="2">Enter number of inputs:
<input type="text" size="5" name="numInputs">
<input type="button" value="Add inputs" onclick="
addInputsA(this.form,this.form.numInputs);
">
<br>
<span class="tip">(Integer greater than 1)</span>
</td>
</tr>
</tbody>
<tbody id="bodyA">
</tbody>
<tbody>
<tr>
<td colspan="4">
<input type="reset">
<input type="submit">
</td>
</tr>
</tbody>
</table>
</form>


<input type="text" size="10" onblur="
var o = document.getElementById('xx');
var n = +this.value, t='', m;
while (n > 0) {
t = alpha[n%26] + t;
n = Math.floor(n/26-1);
}
(0 > n)? t=t : t = alpha[n] + t;
o.innerHTML = t;

">
<span id="xx"></span>

</body>
</html>

pizzy · Apr 7, 2005

Thanks man, check your email I sent a personal message.

pizzy · Apr 12, 2005

Fred,

Can you put the following into laymens terms?

while (!/td/i.test(x.nodeName)) {
x = x.parentNode;
}

How to have a nested dynamic checkbox inside my dynamic form.	0	Mar 23, 2005
Revised: A form -to- dynamic form -to- dynamic checkboxes	7	Mar 18, 2005
Saving checkbox or played video code	5	Sep 30, 2020
Can't solve this problem from my university	7	Oct 6, 2022
Login form no longer working	2	Feb 18, 2023
[C++] Pointers declared inside a function, how do I manage them?	5	May 3, 2023
Question about my projects	3	Jul 23, 2021
action_page.php form	2	Oct 25, 2020

A nested dynamic checkbox inside my dynamic form.

pizzy

kaeli

pizzy

Fred Oz

pizzy

pizzy

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads