Get values from bootstrap modal, process then insert value to database

Question

I am using table where values are printed from database. Then I make selections. After that I want to process those values together with values from bootstrap modal which are required to fill. Once I get all values, I need to store them into database.

Table store values from database:

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

Then I am using script make row selection and print values to another div (This section works)

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

Output in div after row is selected (Multiple selections could be chosen)

B-15897 3000kg // B-15897 presents code 3000kg presents quantity. B-4589 500m

Below those values I have submit button, which opens bootstrap modal.

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

Once I hit Send request it opens bootstrap modal:

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

I want to pick all values from bootstrap modal and from div where selected values are, process them and insert in database via php. code and quantity will be an array because multiple values could be selected.

Bootstrap modal and div where selected values are inside <form> . I am trying to get values by using script bellow but nothing happens:

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

I am looking for advice? Any kind of help is very appreciated.

Answer 1

Your modal isn't coded correctly on a couple of levels.

First, the input elements do not have an id assigned. Normally one would get the value via the id . In a similar way you did here:

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

Also, while it has nothing to do with reading the values from the modal, from a Bootstrap perspective, your input form is not coded the way the Bootstrap CSS expects it to be coded.

Here an example from the Bootstrap site:

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

Notice each input is wrapped in a form-group . If you use this layout, you'll not need to use the <br> tag.