Save FORM Information to the same Page

Asked

Viewed 55 times

0

I would like a very brief help, I am making a form for sending resume with HTML + PHP, I wonder how would be done the following to add a course. (1º we added a course) , (2nd place course information) and then I want it to be recorded as in image 3 on the same page

Primeiro adcionar um novo curso

Abrir janela de popup com o formulário

Depois de clicar em Gravar eli ficar gravado da mesma forma da imagem 3

javascript html css

  • You can do this via javascript and ajax

1 answer

0


It’s easy, I’ll use algumas variáveis do js to simulate database saved data:

In the example I will use JS and HTML5:

$( document ).ready(function() {
    

    $("#saveCurso").click(function(){
      
      nome = $("#inpNomeCurso").val()
      tempo = $("#inpTempoCurso").val()
      area = $("#inpAreaCurso option:selected").text()
      
      var tr = 
            ""+
              "<tr>"+
              "<td>"+nome+"</td><td>"+area+"</td><td>"+tempo+" hora</td>"+
              "</tr>"+
            "";
            
      $("#tbody").append(tr);
      
      $("#inpNomeCurso").val("")
      $("#inpAreaCurso").val("")
      $("#inpTempoCurso").val("")
      $('#exampleModal').modal('hide')
    
    });    
    
    
});
#addCurso{
  
  position: absolute;
  right: 0px;
  top: 0px;

}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<html>
<body>
<div class="container">
  <div class="col-md-12">
    <div class="row">
        <h4 style="">Dados e formulario do curriculo</h4>  
    </div>
    
    <div class="row">
    <div class="float-right" sty>
      <button type='button' class="btn btn-primary float-right" id="addCurso" style="" data-toggle="modal" data-target="#exampleModal">Adicionar Curso</button>
    </div>  
    </div>
    
    <div class="row">
    <div class="col-md-5">
    <br />
    <h5>Cursos Extracurriculares</h5>
    <table class="table table-bordered">
    <thead>
     <tr>
      <td>
        Nome do Curso
      </td>
      <td>
        Área do Curso
      </td>
      <td>
        Duração:
      </td>    
      </tr>
     </thead>
     
     <tbody id="tbody"></tbody>
    </table>
    </div>
  </div>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Cursos Extra Curricular</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <label>Nome do Curso</label>
        <input type="text" class="form-control" id="inpNomeCurso">
        <label>ÁREA do Curso</label>
        <select class="custom-select" id="inpAreaCurso">
          <option selected>Selecione uma Area</option>
          <option value="1">Tecnologia</option>
          <option value="2">Administração</option>
          <option value="3">Biologia</option>
          <option value="4">Advogacia</option>
          <option value="3">Matematica</option>
          <option value="3">Quimica</option>
        </select>
        <label>Tempo de Curso (horas)</label>
        <input type="number" class="form-control" id="inpTempoCurso">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-primary" id="saveCurso">Salvar</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Now just send these variables to save in your bank

  • Exactly what I needed, thank you very much

Browser other questions tagged javascript html css

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