javascript - jquery script to generate form elements? -

javascript - jquery script to generate form elements? -

i have simple jquery script allow me create text boxes beside uploaded files

$(function(){ //------------- plupload php upload -------------// // setup html4 version $("#html4_uploader").pluploadqueue({ // general settings runtimes : 'html4', url : '../../assets/dashboard/php/upload.php', max_file_size : '10mb', max_file_count: 15, // user can add together no more 15 files @ time chunk_size : '5mb', multiple_queues : true, // rename files clicking on titles rename: true, // sort files sortable: true, }); var uploader = $('#html4_uploader').pluploadqueue(); uploader.bind('fileuploaded', function(up, file, info) { if (uploader.files.length == (uploader.total.uploaded + uploader.total.failed)) { $('.gradient').hide(); form = '<form class="form-horizontal" id="form-validate" novalidate="novalidate" method="post">'; length = uploader.files.length; files = uploader.files; (var = 0; <= length-1; i++) { form+= '<div class="alert alert-success" id="message" style="display:none;"></div>'; form+= '<div class="form-row row-fluid">'; form+= '<div class="span12">'; form+= '<div class="row-fluid">'; form+= '<label class="form-label span3" for="medianame">file title</label>'; form+= '<input class="span3 text" id="medianame'+i+'" name="mediatitle[]" type="text">'; form+= '<input type="hidden" name="mediapath[]" value="'+files[i].name+'" >'; form+= '<strong style="margin-right:20px;" >'+files[i].name+'</strong>'; form+= '</div>'; form+= '</div>'; }; form+= '<div class="form-row row-fluid">'; form+= '<div class="span12">'; form+= '<div class="row-fluid">'; form+= '<div class="form-actions">'; form+= '<div class="span3"></div>'; form+= '<div class="span9 controls">'; form+= '<button type="submit" id="submit" class="btn marginr10" style="margin:10px;" >save</button>'; form+= '<button class="btn btn-danger">delete</button>'; form+= '</div>'; form+= '</div>'; form+= '</div>'; form+= '</div>'; form+= '</div>'; form+= '</form>'; $('#multiform').html(form); $('#submit').click(function() { $.ajax ({ type: "post", url: "", datatype: "json", data: $('form').serialize(), cache: false, beforesend: function() { $('#message').hide(); }, success: function(data) { if(data.response) { $('#message').show().html(data.message); } } }); homecoming false; }); } }); });

the script working fine have single issue when create text boxes first text box work fine other boxes disable can't click on them write text tried modify lot of time can't figure out why problem happened

it's because generating duplicate ids.

you creating div id of "message" each iteration of loop. having multiple elements same id invalid html, ids must unique within document.

when select id jquery selector or .getelementbyid() selects first one, because there aren't supposed other elements same id.

now there's problem label , for attribute. of labels pointing element id of "medianame". should changed

<label class="form-label span3" for="medianame'+i+'">filetitle</label>

to match input generated on next line.

javascript jquery jquery-plugins