473,575 Members | 3,470 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Dynamic Form with a Dynamic Form inside it...

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
"TAGSELECTE D") 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="create Fom(counter.VLA NS.value);" value="Update">
</form>

JAVASCRIPT CODE:
function createForm(VLAN S) {
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 + "'>"
+ "TAGSELECTE D <input type='checkbox' id='tag_1' name =" + inter +
"tagName"
+ i + inter + "' onClick='functi onC1(i);'>"
+ "<span id=spanN" + i + "style='positio n:relative;'></span>";
}
if (document.layer s) {
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("P lease select up to 15 entries.");
}

}//close function

function functionC1(i) {
var the_box = window.document .all.tag_1;
if (the_box.checke d == 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
4 2131
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="create Fom(counter.VLA NS.value);" value="Update">
</form>

JAVASCRIPT CODE:
function createForm(VLAN S) {
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 + "'>"
+ "TAGSELECTE D <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='functi onC1(i);'>"
+ "<span id=spanN" + i + "style='positio n:relative;'></span>";
}
Why put support for a browser that is used by perhaps 1% of
surfers first? Put it last.
if (document.layer s) {
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("P lease 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.checke d == false) {
or

if (!the_box.check ed) {
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.getEle mentById('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
thanks for the help i'll clean it up...

Jul 23 '05 #3
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.c om/faq/faq_notes/alt_dynwrite.ht ml>

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.g etElementById) && document.all){
document.getEle mentById =
function(id){re turn 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="initFo rm(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(th is);};
inp[i].checked = false;
// Disable and hide the associated input
txt = f.elements['inpA-' + inp[i].id.split('-')[1]];
txt.disabled = true;
txt.style.visib ility = 'hidden';
}
}
}
function showInput(c) {
var t = c.form.elements['inpA-'+c.id.split('-')[1]];
if (c.checked) {
t.style.visibil ity = 'visible';
t.disabled = false;
if (c.blur) c.blur();
if (t.focus) t.focus();
} else {
t.style.visibil ity = 'hidden';
t.disabled = true;
}
}

initForm(docume nt.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="clearI nputs(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.getEle mentById('forIn p-'+n);
// if it's checked and it doesn't have an input, add one
if ( inp[i].checked && !f.elements['inpB-'+n]){
oTxt = document.create Element('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.getEle mentById('forIn p-'+n);
tgt.removeChild (f.elements['inpB-'+n]);
}
}
}

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


</body>
</html>

--
Fred
Jul 23 '05 #4
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
2353
by: pizzy | last post by:
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...
7
3567
by: Venus | last post by:
Hello, I am trying to generate a dynamic form at runtime and would like to do it using "<asp: ..." form elements as follows Build up the string that is placed somewhere in the HTML code the same way like regular input fields can. strForm = "<form name=""myForm"" runat=""server"">" & vbCrLf strForm += "<asp:button name=""myName"" .......
4
3296
by: Venus | last post by:
Hello, Thanks for your reply. I understand that a control can be created dynamically in several ways: 1) using StringBuilder 2) using Controls.Add 3) using ASP PlaceHolder But this is just for the controls and not for the form itself. What I am trying to achieve is to create an entire form (including controls)
0
1478
by: Venus | last post by:
Hello, After trying some ways to do it I wanted to use something like the code below but for some reason is not working (I have to generate the entire form dynamically (not only the controls)): Can anyone make any suggestions on how to do it ? Thanks
1
4824
by: russ | last post by:
Hi all, Here's a problem I'm having with a dynamic table. Following the guidelines here (http://www.codeproject.com/aspnet/dynamiccontrols.asp), which make perfect sense. The problem is that the table contains a SELECT box populated on the initial load. Every time I postback I'm inserting a column into the table, the dropdown always...
7
1883
by: Abraham Luna | last post by:
how do i stop the dynamic validators from breaking explorer if i use a dynamic validator and move to a different control it breaks explorer and i can type in the page when i'm not supposed to. thank you.
0
3410
by: davidr | last post by:
Hi, I have a panel that I load user Control in no problem. The problem arrises when I do a post back on one of these user controls. I have button it does a click event. In this click event I will do some database updates, then I will use reflection to call a method in the parent (this.page) to load the new user control. Its at this...
1
4494
by: remya1000 | last post by:
i'm using VB.net 2003 application program. i'm trying to convert a VB6 program to VB.NET. The VB6 code i'm trying to convert is shown below. declared g_Share() array in module and trying to add values to it inside form. VB6 (Code inside Module) 'Global type array to hold printer info. Public Type OShare PrinterName As String
0
7845
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7775
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
8120
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
1
7868
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
6515
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5664
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
5338
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3797
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
0
1107
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.