3
사용자가 필요에 따라 새 필드를 추가 할 수있는 양식을 페이지에 있습니다. 여기 내가 사용 니펫이야, 그것을 달성하기 위해 jQuery를 clone() 방법을 사용하십시오jQuery clone() 필드가 사용되지 않음
// Dynamic forms
$('.addField').bind('click', function() {
var tmp = '#' + $(this).attr('parent') + ' tr td div.clonedInput'; // get the path to elements
var x = $(this).attr('parent').split('_'); // get the element's identifier
var ident = '#' + x[0];
var num = $(tmp).length; // count elements
var newNum = new Number(num + 1); // increase the number of the new element
// Create the new element and manipulate its id
tmp = x[0] + '_' + newNum;
var newElem = $(ident + '_' + num).clone().attr('id', tmp);
// Manipulate the new element's children
newElem.find('input, select, textarea, label').each(function() {
var kid = $(this);
var y = '';
var z;
y = kid.attr(kid.attr('for') == undefined ? 'name' : 'for').split(x[0] + '_' + num);
z = tmp + y[1];
if (kid.attr('for') == undefined) {
kid.attr('name', z);
kid.attr('id', z);
if (kid[0].tagName.toLowerCase() == 'textarea') {
kid.html('');
} else {
kid.attr('value', '');
}
} else {
kid.attr('for', z);
}
});
// Add the new element after the last one
$(ident + '_' + num).after(newElem);
// Enable the associated "Remove" button
$('.remField[parent="' + $(this).attr('parent') + '"]').attr('disabled', '');
});
난 데 문제는 동적으로 추가 필드를 양식 제출의 결과에 포함되지 않은 것입니다. 이 스 니펫을 시도했습니다 :
$('form').submit(function() {
alert($(this).serialize());
});
필드는 결과 문자열에 표시되지 않습니다.
코드에 어떤 문제가 있습니까? 편집
: 기존 HTML
<h1>Add a recipe</h1>
<form name="add-recipe" action="add-recipe/" method="post" enctype="multipart/form-data">
<table class="form">
<input type="hidden" name="formname" value="add-recipe" />
<tr>
<td> </td>
<td><span style="font-weight: bold;">Basic details</span></td>
</tr>
<tr>
<td><label for="name">Recipe name:</label></td>
<td><input type="text" name="rec_name" id="name" maxlength="100" /></td>
</tr>
<tr>
<td><label for="img">Recipe image:</label></td>
<td><input type="file" name="rec_img" id="img" /></td>
</tr>
<tr>
<td><label for="cat">Category:</label></td>
<td>
<select name="rec_cat" id="cat">
<option value="-1"> (Select a category) </option>
</select>
</td>
</tr>
<tr>
<td><label for="desc">Recipe description:</label></td>
<td class="center"><textarea maxlength="1024" name="rec_desc" id="desc" cols="60" rows="10"></textarea></td>
</tr>
<tr>
<td> </td>
<td><span style="font-weight: bold;">Times and servings</span></td>
</tr>
<tr>
<td><label for="prep">Preparation time:</label></td>
<td><input type="text" name="rec_prep" id="prep" maxlength="5" /></td>
</tr>
<tr>
<td><label for="cook">Cooking time:</label></td>
<td><input type="text" name="rec_cook" id="cook" maxlength="5" /></td>
</tr>
<tr>
<td><label for="serving_size">Serving size:</label></td>
<td><input type="text" name="rec_serving_size" id="serving_size" maxlength="45" /></td>
</tr>
<tr>
<td><label for="servings_per_recipe">Servings per recipe:</label></td>
<td><input type="text" name="rec_servings_per_recipe" id="servings_per_recipe" maxlength="45" /></td>
</tr>
<tr>
<td> </td>
<td><span style="font-weight: bold;">Ingredients</span></td>
</tr>
<!-- INGREDIENTS -->
<tr>
<td> </td>
<td>
<table class="subform" id="ing_container">
<tr>
<td>
<div class="clonedInput" id="ing_1">
<div>
<label for="ing_1_ing">Ingredient:</label><br />
<select name="ing_1_ing" id="ing_1_ing">
<option value="-1"> (Select an ingredient) </option>
</select>
</div>
<div>
<label for="ing_1_amount">Amount:</label><br />
<input type="text" name="ing_1_amount" id="ing_1_amount" maxlength="5" />
</div>
<div>
<label for="ing_1_det">Details:</label></br />
<textarea maxlength="255" name="ing_1_det" id="ing_1_det" cols="56" rows="8"></textarea>
</div>
<div>
<label for="ing_1_meas">Measurement:</label><br />
<input type="text" name="ing_1_meas" id="ing_1_meas" maxlength="45" />
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
<td class="center">
<input type="button" class="addField" parent="ing_container" value="Add ingredient" /> <input type="button" disabled="disabled" parent="ing_container" class="remField" value="Remove ingredient" />
</td>
</tr>
<!-- STEPS -->
<tr>
<td> </td>
<td><span style="font-weight: bold;">Steps</span></td>
</tr>
<tr>
<td> </td>
<td>
<table class="subform" id="step_container">
<tr>
<td>
<div class="clonedInput" id="step_1">
<div>
<label for="step_1_desc">Description:</label></br />
<textarea maxlength="1024" name="step_1_desc" id="step_1_desc" cols="56" rows="8"></textarea>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
<td class="center">
<input type="button" class="addField" parent="step_container" value="Add step" /> <input type="button" disabled="disabled" parent="step_container" class="remField" value="Remove step" />
</td>
</tr>
<tr>
<td> </td>
<td><span style="font-weight: bold;">Nutrition facts</span></td>
</tr>
<tr>
<td> </td>
<td class="center"><input type="submit" value="Proceed" /></td>
</tr>
</table>
</form>
새 양식 요소가 '
'태그 사이에 있는지 확인 하시겠습니까? – Blazemonger답변을 올리십시오. 나는 그것을 확인하지 않았다. – Pateman
원래 HTML 코드를 게시 한 경우 도움이 될 것입니다. 특히 비표준적인 'parent' 속성과 같은 특별한 트릭을 사용하는 것으로 보이기 때문에 도움이됩니다. – Blazemonger