Revised: A form -to- dynamic form -to- dynamic checkboxes

pizzy

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 (WHICH IS CREATED BY
THE FIRST FORM CALLING A FUNCTION) I WANT THE USER TO BE
ABLE TO CLICK ON ONE OF THE CHECKBOXES AND SEE MORE
INPUT BOXES APPEAR. HAS ANYONE DONE SOMETHING LIKE THIS?
IF SO, WHAT IS THE BEST APPROACH FOR ME TO GET THIS DONE?
________
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 #1

Subscribe Post Reply

1912

able.fireteam

pizzy wrote:

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 (WHICH IS CREATED BY
THE FIRST FORM CALLING A FUNCTION) I WANT THE USER TO BE
ABLE TO CLICK ON ONE OF THE CHECKBOXES AND SEE MORE
INPUT BOXES APPEAR. HAS ANYONE DONE SOMETHING LIKE THIS?
IF SO, WHAT IS THE BEST APPROACH FOR ME TO GET THIS DONE?
________
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 #2

guilllet

pizzy wrote:

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 (WHICH IS CREATED BY
THE FIRST FORM CALLING A FUNCTION) I WANT THE USER TO BE
ABLE TO CLICK ON ONE OF THE CHECKBOXES AND SEE MORE
INPUT BOXES APPEAR. HAS ANYONE DONE SOMETHING LIKE THIS?
IF SO, WHAT IS THE BEST APPROACH FOR ME TO GET THIS DONE?
________
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]

If you don't have many inbox to display try using div's labels and
changing their style.display property. It doesn't create the fields but
it hide/display them, so the feeling is the same. That's the only
solution i know with client side code. With server side code it would
be easier.

Example:

<html>
<head>
<title>Generating Fields</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
</head>

<body>
<script language="JavaScript" type="text/JavaScript">

var maxFields=4;

function showInputs() {

n=document.getElementById("number_of_fields").valu e;
for (i=1;i<=n&&i<maxFields;i++) {
field=eval("document.getElementById('field"+i+"')" );
field.style.display="block";
}
}
</script>
<form name="form1" method="post" action="">
<p>number of fields:
<input type="text" name="number_of_fields" id="number_of_fields">
</p>

<p>
<input type="button" name="Submit" value="show fields"
onClick="showInputs()">
</p> </form>
<form name="form1">
<div id="field1" style="display:none">
<p>field1:
<input type="text" name="textfield">
</p>
</div>
<div id="field2" style="display:none"><p> field2:
<input type="text" name="textfield2">
</p>
</div>
<div id="field3" style="display:none"><p>field3:
<input type="text" name="textfield3">
</p>
</div>
</form>
<p> </p>
<p>  </p>
</body>
</html>

Jul 23 '05 #3

pizzy

/*
guilllet,

Dude thanks for the code but I already know how to do that... Look at
the second form I drew. It has check boxes there that will allow the
user to add additional fields. These check boxes should view an
additional two fields. Check out my showInputs().
*/

