Redirect between pages

0

Next, I have two html pages in the expense posting system. One page is called launchings.html and the other one is called records.html. The first page is where I'm going to post the expenses and the second is where the expense records posted on the first page will be.

I'll write the codes of the two just below:

Launches.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Lançamento de Despesas</title>
  <link rel="stylesheet" href="css/lancamentos.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/bootstrap-theme.min.css">
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery-3.3.1.min.js"></script>
</head>

<body>
  <div id="logo">
    <img src="/images/logo-defensoria-ms.png" alt="logo">
    <h2>Defensoria Pública de Mato Grosso do Sul</h2>
    <h3>Sistema de Lançamento de Despesas</h3>
  </div>
  <div class="col-md-2">
    <div class="panel panel-primary">
      <div class="panel-heading">Lançamento de Despesas</div>
      <div class="panel-body">
        <form>
          <div class="form-group">
            <label for="mesPagamento">Mês/Pagamento</label>
            <select class="form-control input-lg" id="despesa_mesPagamento" name="mesPagamento">
              <option value="" selected="selected">Mês de Pagamento</option>
              <option value="Janeiro">Janeiro</option>
              <option value="Fevereiro">Fevereiro</option>
              <option value="Março">Março</option>
              <option value="Abril">Abril</option>
              <option value="Maio">Maio</option>
              <option value="Junho">Junho</option>
              <option value="Julho">Julho</option>
              <option value="Agosto">Agosto</option>
              <option value="Setembro">Setembro</option>
              <option value="Outubro">Outubro</option>
              <option value="Novembro">Novembro</option>
              <option value="Dezembro">Dezembro</option>
            </select>
         </div>

          <div class="form-group">
            <label for="mesReferencia">Mês/Referência</label>
            <select class="form-control input-lg" id="despesa_mesReferencia" name="mesReferencia">
              <option value="" selected="selected">Mês de Referência</option>
              <option value="Janeiro">Janeiro</option>
              <option value="Fevereiro">Fevereiro</option>
              <option value="Março">Março</option>
              <option value="Abril">Abril</option>
              <option value="Maio">Maio</option>
              <option value="Junho">Junho</option>
              <option value="Julho">Julho</option>
              <option value="Agosto">Agosto</option>
              <option value="Setembro">Setembro</option>
              <option value="Outubro">Outubro</option>
              <option value="Novembro">Novembro</option>
              <option value="Dezembro">Dezembro</option>
            </select>
          </div>

          <div class="form-group">
            <label for="ano">Ano</label>
            <input type="number" name="ano" id="despesa_ano" class="form-control input-lg" placeholder="Inserir o ano">
          </div>

          <div class="form-group">
            <label for="contrato">Contrato</label>
            <input type="text" name="contrato" id="despesa_contrato" class="form-control input-lg" placeholder="Inserir o número do contrato">
          </div>

          <div class="form-group">
            <label for="dataPagamento">Data/Pagamento</label>
            <input type="date" name="dataPagamento" id="despesa_dataPagamento" class="form-control input-lg" placeholder="Inserir a data de pagamento">
          </div>

          <div class="form-group">
            <label for="fornecedor">Fornecedor</label>
            <input type="text" name="fornecedor" id="despesa_fornecedor" class="form-control input-lg" placeholder="Inserir o fornecedor do serviço/produto">
          </div>

          <div class="form-group">
            <label for="descricao">Descrição do Serviço</label>
            <input type="text" name="descricao" id="despesa_descricao" class="form-control input-lg" placeholder="Inserir a descrição do serviço/produto">
          </div>

          <div class="form-group">
            <label for="nfFatura">NF/Fatura</label>
            <input type="text" name="nfFatura" id="despesa_nfFatura" class="form-control input-lg" placeholder="Inserir o número da NF/Fatura">
          </div>

          <div class="form-group">
            <label for="valor">Valor R$</label>
            <input type="number" name="valor" id="despesa_valor" class="form-control input-lg" placeholder="Inserir o valor do serviço/produto">
          </div>

          <div class="form-group">
            <label for="localServico">Local/Serviço</label>
            <input type="text" name="localServico" id="despesa_localServico" class="form-control input-lg" placeholder="Inserir o local da realização do serviço">
          </div>
          <div class="form-group">
            <label for="mUcContrato">Matrícula/UC/Contrato</label>
            <input type="text" name="mUcContrato" id="despesa_mUcContrato" class="form-control input-lg" placeholder="Matrícula/UC/Contrato ">
          </div>

          <div class="form-group">
            <label for="consumo">Consumo</label>
            <input type="text" name="consumo" id="despesa_consumo" class="form-control input-lg" placeholder="Inserir consumo">
          </div>

          <div class="form-group">
            <label for="comarca">Comarca</label>
            <input type="text" name="comarca" id="despesa_comarca" class="form-control input-lg" placeholder="Inserir a comarca">
          </div>

          <div class="form-group">
            <button type="button" id="updateButton" onclick="despesaUpdate();" class="btn btn-lg btn-primary">
              Adicionar Despesa
            </button>
            <button type="button" id="updateButton1" onclick="despesaUpdate();" class="btn btn-lg btn-primary">
              Sair
            </button>
          </div>
        </form>
      </div>
    </div>
    <!--// .panel -->
  </div>
  <!--// .col-md -->
  </div>
  <!--// .row -->


