從引導模式獲取值，然后進程將值插入數據庫

Question

我正在使用從數據庫打印值的表。 然后我做出選擇。 之后，我想要處理這些值以及bootstrap模態中需要填充的值。 獲得所有值后，我需要將它們存儲到數據庫中。

來自數據庫的表存儲值：

<table id="table"  class="table table-bordered table-striped">
    <thead>
      <tr class="bg-red">
        <th>Id</th>
        <th>Material</th>
        <th>Quality</th>
        <th>Dimensions</th>
        <th>Colors</th>
        <th>Weight</th>    
        <th><center><i class="fa fa-shopping-cart"><center></th>
      </tr>
    </thead>
    <tbody>
    <?php while($r=$q->fetch()){ ?>
      <tr>
        <td class='data-id'><?='B-'. $r['Id']?> </td>
        <td> <?=$r['Material']?> </td>
        <td><?=$r['Quality']?></td>
        <td><?=$r['Dimensions']?></td>
        <td><?=$r['Colors']?></td>
        <td><?=$r['Weight']?></td>
        <td> <button class="addValues" name="code[]" value="<?='B-'. $r['Id']?>"><i class="fa fa-shopping-cart"></button></td>
      </tr>
    <?php } ?>
    </tbody>
</table>

然后我使用腳本make行選擇和打印值到另一個div（本節適用）

<script>
    $(".addValues").click(function () {
        $('#selection').show();
            var $this = $(this),
            myCol = $this.closest("td"),
            myRow = myCol.closest("tr"),
            targetArea = $("#selection");

            var qte_input = (' <input type="text" name="quantity[]" placeholder="kg / m" size="10"/>');
              targetArea.prepend($("td.data-id", myRow).text() + qte_input +"<hr />"); 
          });
</script>

選擇div后的輸出（可以選擇多個選項）

B-15897 3000kg // B-15897贈送代碼3000kg贈品數量。 B-4589 500米

在這些值下面，我有提交按鈕，它會打開bootstrap模式。

<div class="col-xs-2">
    <div class="box box-danger">
        <h4>Selected: </h4><br/>
        <div id="selection">
            <!-- SELECTED VALUES  -->
            B-15897 3000kg
            B-4589  500m
        </div>
        <button class="btn btn-block bg-red btn-sm" data-toggle="modal" data-target="#myModal">Send request</button>
    </div>
</div>

一旦我點擊發送請求，它就會打開bootstrap模式：

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" href="repromaterijali-script.php">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Offer request</h4>
      </div>
      <div class="modal-body">
        * Company name
        <input type"text" class="form-control" name="company"  required><br/>
        * Contact info
        <input type"text" class="form-control" name="contact" required><br/>
        * Adress
        <input type"text" class="form-control" name="address" required><br/>
        * Phone
        <input type"text" class="form-control" name="tel"required><br/>
        E-mail
        <input type"text" class="form-control" name="email" ><br/>
        Other
        <textarea type"text" class="form-control" name="other" ></textarea><br/>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" name="submit">Send</button>
      </div>
    </div>
  </div>
</div>

我想從bootstrap模式中選擇所有值，從div中選擇值，處理它們並通過php插入數據庫。 代碼和數量將是一個數組，因為可以選擇多個值。

Bootstrap模態和div，其中所選值在<form> 。 我試圖通過使用下面的腳本來獲取值，但沒有任何反應：

<script type="text/javascript">
    function get_values() {
        var x = document.getElementById("quantity").value;
        var y = document.getElementById("code").value;
        var arr = {barcode:x};
            $.ajax({ url: 'insert.php',
                 data: arr,
                 type: 'post',
                 success: function(output) {
                     document.getElementById("code").value = output;

                  }
        });
    }
</script>

我在尋找建議？ 非常感謝任何形式的幫助。

Answer 1

您的模態在幾個級別上編碼不正確。

首先， input元素沒有分配id 。 通常會通過id獲取值。 你在這里做的方式類似：

 var x = document.getElementById("quantity").value;

此外，雖然它與從模式中讀取值無關，但從Bootstrap角度來看，輸入表單的編碼方式與Bootstrap CSS期望編碼的方式不同。

這里是Bootstrap站點的一個例子：

 <div class="form-group">
     <label for="exampleInputPassword1">Password</label>
     <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>

請注意，每個輸入都包含在一個form-group 。 如果使用此布局，則無需使用<br>標記。