我有一个表单,其中包含一些字段,然后还有一些由 jquery 生成的字段。问题是新的与现有的不一致。我尝试摆弄 CSS,但没有成功。这正是这个人的问题,但他没有得到回应:
这是我的表格:
<form id="recipe" name="recipe" action="create.php" method="post">
<h2>Ingredients</h2>
<div id="labels">
<label class="label" for="quantity">Quantity:</label>
<label class="label" for="unit">Unit:</label>
<label class="label" for="ingredient">Ingredient:</label>
</div>
<div id="inputs">
<div class="fields">
<input class="quantity" name="quantity[]" type="text" />
<input class="unit" name="unit[]" type="text" />
<input class="ingredient" name="ingredient[]" type="text" />
</div>
</div>
<div id="container">
<a id="add" href="#"><span>» Add ingredient.</span></a>
</div>
<div>
<h2>Directions</h2>
<textarea name="preparacion" rows="10" cols="51"></textarea>
</div>
<input type="submit" value="Guardar" />
<input type="reset" value="Limpiar" />
</form>
这是我用来生成附加字段的 JS:
var count = 0;
$(function(){
$('a#add').click(function(){
count += 1;
$('#inputs').append('<div class="fields"><input class="quantity" name="quantity[]" type="text" /><input class="unit" name="unit[]" type="text" /><input class="ingredient" name="ingredient[]" type="text" /></div>');
});
});
但是结果如下:
(请删除空格,它不会让我发布图片)
最佳答案
问题是,在原始输入行中,输入由新行或空格字符分隔,当您添加新行时,您将所有代码附加在一起,并且它使一个输入更接近前一个输入.
简单的解决方案,在js代码中每个输入后面添加一个空格:
var count = 0;
$(function(){
$('a#add').click(function(){
count += 1;
$('#inputs').append('<div class="fields"><input class="quantity" name="quantity[]" type="text" /> <input class="unit" name="unit[]" type="text" /> <input class="ingredient" name="ingredient[]" type="text" /></div>');
});`
关于php - 对齐动态生成的表单字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12966707/