Develop Reference

Error duplicating Div with Select2 library

I am trying to clone a div, which contains some input, and one of those is the Select2 library, when cloning it clones me but the library does not work.
attached bug: "Uncaught TypeError: Cannot set properties of null (setting 'outerHTML')".
This is my html code.
<div class="cloned" style="width: 100%;">
<div class="col-md-12 col-sm-12">
<div class="form-group">
<input class="form-control" id="txtinput0" name="username" placeholder="Enter Full Name" type="text" data-parsley-pattern="^[a-zA-Z\s.]+$" />
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="form-group">
<input class="form-control" id="txtinput0" name="email" placeholder="Enter VALID EMAIL and check the result" type="email" />
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="form-group">
<input class="form-control" id="txtinput0" name="phone" placeholder="Enter Phone e.g.: +363012345" type="text" data-parsley-pattern="^\+{1}[0-9]+$"/>
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="form-group">
<select class="chosen-select" multiple="multiple" style="width: 100%;" id="select0" data-placeholder="Select a company" >
<div clas="options">
<option value="1">Google</option>
<option value="1">Amazon</option>
<option value="1">Facebook</option>
<option value="1">Airbnb</option>
</div>
</select>
</div>
</div>
</div>
</div>
<div clas="row box" id="clone"></div>
And this is the javascript with which I try to clone the whole div, including the select2
$(document).ready(function() {
$('#select0').select2();
});
var i=1;
var prev =0;
function addRow() {
var clone = $("#row_examenes").clone()
clone.find("#txtinput"+prev).attr("id", "txtinput"+i);
clone.find("#select"+prev).attr("id", "select"+i);
clone.find("#select"+prev+"_chosen").attr("id", "select"+i+"_chosen1");
clone.appendTo($("#clone"));
document.getElementById("select"+i+"_chosen1").outerHTML=""
$myid = $('#select' + i);
$myid.show().select2();
i++;
prev++;
}

