Adding a textbox field at runtime in PHP

[theITvideos]

Hi there,

 

I am working on a PHP website. The scenario is that there is page where users can enter a Group name and can specify its Members name.

 

A group can have n-number of members under it. We cannot predict how many members will be assigned to a group.

 

So therefore, I have given a link or button under the group name as 'add more member' where users can click and add member names in the textbox at runtime.

 

Please see the Screenshot for a clear idea as to what I am trying to accomplish here.

 

Thank you!

 

All comments and feedback are always welcomed.

 

 

 

[attachment deleted by admin]

[PFMaBiSmAd]

If you don't mind if the page refreshes when you add an input box, you can simply put a link that when submitted will cause you php script to 'dynamically' add the HTML for one more input field to the page. You would probably want to maintain the number of input fields either as a hidden field or as part of the link.

 

If you don't want the page to refresh when you add an input box, you can do this using javascript to append an input field to a <div>. There are a ton of javascript 'append an input field' scripts posted all over the Internet.

 

In either case, use a HTML array field name so that you can simply use php's array functions to iterate over the data once it is submitted - http://us.php.net/manual/en/faq.html.php#faq.html.arrays

[Colton.Wagner]

I would recommend the javascript version as I have done it before. It is not that hard to be honest.

 

Thanks,

Colton Wagner

[theITvideos]

Thanks for your replies guys.

 

I am now able to add textbox field onto the form using Javascript (without page refresh) which is ok.

 

This is the code I am using:

 

   

<script type='text/javascript'> 

    function add_member() {
        var div1 = document.createElement('div');

        // Get template data
        div1.innerHTML = document.getElementById('id-member-box').innerHTML;

        // append to our form, so that template data
        //become part of form
        document.getElementById('id-member-box').appendChild(div1);          
    }
    </script>

 

Now the only problem is when I call this function 3 times (to add 3 textboxes on the form) it adds 4 textbox and increments by the total number.

 

That is, when I call this function, it adds textboxes as: 1 - 2 - 4 - 8 (when I call the add_member() function 4 times it adds 8 textboxes on the form.

 

Is there something we can do to prevent this in the javascript code.

 

Thank you!

[Colton.Wagner]

Yes, you are taking what is inside the "div" container and copying so it is doubling what it gets everytime. Instead make a while statement that increments the inputs and manually add the html.

 

var content = "<input type=\"text\" value=\"\" name=\"member#\" />"

 

Then number sign in the above code should be an increment variable from a while statement. This will make it so that you can add multiple members to a database in stead of having multiple members but only the last one gets submitted. You should also include at the end of the while statement a hidden value that tells the php code how many members there are so it know how to set the DB up.

 

Thanks,

Colton Wagner

[theITvideos]

Yes, you are taking what is inside the "div" container and copying so it is doubling what it gets everytime. Instead make a while statement that increments the inputs and manually add the html.

 

var content = "<input type=\"text\" value=\"\" name=\"member#\" />"

 

 

Could you please show me how you wrote the while statement  for it to increment the inputs.

 

Thank you bro!

[PFMaBiSmAd]

You don't need to loop... or use any other complicated methods.

 

The following is for a type='file'. Just change it to a type='text' -

<script type="text/javascript">
function add_field(){
var max = 4; // total number of fields
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);
}
}
</script>

<form method="post" action="formaction.php" enctype="multipart/form-data" >
    <div id="addhere">
	<input type="file" name="upload[]" value="" size="50" onchange="add_field();" >
</div>
<input type="submit">
</form>
<!-- Template. This whole data will be added directly to working div above -->  
<div id="fieldtpl" style="display:none">
<input type="file" name="upload[]" value="" size="50" onchange="add_field();" >
</div>

[theITvideos]

Thanks for the reply.

 

It worked like a charm. Now if it was for just 1 textbox, I could simply and easily insert the textbox value into the database. Now I have multiple textboxes and all those values in each of the textboxes.

 

I just need to somehow enter those values into the database and each of those textbox values needs to be inserted in a new row in the table.

 

But first, how do we get (retrieve) the values from these multiple textboxes (populated by javascript code) for inserting values in db.

 

Please reply

 

Best regards.

[objnoob]

 

Everything submitted by the form whether or not you know exists would be found in $_POST or $_GET. In your case using input type attribute file they would be found in the $_FILES superglobal.

 

You could write could to check for them...

Say you have 1 input boxes at the time PHP outputs the form... If Javascript creates 3 more. You could expect 4 members in the $_FILES array. To get the number of javascript created input elements you can find the delta by using the formula Difference = End - Start:

 

$js_created_element_count = count($_FILES) - 1;

 

Now you have this count, and if you cleverly crafted a naming convention for your js_created elements you can access them using a cleverly crafted loop:

 

for ($i = 0; $i =< $js_created_element_count; $i++){
${'file_'.$i_name} = $_POST['file_'.$i][name];
}

[objnoob]

for ($i = 0; $i =< $js_created_element_count; $i++){${'file_'.$i.'_name'} = $_POST['file_'.$i][name];}

 

there

[theITvideos]

 

