[英]Aligning dynamically generated form fields
我有一個包含一些字段的表單,然后還有一些由 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>');
});`
在輸入之間添加一個空格?
$('#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>');
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.