Ruby on Rails在表单中添加和删除行

时间:2017-01-25 20:00:04

标签: jquery ruby-on-rails

前段时间我已创建此表单,您可以使用html&创建和删除行。 jquery的。

现在我想在我的ruby应用程序中实现相同的结果,但不知道如何将行/数据添加到我的数据库中,因为所有输入都在迁移中加前缀(输入了什么值)

这是创建表单的codepen: http://codepen.io/salman15/pen/XpaQpL?editors=1010

我的控制员:

class ManagmentsController < ApplicationController
  before_action :logged_in_user, only: [:create, :destroy]
  before_action :correct_user,   only: :destroy

    def index
     @managments = current_user.managments
     @micropost = current_user.microposts.build
    end

  def show
     @microposts = Micropost.paginate(page: params[:page])
   @managment = Managment.find_by(id: params[:id])
   if !@managment
    raise ActionController::RoutingError.new('Not Found')
   end
   @user = @managment.user

  end

  def new
    @user = User.new
    @managment = Managment.new
  end

  def edit
     @managment = Managment.find(params[:id])
  end

    def create

     @managment = current_user.managments.build(managment_params)
     if @managment.save
      flash[:success] = "Managment created!"
      redirect_to @managment
     else
      @feed_items = current_user.feed.paginate(page: params[:page])
      render 'new'
     end
    end

  def update
     @managment = Managment.find(params[:id])

    if @managment.update(managment_params)
      redirect_to @managment
    else
      render 'edit'
    end
  end

  def destroy
    @managment.destroy
    flash[:success] = "Managment deleted"
    redirect_to managments_path
  end


  private

    def managment_params
      params.require(:managment).permit( 
      :title,  :budget,
      :procent1, :procent2, :procent3, :procent4,
      :procent5, :procent6, :procent7,
      :procent8, :procent9, :procent10,
      :procent11, :procent12, :result1,
      :result2, :result3, :objectivesname1,
      :objectivesname2, :objectivesname3, 
      :lowprocent1, :lowprocent2, :lowprocent3,
      :medprocent1, :medprocent2, :medprocent3,
      :highprocent1, :highprocent2, :highprocent3,
      :lowobjectives1, :lowobjectives2, :lowobjectives3,
      :medobjectives1, :medobjectives2, :medobjectives3,
      :highobjectives1, :highobjectives2, :highobjectives3

      )
    end

    def correct_user
      @managment = current_user.managments.find_by(id: params[:id])
      redirect_to managments_path if @managment.nil?
    end

end

_form:

<%= form_for(@managment, html: { multipart: true }) do |f| %>
  <%= render 'shared/error_messages', object: f.object %>
  <%= f.text_field :title %> 
        <div class="field" id="totalbudget">

        <div class="colum">
      <h1>Budget</h1>
      <%= f.number_field :budget, class: " inputbudget procentages",  id: "budget", oninput: "calculateManagement()", placeholder: "enter your desired procentage" %>
      </div>

      <div class="colum">
      <h2>Low</h2>
      <p>precentages</p>
    <%= f.number_field :procent1, class: " inputbudget procentages", oninput: "calculateManagement()", placeholder: "enter your desired procentage" %>
    <p>result</p>
    <%= f.text_field :result1, onkeydown: "return false" %>
      </div>

    <div class="colum">
    <h2>Medium</h2>
    <p>precentages</p>
    <%= f.number_field :procent2, class: " inputbudget procentages", oninput: "calculateManagement()", placeholder: "enter your desired procentage" %>
    <p>result</p>
    <%= f.text_field :result2, onkeydown: "return false" %>
      </div>

   <div class="colum"> 
    <h2>High</h2>
    <p>precentages</p>
    <%= f.number_field :procent3, class: " inputbudget procentages", oninput: "calculateManagement()", placeholder: "enter your desired procentage" %>
    <p>result</p>
    <%= f.text_field :result3, onkeydown: "return false" %>
  </div>
    </div>
    <span id="title">
      <h1>Weighings</h1>
     </span>


    <div class="field" id="weighings">
    <div class="colum">
    <h4>Low presence</h4>
    <%= f.number_field :procent4, class: " inputbudget procentages" %>
    <%= f.number_field :procent5, class: " inputbudget procentages"  %>
    <%= f.number_field :procent6, class: " inputbudget procentages"  %>
    </div>

    <div class="colum">
    <h4>Medium presence</h4>
    <%= f.number_field :procent7, class: " inputbudget procentages"  %>
    <%= f.number_field :procent8, class: " inputbudget procentages"  %>
    <%= f.number_field :procent9, class: " inputbudget procentages"  %>
    </div>

    <div class="colum">
    <h4>High presence</h4>
    <%= f.number_field :procent10, class: " inputbudget procentages"  %>
    <%= f.number_field :procent11, class: " inputbudget procentages"  %>
    <%= f.number_field :procent12, class: " inputbudget procentages"  %>
    </div>
  </div>



      <div class="field">
      <h1>Objectives</h1>

      <h2>Domestic</h2>
    <%= f.text_field :objectivesname1, placeholder: "enter your desired objectives" %>
    <%= f.number_field :lowprocent1, class: " inputbudget procentages" %>
    <%= f.number_field :medprocent1, class: " inputbudget procentages" %>
    <%= f.number_field :highprocent1, class: " inputbudget procentages" %>
    <%= f.number_field :lowobjectives1, class: " inputbudget procentages" %>
    <%= f.number_field :medobjectives1, class: " inputbudget procentages" %>
    <%= f.number_field :highobjectives1, class: " inputbudget procentages" %>

    <h2>Continental</h2>
    <%= f.text_field :objectivesname2, placeholder: "enter your desired objectives" %>
    <%= f.number_field :lowprocent2, class: " inputbudget procentages" %>
    <%= f.number_field :medprocent2, class: " inputbudget procentages" %>
    <%= f.number_field :highprocent2, class: " inputbudget procentages" %>
    <%= f.number_field :lowobjectives2, class: " inputbudget procentages" %>
    <%= f.number_field :medobjectives2, class: " inputbudget procentages" %>
    <%= f.number_field :highobjectives2, class: " inputbudget procentages" %>

    <h2>International</h2>
    <%= f.text_field :objectivesname3, placeholder: "enter your desired objectives" %>
    <%= f.number_field :lowprocent3, class: " inputbudget procentages" %>
    <%= f.number_field :medprocent3, class: " inputbudget procentages" %>
    <%= f.number_field :highprocent3, class: " inputbudget procentages" %>
    <%= f.number_field :lowobjectives3, class: " inputbudget procentages" %>
    <%= f.number_field :medobjectives3, class: " inputbudget procentages" %>
    <%= f.number_field :highobjectives3, class: " inputbudget procentages" %>

  </div>
  <%= f.submit "Post", class: "btn btn-primary btn-post" %>
  <span class="picture">
    <%= f.file_field :picture, accept: 'image/jpeg,image/gif,image/png' %>
  </span>
