0

私は以下のようなフォームを持っています。

    <div class="container">
    <form method="post" action="index.php">
        <div id="rule">
            <div class="row">
                <div class="span5">
                    <input type="text" class="input-xlarge" value="Rule Name"/>
                </div>
                <div class="span6">
                    <input type="text" class="input-xxlarge" value="Description"/>
                </div>
                <div class="clearfix"> </div>
            </div>
        </div>
        <br />
        <div id="sel" class="select">
            <div class="row">
                <div class="span1 offset2">
                    <p class="btn btn-danger">If</p>
                </div>
                <div class="span2">
                   <select class="span2" name="metrics">
                      <option value="bounce_rate">Bounce Rate</option>
                      <option value="location">Locations</option>
                      <option value="social_media">Social Media</option>
                      <option value="search">Search</option>
                      <option value="visits">Visitors</option>
                    </select>
                </div>
                <div class="span1">
                  <select name="conditions" class="span2">
                       <option value=">">></option>
                       <option value="<"><</option>
                       <option value=">=">>=</option>
                       <option value="<="><=</option>
                        <option value="=">=</option>
                     </select>
                </div>
                <div class="span1 offset1">
                    <input type="text" name="percentage" class="input-small"/>
                </div>
                <div class="clearfix"> </div>
            </div>
            <br />
            <div class="row">
                <div class="span1 offset2">
                    <p class="btn btn-danger">Period</p>
                </div>
                <div class="span3">
                    <div class="input-append date datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
                      <input class="span2" size="16" type="text" value="12-02-2012" />
                      <span class="add-on"><i class="icon-th"></i></span>
                    </div>
                </div>
                <div class="span3">
                    <div class="input-append date datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
                      <input class="span2" size="16" type="text" value="12-02-2012" />
                      <span class="add-on"><i class="icon-th"></i></span>
                    </div>
                </div>
                <div class="clearfix"> </div>
            </div>
        </div> 
        <div id="dyna"></div>
        <div id="end">
            <div class="row">
                <div class="span1">
                    <p class="btn btn-danger">THEN</p>
                </div>
                <div class="span3">
                    <input type="text" class="input-xlarge" value="Statement" />
                </div>
                <div class="clearfix"> </div>
            </div>
            <div class="row">
                <div class="span1">
                    <p class="btn btn-danger">ELSE</p>
                </div>
                <div class="span3">
                    <input type="text" class="input-xlarge" value="Statement" />
                </div>
                <div class="clearfix"> </div>
            </div>
            <div class="row">
                <button class="span1 btn btn-success" type="submit" value="submit">Submit</button>
                <div class="span2 offset9">
                    <p class="btn btn-success input-small" id="addRule">Add Rule </p>
                </div>
                <div class="clearfix"> </div>
            </div>
        </div>
    </form>     
</div>

上記の中に動的要素を作成するための「ルールを追加」ボタンを含めました。そのため、上記と同じ動的要素を作成するためにjavascriptを使用しました。以下のようにjavascript。

<script type="text/javascript">
$('.datepicker').datepicker();
(function(){
    var i = 0;
    $("#addRule").live('click',function(){
        ++i;
        var $ctrl = $('<div id="'+ i +'" class="select"><div class="row"><div class="span1 offset2"><button class="btn btn-danger">If</button></div><div class="span2"><select class="span2" name="metrics"><option value="bounce_rate">Bounce Rate</option><option value="location">Locations</option><option value="social_media">Social Media</option><option value="search">Search</option><option value="visits">Visitors</option></select></div><div class="span1"><select name="conditions" class="span2"><option value=">">></option><option value="<"><</option><option value=">=">>=</option><option value="<="><=</option><option value="=">=</option></select></div><div class="span1 offset1"><input type="text" name="percentage" class="input-small"/></div><div class="span2 offset1"><button class="btn btn-danger remove" id="'+ i +'">Remove</button></div><div class="clearfix"> </div></div><br /><div class="row"><div class="span1 offset2"><p class="btn btn-danger">Period</p></div><div class="span3"><div class="input-append date datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy"><input class="span2" size="16" type="text" value="12-02-2012" /><span class="add-on"><i class="icon-th"></i></span></div></div><div class="span3"><div class="input-append date datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy"><input class="span2" size="16" type="text" value="12-02-2012" /><span class="add-on"><i class="icon-th"></i></span></div></div><div class="clearfix"> </div></div></div>');
        $("#dyna").append($ctrl);
        $('.datepicker').datepicker();
}); 
}) ();

(function(){
    $(".remove").live('click',function(){
        var remDiv = $(this).attr('id');
        //var questionList = "questionList"+remQ;
        $("#" + remDiv).remove();
});

}) ();

したがって、送信ボタンをクリックしたら値を取得したいと思います。データを取得するためのフォームのみを使用しているのは正しい方法ですか、それとも 2 つのフォームを別々に作成していますか? では、どうやってそれを行うのですか？

4

1 に答える 1

1

新しい要素を既存のフォームに挿入する場合、および受け取りたい既存の入力とは名前が異なる限り、2 番目のフォームを作成する必要はありません。

入力データの 2 つの異なるコレクションに対して異なる送信ボタンが必要な場合は、2 つ目のフォームを作成できます。

于 2012-08-07T04:45:59.260 に答える