Redirect between pages

Asked

Viewed 46 times

0

Next, I have two html pages in the expense release system. One page is called.html releases and the other is called.html records. The first page is where I’ll post the expenses and the second is where the expense records posted on the first page.

I’ll write the codes for the two below:

html releases.

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

html records.

<!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’m failing to do is to have the expense releases made on the.html page appear on the records page.html.

You can help me with that??

html5 css3 javascript-events

  • Good guy is next: first - You are trying to pass data from one page to another directly, and it does not exist. You have to either send the data from the page html releases. to a database and retrieve them on the page html records. or you store them in a storage in the browser using localStorage or sessionStorage and recovers on the other page. 2nd - You called several times the bootstrap before the jQuery and so does not work.

  • Which of the two options do you think best, database or localStorage?

  • Well, it depends a lot on what you want to do, the best and safest thing about data is to send it to a database. It is also not very practical to use Storage with a large number of data, it gets very laborious.

  • And in fact if you don’t intend to persist this information in some repository, it wouldn’t make much sense to build its interface on several pages...

  • Thanks for the personal answers

No answers

Browser other questions tagged html5 css3 javascript-events

You are not signed in. Login or sign up in order to post.