ブートストラップ・モーダルからフォームを送信する方法

Question

PHPフォームを送信する際には、ヘルプが必要です。

私はデータベースからphp whileループを使っていくつかのレコードを示すテーブルを持っています。

フィールドの1つをImageといいます。そのフィールドにフォームを追加して、人々がその製品にイメージを追加できるようにしたい。

私がやりたいことは、画像フィールドに「アップロード」ボタンがあることです。また、テーブルの外側に配置され、画像アップロードフォームを含むブートストラップモーダルを持っています。

「アップロード」をクリックすると、ブートストラップモデルがフォームで開き、送信ボタンをクリックすると、クリックされた商品の画像が保存されます。

ここから始めて、これはテーブルのアップロードボタンです。ここで

<button type="button" class="btn btn-default" value = "<?php echo $row['id_stk']?>" data-id= "image-upload" data-toggle="modal" data-target="#image-upload">Upload</button> 

は私のブートストラップは、私の質問は、私は、フォームにクリックされた行の詳細を渡すことができますどのように

<div class="modal fade bs-example-modal-lg image-viewer-modal" id="image-upload" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> 
        <div class="modal-dialog modal-lg" role="document"> 
        <div class="modal-content"> 

         <div class="modal-header"> 
          <h2>Image Upload</h2> 

         </div> 

         <div class="modal-body"> 
          <form method="post" id="UploadImage"> 
           <div class="form-group"> 
            <input type="file" class="form-control" name="image" id="image"> 
           </div> 
           <button type="submit" class="btn btn-primary sucess"> Upload</button> 

           <img id="target" src="#" alt="your image" /> 
          </form> 

         </div> 

         <div class="modal-footer image-modal"> 
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
          </div 


         </div> 
        </div> 
       </div>  

と私のスクリプト

$("#UploadImage").submit(function(event) { 
      alert($(this).attr("value")); 
      event.preventDefault(); 
    }); 

ある SQL挿入ステートメントのため、 "アップデート製品SET image WHERE id =？

およびこのフォームを提出する方法。

ありがとうございます。

再編集 これはアップロードボタンがある表です。

アップロードボタン

<button type="button" class="btn btn-default" value = "<?php echo $row['id_stk']?>" data-id= "image-upload" data-toggle="modal" data-target="#image-upload">Upload</button> 

のコードはだから私はそれをクリックすると、（テーブル、ループの外の場所である）のオープンモデル。 ここはモーダルコードです。ここで

<div class="modal fade bs-example-modal-lg image-viewer-modal" id="image-upload" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> 
       <div class="modal-dialog modal-lg" role="document"> 
        <div class="modal-body"> 

         <!-- FORM FOR IMAGE UPLOAD --> 

         <form method="post" id="UploadImage"> 
          <div class="form-group"> 
           <input type="hidden" class="form-control" name="id" id="id" value="<?php echo $row['id_stk']?>" > 
           <input type="file" class="form-control" name="image" id="image"> 
          </div> 
          <button type="submit" class="btn btn-primary sucess"> Upload</button> 

          <img id="target" src="#" alt="your image" /> 
         </form> 

        </div> 
        <div class="modal-footer image-modal"> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
         </div> 
        </div> 
       </div> 
      </div>  

がモーダル絵が

です。ここアップロードフォームのボタンのコードです。ただ警戒したい。しかし、それは何も表示されません。

$("#UploadImage").submit(function(event) { 
    var customerId = $(this).find('input[name="id"]').val(); 
    alert(customerId); 
     event.preventDefault(); 
}); 

Answer 1

非表示の入力フィールドをフォームタグ内に配置し、その値を更新するレコードのIDで設定できます。この方法で、フォームが送信されるメソッド/アクション内のレコードのIDを取得できます。

<form method="post" id="UploadImage"> 

<input type="hidden" value="" name="id" id="idToSend"> 

          <div class="form-group"> 
           <input type="file" class="form-control" name="image" id="image"> 
          </div> 
          <button type="submit" class="btn btn-primary sucess"> Upload</button> 

          <img id="target" src="#" alt="your image" /> 
         </form> 

「アップロード」ボタンをクリックしてフォームの提出を添付してください。

$('.uploadButton').click(function(){ 
    $('#idToSend').val($(this).val()); 
})