CODEWITHSUNDEEP
javascriptjqueryhtmlcssbootstrap-4
The Dead Man
The Dead Man

Reputation: 5566

Adding input dynamically using jquery the right way

I have a simple form in which I want a user to be able to add inputs dynamically,

Here is what I have tried so far.

HTML form looks like this

enter image description here

HTML code for the above form

<form>
    <dvi class="container h-100">
        <div class="d-flex justify-content-center">
            <div class="card mt-5 col-md-12 animated bounceInDown myForm">
                <div class="card-header">
                    <h4>Bidders Information</h4>
                </div>
                <div class="card-body">
                    <form>
                        <div id="dynamic_container">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text br-15"><i class="fa fa-tags"></i></span>
                                </div>
                                <input type="text" placeholder="Bidders Name" class="form-control" />
                            </div>
                            <div class="input-group mt-3" id="field">
                                <div class="input-group-prepend">
                                    <span class="input-group-text br-15"><i class="fa fa-tags"></i></span>
                                </div>
                                <input type="text" placeholder="atribute name" id="field1" class="form-control" />
                                <input type="text" placeholder="atribute value" id="field2" class="form-control" />
                                <a class="btn btn-secondary btn-sm" id="add_more_input">
                                    <i class="fa fa-minus-circle"></i> Add
                                </a>
                            </div>

                        </div>
                    </form>
                </div>
                <div class="card-footer">
                    <a class="btn btn-secondary btn-sm" id="add_more"><i class="fa fa-plus-circle"></i> Add</a>
                    <a class="btn btn-secondary btn-sm" id="remove_more"><i class="fa fa-trash-alt"></i> Remove</a>
                    <button class="btn btn-success btn-sm float-right submit_btn"><i class="fas fa-arrow-alt-circle-right"></i> Submit</button>
                </div>
            </div>
        </div>
    </dvi>
    </div>
    <div class="card-footer ml-auto mr-auto">
        <button type="submit" class="btn btn-primary">{{ __('Add Page') }}</button>
    </div>
    </div>
</form>

Here is jquery code for adding input dynamically

var next = 1;
$("#add_more_input").click(function(e) {
    e.preventDefault();
    var addto = "#field" + next;
    var addRemove = "#field" + (next);
    next = next + 1;
    var newIn = '<div class="input-group mt-3" id="field"><div class="input-group-prepend"><span class="input-group-text br-15"><i class="fa fa-tags"></i></span></div><input type="text" placeholder="atribute name" class="form-control" id="field' + next + '" name="field' + next + '"/>  <input type="text" placeholder="atribute value" class="form-control" id="field' + next + '" name="field' + next + '"/></div> ';

    var newInput = $(newIn);
    var removeBtn = '<a id="remove' + (next - 1) + '" class="btn btn-secondary btn-sm remove-me add_more_input"><i class="fa fa-minus-circle"></i> Add</a></div><div id="field';
    var removeButton = $(removeBtn);
    $(addto).after(newInput);

    $(addRemove).after(removeButton);
    $("#field" + next).attr('data-source', $(addto).attr('data-source'));
    $("#count").val(next);

    $('.remove-me').click(function(e) {
        e.preventDefault();
        var fieldNum = this.id.charAt(this.id.length - 1);
        var fieldID = "#field" + fieldNum;
        $(this).remove();
        $(fieldID).remove();
    });
});

Now when a user clicks button add input row I am getting the following

enter image description here

but the expected result should look like this

enter image description here

HERE is jsfiddle DEMO

What am I doing wrong???

Upvotes: 0

Views: 117

Answers (2)

kumaran
kumaran

Reputation: 366

