OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Add additional field issue

  • Thread starter Thread starter homsAU
  • Start date Start date
H

homsAU

Guest
I'm working on this page where I have some custom JS/jQuery to add a search feature for a list. I need to be able to "add" a field if required. I had it working before implementing the search feature, but now it's become a lot more convoluted. I think I need to use a "closest" or an "each" somewhere in here here's a fiddle


Code:
$(function() {
  let count = 1;
  $("#addMore").click(function(e) {
    count++;
    var newChargeGroup = $("#chargeGroup1").clone().attr({
      id: "chargeGroup" + parseInt(count),
      name: "charge" + parseInt(count)
    });
    newChargeGroup.val("");
    $("#chargeGroups").append(newChargeGroup);
  });

  document.getElementById("addMore").addEventListener("click", function(event) {
    event.preventDefault()
  });

  $(document).ready(function() {
    $('#dropdownDisplay').on('click', function() {
      $('#dropdownContent').toggle();
    });

    $('#chargeSearch' + parseInt(count)).on('input', function() {
      let value = $(this).val().toLowerCase();
      $('#charge li').filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
      });
    });

    /* $('.charge').on('click', 'li', function (e) {
        //$(e.target).closest('span').text($(this).text());
        $('#dropdownDisplay > span').text($(this).text());
        $('#hiddenCharge').val($(this).text());
        $('#dropdownContent').hide();
      });*/
    $('.charge').on('click', 'li', function(e) {
      //$(e.target).closest('span').text($(this).text());
      $('#dropdownDisplay > span').text($(this).text());
      $('#hiddenCharge').val($(this).text());
      $('#dropdownContent').hide();
    });

    $(document).on('click', function(e) {
      if (!$(e.target).closest('.search-dropdown').length) {
        $('#dropdownContent').hide();
      } else {
        $("#chargeSearch1").focus();
      }

    });
  });

  // populate charges
  const chargeSelect = document.getElementById("charge");
  for (let state in myCharges) {
    let opt = document.createElement('li');
    opt.innerHTML = state;
    chargeSelect.appendChild(opt);
  }


});



const myCharges = {
  "this charge": "",
  "second charge": "",
  "third charge": "",
};

Code:
form .group {
  display: table;
  width: 100%;
}

form p.group label,
form div.group label {
  display: table-cell;
  width: 20%;
}

form p.group input,
form p.group select {
  /* display: table-cell; */
  width: 100%;
}

.terms-section {
  width: 100%;
  max-width: 400px;
  margin: 0 auto 1em;
}

#selectCharges>select {}

#addMore {
  margin: auto auto 1em;
  display: table-cell;
  text-align: center;
}

#termsCheck {
  cursor: pointer;
}

#scrollable {
  border: solid 1px;
  height: 100px;
  margin: 1em auto;
  padding: 10px;
  overflow-y: scroll;
}

.close {
  position: absolute;
  color: #fff;
  top: 0;
  right: 0;
  padding: 2px 10px;
  margin: 5px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50px;
  cursor: pointer;
}

#popup {
  display: none;
  font-size: 1em;
  position: absolute;
  top: 0;
  width: 80%;
  max-width: 400px;
  height: 20em;
  padding: 20px;
  margin: auto;
  border: 1px solid;
  background: #eee;
  overflow-y: scroll;
  z-index: 101;
}

#mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  display: none;
  z-index: 100;
}

.search-dropdown {
  margin-bottom: 1em;
}

.dropdown-display {
  /* width: 75%; */
  /* display: table-cell; */
  padding: 0 6px 1px;
  border: 1px solid #bbb;
  cursor: pointer;
}

.dropdown-content {
  display: none;
}

.dropdown-content .search-input {
  display: table-cell;
  width: 100%;
  margin: 1em 5% 0 0;
}

.dropdown-content ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: inline-block;
  padding-top: 1em;
  width: 100%;
}

.dropdown-content ul li {
  padding: 0 10px;
  cursor: pointer;
  border: 1px solid #bbb;
  /* display: table-header-group; */
}

.dropdown-content ul li:not(:first-child) {
  border-top: 0;
}

.dropdown-content ul li:hover {
  background-color: #f1f1f1;
}

Code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form action="https://bailbuddy.ticketdawg.com/" method="get" target="_parent" name="inmateInfo" id="inmateInfo">
  <div id="chargeGroups">
    <label>Charges: </label>
    <div class="search-dropdown group" id="chargeGroup1" name="charge1">
      <div class="dropdown-display" id="dropdownDisplay">
        <span>Select Charge</span>
        <input name="chargehide" type="hidden" id="hiddenCharge">
      </div>
      <div class="dropdown-content" id="dropdownContent">
        <input type="text" placeholder="Search..." id="chargeSearch1" class="search-input">
        <ul id="charge" name="charge">

        </ul>
      </div>
    </div>
  </div>

  <button id="addMore">Add Charge</button>

</form>

