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
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">×</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.
You can do this via javascript and ajax
– Alvaro Alves