Everything submitted by the form whether or not you know exists would be found in $_POST or $_GET. In your case using input type attribute file they would be found in the $_FILES superglobal.

 

You could write could to check for them...

Say you have 1 input boxes at the time PHP outputs the form... If Javascript creates 3 more. You could expect 4 members in the $_FILES array. To get the number of javascript created input elements you can find the delta by using the formula Difference = End - Start:

 

$js_created_element_count = count($_FILES) - 1;

 

 

 

Thanks for the reply. I added the following line in my code:

 

$js_created_element_count = count($_FILES) - 1;

 

and on the form I created few textboxes using javascript, and trying to do:

 

echo $js_created_element_count

and

print_r($js_created_element_count);

and everytime it returns -1 then I tried removing -1 it then returns 0. How do I actually get the count of the textboxes added using javascipt at runtime.

 

Please reply.

 

Thank you!

 

[PFMaBiSmAd]

It would seriously help if you posted the name you used for the text box array name, as the code that objNoob posted has nothing to do with what you are actually doing.

 

To iterate over the text boxes, you would use code similar to the following -

 

foreach($_POST['the_form_field_array_name_here'] as $value){
    // $value will contain each of the submitted field values in turn
    // test if $value is not empty and use as needed inside this loop
}

[theITvideos]

It would seriously help if you posted the name you used for the text box array name, as the code that objNoob posted has nothing to do with what you are actually doing.

 

To iterate over the text boxes, you would use code similar to the following -

 

foreach($_POST['the_form_field_array_name_here'] as $value){
    // $value will contain each of the submitted field values in turn
    // test if $value is not empty and use as needed inside this loop
}

 

Thanks for your reply. The name of the textbox that I use for storing the members name is: 'id-memberName-box'

 

And in Javascript I am using the function as:

 

<script type='text/javascript'> 
function add_members()
{
var div1 = document.createElement('div');
    div1.innerHTML = document.getElementById('id-memberName-box').innerHTML;
    document.getElementById('memberName-mainDiv').appendChild(div1);
}
    </script>

 

This function works fine and does add a member textbox field at every click when calling this function.

 

I just 2 things:

First, I need to get all the textboxes values and hold them in array or somewhere,

and second, store these in the table field 'memberName' (I have the database set up properly)

 

Currently it stores the value in the table field 'memberName'  if it is from a single textbox.

 

Just need to grab values from multiple textboxes.

 

[Colton.Wagner]

PFMaBiSmAd said that a while statement would not be needed but this whole problem could be solved in one while statement rather than multiple if statements and a loop. Just saying it could have been done a lot simpler than all this trouble your going to now.\

 

Thanks,

Colton Wagner

[PFMaBiSmAd]

The name of the textbox that I use for storing the members name is: 'id-memberName-box'

 

Then in the code example I posted you would use $_POST['id-memberName-box'] as the array where the data values would be.

 

 

[theITvideos]

PFMaBiSmAd said that a while statement would not be needed but this whole problem could be solved in one while statement rather than multiple if statements and a loop. Just saying it could have been done a lot simpler than all this trouble your going to now.\

 

Thanks,

Colton Wagner

 

Thanks for the reply. You're right, I've been going through all this pain. But I guess I found an alternative which does not require adding textboxes at runtime. I'll by default show 3 textboxes. And I found the code for implementing this in the project. Let me give it a shot.

 

By the way Colton, I just noticed that you are only 17 and know lots of stuff already about programming. I am pleasantly surprised!

[Colton.Wagner]

PFMaBiSmAd said that a while statement would not be needed but this whole problem could be solved in one while statement rather than multiple if statements and a loop. Just saying it could have been done a lot simpler than all this trouble your going to now.\

 

Thanks,

Colton Wagner

 

Thanks for the reply. You're right, I've been going through all this pain. But I guess I found an alternative which does not require adding textboxes at runtime. I'll by default show 3 textboxes. And I found the code for implementing this in the project. Let me give it a shot.

 

By the way Colton, I just noticed that you are only 17 and know lots of stuff already about programming. I am pleasantly surprised!

 

I also own my own business in Evansville Indiana not to toot my own horn or anything. I really love this forum it picks your brain and teaches you different styles of programming. I learn a lot from the staff and other members such as yourself so I enjoy having intriguing conversations it really helps build problem solving skills.

Thanks,

Colton Wagner

[objnoob]

Heh, here I thought it was for a file upload.

All it takes is a quick google of $_POST, $_GET, and $_FILES and you will forever know what they are.... Those are very very important PHP superglobals when using HTML forms.

 

I'm not here to write people's code. I'm here to show examples of how to accomplish a task. It's up to the programmer to apply critical thinking to get that solution to work with his/her pre exisiting code.

 

Give a man a fish, he will eat for a day. Teach a man to fish, he can eat for a lifetime! 

[theITvideos]

 

 

Give a man a fish, he will eat for a day. Teach a man to fish, he can eat for a lifetime! 

 

I am a huge fan of this phrase! I love it. Oh it reminds me to cook a fish. Its been a long since I had a fish.