function showInputs() {
var howMany = document.form1.number_of_fields.value;
inter = "'";
data = "";

if (howMany < 16 && howMany > -1) {
for (i=1; i <= howMany; i++) {
data = data + " <input type='text' size=10 name=" + inter +
"inputMe[]" + i + inter + "'>" + " <input type='checkbox'
onClick='showInputs2();' id='tag_1' name='checkMe'" + i + "'><br>";
}

field1.innerHTML = data;

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

#This all goes into a div tag. check it out...
<form>
<div id="field1" style="possitive:absolute"></div>
</form>
#Your help will not go unnoticed. Thanks!

Jul 23 '05 #4

pizzy

This is racking my brain!!!!

Jul 23 '05 #5

guilllet

ok, i see.
so your problem is the last part, that's it?
tomorrow i'll try to find out how to make it work.
what kind of error do you get?

Jul 23 '05 #6

RobG

pizzy wrote:

/*
guilllet,

Dude thanks for the code but I already know how to do that... Look at
the second form I drew. It has check boxes there that will allow the
user to add additional fields. These check boxes should view an
additional two fields. Check out my showInputs().
*/
Please quote what you are replying to and trim any excess to
reduce message length.

Please wrap code manually at about 65 characters to ensure a
couple of posts and replys without wrapping. This makes it much
easier for others to fix your code.

Indent code using 2 or 4 spaces (2 preferred) to stop wrapping
and keep lines to a reasonable length.

All the above is on the group FAQ:

<URL:http://www.jibbering.com/faq/>

function showInputs() { [...] for (i=1; i <= howMany; i++) {
data = data + " <input type='text' size=10 name=" + inter +
"inputMe[]" + i + inter + "'>" + " <input type='checkbox'
onClick='showInputs2();' id='tag_1' name='checkMe'" + i + "'><br>";
}

This will create inputs with identical ids and likely some with
identical names, thereby creating invalid HTML.
field1.innerHTML = data;

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

Below is a better way of doing what you are attempting. It uses
DOM methods to add the extra elements and a selector to ensure
correct input. The checkboxes are added to the form, but you
could put them into a separate div if you want.

I've used document.write to create the options for brevity.

I've also added a dummy showInputs2() function.
<script type="text/javascript">
function showInputs(f,v) {
var i = 0,
oInp, oLabel;
while (i++ < v){
oLabel = document.createElement('label');
oInp = document.createElement('input');
oInp.type = 'checkbox';
oInp.onclick = function() {showInputs2(this)};
oInp.id = 'tag_' + i;
oInp.name = 'checkMe' + i;
oLabel.appendChild(oInp);
oLabel.appendChild(document.createTextNode(i));
oLabel.appendChild(document.createElement('br'));
f.appendChild(oLabel);
}
}
function showInputs2(x) {
alert(
'function showInputs2()'
+ '\ncalled from ' + x.nodeName
+ ' ' + x.type
+ '\nid: ' + x.id
+ ' name: ' + x.name
);
}

</script>

# This all gets added to the form. Check it out...
<form>
<select onchange="
showInputs(this.form,
this[this.selectedIndex].value);
">
<option selected>Select how many checkboxes to add</option>
<br>
<script type="text/javascript">
for (var i=1; i<17; i++) {
document.write('<option value="' + i
+ '">' + i + '<\/option>');
}
</script>
</select><br>
<input type="reset" onclick="
var labels = this.form.getElementsByTagName('label');
var i = labels.length;
while (i--){
labels[i].parentNode.removeChild(labels[i]);
}
"><br>
</form>

--
Rob

Jul 23 '05 #7

pizzy

I see that you have the oInp.onclick sending to showInputs2. How am I
able to create a unique input box in the showInputs2 function?

<script type="text/javascript">
function showInputs(f,v) {
var i = 0,
oInp, oLabel;
while (i++ < v){

oLabel = document.createElement('label');
oLabel2 = document.createElement('label');
oInp = document.createElement('input');
oDiv = document.createElement('div');

oInp.type = 'checkbox';
oInp.onclick = function() { showInputs2(this)};
oInp.id = 'tag_' + i;
oInp.name = 'checkMe' + i;

oDiv.type = 'div';
oDiv.id = 'showTag' + i;
oDiv.style.position = 'relative';

oLabel.appendChild(document.createTextNode(i));
oLabel.appendChild(oInp);
oLabel.appendChild(document.createElement('br'));

oLabel2.appendChild(document.createTextNode("The text box should
display here after I click the check box"));
oLabel2.appendChild(oDiv);

field1.appendChild(oLabel);
field1.appendChild(oLabel2);
}
}

function showInputs2(x) {
alert( 'function showInputs2()' + '\ncalled from ' + x.nodeName + ' '
+ x.type + '\nid: ' + x.id + ' name: ' + x.name );

}
</script>

<form>
<select
onchange="showInputs(this.form,this[this.selectedIndex].value);">
<option selected>Select how many checkboxes to add</option>
<br>
<script type="text/javascript">
for (var i=1; i<17; i++) {
document.write('<option value="' + i
+ '">' + i + '<\/option>');
}
</script>
</select><br>
<input type="reset" onclick="
var labels = this.form.getElementsByTagName('label');
var i = labels.length;
while (i){
labels[i].parentNode.removeChild(labels[i]);
}
"><br>
</form>
<form name="myForm"><div id="field1" style="position:relative;">
</div></form>

Jul 23 '05 #8

by: pizzy | last post by:

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...

Javascript

How to get value of selected checkboxes in...

by: zoneal | last post by:

Hello there, Currently I am working with the project which needs dynamically generated checkboxes and i have generated dynamic checkboxes but i am facing problem with getting the value of...

ASP.NET

copying entire form objects to another form??

by: Son KwonNam | last post by:

Hello, When there a two forms like the follosings, <form name="source"> <input name="a..." value=".." ..> <input name="a..." value=".." ..> <input name="a..." value=".." ..> <input...

Javascript

dynamic form validation / multiple forms

by: jedimasta | last post by:

Good evening all, I'm a relatively new to javascript, but I've been working with ColdFusion and PHP for years so I'm not necessarily ignorant, just stuck and frustrated. Using ColdFusion I'm...

Javascript

Storing dynamic form values in Arrays for display & insert

by: assgar | last post by:

Hi Developemnt on win2003 server. Final server will be linux Apache,Mysql and PHP is being used. I use 2 scripts(form and process). The form displays multiple dynamic rows with chechboxs,...

PHP

Adding Dynamic Controls to a table

by: srneu71 | last post by:

I have a project that requires a dynamically generated matrix table. The table is setup with 4 quadrants (N,S,E,W) with checkboxes to "link" the data in adjacent quadrants. The table has to be...

ASP.NET

split-form to single form in vb

by: nduerr | last post by:

I am looking for the VB code to switch the way a form opens on click event. Specifically I have a form created with a default split view setting. I would like to open this form in single form...

Microsoft Access / VBA

Checkbox form to allow user to select query output fields

by: dizzydangler | last post by:

Hi, I'm new to access (2007, running on XP), but I've gotten some great help from this site on my project so far. However, the more I know, the more complex the problems seem to become.... I'm...

Microsoft Access / VBA

How to modify code to include a duration?

by: timleonard | last post by:

How can the following code to be modified to include a duration Column or "Named Range"? I would like to modify it so that a task that has a duration for example, three to five days would show...

Visual Basic 4 / 5 / 6

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Changing the language in Windows 10

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...

Windows Server

Problem With Comparison Operator <=> in G++

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,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

Revised: A form -to- dynamic form -to- dynamic checkboxes

Similar topics