Add Multiple Text Box with Ajax Autocomplete
HTML
|
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
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
<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> |
Leave a reply