Đoạn mã dưới đây hoạt động tốt trong Safari nhưng trong Chrome và Firefox, biểu mẫu sẽ không gửi. Bảng điều khiển Chrome ghi lại lỗi An invalid form control with name='' is not focusable. Bất kỳ ý tưởng?
Lưu ý rằng mặc dù các điều khiển bên dưới không có tên, chúng phải có tên tại thời điểm gửi, được điền bởi Javascript bên dưới. Biểu mẫu KHÔNG hoạt động trong Safari.
<form method="POST" action="/add/bundle">
<p>
<input type="text" name="singular" placeholder="Singular Name" required>
<input type="text" name="plural" placeholder="Plural Name" required>
</p>
<h4>Asset Fields</h4>
<div class="template-view" id="template_row" style="display:none">
<input type="text" data-keyname="name" placeholder="Field Name" required>
<input type="text" data-keyname="hint" placeholder="Hint">
<select data-keyname="fieldtype" required>
<option value="">Field Type...</option>
<option value="Email">Email</option>
<option value="Password">Password</option>
<option value="Text">Text</option>
</select>
<input type="checkbox" data-keyname="required" value="true"> Required
<input type="checkbox" data-keyname="search" value="true"> Searchable
<input type="checkbox" data-keyname="readonly" value="true"> ReadOnly
<input type="checkbox" data-keyname="autocomplete" value="true"> AutoComplete
<input type="radio" data-keyname="label" value="label" name="label"> Label
<input type="radio" data-keyname="unique" value="unique" name="unique"> Unique
<button class="add" type="button">+</button>
<button class="remove" type="button">-</button>
</div>
<div id="target_list"></div>
<p><input type="submit" name="form.submitted" value="Submit" autofocus></p>
</form>
<script>
function addDiv()
{
var pCount = $('.template-view', '#target_list').length;
var pClone = $('#template_row').clone();
$('select, input, textarea', pClone).each(function(idx, el){
$el = $(this);
if ((el).type == 'radio'){
$el.attr('value', pCount + '_' + $el.data('keyname'));
}
else {
$el.attr('name', pCount + '_' + $el.data('keyname'));
};
});
$('#target_list').append(pClone);
pClone.show();
}
function removeDiv(elem){
var pCount = $('.template-view', '#target_list').length;
if (pCount != 1)
{
$(elem).closest('.template-view').remove();
}
};
$('.add').live('click', function(){
addDiv();
});
$('.remove').live('click', function(){
removeDiv(this);
});
$(document).ready(addDiv);
</script>
Chỉ những điều khiển thành công mới được gửi đi. Để thành công, điều khiển phải có tên. Có những yêu cầu khác nữa (xem liên kết).
—
RobG
Các nút radio có tên. Mọi thứ khác được đặt tên thông qua JavaScript.
—
MFB