</body>

</html>

records.html

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Registros</title>
  <link rel="stylesheet" href="css/registros.css">
  <link rel="stylesheet" href="css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery-3.3.1.min.js"></script>
</head>

<body>
  <div id="logo">
    <img src="/images/logo-defensoria-ms.png" alt="logo">
    <h2>Defensoria Pública de Mato Grosso do Sul</h2>
    <h3>Sistema de Lançamento de Despesas</h3>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-md-13">

      </div>
      <!--// .col-md-12 -->
    </div>
    <!--// .row -->

    <div class="row">
      <div class="col-md-13">
        <table id="despesaTable" class="table table-bordered table-condensed table-striped">
          <thead>
            <tr>
              <th id="pagamento">Mês/Pagamento</th>
              <th id="referencia">Mês/Referência</th>
              <th id="ano">Ano</th>
              <th id="contrato">Contrato</th>
              <th id="datap">Data/Pagamento</th>
              <th id="fornecedor">Fornecedor</th>
              <th id="servicos">Descrição do Serviço</th>
              <th id="nf">NF/Fatura</th>
              <th id="valor">Valor R$</th>
              <th id="local">Local/Serviço</th>
              <th id="matricula">Matrícula/UC/Contrato</th>
              <th id="consumo">Consumo</th>
              <th id="comarca">Comarca</th>
            </tr>
          </thead>
        </table>
      </div>
      <!--// .col-md-13 -->
    </div>
    <!--// .container -->


    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
      // Próximo ID para adicionar uma nova despesa
      var _nextId = 1;
      // ID da despesa que está sendo editada
      var _activeId = 0;

      function formClear() {
        $("#despesa_mesPagamento").val("");
        $("#despesa_mesReferencia").val("");
        $("#despesa_ano").val("");
        $("#despesa_contrato").val("");
        $("#despesa_dataPagamento").val("");
        $("#despesa_fornecedor").val("");
        $("#despesa_descricao").val("");
        $("#despesa_nfFatura").val("");
        $("#despesa_valor").val("");
        $("#despesa_localServico").val("");
        $("#despesa_mUcContrato").val("");
        $("#despesa_consumo").val("");
        $("#despesa_comarca").val("");
      }

      function despesaBuildTableRow(id) {
        var row = "<tr>" +
          "<td>" + $("#despesa_mesPagamento").val() + "</td>" +
          "<td>" + $("#despesa_mesReferencia").val() + "</td>" +
          "<td>" + $("#despesa_ano").val() + "</td>" +
          "<td>" + $("#despesa_contrato").val() + "</td>" +
          "<td>" + $("#despesa_dataPagamento").val() + "</td>" +
          "<td>" + $("#despesa_fornecedor").val() + "</td>" +
          "<td>" + $("#despesa_descricao").val() + "</td>" +
          "<td>" + $("#despesa_nfFatura").val() + "</td>" +
          "<td>" + $("#despesa_valor").val() + "</td>" +
          "<td>" + $("#despesa_localServico").val() + "</td>" +
          "<td>" + $("#despesa_mUcContrato").val() + "</td>" +
          "<td>" + $("#despesa_consumo").val() + "</td>" +
          "<td>" + $("#despesa_comarca").val() + "</td>" +
          "<td>" +
          "<button type='button' " +
          "onclick='despesaDisplay(this);' " +
          "class='btn btn-default'" +
          "data-id='" + id + "'>" +
          "<span class='glyphicon glyphicon-edit'></span>" +
          "</button>" +
          "</td>" +
          "<td>" +
          "<button type='button' " +
          "onclick='despesaDelete(this);' " +
          "class='btn btn-default'" +
          "data-id='" + id + "'>" +
          "<span class='glyphicon glyphicon-remove'></span>" +
          "</button>" +
          "</td>" +
          "</tr>"

        return row;
      }

      function despesaAddToTable() {
        // Primeiro verifica se a tag <tbody> existe. Adiciona um caso não exista
        if ($("#despesaTable tbody").length == 0) {
          $("#despesaTable").append("<tbody></tbody>");
        }

        // Adiciona a despesa na Tabela
        $("#despesaTable tbody").append(despesaBuildTableRow(_nextId));

        // Incrementamos o nextId
        _nextId += 1;
      }

      function despesaDelete(button_delete) {
        $(button_delete).parents("tr").remove();
      }

      function despesaDisplay(button_edit) {
        var row = $(button_edit).parents("tr");
        var cols = row.children("td");

        _activeId = $($(cols[13]).children("button")[0]).data("id");

        $("#despesa_mesPagamento").val($(cols[0]).text());
        $("#despesa_mesReferencia").val($(cols[1]).text());
        $("#despesa_contrato").val($(cols[2]).text());
        $("#despesa_ano").val($(cols[3]).text());
        $("#despesa_dataPagamento").val($(cols[4]).text());
        $("#despesa_fornecedor").val($(cols[5]).text());
        $("#despesa_descricao").val($(cols[6]).text());
        $("#despesa_nfFatura").val($(cols[7]).text());
        $("#despesa_valor").val($(cols[8]).text());
        $("#despesa_localServico").val($(cols[9]).text());
        $("#despesa_mUcContrato").val($(cols[10]).text());
        $("#despesa_consumo").val($(cols[11]).text());
        $("#despesa_comarca").val($(cols[12]).text());

        // Mudar o texto do Botão
        $("#updateButton").text("Atualizar");
      }

      function despesaUpdateInTable(id) {
        // Encontra a despesa na tabela
        var row = $("#despesaTable button[data-id='" + id + "']").parents("tr")[0];

        // Adiciona a linha modifica na tabela
        $(row).after(despesaBuildTableRow());

        // Remover a linha antiga
        $(row).remove();

        // Limpar o formulário
        formClear();

        // Mudar o texto do Botão
        $("#updateButton").text("Adicionar Despesa");
      }

      function despesaUpdate() {
        if ($("#despesa_mesPagamento").val() != null && $("#despesa_title").val() != '') {
          if ($("#updateButton").text() == "Atualizar") {
            despesaUpdateInTable(_activeId);
          } else {
            // Adiciona a despesa na Tabela
            despesaAddToTable();
          }

          // Limpa o formulário
          formClear();

          // Mantém o foco no campo Título
          $("#despesa_mesPagamento").focus();
        }
      }
    </script>
</body>

</html>

What I can not do is to have the postings made on the page.html page appear on the page.html records.

Can you help me with this?

    
asked by anonymous 27.09.2018 / 17:03

0 answers