We Keep Coding

Duplicate a list with linked input fields

I'm a pretty noob in javascript. I'm trying to duplicate a list which has input field for each option. So far it's working, though, the duplicated list don't show the associated input fields. Also I would want to make a sum of every field that has a data.
$(document).ready(function() {
$("#btn-copy").click(function() {
var target = $(this).closest(".revenus");
target.clone(true, true).appendTo(target.parent());
});
});
$(document).ready(function() {
toggleFields();
$("#revenu-type").change(function() {
toggleFields();
toggleFields2();
});
});
function toggleFields() {
if ($("#revenu-type").val() === "option-1")
$("#option-a").show();
else
$("#option-a").hide();
if ($("#revenu-type").val() === "option-2")
$("#option-b").show();
else
$("#option-b").hide();
if ($("#revenu-type").val() === "option-3")
$("#option-c").show();
else
$("#option-c").hide();
if ($("#revenu-type").val() === "option-4")
$("#option-d").show();
else
$("#option-d").hide();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="revenus">
<p>Choose type</p>
<p>revenue:
<select id="revenu-type" name="dbType">
<option>Ajouter un autre revenu</option>
<option value="option-1">Revenu 1</option>
<option value="option-2">Revenu 2</option>
<option value="option-3">Revenu 3</option>
<option value="option-4">Revenu 4</option>
</select>
</p>
<div id="option-a" style="display: flex;">
<p>Option 1 - a
<input type="text" name="num-child" />
</p>
<p>Option 1 - b
<input type="text" name="price-1" />
</p>
</div>
<div id="option-b">
<p>Option 2
<input type="text" name="price-2" />
</p>
</div>
<div id="option-c">
<p>Option 3
<input type="text" name="price-3" />
</p>
</div>
<div id="option-d">
<p>Option 4
<input type="text" name="price-4" />
</p>
</div>
<p align="left">
<input type="button" value="add" id="btn-copy" />
</p>
</div>

This issue is in your toggleFields - when you use
$("#option-a")...
it will only find the first one as IDs must be unique.
So the first thing to do is change all the id= to class= (and change corresponding selectors).
You need to find the one that's related to the current revenu-type inside the current .revenus. You can do that by passing this to toggleFields - with a slight change from this to $(this).closest(".revenus") to pass in the outer wrapper.
From there, you can use:
wrapper.find(".option-a")...
to get the item within the wrapper.
The btn-copy click events gets cloned, so while this should use a class and event delegation $("document").on("click", ".btn-copy" ... it will still work with the clone including events.
Without changing too much of your existing code (eg using .toggle(bool) instead of if (bool) ..show else ..hide), this gives:
$(document).ready(function() {
$("#btn-copy").click(function() {
var target = $(this).closest(".revenus");
target.clone(true, true).appendTo(target.parent());
});
});
$(document).ready(function() {
toggleFields($(".revenus").first());
$(".revenu-type").change(function() {
toggleFields($(this).closest(".revenus"));
//toggleFields2();
});
});
function toggleFields(wrapper) {
if (wrapper.find(".revenu-type").val() === "option-1")
wrapper.find(".option-a").show();
else
wrapper.find(".option-a").hide();
if (wrapper.find(".revenu-type").val() === "option-2")
wrapper.find(".option-b").show();
else
wrapper.find(".option-b").hide();
if (wrapper.find(".revenu-type").val() === "option-3")
wrapper.find(".option-c").show();
else
wrapper.find(".option-c").hide();
if (wrapper.find(".revenu-type").val() === "option-4")
wrapper.find(".option-d").show();
else
wrapper.find(".option-d").hide();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="revenus">
<p>Choose type</p>
<p>revenue:
<select class="revenu-type" name="dbType">
<option>Ajouter un autre revenu</option>
<option value="option-1">Revenu 1</option>
<option value="option-2">Revenu 2</option>
<option value="option-3">Revenu 3</option>
<option value="option-4">Revenu 4</option>
</select>
</p>
<div class="option-a" style="display: flex;">
<p>
Option 1 - a
<input type="text" name="num-child" />
</p>
<p>
Option 1 - b
<input type="text" name="price-1" />
</p>
</div>
<div class="option-b">
<p>
Option 2
<input type="text" name="price-2" />
</p>
</div>
<div class="option-c">
<p>
Option 3
<input type="text" name="price-3" />
</p>
</div>
<div class="option-d">
<p>
Option 4
<input type="text" name="price-4" />
</p>
</div>
<p align="left">
<input type="button" value="add" id="btn-copy" />
</p>
</div>

Activate textbox on change of an item in Drop down in HTML

I am trying to do the following:
I have drop down menu with four options in it. When I choose Shipped a text box should enabled. So I tried the following:
<div class="col-md-3">
<select class="form-control" id="ostatus" name= "ostatus">
<option value="Uploaded" <?php if ($dispatch_status == "Uploaded") echo "selected='selected'";?> >Uploaded</option>
<option value="Processing" <?php if ($dispatch_status == "Processing") echo "selected='selected'";?> >Processing</option>
<option value="Dispatched" <?php if ($dispatch_status == "Dispatched") echo "selected='selected'";?> >Dispatched</option>
<option value="Shipped" <?php if ($dispatch_status == "Shipped") echo "selected='selected'";?> >Shipped</option>
</select>
</div>
</div>
<input type="text" class="form-control" name="shipping_notes" disabled="true" id="shipping_notes" aria-describedby="" placeholder="Enter Shipping details">
Java script:
<head>
<script type="text/javascript">
document.getElementById('ostatus').addEventListener('change', function()
{
console.log(this.value);
if (this.value == 'Shipped') {
document.getElementById('shipping_notes').disabled = false;
} else {
document.getElementById('shipping_notes').disabled = true;
}
});
</script>
</head>
Doesn't seem to trigger? I don't see log on console too. What could be wrong here?
Update:
I have pasted the html code here:
https://justpaste.it/6zxwu

Update
Since you've now shared your other code I think I know what you want. You have multiple modals, each with a select list and shipping_notes textbox which should be enabled when the selection is Shipped for that particular modal. I've modified your HTML to get this working.
I've updated your HTML a bit. You have multiple elements with the same ID. HTML IDs should be unique. If you want to target multiple elements it's safer to use class (or data-) attributes. I've added class="order-status" to each select and class="shipping_notes_txt" to each textbox. I've used element.querySelector() and document.querySelectorAll() to select DOM elements.
The snippet below mimics two modals. When the select is updated, it only enables/disabled the textbox within the same form element.
// wait for the DOM to load
document.addEventListener('DOMContentLoaded', function() {
// get all select elements with class=order-status
var selects = document.querySelectorAll('.order-status');
// iterate over all select elements
for (var i = 0; i < selects.length; i++) {
// current element
var element = selects[i];
// add event listener to element
element.addEventListener('change', function()
{
console.log(this.value);
// get the form closest to this element
var form = this.closest('form');
// find the shipping notes textbox inside form and disable/enable
if (this.value == 'Shipped') {
form.querySelector('.shipping_notes_txt').disabled = false;
} else {
form.querySelector('.shipping_notes_txt').disabled = true;
}
});
// default value if status == Shipped: enable textbox
if (element.value == "Shipped")
{
var form = element.closest('form');
form.querySelector('.shipping_notes_txt').disabled = false;
}
}
});
.modal1 {
display:inline-block;
vertical-align:top;
padding: .5em;
padding-bottom:5em;
border: 1px solid black;
}
<div class="modal1">
<h3>First Modal</h3>
<div id="edit1" class="modal fade" role="dialog">
<form action="order.php" autocomplete="off" method="post">
<div class="col-md-2 ml-3 pt-1">
<label for="role" class="mr-3">Status</label>
</div>
<select class="form-control order-status" id="ostatus1" name= "ostatus">
<option value="Uploaded" selected='selected' >Uploaded</option>
<option value="Processing">Processing</option>
<option value="Dispatched">Dispatched</option>
<option value="Shipped">Shipped</option>
</select>
<input type="text" class="form-control shipping_notes_txt" name="shipping_notes" disabled="true" id="shipping_notes1" aria-describedby="emailHelp" placeholder="Enter Shipping details">
</form>
</div>
</div>
<div class="modal1">
<h3>Second Modal</h3>
<div id="edit20" class="modal fade" role="dialog" >
<form action="order.php" autocomplete="off" method="post">
<div class="col-md-2 ml-3 pt-1">
<label for="role" class="mr-3">Status</label>
</div>
<select class="form-control order-status" id="ostatus20" name= "ostatus">
<option value="Uploaded" >Uploaded</option>
<option value="Processing">Processing</option>
<option value="Dispatched">Dispatched</option>
<option value="Shipped" selected='selected' >Shipped</option>
</select>
<input type="text" class="form-control shipping_notes_txt" name="shipping_notes" disabled="true" id="shipping_notes20" aria-describedby="emailHelp" placeholder="Enter Shipping details">
</form>
</div>
</div>

Add onchange to your <select>
<select class="form-control" id="ostatus" name= "ostatus" onchange = "statuschange()">
And change the JavaScript to :
<script type="text/javascript">
function statuschange(){
var drpDownValue = document.getElementById('ostatus').value;
if (drpDownValue == 'Shipped')
{
document.getElementById('shipping_notes').disabled = false;
}
else
{
document.getElementById('shipping_notes').disabled = true;
}
}
</script>

assuming everything on the server side this works HTML comes first
<div class="col-md-3"> <select class="form-control" id="ostatus" name= "ostatus">
<option value="Uploaded" selected="selected" >Uploaded</option>
<option value="Processing" >Processing</option>
<option value="Dispatched" >Dispatched</option>
<option value="Shipped" >Shipped</option>
</select>
</div>
</div>
<input type="text" class="form-control" name="shipping_notes" disabled="true" id="shipping_notes" aria-describedby="" placeholder="Enter Shipping details">
document.getElementById('ostatus').addEventListener('change', function()
{
console.log(this.value);
if (this.value == 'Shipped') {
document.getElementById('shipping_notes').disabled = false;
} else {
document.getElementById('shipping_notes').disabled = true;
}
});

Showing Div Not Working On Select Using Javascript

I am trying to show the FILE DIV if the user selects the doctor value in the select statement. I know the if statement works because I also print the value in the console which works perfectly fine. I toggle my divs in the same exact manner in my other webpages so I'm not understanding what's going on with this one in particular.
function viewFile(){
var file = document.getElementById("doclicense");
var type = document.getElementById('accountType').value;
if(type === 'doctor') {
file.style.display = "block";
console.log(type);
}
}
.hidden{
display : none;
}
<div>
<select id="accountType" name="type" class="form-control" onchange="viewFile()">
<option required>Account Type</option>
<option value="doctor" name="doctor" id="doctor">Doctor</option>
<option value="regular" name="regular" id="reg">Regular Account</option>
</select>
</div>
<div class="hidden file" id="doclicense">
<input type="file" name="license" />
<input type="submit"/>
</div>
****************************************EDIT-WORKAROUND**********************
Since my code refused to work, I added a line of code with 'head' being the title and not a real value. Thanks to everyone who contributed. I took out the hidden class altogether but when I add it, it still doesn't work correctly.
function viewDocFile() {
var file = document.getElementById("doclicense");
var type = document.getElementById('accountType').value;
if (type === 'regular' || type === 'head') {
file.style.display = "none";
console.log(type);
} else {
file.style.display = "block";
console.log(type);
}
}
***************************FINAL-EDIT************************
Kept the original code, but added the CSS inline.
<div class="form-group col-md-6" id="doclicense" style="display:none;">
Works perfectly now.

Here is an example of how this code should be written (even if there are still horrors)
// declare them here and not in a function where they will be redone each time the function is called
const
file_IHM = document.querySelector('#doclicense')
,
type_IHM = document.querySelector('#accountType') // and not with .value ...!
;
type_IHM.onchange = function()
{
file_IHM.style.display = (this.value==='doctor')?"block":"none";
console.log('type_IHM.value', this.value );
}
#doclicense { display : none; }
<div>
<select id="accountType" name="type" class="form-control" > <!-- let the js in the js part -->
<option required>Account Type</option>
<option value="doctor" id="doctor" >Doctor</option>
<option value="regular" id="regular" >Regular Account</option>
</select>
</div>
<div class="file-class" id="doclicense"> <!-- do not use class="hidden... -->
<input type="file" name="license" />
<input type="submit" /> <!-- there is no form anywhere... why don't you use <button> ?? -->
</div>

If that what your code really looks like, did you add your js in a <script></script> tag?
Or do you want to toggle the hide and show of the div?
if so this answer may help
<select id="accountType" name="type" class="form-control" onchange="viewFile()"><option required>Account Type</option>
<option value="doctor" name="doctor" id="doctor">Doctor</option>
<option value="regular" name="regular" id="reg">Regular Account</option>
</select>
</div>
<div class="hidden file" id="doclicense">
<input type="file" name="license" />
<input type="submit"/>
</div>
<script>
function viewFile(){
var file = document.getElementById("doclicense");
var type = document.getElementById('accountType').value;
if(type === 'doctor') {
file.style.display = "block";
console.log(type);
}else{
file.style.display = "none";
console.log(type);
}
}
</script>

bug in JQuery required dropdown fields

I made a JQuery function to check for empty required fields inside a closed custom dropdown.
If a required field is empty inside one of the dropdown and if the dropdown is currently closed I want the dropdown to open and if there are no empty values in the required fields I want the dropdown to close.
The problem is that the required fields aren't accessible if the dropdowns are closed and I tried to fix that problem with this function.
For some reason, it only checks for these input fields if the form is submitted at least once and the required fields are opened at least once.
find(':input[required]') doesn't give any output if the dropdown isn't opened at least once, once u open and close the dropdown the function works.
This is the function:
function dropdown_required() {
var required = 0;
$('#visible_fields').find(':input[required]').each(function () {
if (!this.value) {
for (var i = 1; i < 15; i++) {
$('.form_' + i).find(':input[required]').each(function () {
$(this).prop('required', false);
});
}
required++;
}
});
if (required == 0) {
for (var i = 1; i < 15; i++) {
var empty = 0;
$('.form_' + i).find(':input[required]').each(function ()
{
if(!this.value) {
empty++;
}
});
if (empty !== 0) {
if ($(".arrow_" + i).hasClass("rotate_2")) {
$(".arrow_" + i).addClass("rotate_1").removeClass("rotate_2");
$(".form_" + i).fadeToggle();
}
} else if ($(".arrow_" + i).hasClass("rotate_1")) {
$(".arrow_" + i).addClass("rotate_2").removeClass("rotate_1");
$(".form_" + i).fadeToggle();
}
}
}
}
This is the dropdown:
<div id="visible_fields">
//all visible input fields outside of the dropdowns
</div>
<label class="toggle_1">Controles<span class="arrow_1 glyphicon glyphicon-menu-left"
aria-hidden="true"></span></label>
<div class="form_1">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label for="bkr">BKR</label>
<select name="bkr" class="form-control" required>
<option selected hidden></option>
<option value="10">BKR toetsing open</option>
<option value="11">BKR toetsing accoord</option>
<option value="12">Vrijgesteld van BKR toetsing</option>
</select>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="bkr_bestand">BKR bestand</label>
<input type="file" name="bkr_bestand" id="bkr_bestand"
data-default-file=""
class="form-control dropify">
<input type="hidden" name="verwijder_foto" class="verwijder_foto" value="0">
</div>
</div>
</div>
</div>
<div class="form-group">
<input type="hidden" id="input_iframe" name="input_iframe" value="">
<button type="submit" onclick="dropdown_required()"
class="btn btn-primary">Toevoegen </button>
</div>
</form>
</div>
</body>
</html>

How to add text field to multi list - jQuery?

I am trying to take user inputed values and add them to a list. I need to check my list to see if it exists first. I am failing at step one, how do I add the value to the list?
This is my code:
HTML:
<form action="">
<div class="device_item">
<label for="dev_name">Device Name</label>
<input id="dev_name" type="text">
</div>
<div class="device_item">
<label for="dev_name">Device Type</label>
<input id="dev_type" type="text">
</div>
<div class="device_item">
<label for="dev_os">Device OS</label>
<input id="dev_os" type="text">
</div>
<div class="device_item">
<div class="device_info">
<div class="device_info_header">
<label>Device Information Header</label>
<div>
<select multiple="multiple" id="lstBox1" name="device_info_header">
<option value="net_info">Network Info</option>
<option value="os_info">OS Info</option>
<option value="drive_info">Drive Info</option>
<option value="time_dif">Time Difference Info</option>
</select>
</div>
<div id="arrows">
<input type='button' class="delete" value=' < ' />
<input type='button' class='add' value=' > ' />
</div>
<div>
<select multiple="multiple" id="lstBox2" name="device_info_header"></select>
</div>
<input type="text" name="other_info" id="dev_info_other_text" style="display:none;">
<div class="clear_both" />
<div class="other_ops">Other:
<input id="other_field" type="text" />
<input type="button" class="add2" value=' > ' />
</div>
<br>
<br>NEXT BUTTON (creates headers or dictionary keys) TAKES YOU TO:
<br>
<br>TITLE (eg. Net Info, or OS Info)
<br>Key:
<input type="text">
<br>Value:
<input type="text">
<br>Add more button
<br>
<br>next button (loop through the headers/keys).
<br>
<br>finally, a submit button</div>
</div>
</div>
</form>
JS
$(document).ready(function () {
$('.add').click(function (e) {
var selectedOpts = $('#lstBox1 option:selected');
if (selectedOpts.length == 0) {
alert("Nothing to move.");
e.preventDefault();
}
$('#lstBox2').append($(selectedOpts).clone());
e.preventDefault();
});
$('.delete').click(function (e) {
var selectedOpts = $('#lstBox2 option:selected');
if (selectedOpts.length == 0) {
alert("Nothing to move.");
e.preventDefault();
}
$(selectedOpts).remove();
e.preventDefault();
});
$('.add2').click(function (e) {
var other_field_str = $('#other_field').val();
alert(other_field_str);
$('#lstBox2').append(other_field_str);
e.preventDefault();
});
});
I also have the code on this fiddle: http://jsfiddle.net/jdell64/8qsda/1/
UPDATED FIDDLE WITH FULL SOLUTION: http://jsfiddle.net/jdell64/8qsda/

You need to create an <option> element containing the Other input.
$('.add2').click(function (e) {
var other_field_str = $('#other_field').val();
alert(other_field_str);
var other_field = $('<option>', {
value: other_field_str,
text: other_field_str
});
$('#lstBox2').append(other_field);
e.preventDefault();
});
FIDDLE