Adding new input fields when buttons clicked

[Bl4ckMaj1k]

Good afternoon my favorite people!!! Got a simple one for you all (well at least I was told it was easy by a friend who doesn't know JS)!!

 

So I have a form that has a name and quantity of times that person appears on attendance sheets. For example

 

Chris      Quantity: 10

Amy        Quantity: 24

Josh        QUantity: 3

 

What I need to do is make it possible for the user to be able to click a button and a new field comes up. The new field needs to have the same structure as the above data. Meaning a name, the quantity label, and an input field to enter some quantity value. However, for these fields, the name field will be left blank for the user to enter their own names...names that aren't on our current list of names. So each row in the above form would be 3 divs floating to the left (just to keep everything uniform, ive used classes). If I am the user, I would see a form that asks me to type in new name, then to the right of the word quantity, I would get the option to enter a value into a textbox.

 

My question is: Is there a way to click a single button and javascript creates exactly what I have formatted? Meaning the following gets created with a single click of an add button:

 

<div class="names">
     <input type="text" name="I don't know what would need to be here" value="I dont know what would need to be here" />
     <input type="hidden" name="name_labels[]" value="I don't know what would need to be here" />
</div>

<div class="quantity">
     Quantity
</div>

<div class="quantity_field">
     <input type="text" name="quantity[Whatever went in the value of the hidden input] />
</div>

 

Can someone help me out with this? Thanks in advance!!!

 

Regards,

Bl4ck Maj1k

[fugix]

you can use an onlclick event..when the event is triggered it executes a function that uses document.write() to add the data that you want to add

[Bl4ckMaj1k]

you can use an onlclick event..when the event is triggered it executes a function that uses document.write() to add the data that you want to add

 

I'm sorry, I really don't mean to be a 'NewB' or a 'Leech' or whatever the kids are calling them these days....but I really have no idea how to just draw up an onclick event that writes all the data. Sort of the reason I posted here....hoping maybe I can get a helping hand in that department. I'm pretty savvy in PHP but when it comes to JS I really have no clue. I am currently reading one of the O'Reilly series books on coding with Javascript but unfortunately I had to read the PHP books first. So I am just on Chapter 2 (eek!!!). Any help would be greatly appreciated and thanks again!

 

Bl4ck Maj1k

[PFMaBiSmAd]

You would use array field names for all the fields (the ones your page generates with existing data and the dynamically added ones.) i.e. name="name[]" and name="quantity[]". I don't see why you are using a hidden field.

 

Actual code to do this would be something like -

 

<script type="text/javascript">
function add_field(){
var max = 24; // total number of fields, adjust value as needed or for an unlimited number, just remove the test from the logic
var cont = document.getElementById('addhere'); // refer to the div
var numfields = cont.getElementsByTagName("input").length; // get number of input fields in the div
if(numfields < max){
	// create a div element
	var div1 = document.createElement('div');
	// Get template data
	div1.innerHTML = document.getElementById('fieldtpl').innerHTML;
	// append to div, so that template data becomes part of document
	document.getElementById('addhere').appendChild(div1);
} else {
	alert("You have reached the maximum number of fields\n that can be added at one time!");
}

}
</script>

<form method="post" action="formaction.php" >
    <div id="addhere">
	<div class="names">
		<input type="text" name="name[]" value="some existing name" />
	</div>
	<div class="quantity">
		Quantity
	</div>
	<div class="quantity_field">
		<input type="text" name="quantity[]" value="some existing qty"/>
	</div>
</div>
<a href="javascript:void(0);" onClick="add_field();">Click to add another name</a><br />
<input type="submit">
</form>
<!-- Template. This whole section will be added directly to working div above -->  
<div id="fieldtpl" style="display:none">
<div class="names">
	<input type="text" name="name[]" value="" />
</div>
<div class="quantity">
	Quantity
</div>
<div class="quantity_field">
	<input type="text" name="quantity[]" value="" />
</div>
</div>

 

By using the template method shown, you can easily use and style any html without writing out the javascript code needed to dynamically create each element making up that html.

[Bl4ckMaj1k]

EDIT:

 

Solved....I had a div container issue. I had to look back at your code and I noticed the following

 

<container Div>

 

content

 

<close Div>

 

<button goes here>

 

<new div to create (syntax) goes here>

 

My order was way off before. I didn't understand that the button wasn't supposed to be inside the main div...until i noticed you were running an append method in the JavaScript which I assume it appends that html code to the div you defined as the parent.....brilliant! I can't wait for the day I understand Javascript as much as I do PHP, HTML, and CSS!!! Is it more complicated of a language?

 

Overall, you are awesome!!! I really appreciate you and all the others on this forum who help all us 'Oober-Newbz' out when there is something we don't understand.

 

Thanks a Million!!!!!

Bl4ck Maj1k

[Bl4ckMaj1k]

One last question....

 

<form method="post" action="formaction.php" >
    <div id="addhere">
	<div class="names">
		<input type="text" name="name[]" value="some existing name" />
	</div>
	<div class="quantity">
		Quantity
	</div>
	<div class="quantity_field">
		<input type="text" name="quantity[]" value="some existing qty"/>
	</div>
</div>
<a href="javascript:void(0);" onClick="add_field();">Click to add another name</a><br />
<input type="submit">
</form>
<!-- Template. This whole section will be added directly to working div above -->  
<div id="fieldtpl" style="display:none">
<div class="names">
	<input type="text" name="name[]" value="" />
</div>
<div class="quantity">
	Quantity
</div>
<div class="quantity_field">
	<input type="text" name="quantity[]" value="" />
</div>
</div>

 

If you notice, the first Div has a textfield option. I want that to be static value. Not a type-able input field. For example:

 

Chris

Amy

Tom

 

Those are static values. They are already on our attendance sheets. I have, lets say for examples sake, 10 names currently on my list. Then I utilize those 'Other' fields. The issue is associating the values with one another. How do I create an array for 2 field values?

 

Chris    Quantity

[]          []

 

Would it be $_POST['name']['quantity'] ?? Sorry if thats a dumb question.

[PFMaBiSmAd]

There are two ways of doing what you ask -

 

1) Use the readonly="readonly" attribute in the name <input> field for the existing students.

 

