如何使用一個按鈕插入兩行Laravel使用ajax

我想在同一個表中創建兩個插入。如何使用一個按鈕插入兩行Laravel使用ajax

該表基於此字段（區域設置，project_id（外鍵），標題，標題）。

而且控制器看起來像在這裏：

public function storeTranslation(Request $request) 
     { 
     $projecttranslation = new ProjectTranslation(); 
     $projecttranslation->locale = $request->input("locale"); 
     $projecttranslation->project_id = $request->input("project"); 
     $projecttranslation->title = $request->input("title"); 
     $projecttranslation->caption = $request->input("caption"); 
     $projecttranslation->save(); 
     }

在目前的形式看起來像在這裏：

<div id="form2" style="display:none;" class="col-md-6"> 
    <div class="col-md-"> 
     <h3>Crear nueva traduccion</h3> 
     <form enctype="multipart/form-data" id="myFormTraduccion" name="myFormTraduccion"><!--FIRST FORM TO TRANSLATE --> 
     <input type="hidden" name="_token" value="{{ Session::token() }}"> 
      <div class="form-group"> 
       <label name="Language">Language:</label> 
       <input type="text" id="locale" name="locale" value="en" class="form-control form-control-sm"> 
       <label name="Project">Project id:</label> 
       <input type="number" id="project" name="project" class="form-control form-control-sm"> 
       <label name="Title">Title:</label> 
       <input type="text" id="title" name="title" class="form-control form-control-sm"> 
       <label name="Caption">Caption:</label> 
       <input type="text" id="caption" name="caption" class="form-control form-control-sm"><br> 
       <input type="submit" value="Crear Traduccion" id="createtranslatesubmit" class="btn btn-danger btn-md"> 
       <br><br><br> 

      </div> 
      </form> <!-- FIRST FORM TO TRANSLATE END HERE --> 
      <form enctype="multipart/form-data" id="myFormTraduccion2" name="myFormTraduccion2"> <!--SECOND FORM TO TRANSLATE --> 
      <input type="hidden" name="_token" value="{{ Session::token() }}"> 
      <div class="form-group"> 
       <label name="title">Language:</label> 
       <input type="text" id="locale" name="locale" value="es" disabled class="form-control form-control-sm"> 
       <label name="order">Project id:</label> 
       <input type="number" id="project" name="project" class="form-control form-control-sm"> 
       <label name="public">Title:</label> 
       <input type="text" id="title" name="title" class="form-control form-control-sm"> 
       <label name="caption">Caption:</label> 
       <input type="text" id="caption" name="caption" class="form-control form-control-sm"><br> 
       <input type="submit" value="Crear Traduccion" id="createtranslatesubmit2" class="btn btn-danger btn-md"> 
       <br><br><br> 

      </div> 
      </form> <!--SECOND FORM TO TRANSLATE END HERE --> 
    </div> 
</div>

而AJAX這個樣子的：

$("#createtranslatesubmit").click(function(){ 
     $("#myFormTraduccion").submit(); 
    }); 

    $("#myFormTraduccion").submit(function(e){ 
     e.preventDefault(); 
     $.ajax({ 
      url:'/admin/projects/postUploadTranslation', 
      type:'POST', 
      data:$('#myFormTraduccion').serializeArray(), 
      success: function(){ 
       $("#form2").fadeOut(1000); 
       $("#form3").fadeIn(2000); 
      } 
     }); 
    });

此創建只有第一種形式，第一種翻譯。

我想我應該改變視圖代碼本（兩個相同的輸入數據庫的每個字段）：

<div id="form2" style="display:none;" class="col-md-6"> 
    <div class="col-md-"> 
     <h3>Crear nueva traduccion</h3> 
     <form enctype="multipart/form-data" id="myFormTraduccion" name="myFormTraduccion"><!--FIRST FORM TO TRANSLATE --> 
     <input type="hidden" name="_token" value="{{ Session::token() }}"> 
      <div class="form-group"> 
       <label name="Language">Language:</label> 
       <input type="text" id="locale" name="locale" value="en" class="form-control form-control-sm"> 
       <label name="Project">Project id:</label> 
       <input type="number" id="project" name="project" class="form-control form-control-sm"> 
       <label name="Title">Title:</label> 
       <input type="text" id="title" name="title" class="form-control form-control-sm"> 
       <label name="Caption">Caption:</label> 
       <input type="text" id="caption" name="caption" class="form-control form-control-sm"> 
       <label name="title">Language:</label> 
       <input type="text" id="locale" name="locale" value="es" class="form-control form-control-sm"> 
       <label name="order">Project id:</label> 
       <input type="number" id="project" name="project" class="form-control form-control-sm"> 
       <label name="public">Title:</label> 
       <input type="text" id="title" name="title" class="form-control form-control-sm"> 
       <label name="caption">Caption:</label> 
       <input type="text" id="caption" name="caption" class="form-control form-control-sm"><br> 
       <input type="submit" value="Crear Traduccion" id="createtranslatesubmit" class="btn btn-danger btn-md"> 
       <br><br><br> 

      </div> 
      </form> <!-- FIRST FORM TO TRANSLATE END HERE --> 
    </div> 
</div>

這是正確的？「存儲」數據的問題，我認爲是控制器中的一個問題。

最後，我沒有任何想法，如何在ajax中傳遞數據，用formdata也許呢？

非常感謝，任何幫助將不勝感激！

來源

2017-07-31 Lluís Puig Ferrer

你不能有相同的ID多個HTML元素（甚至是真實的如果他們是在不同的形式）。每個文檔的ID必須是唯一的。您還需要將名稱更改爲：'name =「locale []」'等。名稱後面的'[]'使其成爲一個數組。這意味着'$ request-> input（「locale」）將會返回一個數組，例如：'['from form 1'，'from form 2'] –

