We Keep Coding

clone input without its value

I want to clone a div and don't want to get the value of cloned input using jquery and ejs..the problem is when I create the array when in the cloned div I get everything ok except the time input I hot the second input only I want to get the value of third time for example
I've tried to empty the value of time input like this Javascript clone without values but it doesn't work.
var state ='', type='', time= '';
$('#state').change(function () {
state = this.value;
})
$('#type').change(function () {
type = this.value;
})
$('#addToilet').click(function () {
setTimeout(function () {
console.log( $('#toiletTime').val());
time = '';
$('#toiletContent').clone(true).appendTo('.another');
time = $("#toiletTime").val();
console.log(state);
toilet.push({state, type, time});
console.log('kk',toilet);
},100)
})
my HTML:
<label>Toilet State</label>
<select class="form-control col-md-6" id="state" name="">
<option disabled selected>Select the State..</option>
<option value="Urine">Urine</option>
<option value="Stool">Stool</option>
</select>
<label>Time</label>
<input type="time" class="form-control col-md-6" id="toiletTime" name="" value="">
<label>Type</label>
<select class="form-control col-md-6" id="type" name="">
<option disabled selected>Select the Type..</option>
<option value="Kind">Kind</option>
</select>
</div>
</div>
<div class="another">
<p class="addNew" hidden>Add Another One</p>
</div>

flush the value after cloning
$('#toiletContent').clone(true).val('').appendTo('.another');
better if you put the cloned item into a var and after append it
var clonedItem = $('#toiletContent').clone(true);
clonedItem.val('').appendTo('.another');

How to get all the textboxes linked to a corresponding select field?

Basically, I want to make a site with a button that repeatedly asks user for input. However, one of the inputs that the site asks for involves a select field and depending on the select field, have a corresponding text field appear or dissapear(values none). My javascript utilizes a for loop as the user can repeatedly press the button to add more and more select fields( and corresponding text field).
Here is jsfiddle
Below is the example code of what I'm trying to do.
HTML
<div><select class="DISPLAYTYPE" id="QBox" data-fieldtype="P">
<option value = "text">TextBox</option>
<option value = "check">CheckBox</option>
<option value = "radio">Radio</option>
</select></div>
<input type="number" min="1" value="LENGTH" class="quantumBox" id="P">
JAVASCRIPT
var textBoxList = document.getElementsByClassName("DISPLAYTYPE");
for (var i=0; i<textBoxList.length;i++){
textBoxList[i].addEventListener('change', function(){
var subParam = textBoxList[i].options[textBoxList.selectedIndex].value;
if(subParam ="text"){
//make ONLY corresponding input box appear
}else{
//make ONLY corresponding input box dissapear
}
})
};
EDIT: This is the Structure
[table id="rootPlacement"]
//insert here
[/table]
[button/] <--This will make a duplicate of invisible html and place it under invisible root
//The invisible html stuff we want to duplicate into //insert here

