0

私は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;
}
4

4 に答える 4

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 
$(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

これがあなたのコードです。私があなただったらどうするか、マークアップの一部も変更しました。最初にあなた<div id="button">Add!</div>をに変更し、次にすべてのタグ<a href="#"> を削除しました。<br>css を使用しているときになぜそれらが必要なのですか? もちろん、内部にラベルを含むすべての入力をキャッチすることも忘れないでください<label>。

すべての「友人」入力に対して、名前を配列として書き込むことができます。 name="friend[]"したがって、phpでそれらを取得すると、次のような戻り値が得られます

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