Select box and other choice

Sometimes there is need for dynamical forms where in select box you got the other choice which needs to trigger out the textbox. Only the problem is that this would create new POST field with different name and this needs more checks and ifs on the server side.

Here is one simple way to solve this, when user picks from list ‘other’ we show additional textbox but in the same time change the form names also so if the other is chosen then the value from textbox is posted and the select box uses temporary name suffixed ‘-input’. Added the jsfiddle address for demo http://jsfiddle.net/staar2/Hsq3j/

(function() {
    var name = 'Grizly'
      , $select = $('select[name="' + name + '"]')
      , nameAttr = $select.attr('name');
    
    $select.change(function(e) {
        if ($(this).val() === 'Other') {
            $select.attr('name', nameAttr + '-input');
            $select.after($('<input>', {
                'type': 'text',
                'name': nameAttr
            }));            
        } else {
            $('select[name="' + name + '-input"]')
                .attr('name', name);
            $('input[name="' + name + '"]').remove();
        }         
    });        
})();​
<form action="" method="post">
    
<select name="Grizly">
    <option>First</option>
    <option>Second</option>
    <option>Third</option>
    <option>Fourth</option>
    <option>Other</option>
</select>
<input type="submit" name="send" value="Send" />
</form>
​
About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s