Question

我是jquery和HTML的新手。我正在尝试使用Jquery创建一个表单。我想创建一个按钮，它将在html页面中添加输入字段。（最多10个）。这是我尝试过的东西。

HTML文件

<!doctype html>
<html>
  <head>
    <title>TakeMeHome</title>
    <link rel="stylesheet" type="text/css" href="css/design.css"/>
    <script type="text/javascript" src="/js/app.js"></script>
  </head>
  <body>
    <center><form id="details">
      Your Place:<input id="source" type="text"><br><br>
      Friend1:<input id="friend1" type="text"><br><br>
      <div class="friends"></div>
      <div id="button">Add!</div><br><br>

      <input type="submit" id="submit" value="submit">
    </form>
  </body>
</html>

JS档案

var j=2;

$(document).ready(function(){
    $('#button').click(function(){
        $('#friends').append("friend"+j+"<input type='text' id='friend"+j+"' " );   
    });

});

css文件

#button
{
display: inline-block;
height: 20px;
width: 40px;
background-color: red;
font-family: arial;
border-radius: 5px;
text-align: center; 
color:white;
}

Answer 1

代码如下所示：

var j=2;
$('#button').click(function(){
    $('#friends').append("<input type='text' id='friend"+ j +"'/>");   
});

如果你需要更困难的事情。更多地描述情况。

Answer 2

根据您对timofeiMih及其代码的评论

$('#button').click(function(){
   var j= $("#friends input").length;
   $('#friends').append("<input type='text' id='friend"+ j +"'/>");   
});

Answer 3

$(document).ready(function(){
    $('#button').click(function(){
        if( $("#friends input[type=text]").length <= 10 ){
            var i = $("#friends input[type=text]").length
            $('#friends').append("<label for='friend "+i+"'><input type='text' id='friend"+ i +"'/></label>");
        }else{
            alert("Max Friends Reached")
            return;
        }
    });
});

Answer 4

Here是您的代码。我还修改了标记中的一些内容，如果我是你，我会怎么做。首先，我将您的<div id="button">Add!</div>修改为<a href="#"> 然后我删除了所有<br>代码。你在使用CSS时为什么需要它们？另外，不要忘记捕获包含内部标签的所有输入，当然还有<label>;

对于所有“朋友”输入，你可以将他们的名字写成数组：name="friend[]"所以当你在php中获得它们时，你会得到像

这样的回报。

Array (
  [friend] =>
    Array (
      [0] => a
      [1] => b
      [2] => c
      [3] => d
    )
)

从jquery生成表单

4 个答案: