HTML表单，点击添加区域

我不确定如何问我在寻找什么样的方法。我正在创建一个表单，其中一个条目要求用户列出电器，其电压，瓦特，安培，相位等。HTML表单，点击添加区域

我想要一个带“X”列的简单行，为一个文本区域设备，然后点击一个链接来使用jquery/html添加另一个设备。

我喜欢使用占位符文本来节省页面空间。我可以将所有这些设置成“name”这样的单个条目，但我不知道如何实现“添加条目”行。所有的数据都通过PHP存储在MySQL中。

所以答：什么是这种类型的表单部分的名称。 B：当我们想让用户在本节中添加一行时，会调用什么？

我喜欢让事情比实际情况更难。这是我的专长。我猜:)

编辑：http://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_submit 使用这种格式与每列5列（尽管它将全部在一行/行）我想有一个“添加条目”链接，生成一个新的空白条目选项。

#elecNeeds input[type=text], textarea { 
font-size: 12px; 
font-style: italic; 
width: 15%; 
height: 20px; 
padding: 10px; 
color: #212323; 
background: #E3E3E3; 
background: rgba(255, 255, 255, 0.5); 
border: 2px #000 solid; 
margin-bottom: 10px; 
position: relative; 
behavior: url(/js/PIE.htc); 

    } 

    <div id="elecNeeds"> 
    <input type="text" name="appliance" placeholder="Type of Equipment"> 
    <input type="text" name="voltage" placeholder="Voltage"> 
    <input type="text" name="watts" placeholder="Watts"> 
    <input type="text" name="amps" placeholder="Phase"> 
    <input type="text" name="notes" placeholder="Notes"> 
    <br /> Add an appliance 
    </div>

来源

2012-01-03 AAAndreAAA

你能证明你的示例代码，以便我们可以看到您希望它看起来像格式？ – 2012-01-03 19:05:37

目前我只是设置了html：“” – AAAndreAAA 2012-01-03 19:08:16

我的意思是像所有的html和请编辑您的原始问题并将其放在那里（非常多地向我们展示您到目前为止所得到的结果） – 2012-01-03 19:09:07

我不知道什么叫，但你可能想这一点 - http://jsfiddle.net/uPWkf/1/

和JS

var i = 1; 

$("#addRow").click(function() { 
    $("#nameFields").append('<label>Watt <input type="text" name="watt' + i + '" /></label><label>Volt <input type="text" name="volt' + i + '" /></label><label>Amp <input type="text" name="amp' + i + '" /></label><br/><br />'); 

    i++; 
}); 


$('#myForm').submit(function() { 
    var values = $('#myForm').serialize(); 
    alert(values); 
});

来源

2012-01-03 19:22:13

嗨Zoltan-你编辑你的代码 - 我现在正在工作的原始，它似乎在做这项工作到目前为止...为什么你编辑？谢谢！ – AAAndreAAA 2012-01-03 20:02:10

我改变了添加的字段名称的生成方式，因此每个输入都有唯一的名称。并添加了一个提醒，以显示发送的数据如何看起来像 – 2012-01-03 20:07:08

好吧，甜蜜的！我将编辑。 – AAAndreAAA 2012-01-03 20:12:57

我认为你需要使用$(selector).append('<code>');功能。例如：

<a href="#" class="add">Add</a> 
<table class="my_fuits"> 
    <tr> 
     <td>Fruit</td> 
     <td><input type="text" name="fuits[]" /></td> 
    </tr> 
</table>

和JS（jQuery的）代码：

$(document).ready(function(){ 

    // add one more row 
    $(".add").live('click',function(){ 
     $(".my_fuits").append('<tr><td>Fruit '+$(".my_fruits input").length+'</td><td><input type="text" name="fuits[]" />[<a href="#" class="remove">X</a>]</td></tr>'); 
     return false; 
    }); 

    // remove row 
    $(".remove").live('click',function(){ 
      $(this).parent().parent().remove(); 
      return false; 
    }); 
});

来源

2012-01-03 19:31:47

我其实更喜欢这个，除了你忘了将'.remove'类添加到你的链接** X **中，并且我编辑了计数因为它不起作用。现在它是完美的：http://jsfiddle.net/U5XkP/1/（你应该更新你的代码），但无论如何，所有信贷给你，为此，我更喜欢你的方法。 – Mafia 2012-11-21 04:20:18

@爱感谢您的关心，回答编辑。 – 2012-11-23 10:48:41

HTML表单，点击添加区域

回答

相关问题