Given your feedback about the HTML structure in the comments, you can use the following to achieve what you are trying to. Just look into
You are trying to get the selected value inside the change event for the drop-down by using var subParam = textBoxList[i].options[textBoxList.selectedIndex].value; rather than using textBoxList[i] you can use this so that i becomes var subParam = this.options[this.selectedIndex].value.
For showing hiding the inputs you can use the function findRoot() which takes the target element object i.e ``selectand finds a parent with the class namedrootPlacement` and returns the node and then you can iterate it's children to show the selected node and hide the rest.
See a demo below
var textBoxList = document.querySelectorAll(".DISPLAYTYPE");
for (var i = 0; i < textBoxList.length; i++) {
textBoxList[i].addEventListener('change', function() {
var selectedType = this.options[this.selectedIndex].value;
let rootPlacement = findRoot(this, 'rootPlacement');
let children = rootPlacement.children;
for (var c = 0; c < children.length; c++) {
let element = children[c];
let elementType = element.type;
let isInputElement = typeof elementType !== 'undefined';
if (isInputElement) {
if (elementType == selectedType) {
element.style.display = 'inline';
} else {
element.style.display = 'none';
}
}
}
});
};
function findRoot(el, cls) {
while ((el = el.parentElement) && !el.classList.contains(cls));
return el;
}
input {
display: none;
}
<div class="rootPlacement">
<div>
<select class="DISPLAYTYPE" id="QBox1" data-fieldtype="P">
<option value="text">TextBox</option>
<option value="checkbox">CheckBox</option>
<option value="radio">Radio</option>
</select>
</div>
<input type="text" value="" class="quantumBox" id="P1">
<input type="checkbox" value="" class="quantumBox" id="q1">
<input type="radio" value="" class="quantumBox" id="r1">
</div>
<div class="rootPlacement">
<div>
<select class="DISPLAYTYPE" id="QBox2" data-fieldtype="P">
<option value="text">TextBox</option>
<option value="checkbox">CheckBox</option>
<option value="radio">Radio</option>
</select>
</div>
<input type="text" value="LENGTH" class="quantumBox" id="P2">
<input type="checkbox" value="" class="quantumBox" id="q2">
<input type="radio" value="LENGTH" class="quantumBox" id="r2">
</div>
<div class="rootPlacement">
<div>
<select class="DISPLAYTYPE" id="QBox3" data-fieldtype="P">
<option value="text">TextBox</option>
<option value="checkbox">CheckBox</option>
<option value="radio">Radio</option>
</select>
</div>
<input type="text" value="LENGTH" class="quantumBox" id="P3">
<input type="checkbox" value="" class="quantumBox" id="q3">
<input type="radio" value="LENGTH" class="quantumBox" id="r3">
</div>

Show a specific dropdown box after select a option from another dropdown box

I have dropdown box list and have some forms .i want to show specific form against dropdown box value. suppose dropdown box contains two list such as: (i)Man (ii)Animal. when Man option is selected then it enters into a form which contains two option male and female.On the other hand(for animal) it enters into a form which contains three option lions,tigers,cow.
how to write this statement in a html and javascripts code ???

This is pretty simple, you can do this with a few lines of jquery, you just need to bind a select's onchange event to hide each form type, then show the right form based on the select's new value.
Here is an example of this working:
https://codepen.io/jcapinc/pen/YrJobM
JQuery/Javascript
$(function(){
var hidestuff = function(){
$(".man-form,.animal-form").hide();
}
$("select[name='formtype']").change(function(){
hidestuff();
var value = $(this).val();
if(value == "man"){
$(".man-form").show();
}
if(value == "animal"){
$(".animal-form").show();
}
});
hidestuff();
});
HTML
<div class="container">
<div class="col-md-offset-3 col-md-6">
<form>
<h1>Creature Form</h1>
<div class="form-group">
<label for="formtype">Choose Creature Type</label>
<select class="form-control" name="formtype">
<option value="">- Choose - </option>
<option value="man">Man</option>
<option value="animal">Animal</option>
</select>
</div>
<div class="man-form">
<div class="form-group">
<label for="manstuff">Man Stuff</label>
<input class="form-control" type="text"/>
</div>
</div>
<div class="animal-form">
<div class="form-group">
<label for="animalstuff">Animal Stuff</label>
<input class="form-control" type="text"/>
</div>
</div>
</form>
</div>
</div>

use this sample :
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<select id="formSelector">
<option value="0">select form type</option>
<option value="humanForm">human</option>
<option value="animalForm">animal</option>
</select>
<div id="humanForm" style="display:none;">
<input type="radio" name="humanSelector" />Man
<input type="radio" name="humanSelector" />Woman
</div>
<div id="animalForm" style="display:none;">
<input type="radio" name="animalSelector" />cat
<input type="radio" name="animalSelector" />dog
<input type="radio" name="animalSelector" />lion
</div>
<script>
var formSelector = document.getElementById("formSelector");
var humanForm = document.getElementById("humanForm");
var animalForm = document.getElementById("animalForm");
formSelector.addEventListener("change", function (event) {
humanForm.style.display = "none";
animalForm.style.display = "none";
switch (formSelector.value) {
case "humanForm":
humanForm.style.display = "block";
break;
case "animalForm":
animalForm.style.display = "block";
break;
}
});
</script>
</body>
</html>

I assumed this was two selects, but I see you want to show/hide a form, in which case, I'd recommend Jeffrey's answer.
There needs to be some relation between the first select and the second select. One way would be to add an attribute called data-relation which connects both selects. On any change, the select will be updated. You will need to add things like initial display and displaying only non-hidden options, but I'll leave that for you.
var cat = document.getElementsByTagName('select')[0];
var opt = document.getElementsByTagName('select')[1];
cat.addEventListener('change', function(s) {
for (var i = 0; i < opt.options.length; i++)
opt.options[i].hidden = opt.options[i].dataset.relation !== s.target.value;
});
<select>
<option>man</option>
<option>animal</option>
</select>
<select>
<option data-relation=man>male</option>
<option data-relation=man>female</option>
<option data-relation=animal>lions</option>
<option data-relation=animal>tigers</option>
<option data-relation=animal>cow</option>
</select>

How to get value from dropdown list with angularjs

I populated a select box with data from the backend and it works well, but when I click on an item to get its value, it gives me undefined:
<div class="col-md-5">
<label class="child-label" for="existing-phases">Existing: </label>
<select class="form-control" ng-model="MyData">
<option disabled selected value>-- select an option --</option>
<option ng-repeat="var in payloadSecteur" value="{{var.id}}">{{ var.secteur }}
</option>
</select>
<a class="btn btn-primary add-contract-button pull-right" ng-click="showPopup()">+</a>
</div>
Here's the function:
$scope.showPopup=function(){
alert('eee');
alert($scope.MyData);
};

This is a working snippet of your code without the value attribute set in the option tag and the options have been hard coded ,it is working perfectly
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<label class="child-label" for="existing-phases">Existing: </label>
<select class="form-control" ng-model="MyData">
<option disabled selected value>-- select an option --</option>
<option>heldfd</option>
<option>asdf</option>
<option>asdf</option>
<option>asdf</option>
</select>
<a class="btn btn-primary add-contract-button pull-right" ng-click="showPopup()">+</a>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.showPopup=function(){
alert($scope.MyData);
};
});
</script>

Did you put your html code to div with ng-app and ng-controller defined and defined them in your Angular file? Remember also to write your Angular function into the controller.
HTML:
<div ng-app="myApp" ng-controller="myCtrl">
<p>Select a car:</p>
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>You selected: {{selectedCar}}</h1>
</div>
Angular:
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cars = {
car01 : "Ford",
car02 : "Fiat",
car03 : "Volvo"
}
});
</script>
Remember also, that you don't have to use <option> tag - <select> with ng-options will be enough.

<div ng-controller="MyCtrl">
<div class="col-md-5">
<label class="child-label" for="existing-phases">Existing: </label>
<select class="form-control" ng-model="MyData" ng-options="payloadSecteur for payloadSecteur in payloadSecteur"></select>
<a class="btn btn-primary add-contract-button pull-right" ng-click="showPopup()">+</a>
</div>
</div>
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.payloadSecteur = ['one', 'two', 'three', 'four'];
$scope.showPopup = function() {
console.log('eee');
console.log($scope.MyData);
};
}
JSFiddle

Try this:
Pass ng-model as a parameter in showPopup() like
ng-click="showPopup(MyData)"
In controller
$scope.showPopup=function(selectedData){
alert('eee');
alert(selectedData);
};

Adding option from input dynamically

I'm trying to add <input name="input"> values to <select> <options> each time when I change the value with onblur function.
In this case it does change the value of <input name="output"> but I would like to add them multiple, so that's why I'm looking for adding values in to select options.
Is this possible?
Thanks.
function add(form) {
form.output.value = form.input.value;
}
<form>
<input name="input" type="text" value="" onblur="add(this.form);">
<input tabindex="-1" name="output" type="text" value="">
<select multiple>
<option>Test</option>
</select>
</form>

if you mean that after changing input value , add it's value as option to select , yea it's possible
I've wrote the code see the demo at below link
https://jsfiddle.net/oxxqw71s/
and code :
$("select").append($('<option>', {value:v, text:v}));

You can implement like below.
function add(val){
var data = val.input.value;
val.output.value = data;
var option = document.createElement("option");
option.text = data;
val.opt.add(option, val.opt[0]);
}
<form>
<input name="input" type="text" value="" onblur="add(this.form);">
<input tabindex="-1" name="output" type="text" value="">
<select multiple name="opt">
<option>Test</option>
</select>
</form>
HTML
<form>
<input name="input" type="text" value="" onblur="add(this.form);">
<input tabindex="-1" name="output" type="text" value="">
<select multiple name="opt">
<option>Test</option>
</select>
</form>
JS
function add(val){
var data = val.input.value;
val.output.value = data;
var option = document.createElement("option");
option.text = data;
val.opt.add(option, val.opt[0]);
}