0

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

文件

<!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;
}
4

4 回答 4

0 
$(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;
        }
    });
});
于 2013-01-09T21:00:05.033 回答
0

代码将如下所示：

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

如果你需要更困难的东西。多描述情况。

于 2013-01-09T20:51:55.563 回答
0

根据您对 timofeiMih 和他的代码的评论

$('#button').click(function(){
   var j= $("#friends input").length;
   $('#friends').append("<input type='text' id='friend"+ j +"'/>");   
});
于 2013-01-09T20:58:52.423 回答
0

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

对于所有“朋友”输入，您可以将其名称写为数组： name="friend[]"因此，当您将它们放入 php 中时，您将得到类似的返回

Array (
  [friend] =>
    Array (
      [0] => a
      [1] => b
      [2] => c
      [3] => d
    )
)
于 2013-01-10T09:14:24.837 回答