Add Multiple Text Box with Ajax Autocomplete

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <div class="form-group multiple-form-group input-group">
                        <div class="input-group-btn input-group-select">
                            <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
                                <span class="concept">Add Product</span>
                            </button>
                            <input type="hidden" class="input-group-select-val" name="contacts['type'][]" value="add product">
                        </div>
                        <div class="col-md-6">
                        <input type="text" name="product[]" id="q" class="form-control" onkeyup="lookup(this);" placeholder="Enter product name">
                        <div id="display"></div>
                        </div>
                     
                     <div class="col-md-6">
                       <input type="text" name="price[]" class="form-control" placeholder="Enter Price of product">
                       </div>

<span class="input-group-btn">
                            <button type="button" class="btn btn-success btn-add">+</button>
                        </span>
                    </div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="form-group multiple-form-group input-group">

<div class="input-group-btn input-group-select">

<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">

<span class="concept">Add Product</span>

</button>

<input type="hidden" class="input-group-select-val" name="contacts['type'][]" value="add product">

</div>

<div class="col-md-6">

<input type="text" name="product[]" id="q" class="form-control" onkeyup="lookup(this);" placeholder="Enter product name">

<div id="display"></div>

</div>

<div class="col-md-6">

<input type="text" name="price[]" class="form-control" placeholder="Enter Price of product">

</div>

<span class="input-group-btn">

<button type="button" class="btn btn-success btn-add">+</button>

</span>

</div>

Javascript and ajax

<script type="text/javascript"> (function ($) { $(function () { var i = 1; var addFormGroup = function (event) { event.preventDefault(); var $formGroup = $(this).closest('.form-group'); var $multipleFormGroup = $formGroup.closest('.multiple-form-group'); var $formGroupClone = $formGroup.clone(); $(this) .toggleClass('btn-success btn-add btn-danger btn-remove') .html('–'); i++; $formGroupClone.find('input').val(''); if(i>2){ var increament = i-1; $formGroupClone.find('#q'+increament).attr('id', 'q'+i); $formGroupClone.find('#display'+increament).attr('id', 'display'+i); }else{ $formGroupClone.find('#q').attr('id', 'q'+i); $formGroupClone.find('#display').attr('id', 'display'+i); } $formGroupClone.find('#display'+i).html(''); $formGroupClone.find('.concept').text('Add product'); $formGroupClone.insertAfter($formGroup); var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last'); if ($multipleFormGroup.data('max') <= countFormGroup($multipleFormGroup)) { $lastFormGroupLast.find('.btn-add').attr('disabled', true); } }; var removeFormGroup = function (event) { event.preventDefault(); var $formGroup = $(this).closest('.form-group'); var $multipleFormGroup = $formGroup.closest('.multiple-form-group'); var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last'); if ($multipleFormGroup.data('max') >= countFormGroup($multipleFormGroup)) { $lastFormGroupLast.find('.btn-add').attr('disabled', false); } $formGroup.remove(); }; var selectFormGroup = function (event) { event.preventDefault(); var $selectGroup = $(this).closest('.input-group-select'); var param = $(this).attr("href").replace("#",""); var concept = $(this).text(); $selectGroup.find('.concept').text(concept); $selectGroup.find('.input-group-select-val').val(param); } var countFormGroup = function ($form) { return $form.find('.form-group').length; }; $(document).on('click', '.btn-add', addFormGroup); $(document).on('click', '.btn-remove', removeFormGroup); $(document).on('click', '.dropdown-menu a', selectFormGroup); }); })(jQuery); function fill(Value,id) { $('#q'+id).val(Value); $('#display'+id).hide(); } function lookup(arg){ var id = arg.getAttribute('id'); var q = arg.value; var str = id; var mainid = str.replace("q", ""); if(q=="") { $("#display"+mainid).html(""); } else { $.ajax({ type: "POST", url: "autocomplete.php", data: "q="+ q +"&id="+mainid, success: function(html){ $("#display"+mainid).html(html).show(); } }); } } </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

<script type="text/javascript">

(function ($) {
    $(function () {
var i = 1;
        var addFormGroup = function (event) {
            event.preventDefault();

            var $formGroup = $(this).closest('.form-group');
            var $multipleFormGroup = $formGroup.closest('.multiple-form-group');
            var $formGroupClone = $formGroup.clone();

            $(this)
                .toggleClass('btn-success btn-add btn-danger btn-remove')
                .html('–');

i++;

            $formGroupClone.find('input').val('');

if(i>2){
var increament = i-1;
$formGroupClone.find('#q'+increament).attr('id', 'q'+i);
$formGroupClone.find('#display'+increament).attr('id', 'display'+i);
}else{
$formGroupClone.find('#q').attr('id', 'q'+i);
$formGroupClone.find('#display').attr('id', 'display'+i);
}
$formGroupClone.find('#display'+i).html('');
            $formGroupClone.find('.concept').text('Add product');
            $formGroupClone.insertAfter($formGroup);

            var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
            if ($multipleFormGroup.data('max') <= countFormGroup($multipleFormGroup)) {
                $lastFormGroupLast.find('.btn-add').attr('disabled', true);
            }
        };

        var removeFormGroup = function (event) {
            event.preventDefault();

            var $formGroup = $(this).closest('.form-group');
            var $multipleFormGroup = $formGroup.closest('.multiple-form-group');

            var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
            if ($multipleFormGroup.data('max') >= countFormGroup($multipleFormGroup)) {
                $lastFormGroupLast.find('.btn-add').attr('disabled', false);
            }

            $formGroup.remove();
        };

        var selectFormGroup = function (event) {
            event.preventDefault();

            var $selectGroup = $(this).closest('.input-group-select');
            var param = $(this).attr("href").replace("#","");
            var concept = $(this).text();

            $selectGroup.find('.concept').text(concept);
            $selectGroup.find('.input-group-select-val').val(param);

        }

        var countFormGroup = function ($form) {
            return $form.find('.form-group').length;
        };

        $(document).on('click', '.btn-add', addFormGroup);
        $(document).on('click', '.btn-remove', removeFormGroup);
        $(document).on('click', '.dropdown-menu a', selectFormGroup);

    });
})(jQuery);

function fill(Value,id)
{
$('#q'+id).val(Value);
$('#display'+id).hide();
}

function lookup(arg){

var id = arg.getAttribute('id');
var q = arg.value;
var str = id;
var mainid = str.replace("q", "");

if(q=="")
{
$("#display"+mainid).html("");
}
else
{
$.ajax({
type: "POST",
url: "autocomplete.php",
data: "q="+ q +"&id="+mainid,
success: function(html){
$("#display"+mainid).html(html).show();
}
});
}
}
</script>

Posted in Jquery, Php No comments May 8, 2017

Leave a reply Cancel reply

Tweet