Laravel 5.2のMySQLフィールドを動的に追加する

Question

私は、JavaScriptの助けを借りてボタンのクリックで入力テキストボックスを追加するスクリプトを作成することができましたが、私はMYSQLフィールドを無制限に作成し、データベースはhtml形式を使用します。

現在、私はMySQLテーブルに10個のフィールドしか作成していないので、入力テキストボックスを10個しか設定しないようにjavascriptを設定しています。

私は、オンデマンドでMySQLフィールドを作成でき、10個のフィールドに制限されない方法があります。また、この問題の解決策として、laravelを使用することもできます。ここで

は私がMySQLでのみ10フィールドを作成しているので、スクリプトはわずか10個の入力テキストボックスを追加し、HTMLコード

{{ Form::open(array('url' => '/Reward_details',)) }} 

{{ csrf_field() }} 

<div class="row"> 

<div class="col-md-6"> 
    <b>Prize#1</b><br> 

<div class="form-group"> 
    {{ Form::label('pledged_amount', 'Pledged Amount:') }} 
    {{ Form::text('pledged_amount', null, ['class' => 'form-control', "required", 'placeholder' => 'Add Pledged Amount']) }} 

</div> 


<div class="form-group"> 
    {{ Form::label('reward', 'Reward Description:') }} 
    {{ Form::textarea('reward_description', null, ['class' => 'form-control', 'rows' => '5', "required"]) }} 

</div> 


<div class="input_fields_wrap"><br><br><br><br> 
<div class="col-lg-12"> 
    <a class=" btn btn-success col-lg-12 btn-margin-top add_field_button">Add Reward Per Pledge</a> 
    </div> 

</div> 

    </div> 
    </div> 

<hr> 

<div class="col-mid-12"> 
    <div class="form-group"> 

     {{ Form::submit('Submit Reward Details', ['class' => 'btn btn-primary']) }} 

    </div> 
</div> 


{{ Form::close() }} 

、ここで私のスクリプトです

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    var max_fields  = 10; //maximum input boxes allowed 
    var wrapper   = $(".input_fields_wrap"); //Fields wrapper 
    var add_button  = $(".add_field_button"); //Add button ID 

    var n = 0; 
    var x = 1; //initlal text box count 
    var i=1;// counts the number on Prizes 
    $(add_button).click(function(e){ //on add input button click 
     e.preventDefault(); 
     if(x < max_fields){ //max input box allowed 
      n++; 
      x++; 
      i++; //text box increment 
      $(wrapper).prepend('<div class="col-md-12 nopadding form-group">' + 
      '<p>Prize#'+ +i +'</p>'+ 

      '<label for="pledged_amount">Pledged Amount:</label>' + 
      '<input class="form-control" type="text" name="pledged_amount'+ +n +'" required/><br>'+ 

      '<label for="pledged_amount">Reward Description:</label>'+ 
      '<textarea class="form-control" rows="5" type="text" name="reward_description'+ +n +'" required/></textarea><br>'+ 

      '<a href="#" class="btn btn-xs btn-danger remove_field">Remove</a>'+ 
      '</div>'); //add input box 
     } 
    }); 

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text 
     e.preventDefault(); $(this).parent('div').remove(); x--; 
    }) 
}); 

です。

Answer 1

あなたは、配列

がさんが言ってみましょうとしてではなく、あなたの入力フィールドに名前を付ける必要があります列

の無限の数を作成しないでください。 pledge_amount[]

を、配列としてバックエンドで、この配列を取得。これを徹底的にループし、列を追加するのではなくテーブルに行を入力します。