Galera, how do I give a "submit" in an input generated via js?

Question

Galera, how do I give a "submit" in an input generated via js?

Navigation

#1 by (1 votes)

0

I'm generating this input with its name whenever the user clicks on the Add button, however, when I try to retrieve this value after the submit, it says "undefined index test". (being that it assigns in js) 1 - JS for input generation 2 - Input generated after the Add button is triggered

php javascript html

asked by anonymous 06.09.2018 / 23:17

1 answer

Import functions from another file (node.js) Calculation with Javascript gives error

score 1 · Answer 1

I'll give an example of how you can generate inputs via js and simulate a submit of that form:

$( document ).ready(function() {
    
    $("#enviar").click(function(){
      //aqui posso pegar todos os inputs e fazer o que quiser com eles
      //até um for
      console.log(document.getElementsByTagName("input"));
      alert(document.getElementsByTagName("input")[0].value);
    });
    
    $("#saveCurso").click(function(){
      
      nome = $("#inpNomeCurso").val()
      tempo = $("#inpTempoCurso").val()
      area = $("#inpAreaCurso option:selected").text()
      
      var tr = 
            ""+
              "<tr>"+
              "<td><input type'text' id='teste' placeholder='insira algo aqui' /></td><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>
        Texto
      </td>
      <td>
        Nome do Curso
      </td>
      <td>
        Área do Curso
      </td>
      <td>
        Duração:
      </td>    
      </tr>
     </thead>
     
     <tbody id="tbody"></tbody>
    </table>
    <button class='btn btn-primary' id="enviar">Enviar dados do input</button>
    </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>

Notice this part of the code

$("#enviar").click(function(){
    //aqui posso pegar todos os inputs e fazer o que quiser com eles
    //até um for
    console.log(document.getElementsByTagName("input"));
    alert(document.getElementsByTagName("input")[0].value);
 });