Untitled

<?php
require "contador.php";
require "conexao.php";

?>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
    <script type="text/javascript" src="funcao.js"></script>
    <script type="text/javascript" src="funcao2.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery-ui.min.css">

    <script type="text/javascript">
    function calcular() {
        var soma = $('.calcular').get().reduce(function(soma, el) {
            return (parseInt(el.value, 10) || 0) + soma;
        }, 0);
        document.getElementById('result').value = soma;
    }

    </script>

    <style type="text/css">
    body{
        background: #E0E0E0;
        height: 100%;
    }
      form{
        position:absolute;
        top:5%;
        left:14%;
        background:#FFFFFF;

        padding:50px;
        text-align:center;
        -moz-border-radius:7px;
        -webkit-border-radius:7px;
        border-radius:7px;
      }
    </style>
</head>
<body>

<div class="tamanho_form">
<div class="table-responsive">
<br>

<form method="post" action="salvar.php">

      <table class="table table-hover table-bordered">
          <header class="row">
            <h2 class='text-center text-primary'>Pesquise o responsável</h2>
          </header>

      <div class="row">
          <div class="form-group col-md-6 col-md-offset-3">
            <input type="text" class="form-control" id="busca" placeholder="Informe o nome do responśavel">
          </div>
      </div>


          <header class="row">
            <h2 class='text-center text-danger'>Detalhes do Responsável</h2>
          </header>

          <br>

          <div class="row">
            <div class="form-group col-md-2">
              <label for="titulo">Identificação:</label>
                <input type="text" class="form-control" name="identificacao" id="codigo_barra" readonly>
            </div>

            <div class="form-group col-md-4">
              <label for="titulo">Nome Completo:</label>
                <input type="text" class="form-control" name="responsavel" id="titulo_livro" readonly>
            </div>

            <div class="form-group col-md-3">
              <label for="titulo">Valor:</label>
                <input type="text" class="form-control calcular" id="txt1" name="adesao" onkeyup="calcular()">
            </div>

            <div class="form-group col-md-3">
              <label for="titulo">Valor Total:</label>
                <input type="text" class="form-control" name="total" id="result" readonly>
            </div>
          </div>
      </table>

      <hr />

      <header class="row">
        <h2 class='text-center text-primary'>Cadastro de Dependentes</h2>
      </header>

      <hr />

      <table id="products-table" class="table">
        <tbody>
          <tr>
            <th>Nome:</th>
            <th>CPF:</th>
            <th>Cargo:</th>
            <th>E-mail:</th>
            <th>Parentesco:</th>
            <th>Valor Dependente:</th>
            <th class="actions">Ações</th>
          </tr>

          <tr>
            <td><input type="text" name="usuarios[0][nome]"></td>
            <td><input type="text" name="usuarios[0][cpf]"></td>

            <td>
              <select name="usuarios[0][cargo]">
                <option value="gerente" name="usuarios[0][gerente]">Gerente</option>
                <option value="Professor" name="usuarios[0][Professor]">Professor</option>
                <option value="Programador" name="usuarios[0][Programador]">Programador</option>
              </select>
            </td>


            <td><input type="text" name="usuarios[0][email]"></td>
            <td><input type="text" name="usuarios[0][parentesco]"></td>
            <td><input type="text" onkeyup="calcular()" class="calcular" name="usuarios[0][valordependente]"></td>

            <td class="actions">
              <button class="btn btn-large btn-danger" onclick="RemoveTableRow(this)" type="button">Remover</button>
            </td>
          </tr>
        </tbody>

        <tfoot>
          <tr>
            <td colspan="6" style="text-align: left;">
              <button class="btn btn-large btn-success" onclick="AddTableRow(this)" type="button">Adicionar Dependentes</button>
            </td>
          </tr>
        </tfoot>
      </table>

      <button type="submit" class="btn btn-info pull-right">Cadastrar</button>
      </div>
</form>


  <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></script>
  <script type="text/javascript" src="jquery-ui.min.js"></script>
  <script type="text/javascript" src="custom.js"></script>
</body>
</html>