Edit: What I'm looking to do, is have the "Add Additional Charge" button replicate upon click. In it, the ID for the dropdown/input field will be consistent. Currently, after selecting a charge, that text will be placed in a hidden input field. I need to have multiple charge fields available to send data.
<p>I'm working on this page where I have some custom JS/jQuery to add a search feature for a list. I need to be able to "add" a field if required. I had it working before implementing the search feature, but now it's become a lot more convoluted. I think I need to use a "closest" or an "each" somewhere in here
here's a <a href="https://jsfiddle.net/homsAU/ank75c03/107/" rel="nofollow noreferrer">fiddle</a></p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
let count = 1;
$("#addMore").click(function(e) {
count++;
var newChargeGroup = $("#chargeGroup1").clone().attr({
id: "chargeGroup" + parseInt(count),
name: "charge" + parseInt(count)
});
newChargeGroup.val("");
$("#chargeGroups").append(newChargeGroup);
});

document.getElementById("addMore").addEventListener("click", function(event) {
event.preventDefault()
});

$(document).ready(function() {
$('#dropdownDisplay').on('click', function() {
$('#dropdownContent').toggle();
});

$('#chargeSearch' + parseInt(count)).on('input', function() {
let value = $(this).val().toLowerCase();
$('#charge li').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
});

/* $('.charge').on('click', 'li', function (e) {
//$(e.target).closest('span').text($(this).text());
$('#dropdownDisplay > span').text($(this).text());
$('#hiddenCharge').val($(this).text());
$('#dropdownContent').hide();
});*/
$('.charge').on('click', 'li', function(e) {
//$(e.target).closest('span').text($(this).text());
$('#dropdownDisplay > span').text($(this).text());
$('#hiddenCharge').val($(this).text());
$('#dropdownContent').hide();
});

$(document).on('click', function(e) {
if (!$(e.target).closest('.search-dropdown').length) {
$('#dropdownContent').hide();
} else {
$("#chargeSearch1").focus();
}

});
});

// populate charges
const chargeSelect = document.getElementById("charge");
for (let state in myCharges) {
let opt = document.createElement('li');
opt.innerHTML = state;
chargeSelect.appendChild(opt);
}


});



const myCharges = {
"this charge": "",
"second charge": "",
"third charge": "",
};</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>form .group {
display: table;
width: 100%;
}

form p.group label,
form div.group label {
display: table-cell;
width: 20%;
}

form p.group input,
form p.group select {
/* display: table-cell; */
width: 100%;
}

.terms-section {
width: 100%;
max-width: 400px;
margin: 0 auto 1em;
}

#selectCharges>select {}

#addMore {
margin: auto auto 1em;
display: table-cell;
text-align: center;
}

#termsCheck {
cursor: pointer;
}

#scrollable {
border: solid 1px;
height: 100px;
margin: 1em auto;
padding: 10px;
overflow-y: scroll;
}

.close {
position: absolute;
color: #fff;
top: 0;
right: 0;
padding: 2px 10px;
margin: 5px;
background: rgba(0, 0, 0, 0.5);
border-radius: 50px;
cursor: pointer;
}

#popup {
display: none;
font-size: 1em;
position: absolute;
top: 0;
width: 80%;
max-width: 400px;
height: 20em;
padding: 20px;
margin: auto;
border: 1px solid;
background: #eee;
overflow-y: scroll;
z-index: 101;
}

#mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
display: none;
z-index: 100;
}

.search-dropdown {
margin-bottom: 1em;
}

.dropdown-display {
/* width: 75%; */
/* display: table-cell; */
padding: 0 6px 1px;
border: 1px solid #bbb;
cursor: pointer;
}

.dropdown-content {
display: none;
}

.dropdown-content .search-input {
display: table-cell;
width: 100%;
margin: 1em 5% 0 0;
}

.dropdown-content ul {
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;
padding-top: 1em;
width: 100%;
}

.dropdown-content ul li {
padding: 0 10px;
cursor: pointer;
border: 1px solid #bbb;
/* display: table-header-group; */
}

.dropdown-content ul li:not(:first-child) {
border-top: 0;
}

.dropdown-content ul li:hover {
background-color: #f1f1f1;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form action="https://bailbuddy.ticketdawg.com/" method="get" target="_parent" name="inmateInfo" id="inmateInfo">
<div id="chargeGroups">
<label>Charges: </label>
<div class="search-dropdown group" id="chargeGroup1" name="charge1">
<div class="dropdown-display" id="dropdownDisplay">
<span>Select Charge</span>
<input name="chargehide" type="hidden" id="hiddenCharge">
</div>
<div class="dropdown-content" id="dropdownContent">
<input type="text" placeholder="Search..." id="chargeSearch1" class="search-input">
<ul id="charge" name="charge">

</ul>
</div>
</div>
</div>

<button id="addMore">Add Charge</button>

</form></code></pre>
</div>
</div>
</p>
<p>Edit:
What I'm looking to do, is have the "Add Additional Charge" button replicate upon click. In it, the ID for the dropdown/input field will be consistent. Currently, after selecting a charge, that text will be placed in a hidden input field. I need to have multiple charge fields available to send data.</p>
Continue reading...
 

Latest posts

Top