Welcome Guest, Not a member yet? Register   Sign In
add fields to form
#1

[eluser]bhbutter123[/eluser]
what is the easiest, best way to let a user add fields to a form? For example, say you have an text input field where they put someone's name. If they want to add another person's name they would click "add name" and a new input would be added to the form. I have never done anything like this before, with or without codeigniter so please explain it in an easy to understand way.
Thanks
#2

[eluser]darkhouse[/eluser]
all you need is some javascript to add the new fields on the fly. You'll need a container so that you can just append it with the new field, like this:

Code:
<div id="names">
   &lt;input type="text" name="name[]" /&gt;
</div>
<a href="#" id="btn_add_name">Add Name</a>
//either add an onclick to the button, or use jQuery. the forum won't let me write the onclick attribute.

Note the square brackets in the name attribute. This will make it so your post is an array of names. Next, your javascript would be like this:

Code:
function addName(){
   var elmt = document.getElementById('names');
   elmt[dot]innerHTML += '&lt;input type="text" name="name[]" /&gt;';
   //change [dot] to an actual dot. the forum won't let me write it here.
   return false;
}

Or if you use jQuery, it would be this:

Code:
$(document).ready(function(){
   $('#btn_add_name').click(function(){
      addName();
      return false;
   });
});

function addName(){
   $('#names').append('&lt;input type="text" name="name[]" /&gt;');
}

That should just about do it. Just remember to loop through the name post variable to do whatever it is you're doing with the names.
#3

[eluser]bhbutter123[/eluser]
is it possible to still use the codeigniter form_helper with this javascript...the main reason i am asking is that is how i repopulate the form on an error while submitting and find it very easy, how would i incorporate that into this solution?
#4

[eluser]darkhouse[/eluser]
there is no repopulating the form if you're using ajax to process it. the fields won't have changed at all.
#5

[eluser]gigas10[/eluser]
There is a way to repopulate it. At least I know there is with select multiples.
Code:
$vals = array();
if(set_value('root_cause')):
    foreach(set_value('root_cause') AS $row):
        $vals[] = $row;
    endforeach;
endif;

and the dropdown:

Code:
&lt;?=form_dropdown('root_cause[]', $root_causes_dd, $vals, 'MULTIPLE="MULTIPLE"');?&gt;

Although with text fields I'm not sure on how to validate the fields.
#6

[eluser]Fabdrol[/eluser]
Well, your POST is an array (name="names[]"), so you'll be able to retrieve it like an array.
Then, you count the array to find out how many names there's in this array and create the amount of fields according to it.

Like this:
Code:
$names = set_value('names');
$total = count($names) - 1; // the one is the 'default', fixed field, and that one doesn't needs to be generated again..

for($i = 0; $i < $total; $i += 1) {
    $value = $names[$i];
    echo form_input("names[]", $value, 'class="extra_field"');
}

// the 'extra_field' class is added so your javascript can delete the field from the dom if necessery.
// i'm not completely sure if the validation lib will process array's, since I never tried it out. but it's worth a try!

now, some javascript to make stuff work
Code:
var app = {
    addField: function(names_div) {
        var label = $('<label></label>');
        var input = $('&lt;input /&gt;');
        var button = $('<button></button>');

        input.attr('type', 'text').addClass('extra_field').appendTo(label);
        button.addClass('remove_btn').text('Remove this field').val('Remove this field').appendTo(Label);
        label.appendTo(names_div);

        // create a parent tag (label) and a button to remove it again (button)
        // create the input like this, so it's added to the dom and you are able to select them using jquery and destroy them.
    },

    removeField: function(btn) {
        var parent = $(btn).parent('label'); // select the parent label, which contains the textfield AND the button.
        parent.remove();
    },

    init: function() {
        $('#add_name').bind('click', function() {
            app.addField('#names_div');
            return false; // to prevent the page from scrolling up when you use href="#".
        });

        $('.remove_btn').bind('click', function() {
            app.removeField(this);
            return false;
        });
    }
};

$(document).ready(app.init);

Also, think about how to store the results. You could add them in JSON to one names column in your database, for instance.
But, thats all up to you!

Good luck,

Fabian




Theme © iAndrew 2016 - Forum software by © MyBB