Problem copying an html block when you click a button

0

I was able to make that when I click the add more fields button, the form is replicated. But the create button started to do the same thing as the add + fields button and not its function of inserting the data in the database. Could you help me?

<!doctype html>
<html>
    <head>

        <title></title>
        <link rel="stylesheet" href="<?php echo base_url('assets/css/bootstrap.min.css') ?>"/>
   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><!--Includeallcompiledplugins(below),orincludeindividualfilesasneeded--><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head><body><!--beginsnippet:jshide:false--><!--language:lang-js--><script>$(function(){$('button').on('click',function(){$('.info-block:first').clone().insertAfter('.info-block:last');});});</script><divclass='container'><divclass='info-block'><h2style="margin-top:0px">Criar Categorias de Inscrição </h2>
        <form action="<?php echo $action; ?>" method="post">
        <div class="form-group">
            <label for="varchar">Nome Categoria <?php echo form_error('nome_categoria') ?></label>
            <input type="text" class="form-control" name='nome_categoria[]' id="nome_categoria" placeholder="Nome Categoria" value="<?php echo $nome_categoria; ?>" />
        </div>
        <div class="form-group">
            <label for="varchar">Descricao Categoria <?php echo form_error('descricao_categoria') ?></label>
            <input type="text" class="form-control" name='descricao_categoria[]' id="descricao_categoria" placeholder="Descricao Categoria" value="<?php echo $descricao_categoria; ?>" />
        </div>
        <div class="form-group">
            <label for="decimal">Valor Categoria <?php echo form_error('valor_categoria') ?></label>
            <input type="text" class="form-control" name='valor_categoria[]' id="valor_categoria" placeholder="Valor Categoria" value="<?php echo $valor_categoria; ?>" />
        </div>
        <input type="hidden" name='idCategorias_Inscricao[]' value="<?php echo $idCategorias_Inscricao; ?>" /> 

            </form> 

   </div>

   </div>

         <button>Adicionar + campos</button>
        <button type="submit" class="btn btn-primary">Criar</button> 
        <a href="<?php echo site_url('categorias_inscricao') ?>" class="btn btn-default">Cancel</a>

    </body>
</html>
    
asked by anonymous 01.05.2016 / 21:14

1 answer

1

Add a class to the action button:

<button class="add">Adicionar + campos</button>

And modify the function to work with this class:

<script>
    $(function(){
      $('.add').on('click', function(){
        $('.info-block:first').clone().insertAfter('.info-block:last');
      });
    });

</script>

You can also change the element of the add button, use a <span> or a <p> to structure the code better and even help in styling.

    
02.05.2016 / 13:53