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

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

P: n/a
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
Share this Question
Share on Google+
7 Replies


P: n/a

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

P: n/a
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>&nbsp;</p>
<p>&nbsp; </p>
</body>
</html>

Jul 23 '05 #3

P: n/a
/*
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

P: n/a
This is racking my brain!!!!

Jul 23 '05 #5

P: n/a
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

P: n/a
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

P: n/a
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

This discussion thread is closed

Replies have been disabled for this discussion.