I can’t get my script to add more fields to my html form

Asked

Viewed 25 times

-1

Hello, I need a help, I have the following HTML code where there is an input field for the user to enter the meter and a select where he selects the type of service, however he may need more fields as he wants to do more services, has a button where the user clicks to add amsi fields, but it is with an error as it inserts and deletes. Follows the code:

<?php
    include "cabecalho.php";

      if($_SESSION['usuario'] == 'logado'){
        ?>
          <form class="row g-3" id="form_servico">
            <div id="formulario-orcamento">
              <div class="form-row">
                <div class="form-group col-md-6">
                  <label for="exampleFormControlInput1">Metros</label>
                  <input type="email" class="form-control" id="metros" placeholder="Ex: 20">
                </div>
                <div class="form-group col-md-6">
                  <label> Tipo de Serviço </label>
                    <select name="cod_servico" class="form-control">
                      <option> ::Selecione:: </option>
                        <?php
                          require_once "conexao.php";
                          $sql = "SELECT id_servico, nome FROM servico ORDER BY nome";
                          $result = mysqli_query($conexao, $sql);
                          // $row = mysqli_fetch_array($result);
                                    
                          while($linha = mysqli_fetch_array($result)){
                            echo '<option value="'.$linha["id_servico"].'">'.$linha["nome"].'</option>';
                          }
                                    
                        ?>
                    </select>
                </div>
              </div>
              <button type="submit" id="add-campo" onclick="adicionar()" class="btn btn-primary">Adicionar mais campos</button>
            </form>
              
      <?php
      }else{
        header('Location: login.php');
            exit();
      }
    include "rodape.php";
?>
php javascript html ajax

1 answer

0


You can post the add function you’re calling on the button?

EDIT

I switched from a button to a link and it worked try there, I will post my code here:

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
            integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
          integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
            integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
            crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <form class="row g-3" id="form_servico">
            <div id="formulario-orcamento">
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="metros">Metros</label>
                        <input type="email" class="form-control" id="metros" placeholder="Ex: 20">
                    </div>
                    <div class="form-group col-md-6">
                        <label> Tipo de Serviço </label>
                        <select name="cod_servico" class="form-control">
                            <option> ::Selecione::</option>
                        </select>
                    </div>
                </div>
                <a href="javascript:void(0)" id="add-campo" class="btn btn-primary">Adicionar mais campos
                </a>
            </div>
        </form>
    </div>
</div>


<script>
    $("#add-campo").click(function () {
        $("#formulario-orcamento").append('<div class="form-row"><p>teste</p></div>');
    });
</script>
</body>
</html>

  • $("#add-field"). click(Function add() { $("#budget-form").append('<div class="form-Row"><p>test</p></div>'); });

  • It worked, thank you so much for your help!!!!

Browser other questions tagged php javascript html ajax

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