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

P

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]
 
A

able.fireteam

pizzy said:
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]
 
G

guilllet

pizzy said:
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").value;
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>&nbsp;</p>
<p>&nbsp; </p>
</body>
</html>
 
P

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!
 
G

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?
 
R

RobG

pizzy said:
/*
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:

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.parentNode.removeChild(labels);
}
"><br>
</form>
 
P

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.parentNode.removeChild(labels);
}
"><br>
</form>
<form name="myForm"><div id="field1" style="position:relative;">
</div></form>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,734
Messages
2,569,441
Members
44,832
Latest member
GlennSmall

Latest Threads

Top