By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
455,629 Members | 1,716 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 455,629 IT Pros & Developers. It's quick & easy.

Dynamic Form with a Dynamic Form inside it...

P: n/a
INTRO: I tried to clean it up for easy reading. I hope I didn't make
any mistakes.

PROBLEM: WOW, this is some crazy sh!t. I can't get my checkbox (see
"TAGSELECTED") to print my textboxes (see "TAG#") when more than 1
number (see "VLANS") is inputed into my form.

QUESTION: How do I make my dynamic form have a dynamic input box(which
is created by checking the checkbox and calling the functionC1) inside
it and still be able to pass the values to my php page?

HTML CODE:
<form name=counter>
<input type=text name=VLANS size=5>
<input name="button" type=button
onClick="createFom(counter.VLANS.value);" value="Update">
</form>

JAVASCRIPT CODE:
function createForm(VLANS) {
data = "";
inter = "'";
if (VLANS < 16 && VLANS > -1) {
for (i=1; i <= VLANS; i++) {
if (i < 10) spaces=" ";
else
spaces=" ";
data = data + "IPADDRESS <input type='text' name="
+ inter + "ipaddress[]" + i + inter + "'>"
+ "TAGSELECTED <input type='checkbox' id='tag_1' name =" + inter +
"tagName"
+ i + inter + "' onClick='functionC1(i);'>"
+ "<span id=spanN" + i + "style='position:relative;'></span>";
}
if (document.layers) {
document.layers.cust.document.write(data);
document.layers.cust.document.close();
}
else {
if (document.all) {
cust.innerHTML = data;
}
}//close else
}//close else
else {
window.alert("Please select up to 15 entries.");
}

}//close function

function functionC1(i) {
var the_box = window.document.all.tag_1;
if (the_box.checked == false) {
data = "";
spanN + i + .innerHTML = data;
}
else {
inter = "'";
data = 'TAG# : <input name=" + inter + "tag"
+ i + inter + "type="text" id=" tag" size="8" maxlength="8">';
spanN + i + .innerHTML = data;
}
}

ANY HELP WILL BE GREATY APPRECIATED!!!!!!

THANKS,

PIZZY

Jul 23 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
pizzy wrote:
INTRO: I tried to clean it up for easy reading. I hope I didn't make
any mistakes.

PROBLEM: WOW, this is some crazy sh!t. I can't get my checkbox (see
No sh!t. Your code as posted is utterly dysfunctional and
useless.

Perhaps you can describe what you are trying to do and a
solution may be offered.

[...]

HTML CODE:
<form name=counter>
Quotes around attributes can be safely omitted in HTML provided
no special characters are used, but convention is that they are
used always.
<input type=text name=VLANS size=5>
<input name="button" type=button
It's always confusing when attribute values are the same as the
name of some other attribute. Try to avoid it.
onClick="createFom(counter.VLANS.value);" value="Update">
</form>

JAVASCRIPT CODE:
function createForm(VLANS) {
data = "";
inter = "'";
Creating global variables inside one function and depending on
them inside subsequent functions is likely to introduce all
sorts of difficult-to-fix errors. Avoid it where possible.
if (VLANS < 16 && VLANS > -1) {
Accessing document elements using their name attribute as a
global reference is IE only. Use of the forms collection is
more appropriate.
for (i=1; i <= VLANS; i++) {
Here you create i as a global. It is also used in your other
function in a local context - can you be sure of its value?
if (i < 10) spaces=" ";
else
spaces=" ";
data = data + "IPADDRESS <input type='text' name="
+ inter + "ipaddress[]" + i + inter + "'>"
+ "TAGSELECTED <input type='checkbox' id='tag_1' name =" + inter +
"tagName"
Don't allow code to automatically break, use manual breaks at
about 65 characters (nothing to do with your script errors
though...)
+ i + inter + "' onClick='functionC1(i);'>"
+ "<span id=spanN" + i + "style='position:relative;'></span>";
}
Why put support for a browser that is used by perhaps 1% of
surfers first? Put it last.
if (document.layers) {
document.layers.cust.document.write(data);
document.layers.cust.document.close();
}
else {
if (document.all) {
cust.innerHTML = data;
Assuming that because a browser supports document.all it will
support innerHTML (and vice versa) is flawed. There are many
that support innerHTML that do not support document.all.

Why not test for innerHTML? And put this test first, as it will
satisfy perhaps 99% of browsers (even if it's not a W3C
standard).

}
}//close else
}//close else
else {
window.alert("Please select up to 15 entries.");
}

}//close function