<% end %>

<script type="text/javascript">
//CALCULATE MANAGEMENT
function calculateManagement() {
//MANAGMENT TAB
  //BUDGET PART

  //variables  of  the precentages
  var budget = document.getElementById("budget").value;
  var low = document.getElementById('managment_procent1').value;
  var med = document.getElementById('managment_procent2').value;
  var high = document.getElementById('managment_procent3').value;

  //variables  of  the results
  var lowResult = document.getElementById('managment_result1');
  var medResult = document.getElementById('managment_result2');
  var highResult = document.getElementById('managment_result3');

   var lowFinalResult = (budget / 100) * low;
  lowResult.value = lowFinalResult;

  //RESULTS OF continental
  var medFinalResult = (budget / 100) * med;
  medResult.value = medFinalResult;

  //RESULTS OF international
  var highFinalResult = (budget / 100) * high;
  highResult.value = highFinalResult;

  //END OF BUDGET PART

  //START OF BUDGET(data) PART
  var domesticResultLow = document.getElementById('value3-0');
  var domesticResultMed = document.getElementById('value3-1');
  var domesticResultHigh = document.getElementById('value3-2');
  var domesticResultFinal = document.getElementById('value3-9');

  var continentalResultLow = document.getElementById('value3-3');
  var continentalResultMed = document.getElementById('value3-4');
  var continentalResultHigh = document.getElementById('value3-5');
  var continentalResultFinal = document.getElementById('value3-10');

  var globalResultLow = document.getElementById('value3-6');
  var globalResultMed = document.getElementById('value3-7');
  var globalResultHigh = document.getElementById('value3-8');
  var globalResultFinal = document.getElementById('value3-11');

  var lowProcentageLow = document.getElementById('lowplow').value;
  var lowProcentageMed = document.getElementById('lowpmed').value;
  var lowProcentageHigh = document.getElementById('lowphigh').value;

  var medProcentageLow = document.getElementById('medplow').value;
  var medProcentageMed = document.getElementById('medpmed').value;
  var medProcentageHigh = document.getElementById('medphigh').value;

  var highProcentageLow = document.getElementById('highplow').value;
  var highProcentageMed = document.getElementById('highpmed').value;
  var highProcentageHigh = document.getElementById('highphigh').value;

  var resultOne = document.getElementById('result1').value;
  var resultTwo = document.getElementById('result2').value;
  var resultThree = document.getElementById('result3').value;

  var lowProcentLow = (resultOne /100 )* lowProcentageLow;
  domesticResultLow.value = lowProcentLow;

    var lowProcentMed = (resultOne /100 )* lowProcentageMed;
  domesticResultMed.value = lowProcentMed;

  var lowProcentHigh = (resultOne /100 )* lowProcentageHigh;
  domesticResultHigh.value = lowProcentHigh;


  var medProcentLow = (resultTwo /100 )* medProcentageLow;
  continentalResultLow.value = medProcentLow;

  var medProcentMed = (resultTwo /100 )* medProcentageMed;
  continentalResultMed.value = medProcentMed;

  var medProcentHigh = (resultTwo /100 )* medProcentageHigh;
  continentalResultHigh.value = medProcentHigh;


  var highProcentLow = (resultThree /100 )* highProcentageLow;
  globalResultLow.value = highProcentLow;

  var highProcentMed = (resultThree /100 )* highProcentageMed;
  globalResultMed.value = highProcentMed;

  var highProcentHigh = (resultThree /100 )* highProcentageHigh;
  globalResultHigh.value = highProcentHigh;

  domesticResultFinal.value = resultOne;
  continentalResultFinal.value = resultTwo;
  globalResultFinal.value = resultThree;

  //END OF BUDGET(data) PART

}


//No letters
function isNumber(evt) {
  evt = (evt) ? evt : window.event;
  var charCode = (evt.which) ? evt.which : evt.keyCode;
  if (charCode > 31 && (charCode < 48 || charCode > 57)) {
    return false;
  }
  return true;
}
//
</script>

1 个答案:

答案 0 :(得分:0)

@maltiriel提供的答案

是通过在我的应用中实施https://github.com/ncri/nested_form_fields