Der folgende Code funktioniert gut in Safari, aber in Chrome und Firefox wird das Formular nicht gesendet. Die Chrome-Konsole protokolliert den FehlerAn invalid form control with name='' is not focusable
. Irgendwelche Ideen?
Beachten Sie, dass die unten stehenden Steuerelemente zwar keine Namen haben, jedoch zum Zeitpunkt der Übermittlung Namen haben sollten, die mit dem unten stehenden Javascript gefüllt sind. Das Formular funktioniert in 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>