There are quite a few problems in the code, but the big issue is:
When you initialise a Select2, it hides the original <select> and adds some extra HTML on the page. If you then clone the block of HTML where that Select2 is, you clone all that extra Select2 stuff. And if you then try an initialise that cloned stuff as a Select2, it won't work.
The fix is described in many duplicate questions here on SO already (try searching for "select2 clone"), here's an example: you need to destroy the original Select2 before cloning it, and then re-initialise it as a Select2 again once it is cloned;
Some of the other issues in the code are:
There is no element with id row_examenes. I added it as a <div> enclosing the <div class="cloned">;
Once you clone that div, the clone will have the same ID (row_examenes), and the code does not change that ... duplicate IDs are invalid HTML. Instead we can clone the <div> nested inside, with class cloned;
All 3x text <input>s have the same ID, txtinput0 - this is invalid, and jQuery will only be able to find the first one. I changed them to name0, email0, and phone0;
The HTML has an unbalanced </div>, the opening <div> I added fixes that too;
After the clone is created, and before the IDs are updated, it includes elements with non-unique IDs. It isn't actually in the DOM yet, and you are using clone.find() to scope your search to find them, so probably that's OK ...? But it seems unnecessarily risky, when we don't have to do it that way - why not play it safe, and search for the inputs instead of the IDs;
<div clas="row box" id="clone"></div> - typo in class;
There was no way to trigger addRow() so I added a simple button, and a click handler for it;
Here's a working, simplified snippet with those issues fixed:
$(document).ready(function () {
$('#select0').select2();
$('button').on('click', addRow);
});
// How many clones on the page?
let clones = 0;
function addRow() {
// We've added a clone
clones++;
// First need to destroy original select2, so the clone does not include
// extra stuff select2 generates.
$('#select0').select2('destroy');
// Now create our clone
let clone = $("#row_examenes .cloned").clone()
clone.find('input[name="username"]').attr("id", "name" + clones);
clone.find('input[name="email"]').attr("id", "email" + clones);
clone.find('input[name="phone"]').attr("id", "phone" + clones);
clone.find("select").attr("id", "select" + clones);
// HTML is updated, add it to the DOM
clone.appendTo($("#clone"));
// Reinitialise the original select2
$('#select0').select2();
// And initialise our new select2
$('#select' + clones).select2();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<button>Create a clone</button>
<div id="row_examenes">
<div class="cloned">
<div class="col-md-12 col-sm-12">
<div class="form-group">
<input class="form-control" id="name0" name="username" placeholder="Enter Full Name" type="text" />
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="form-group">
<input class="form-control" id="email0" name="email" placeholder="Enter VALID EMAIL and check the result" type="email" />
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="form-group">
<input class="form-control" id="phone0" name="phone" placeholder="Enter Phone e.g.: +363012345" type="text" />
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="form-group">
<select class="chosen-select" multiple="multiple" id="select0" >
<div clas="options">
<option value="1">Google</option>
<option value="1">Amazon</option>
<option value="1">Facebook</option>
<option value="1">Airbnb</option>
</div>
</select>
</div>
</div>
</div>
</div>
<div class="row box" id="clone"></div>

how to get multiple option from select without pressing control key?

I have 2 'select' in my html code and from first select, i want to choose only one option and from second select i want to choose multiple options. I have written code in jquery to get multiple options from select.
JQuery
$('option').mousedown(function(e) {
e.preventDefault();
$(this).prop('selected', !$(this).prop('selected'));
return false;
});
and this code is working perfect, but the problem is my second select is working fine but in my first select i am not able to choose any option and i just want to get only one option from first select.
HTML
<div class="form-group">
<div class="col-sm-3">
<label style="width: 100%;" class="control-label"
th:text="#{CLONE.MASTERID}"></label>
</div>
<div class="col-sm-9">
<select class="form-control" id="cloneMasterIds">
<option value="">Select Master Device Id</option>
<option th:each="master : ${masterIds}" th:value="${master.value}"
th:utext="${master.value}">Wireframe</option>
</select>
<p class="field-error hidden-true"
id="SerialNumber-Error" th:text="#{ERROR.CLONE.MASTERID}"></p>
</div>
</div>
<!-- Child IDs -->
<div class="form-group">
<div class="col-sm-3">
<label style="width: 100%;" class="control-label"
th:text="#{CLONE.CHILDID}"></label>
</div>
<div class="col-sm-9">
<select class="form-control select-checkbox" id="cloneChildIds"
multiple="multiple">
<option th:each="child : ${childIds}" th:value="${child.value}"
th:utext="${child.value}">Wireframe</option>
</select>
<p class="field-error hidden-true"
id="SerialNumber-Error" th:text="#{ERROR.CLONE.CHILDID}"></p>
</div>
</div>

Select the second select statement by id. Handle the mousedown and mousemove events:
$("#cloneChildIds").mousedown(function(e){
e.preventDefault();
var select = this;
var scroll = select.scrollTop;
e.target.selected = !e.target.selected;
setTimeout(() => select.scrollTop = scroll, 0);
$(select).focus();
}).mousemove(e => e.preventDefault());

Javascript Hide-Unhide HTML Text Box

I want to hide & un-hide html text box when selecting another select value using JavaScript.
$(document).on('change', '#pf_status', function() {
var val = $(this).val();
console.log(val);
if (val == 2) {
$('#ref-col').hide();
} else {
$('#ref-col').show();
}
});
$(document).ready(function() {
$('#ref-col').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="form-group">
<label>
Pass Fail Status <span class="text-danger">*</span>
</label>
<select class="form-control" name="pf_status">
<option value="1">Pass</option>
<option value="2">Fail</option>
</select>
</div>
</div>
<div class="col-md-3" id="ref_col">
<div class="form-group">
<label>Pass Date</label>
<font style="font-size: 14px; color: #AA0000"></font>
<input type="text" name="pass_date" id="pass_date" class="form-control" value="somedate">
</div>
</div>
I did not get the desired output. I think something going wrong. Can any one help me ?

Spelling the selector the same as the ID
ID not name is used in the script
No need to delegate if not dynamic
Dropdown does not have a "please select" so trigger the change on load of the page
$(function() {
$('#pf_status').on('change',function() {
var val = $(this).val();
$('#ref_col').toggle(val != 2);
}).trigger("change"); // trigger to handle the lack of "Please select"
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="form-group">
<label>
Pass Fail Status <span class="text-danger">*</span>
</label>
<select class="form-control" id="pf_status">
<option value="1">Pass</option>
<option value="2">Fail</option>
</select>
</div>
</div>
<div class="col-md-3" id="ref_col">
<div class="form-group">
<label>Pass Date</label>
<font style="font-size: 14px; color: #AA0000"></font>
<input type="text" name="pass_date" id="pass_date" class="form-control" value="somedate">
</div>
</div>

This is an issue with your selector you are selecting the drop-down with a name using a # sign:
and there's also a problem with your selector #ref-col in your JS it should be like this #ref_col
change your name to id="pf_status" in your HTML like this and this will work:
$(document).on('change', '#pf_status', function() {
var val = $(this).val();
$('#ref_col').toggle(val!=2)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="form-group">
<label>
Pass Fail Status
<span class="text-danger">*</span>
</label>
<select class="form-control" id="pf_status">
<option value="1">Pass</option>
<option value="2">Fail</option>
</select>
</div>
</div>
<div class="col-md-3" id="ref_col">
<div class="form-group">
<label>Pass Date</label>
<font style="font-size: 14px; color: #AA0000"></font>
<input type="text" name="pass_date" id="pass_date" class="form-control" value="somedate">
</div>
</div>

You should always try to figure out why the code it is not working.
Always check your browser console, There you will get errors with line numbers.
This way you will learn to master coding with time.
And don't worry about negative rating for your question.WE are developers to push ourselves to create, develop and design for the betterment of the world.
JQUERY:
$(document).on('change','#pf_status',function(){
// Here you are using this object to refer to something that is not available in DOM.
});
In your HTML, use id attribute for the select element.And this will work fine.
Well that is already shown above.I will show you how to setAttribute in javascript for your code without changing any code in your HTML.So that you learn.
In Javascript:
let ps = document.getElementsByName('pf_status');
ps[0].setAttribute("id","pf_status"); // if you have only 1 select element in your document
There surely are other issues in your code that are all sorted out by other developers.

You are using ID selector in your JQuery and declared as name attribute in your form
<select class="form-control" name="pf_status">
either change it to <select class="form-control" id="pf_status">
or
Use the name selector $(document).on('change', 'select[name="pf_status"]' in JQuery selector.
$(document).on('change', '#pf_status', function() {
var val = $(this).val();
console.log(val);
$('#ref_col').toggle(val!= 2)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="form-group"><label>Pass Fail Status <span
class="text-danger">*</span></label>
<select class="form-control" id="pf_status">
<option value="1">Pass</option>
<option value="2">Fail</option>
</select>
</div>
</div>
<div class="col-md-3" id="ref_col">
<div class="form-group"><label>Pass Date</label>
<font style="font-size: 14px; color: #AA0000"></font>
<input type="text" name="pass_date" id="pass_date" class="form-control" value="somedate">
</div>
</div>

Add and remove input texts on button click

I have a form that allows a user to create custom questions.
The user needs to insert the title for the question and then choose the type of the question.
If the type of question is radio button, checkbox or a select menu it should appear a div "availableOptions" that shows by default two input texts so the user can insert some option values.
Doubt:
When this "availableOptions" div appears there is also a button "add new option" that when is clicked it should appear another input text so the user can insert a new option value. Each option should also have always a remove button associated that when is clicked the user can remove that input text, but it should be always a minimum of one input text.
Do you know how to do this properly? I have the working example below but it's working neither the append nor the remove.
Example: https://jsfiddle.net/udx6pp8u/15/
HTML:
<form id="" method="post" class="clearfix" action="">
<div class="form-group">
<label for="inputName">Title</label>
<input type="text" class="form-control" id="inputName">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Type of Field</label>
<select class="form-control" id="customQuestionType">
<option>Text</option>
<option>Long text</option>
<option id="optionQuestion">Checkboxes</option>
<option id="optionQuestion">Radiobuttons</option>
<option id="optionQuestion">Select Menu </option>
</select>
</div>
<div class="form-group" id="availableOptions">
<label for="inputName">Available Options </label>
<div class="option">
<input type="text" class="form-control">
<button id="removeOption">Remove Option</button>
</div>
<div class="option">
<input type="text" class="form-control">
<button id="removeOption">Remove Option</button>
</div>
<div class="form-group">
<button type="button" class="btn btn-outline-primary mt-3" id="addNewOption">Add new Option</button>
</div>
</div>
<input type="submit" class="btn btn-primary float-right mt-3" value="Store"/>
</form>
CSS:
#availableOptions{display:none;}
jQuery:
var selected_option = $('#customQuestionType option:selected').attr('id');
if (selected_option == "optionQuestion") {
$('#availableOptions').show();
if ($('#addNewOption').click(function() {
$('#availableOptions')
.append('<div class="option"><input type="text" class="form-control"><button id="removeOption">Remove Option</button></div>');
}));
if ($('#removeOption').click(function() {
$('#availableOptions') // how to remove the clicked otpion?
}));
}

Try this:
Note: Don't use id. Use class instead. One document should only have one unique id. Using multiple id="removeOption" will coz your script to behave incorrectly and also choose the first found and ignore the rest having the same id
$('#customQuestionType').change(function(){
var selected_option = $('option:selected', this).val();
if (selected_option == "optionQuestion") {
$('#availableOptions').show();
$('#addNewOption').click(function() {
$('#availableOptions').append('<div class="option"><input type="text" class="form-control"><button id="removeOption">Remove Option</button></div>');
});
}
});
$(document).on('click', '.removeOption', function(e) {
e.preventDefault();
$(this).closest('.option').remove();
})
DEMO:
https://jsfiddle.net/dL7opvak/21/
EDITED

How to display invisible div with contents of just-filled input field with jquery

I have the following code:
<form>
<div class="form-group">
<div class="col-lg-12">
<input class="form-control" type="text" name="keyword1" placeholder="Keyword #1 "><br>
</div>
<div class="help-block">one two</div>
</div>
<div class="form-group">
<div class="col-lg-12">
<input class="form-control" type="text" name="keyword2" placeholder="Keyword #2 "><br>
</div>
<div class="help-block">one two</div>
</div>
</form>
on page load, help-blocks are hidden via jquery. I want them shown soon after someone fills in the input for each one. They should display with the text entered.
Here's the jquery I'm trying to improve:
<script>
$(document).ready(function() {
//hide the boxes where results will be shown
$('.help-block').hide();
$('input:text').blur(function (){
$(this).next().val(this.val());
});
});
</script>
Needless to say i'm still finding my feet with jquery, any pointers?

Problems
Use $(this).val() instead of this.val()
help-block div is sibling of input's parent
If you need to display them use .show()
Use
$('input:text').blur(function (event){
event.preventDefault();
$(this).parent().siblings('.help-block').html($(this).val()).show();
});
DEMO