function functionC1(i) {
var the_box = window.document.all.tag_1;
Again, IE only syntax - why not use the forms collection, it has
wider support across browsers and avoids getElementById in this
instance.
if (the_box.checked == false) {
or

if (!the_box.checked) {
data = "";
is this the same 'data' as above?
spanN + i + .innerHTML = data;
again trying to use element names as globals, but in any case
this line should cause an error. I think you are trying to do
something like:

document.getElementById('spanN'+i).innerHTML = data;
}
else {
inter = "'";
data = 'TAG# : <input name=" + inter + "tag"
+ i + inter + "type="text" id=" tag" size="8" maxlength="8">';
spanN + i + .innerHTML = data;
}


There are a heap of errors here to do with quotes/unterminated
literals.

Using innerHTML this way is totally inappropriate. Learn & use
DOM methods, you will have far more success.

--
Fred
Jul 23 '05 #2

P: n/a
thanks for the help i'll clean it up...

Jul 23 '05 #3

P: n/a
pizzy wrote:
thanks for the help i'll clean it up...


This should get you going. The first form has the inputs created
in the HTML, they are hidden and disabled on paged load, that
way they will still be available for non-JavaScript users.

When the checkbox is checked, the input is made visible and
enabled. If it's unchecked again, the input is hidden and
disabled again but whatever text was entered is still in there
so that if it is enabled again, the user doesn't have to re-type
whatever was there before. This feature may not be wanted, you
can get rid of the text by setting the input value to '' when
you disable it.

The onclick is added to each checkbox when the page is loaded to
cut down on code in the page and users without JS won't get a
heap of code that wont work anyway.

The second example is more like your attempt: it adds or removes
inputs depending on whether a checkbox is selected or not when
the 'Add inputs' button is clicked.

Any text entered will be lost when the control is removed.
Functionally, this is no different from the above, but makes the
form dependent on JavaScript (unnecessarily in my view) and may
well make page layout much more difficult.

In the first method, you can use visibility to keep a space on
the page for the hidden control, or display='none' to make it
take up no space at all whilst hidden. With create/remove
method, you have to use a div, table cell or similar if you want
to reserve space in the page.

If you really want the inputs shown all at once, use the first
method in combination with a 'Show inputs' button rather than
an onclick.

I have used getElementById, so there is no support for IE
before 5.5 or Netscape before version 6, checkout DynWrite:

<URL:http://www.jibbering.com/faq/faq_notes/alt_dynwrite.html>

In short, versions of IE that have document.all but not
getElementById can be supported by adding the following to any
script element outside a function and before getElementById is
used:

if((!document.getElementById) && document.all){
document.getElementById =
function(id){return document.all[id];};
}

Note from the very bottom of the DynWrite page:

"It has been observed that IE 4 errors if DynWrite is called
before the onload event is triggered by the browser. So to
maximise cross-browser support for this function it would be
better not to use it prior to that point."
Have a play, come back if you need more help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title> Form stuff </title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
</head>
<body>

<p>Hide and disable inputs on page load<br>
Make inputs visible and enabled when checkbox clicked</p>

<form action="" name="formA" id="formA">
<div>
<label for="checkA-1">Check 1
<input type="checkbox" name="checkA-1" id="checkA-1">
</label>
<input type="text" name="inpA-1" id="inpA-1" size="20"><br>
<label for="checkA-2">Check 2
<input type="checkbox" name="checkA-2" id="checkA-2">
</label>
<input type="text" name="inpA-2" id="inpA-2" size="20"><br>
<label for="checkA-3">Check 3
<input type="checkbox" name="checkA-3" id="checkA-3">
</label>
<input type="text" name="inpA-3" id="inpA-3" size="20"><br>
<input type="reset" onclick="initForm(this.form);">
</div>
</form>

<script type="text/javascript">
function initForm(f){
var txt;
var inp = f.elements;
var i = inp.length;
while (i--) {
// Add onclick & ensure checkboxes uncheck
if (/checkbox/i.test(inp[i].type)){
inp[i].onclick = function (){showInput(this);};
inp[i].checked = false;
// Disable and hide the associated input
txt = f.elements['inpA-' + inp[i].id.split('-')[1]];
txt.disabled = true;
txt.style.visibility = 'hidden';
}
}
}
function showInput(c) {
var t = c.form.elements['inpA-'+c.id.split('-')[1]];
if (c.checked) {
t.style.visibility = 'visible';
t.disabled = false;
if (c.blur) c.blur();
if (t.focus) t.focus();
} else {
t.style.visibility = 'hidden';
t.disabled = true;
}
}

initForm(document.forms['formA']);
</script>

<p>Add inputs to the form if the checkbox is checked<br>
when the 'Add inputs' button is clicked</p>

<form action="" name="formB" id="formB">
<table border="1">
<tr>
<td>
<label for="checkB-1">Check 1
<input type="checkbox" id="checkB-1"></label><br>
</td><td><label id="forInp-1"></label></td>
</tr><tr>
<td>
<label for="checkB-2">Check 2
<input type="checkbox" id="checkB-2"></label><br>
</td><td><label id="forInp-2"></label></td>
</tr><tr>
<td>
<label for="checkB-3">Check 3
<input type="checkbox" id="checkB-3"></label><br>
</td><td><label id="forInp-3"></label></td>
</tr><tr>
<td>
<input type="reset" onclick="clearInputs(this.form);">
<input type="submit">
</td><td>
<input type="button" value="Add inputs" onclick="
addInputs(this.form);">
</td>
</tr>
</table>
</form>
<script type="text/javascript">
function addInputs(f){
var oTxt, n, tgt;
var inp = f.elements;
var i = inp.length;
while (i--) {
// if element has an id and is a checkbox
if ( (n=inp[i].id.split('-')[1])
&& /checkbox/i.test(inp[i].type)) {
tgt = document.getElementById('forInp-'+n);
// if it's checked and it doesn't have an input, add one
if ( inp[i].checked && !f.elements['inpB-'+n]){
oTxt = document.createElement('input');
oTxt.id = 'inpB-' + n;
oTxt.name = oTxt.id;
tgt.appendChild(oTxt);
if (f.elements[oTxt.name].focus) oTxt.focus();
// if not checked and it does have an input, remove it
} else if (!inp[i].checked && f.elements['inpB-'+n]){
tgt.removeChild(f.elements['inpB-'+n]);
}
}
}
}

function clearInputs(f){
var n, tgt;
var inp = f.elements;
var i = inp.length;
while (i--) {
inp[i].checked = false;
if ( (n=inp[i].id.split('-')[1])
&& /checkbox/i.test(inp[i].type)
&& f.elements['inpB-'+n]) {
tgt = document.getElementById('forInp-'+n);
tgt.removeChild(f.elements['inpB-'+n]);
}
}
}

document.forms['formB'].reset();
</script>


</body>
</html>

--
Fred
Jul 23 '05 #4

P: n/a
FRED THAT IS SOME COOL CODE. I DON'T KNOW EXACTLY YET HOW IT ALL WORKS,
AND I HAVE YET TO GET IT TO WORK BUT I'LL FIGURE IT OUT. CHECK OUT MY
POST I WAS GOING TO SUBMIT. MAYBE THIS WILL GIVE YOU AN IDEA EXACTLY
WHAT I WAS TRYING TO DO. I DID THOUGH CLEAN UP MY
CODE AND I AM LEARNING MORE MORE ON WHAT'S RIGHT AND WRONG. I ALSO
PICKED UP A JAVASCRIPT BOOK, WHICH WAS SOMETHING I NEEDED TO DO. ANYWAY
CHECK IT OUT AND LET ME KNOW WHAT YOU THINK.

PROBLEM: I CAN'T GET THE LAST RESUTS TO WORK CORRECTLY. I WOULD
PROVIDE THE CODE (AND WILL IF REQUESTED).
BUT IN MY OWN WORDS I AM TRYING TO HAVE THE FIRST FORM
DYNAMICALLY CREATE INPUT BOXES BASED ON THE NUMBER
ENTERED. THEN ON THE SECOND FORM I WAS THE USER TO BE
ABLE TO CLICK THE ONE OF THE CHECKBOXES AND SEE MORE
inputES APPEAR.
________
enter # of input0A |_______| [submit] [reset]

-------------------------------------------------------
READ: THE FORM 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]

-------------------------------------------------------
READ: THE FORM BELOW IS THE RESULTS OF CLICKING THE FIRST CHECKBOX
ABOVE
________ ________ ________
input1A |_______| [] input2A |_______| input3A |_______|
________
input1B |_______| [] check here to add input2B and input3B

[submit] [reset]

Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.