2) Just display the name without it being an <input> field and use the name or corresponding id as the index in the name="quantity[name or index goes here...]". In this case you would probably want the dynamically added fields to use a different name="" attributes (dname[] and dquantity[] in the following) to distinguish them from the existing 'static' field, something like -

 

<form method="post" action="formaction.php" >
<div id="addhere">
	<div class="names">
		some existing name
	</div>
	<div class="quantity">
		Quantity
	</div>
	<div class="quantity_field">
		<input type="text" name="quantity[123]" value="45" />
	</div>
</div>
<a href="javascript:void(0);" onClick="add_field();">Click to add another name</a><br />
<input type="submit">
</form>
<!-- Template. This whole section will be added directly to working div above -->  
<div id="fieldtpl" style="display:none">
<div class="names">
	<input type="text" name="dname[]" value="" />
</div>
<div class="quantity">
	Quantity
</div>
<div class="quantity_field">
	<input type="text" name="dquantity[]" />
</div>
</div>

 

This would submit a post array like -

 

Array
(
    [quantity] => Array
        (
            [123] => 23 // the index is the id, the value is the quantity
        )

    [dname] => Array
        (
            [0] => A new name
        )

    [dquantity] => Array
        (
            [0] => 82
        )

)

[Bl4ckMaj1k]

There are two ways of doing what you ask -

 

1) Use the readonly="readonly" attribute in the name <input> field for the existing students.

 

2) Just display the name without it being an <input> field and use the name or corresponding id as the index in the name="quantity[name or index goes here...]". In this case you would probably want the dynamically added fields to use a different name="" attributes (dname[] and dquantity[] in the following) to distinguish them from the existing 'static' field, something like -

 

<form method="post" action="formaction.php" >
<div id="addhere">
	<div class="names">
		some existing name
	</div>
	<div class="quantity">
		Quantity
	</div>
	<div class="quantity_field">
		<input type="text" name="quantity[123]" value="45" />
	</div>
</div>
<a href="javascript:void(0);" onClick="add_field();">Click to add another name</a><br />
<input type="submit">
</form>
<!-- Template. This whole section will be added directly to working div above -->  
<div id="fieldtpl" style="display:none">
<div class="names">
	<input type="text" name="dname[]" value="" />
</div>
<div class="quantity">
	Quantity
</div>
<div class="quantity_field">
	<input type="text" name="dquantity[]" />
</div>
</div>

 

This would submit a post array like -

 

Array
(
    [quantity] => Array
        (
            [123] => 23 // the index is the id, the value is the quantity
        )

    [dname] => Array
        (
            [0] => A new name
        )

    [dquantity] => Array
        (
            [0] => 82
        )

)

 

Method 2 looks good and simple enough for me to utilize. So do I just run 2 separate foreach functions? One for the first batch (quantity[someName]) and another for the dynamic fields (dname[] and dquantity[]). If this is the case, how do I get the database to know when dname[] is associate with that specific dquantity[]. Sorry if I am frustrating you but this process is all so new to me!!! lol I just want to make sure I understand how this stuff is working for future references.

[PFMaBiSmAd]

know when dname[] is associate with that specific dquantity[]

 

Use a foreach(){} loop to iterate over the dname array, getting the key and the value. Then inside the loop, use that key to access the corresponding value from the dquantity array.

[Bl4ckMaj1k]

:-(

 

I am still having issues with this. What's this key you speak of? I've seen it before (=>) but I don't understand it....I don't even know if that's the right symbol for it. Can you explain a bit further?

[PFMaBiSmAd]

See the second syntax mentioned in the documentation - http://us2.php.net/manual/en/control-structures.foreach.php