Field entered that goes down and a new field empty

Question

Field entered that goes down and a new field empty

Navigation

#1 by (1 votes)

1

Hello, I have the following code when pressing the "Add +" button, a new row is added to the table to continue entering data. My question is the following one there is some form where when pressing the button "To add +" the field that I add it lowered with the button to the side "To remove" and a new empty field next to the button "Add +".

<!DOCTYPE html>

<html lang="es-es">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
    <div class="card-body">
        <div class="table-responsive">

            <table class="table table-bordered" id="dynamic_field">
                <tr>
                    <td>
                        <input type="text" name="name[]" placeholder="Postulación" class="form-control name_list" />
                    </td>
                    <td>
                        <button type="button" name="add" id="add" class="btn btn-primary">Agregar + </button>
                    </td>

                </tr>
            </table>
            <input type="submit" name="submit" class="btn btn-outline-success btn-lg btn-block" value="Ingresar Postulaciones" />
        </div>
    </div>
    </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            var i = 1;
            $('#add').click(function() {
                i++;
                $('#dynamic_field').append('<tr id="row' + i + '"><td><input type="text" name="name[]" placeholder="Postulación" class="form-control name_list" /></td><td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">Quitar</button></td></tr>');
            });
            $(document).on('click', '.btn_remove', function() {
                var button_id = $(this).attr("id");
                $('#row' + button_id + '').remove();
            });
        });
    </script>
</body>

</html>

I hope to explain myself well. Any doubt I will be looking at the post. regards

jquery html css bootstrap

asked by MoteCL 06.09.2017 в 17:51

source

1 answer

Modify the DOM with ng-click Import CSV to SQL Server 2012 With descriptive fields with commas

score 1 · Accepted Answer

You just have to change the append by after, like this: It only has a small detail with the input you had at the beginning, because the td and tr have no id, so it does not move. The ideal is to create all from scratch and there works as you want.

 $(document).ready(function() {
            var i = 1;
            $('#add').click(function() {
                i++;
                $('#dynamic_field tr:first').after('<tr id="row' + i + '"><td><input type="text" name="name[]" placeholder="Postulación" class="form-control name_list" /></td><td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">Quitar</button></td></tr>');
            });
            $(document).on('click', '.btn_remove', function() {
                var button_id = $(this).attr("id");
                $('#row' + button_id + '').remove();
            });
        });

<!DOCTYPE html>

<html lang="es-es">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
    <div class="card-body">
        <div class="table-responsive">

            <table class="table table-bordered" id="dynamic_field">
                <tr id="row">
                    <td>
                        <input  type="hidden" name="name[]" placeholder="Postulación" class="form-control name_list" />
                    </td>
                    <td>
                        <button type="button" name="add" id="add" class="btn btn-primary">Agregar + </button>
                    </td>

                </tr>
            </table>
            <input type="submit" name="submit" class="btn btn-outline-success btn-lg btn-block" value="Ingresar Postulaciones" />
        </div>
    </div>
    </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</body>

</html>