please check it may help you.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .myForm {
            background-color: rgb(156, 39, 176) !important;
            padding: 15px !important;
            border-radius: 15px !important;
            color: white;

        }

        input {
            border-radius: 0 15px 15px 0 !important;

        }

        input:focus {
            outline: none;
            box-shadow: none !important;
            border: 1px solid #ccc !important;

        }

        .br-15 {
            border-radius: 15px 0 0 15px !important;
        }

        #add_more {
            color: white !important;
            background-color: #fa8231 !important;
            border-radius: 15px !important;
            border: 0 !important;

        }

        #add_more_input {
            color: white !important;
            background-color: #fa8231 !important;
            border-radius: 15px !important;
            border: 0 !important;

        }

        .add_more_input {
            color: white !important;
            background-color: #fa8231 !important;
            border-radius: 15px !important;
            border: 0 !important;
        }

        #remove_more {
            color: white !important;
            background-color: #fc5c65 !important;
            border-radius: 15px !important;
            border: 0 !important;
            display: none;

        }

        .submit_btn {
            border-radius: 15px !important;
            background-color: #95c714 !important;
            border: 0 !important;
        }
    </style>
</head>

<body>


    <link rel="stylesheet" type="text/css"
        href="https://github.com/throne1986/roayalad-blog/blob/master/public/material/css/material-dashboard.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

    <form>
        <dvi class="container h-100">
            <div class="d-flex justify-content-center">
                <div class="card mt-5 col-md-12 animated bounceInDown myForm">
                    <div class="card-header">
                        <h4>Bidders Information</h4>
                    </div>
                    <div class="card-body">
                        <form>
                            <div id="dynamic_container">
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text br-15"><i class="fa fa-tags"></i></span>
                                    </div>
                                    <input type="text" placeholder="Bidders Name" class="form-control" />
                                </div>
                                <div class="input-group mt-3" id="field">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text br-15"><i class="fa fa-tags"></i></span>
                                    </div>
                                    <input type="text" placeholder="atribute name" id="field1" class="form-control" />
                                    <input type="text" placeholder="atribute value" id="field2" class="form-control" />
                                    <a class="btn btn-secondary btn-sm" id="add_more_input">
                                        <i class="fa fa-minus-circle"></i> Add
                                    </a>
                                </div>

                            </div>
                        </form>
</body>
<script>


   var iteration = 1;
    document.getElementById('add_more_input').addEventListener('click', function () {
        var content = `<div class="input-group mt-3" id="field${iteration}">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text br-15"><i class="fa fa-tags"></i></span>
                                    </div>
                                    <input type="text" placeholder="atribute name" id="field${iteration}" class="form-control" />
                                    <input type="text" placeholder="atribute value" value="${iteration} "id="field2" class="form-control" />
                                    <a class="btn btn-secondary btn-sm" onclick="remove(event)">
                                        <i class="fa fa-minus-circle"></i> remove
                                    </a>
                  </div>
     `;
        var parsedContent = new DOMParser().parseFromString(content, 'text/html').body.firstChild;
        document.getElementById('dynamic_container').appendChild(parsedContent);
        iteration++;
    })

 function remove(e){
    e = e || window.event;
    document.getElementById('dynamic_container').removeChild(e.target.closest('.input-group'))
    console.log(e.target.closest('.input-group'))
 }


</script>

</html>

Upvotes: 2

Aref Makke
Aref Makke

Reputation: 51

You can use the clone function in jquery and change the cloned div id and then you can add the new div wherever you want example :

$('#cloneDiv').click(function(){

  var $div = $('div[id^="DIV_ID_to_clone"]:last');

  // Read the Number from that DIV's ID if you could add a number to your div id (i.e: 3 from "field_1")
  // And increment that number by 1
  var num = parseInt( $div.prop("id").match(/\d+/g), 10 ) +1;

  // Clone it and assign the new ID (i.e: from num 4 to ID "field_2")
  var $cloned= $div.clone().prop('id', 'field_'+num );

  // Finally insert $cloned wherever you want
  $div.after( $cloned.text('field_'+num) );

});

Upvotes: 0

Related Questions