當您提交表單時，您將向該服務器發送該特定表單的數據。您使用多種表單的方法在這裏不起作用，因爲您只想發送只有一個特定表單提交的所有數據。

因此，您只需創建1個表單並使用數字引用分隔不同的翻譯。

你的HTML（注意-0和-1用於將每個輸入元件的單獨的ID和名稱）：

<form enctype="multipart/form-data" id="myFormTraduccion" name="myFormTraduccion"><!--FIRST FORM TO TRANSLATE --> 
    <input type="hidden" name="_token" value="{{ Session::token() }}"> 
     <div class="form-group"> 
      <label name="Language">Language:</label> 
      <input type="text" id="locale-0" name="locale-0" value="en" class="form-control form-control-sm"> 
      <label name="Project">Project id:</label> 
      <input type="number" id="project-0" name="project-0" class="form-control form-control-sm"> 
      <label name="Title">Title:</label> 
      <input type="text" id="title-0" name="title-0" class="form-control form-control-sm"> 
      <label name="Caption">Caption:</label> 
      <input type="text" id="caption-0" name="caption-0" class="form-control form-control-sm"> 
      <label name="title">Language:</label> 
      <input type="text" id="locale-1" name="locale-1" value="es" class="form-control form-control-sm"> 
      <label name="order">Project id:</label> 
      <input type="number" id="project-1" name="project-1" class="form-control form-control-sm"> 
      <label name="public">Title:</label> 
      <input type="text" id="title-1" name="title-1" class="form-control form-control-sm"> 
      <label name="caption">Caption:</label> 
      <input type="text" id="caption-1" name="caption-1" class="form-control form-control-sm"><br> 
      <input type="submit" value="Crear Traduccion" id="createtranslatesubmit" class="btn btn-danger btn-md"> 
      <br><br><br> 

     </div> 
    </form>

控制器：

public function storeTranslation(Request $request) 
{ 
    $projecttranslation0 = new ProjectTranslation(); 
    $projecttranslation0->locale = $request->input("locale-0"); 
    $projecttranslation0->project_id = $request->input("project-0"); 
    $projecttranslation0->title = $request->input("title-0"); 
    $projecttranslation0->caption = $request->input("caption-0"); 
    $projecttranslation0->save(); 

    $projecttranslation1 = new ProjectTranslation(); 
    $projecttranslation1->locale = $request->input("locale-1"); 
    $projecttranslation1->project_id = $request->input("project-1"); 
    $projecttranslation1->title = $request->input("title-1"); 
    $projecttranslation1->caption = $request->input("caption-1"); 
    $projecttranslation1->save(); 
}

當然，它可以被容易地推廣到N多次翻譯而不只是2.

來源

2017-07-31 14:12:30 gbalduzzi

這可能更容易使用'name =「thename []」相反。然後，您可以簡單地遍歷帖子值，如果添加更多，則根本不需要更改控制器。不過，您仍然需要將「id」更改爲您的建議。 –

非常感謝！這個版本對我來說更簡單，也許是因爲我在學習。但我認爲@MagnusEriksson的版本更「技術性」。我會嘗試兩個答案，如果我有一些錯誤，我會把它放在這裏:)只有一個答案，ajax不會改變？ –

@LluísPuigFerrer真的，只要你使用相同的表單ID，Ajax保持不變。 –

試一試：

<div id="form2" style="display:none;" class="col-md-6"> 
<div class="col-md-"> 
    <h3>Crear nueva traduccion</h3> 
    <form enctype="multipart/form-data" id="myFormTraduccion" name="myFormTraduccion"><!--FIRST FORM TO TRANSLATE --> 
    <input type="hidden" name="_token" value="{{ Session::token() }}"> 
     <div class="form-group"> 
      <label name="Language">Language:</label> 
      <input type="text" id="locale" name="ProjectTranslation[0][locale]" value="en" class="form-control form-control-sm"> 
      <label name="Project">Project id:</label> 
      <input type="number" id="project" name="ProjectTranslation[0][project]" class="form-control form-control-sm"> 
      <label name="Title">Title:</label> 
      <input type="text" id="title" name="ProjectTranslation[0][title]" class="form-control form-control-sm"> 
      <label name="Caption">Caption:</label> 
      <input type="text" id="caption" name="ProjectTranslation[0][caption]" class="form-control form-control-sm"> 
      <label name="title">Language:</label> 
      <input type="text" id="locale" name="ProjectTranslation[1][locale]" value="es" class="form-control form-control-sm"> 
      <label name="order">Project id:</label> 
      <input type="number" id="project" name="ProjectTranslation[1][project]" class="form-control form-control-sm"> 
      <label name="public">Title:</label> 
      <input type="text" id="title" name="ProjectTranslation[1][title]" class="form-control form-control-sm"> 
      <label name="caption">Caption:</label> 
      <input type="text" id="caption" name="ProjectTranslation[1][caption]" class="form-control form-control-sm"><br> 
      <input type="submit" value="Crear Traduccion" id="createtranslatesubmit" class="btn btn-danger btn-md"> 
      <br><br><br> 

     </div> 
     </form> <!-- FIRST FORM TO TRANSLATE END HERE --> 
</div>

所以，你會在控制器端得到ProjectTranslation的陣列現在

在控制器端

public function storeTranslation(Request $request) 
    { 
    $form_data = $request->get('ProjectTranslation'); 
    foreach($form_data as $form){ 
     $projecttranslation = ProjectTranslation::create($form); 
     $projecttranslation->save(); 
    } 

}

來源

2017-07-31 14:20:41

並且請更改輸入id，因爲它對演示不重要，所以我保持原樣。 –

如何使用一個按鈕插入兩行Laravel使用ajax

回答

相關問題