Add Textbox’s results from one page to another HTML page table

Question

I have an HTML page with an empty table and when I press a button, it directs me to another page where there are 5 inputs , what I intend to do in javascript is to put the result of these 5 inputs in the table of the previous page.

Page 1, name = Calendar.html:

    ....

        <table id="myTable2">
          <thead>
              <tr>
            <th>Disciplina</th>
            <th>Método de avaliação</th>
            <th>Data da avaliação</th>
            <th>Antecedência</th>
            <th>Duração por dia</th>
              </tr>
          </thead>
            <tbody>
            </tbody>
        </table>

<a href="CriarPlanoDeEstudo.html"><button type="button">Criar plano de estudo</button></a><br>


        .....

Page 2, name=Creatureplanodestudy.html

Antecedência: <input type="text" name="nome" id="antecedencia" placeholder="Dias de antecedencia"><br><p></p>

Data do Método: <input type="date" id="datadometodo" ><br><p></p>

Disciplina: <div id="disciplina"> </div> 

Duração por dia: <input type="text" name="nome" id="duracaopordia" placeholder="Duração em horas">   <br><p></p>

Método de avaliação: <input type="text" name="nome" id="metododeavaliaçao" placeholder="Nome do método">  <br><p></p>


<a href="Calendario.html"><button type="button" id="concluir" >Concluir</button></a>

Answer 1

You can leave it on the same page as adding the values in the table when the user clicks the Finish button. Simple example:

jQuery(document).ready(function($) {
		var $table = $("#myTable2 tbody");

		$('#concluir').click(function(event) {
			event.preventDefault();

			var antecedencia = $('#antecedencia').val(),
				datadometodo = $('#datadometodo').val(),
				disciplina = $('#disciplina').val(),
				duracaopordia = $('#duracaopordia').val(),
				metododeavaliacao = $('#metododeavaliacao').val(),
				linha = "<tr>";

			if (disciplina == "") {
				alert("Preencha o campo disciplina");
				return false;
			}
          
            datadometodo = datadometodo.split('-').reverse().join('/');

			linha += "<td>" + disciplina + "</td>";
			linha += "<td>" + metododeavaliacao + "</td>";
			linha += "<td>" + datadometodo + "</td>";
			linha += "<td>"+antecedencia+"</td>";
			linha += "<td>" + duracaopordia + "</td>";
			linha += "</tr>";
			$table.append(linha);
		});
	});

<form id="formulario">

	<p>
		<label for="antecedencia">Antecedência: </label>
		<input type="text" id="antecedencia" placeholder="Dias de antecedencia">
	</p>

	<p>
		<label for="datadometodo">Data do Método: </label>
		<input type="date" id="datadometodo" >
	</p>

	<p>
		<label for="disciplina">Disciplina:</label>
		<input type="text" id="disciplina">
	</p>

	<p>
		<label for="duracaopordia">Duração por dia:</label>
		<input type="text" id="duracaopordia" placeholder="Duração em horas">
	</p>
	<p>
		<label for="">Método de avaliação:</label>
		<input type="text" id="metododeavaliacao" placeholder="Nome do método">
	</p>

	<button type="button" id="concluir" >Concluir</button>

</form>

	<table id="myTable2">
          <thead>
              <tr>
            <th>Disciplina</th>
            <th>Método de avaliação</th>
            <th>Data da avaliação</th>
            <th>Antecedência</th>
            <th>Duração por dia</th>
              </tr>
          </thead>
            <tbody>
            </tbody>
        </table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>