如何从bootstrap模态

时间:2017-05-23 11:31:43

标签: php sql

我需要帮助提交PHP表单。

我有一张表,显示了使用php while循环从数据库中获取的一些记录。

其中一个字段叫做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 Insert语句会执行类似&#34;更新产品SET图像WHERE id =?

和我如何提交此表单。

谢谢。

重新编辑 这是表,它有上传按钮。

enter image description here

上传按钮的代码

<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>      

这是模态图片

enter image description here

以下是上传表单按钮的代码。我只想提醒。但它没有显示任何内容

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

1 个答案:

答案 0 :(得分: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());
})