从引导模式获取值,然后进程将值插入数据库

时间:2015-12-29 13:43:26

标签: javascript jquery twitter-bootstrap

我正在使用从数据库打印值的表。然后我做出选择。之后,我想要处理这些值以及bootstrap模态中需要填充的值。获得所有值后,我需要将它们存储到数据库中。

来自数据库的表存储值:

unix2dos

然后我使用脚本make行选择并将值打印到另一个div(本节适用)

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

选择行后的div输出(可以选择多个选项)

B-15897 3000kg // B-15897赠送代码3000kg赠品数量。 B-4589 500米

在这些值之下,我有提交按钮,打开bootstrap模式。

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

点击发送请求后,它会打开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模式中选择所有值,从div中选择值,处理它们并通过php插入数据库。代码和数量将是一个数组,因为可以选择多个值。

Bootstrap模态和div,其中所选值在<!-- 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> 内。我试图通过使用下面的脚本来获取值,但没有任何反应:

<form>

我在寻求建议?非常感谢任何形式的帮助。

1 个答案:

答案 0 :(得分:0)

您的模态在几个级别上编码不正确。

首先,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>标记。