clone input without its value - javascript

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');

Related

Update HTML dropdown list with Javascript

This issue is making me crazy.
I would like to update a dropdown list (select options) named "Title" (having 2 options ("Mr" & "Ms").
If i run with this way (updating the select option outside the function), the dropdown list is updated selecting the option #1. Also the input field named "e1" is updated.
var MyTitle = document.getElementById("Title");
MyTitle.selectedIndex = 1;
function bb(ff) {
document.getElementById("e1").value = ff;
}
google.script.run.withSuccessHandler(bb).FillUserDetails("gg");
<div class="input-field col s1">
<select id="Title" name="Title">
<option value="1">Mr</option>
<option value="2">Ms</option>
</select>
<label>Gender</label>
</div>
<input type="text" id="e1" name="e1" class="validate">
But If i run with this way (updating the select option inside the function), the dropdown list is not updated and still selecting the option #0. while the input field (e1) is update.
function bb(ff) {
var MyTitle = document.getElementById("Title");
MyTitle.selectedIndex = 1;
document.getElementById("e1").value = ff;
}
google.script.run.withSuccessHandler(bb).FillUserDetails("gg");
<div class="input-field col s1">
<select id="Title" name="Title">
<option value="1">Mr</option>
<option value="2">Ms</option>
</select>
<label>Gender</label>
</div>
<input type="text" id="e1" name="e1" class="validate">
Even using:
M.updateTextFields();
M.FormSelect.init(elems);
the problem persists. Any ideas?
I'm adding the code of the FillUserDetails() function.
in code.gs
function FillUserDetails(a) {
a="Hello";
return a
}
I hope this addition improves the clarity of the question.

How to get the selected text of options in multiple select?

I am trying to get the selected option in multiple select, I can get the value in the form of an array, but I can't get the text of the option.
$(function() {
$('#sizeAddCategory').change(function(e) {
var selected = $(e.target).text();
console.log("selected " + selected);
$('#textAreaAddCategory').val(selected.join(','));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-sm-6">
<label for="sel1">Select Sizes (hold ctrl or shift (or drag with the mouse) to select more than one):</label>
<br/>
<select required class="form-control" id="sizeAddCategory" multiple>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
</div>
<div class="form-group col-md-3">
<label for="name">Selected Sizes</label>
<br/>
<textarea required disabled rows="4" class="form-control" id="textAreaAddCategory"></textarea>
</div>
On $(e.target).text(), I am getting all the options text, I need the text of only selected options, so I can display it in the textarea.
Using .text() on a select will give the text of the control - i.e. all of the options, not just the selected ones.
To get the selected text (not value as you pointed out you can already get), you can use:
$(this).find("option:checked").map((i,e)=>$(e).text()).toArray();
Here, $(this).find("option:checked") will give you the option elements that have been selected while the .map will return the .text() for each of those values into a jquery array, with .toArray() to convert to a normal js array.
$(function() {
$('#sizeAddCategory').change(function() {
var selected = $(this).find("option:checked").map((i,e)=>$(e).text()).toArray();
console.log("selected", selected);
$('#textAreaAddCategory').val(selected.join(','));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-sm-6">
<label for="sel1">Select Sizes (hold ctrl or shift (or drag with the mouse) to select more than one):</label>
<br/>
<select required class="form-control" id="sizeAddCategory" multiple>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
</select>
</div>
<div class="form-group col-md-3">
<label for="name">Selected Sizes</label>
<br/>
<textarea required disabled rows="4" class="form-control" id="textAreaAddCategory"></textarea>
</div>
It's because the target that you're defining is in the select tag. Instead of using:
$('#sizeAddCategory').change(function(e) {
use:
$('.option-category').click(function(e) {
and add a class in the options:
<option value="{{$size->id}}" class="option-category">{{$size->name}}</option>
you write :
var selected = $(e.target).text();
you should get the value of selectbox and
you should write
var selected = $(e.target).val();
oh my god
i right now understand what did you mean
ok
write :
$("#selectBox").change(function(e){
var x = $(e.target).find("option:checked").text();
console.log(x);
});

on key up get selected drop down value not get correct value

I have tried to get the selected dropdown value based on some other input type text field using below code. However every time it gets the first value, i.e 15,
even when I have selected another option.
$(".director_code").keyup(function() { //this is Dropbox class selector
var schoolid = $("#schoolId").children(":selected").val();
// i also tried:
// $('#schoolId').find('option:selected').val();
console.log(schoolid);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="schoolId" id="schoolId" class="form-control schoolId" required="">
<option value="15">a</option>
<option value="16">b</option>
<option value="17">c</option>
<option value="18">d</option>
</select>
<input type="text" name="director_code" id="director_code" class="form-control director_code" pattern="[0-9]+" required="">
in snippet work perfectly but in my project not working well
show img
here i select second option i.e b but its display alert 15
but actual value of b is 16
Your code is working fine and as expected. On keyup event on input field, it is returning the selected option value.
What are you expecting then?
In the below screenshot, see the console log output w.r.t. input keyup logged with time.
You should try this
$("#schoolId").change(function(){
var selectedVal = $(this).children("option:selected").val();
$('#director_code').val(selectedVal)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="schoolId" id="schoolId" class="form-control schoolId" required="">
<option value="15">a</option>
<option value="16">b</option>
<option value="17">c</option>
<option value="18">d</option>
</select>
<input type="text" name="director_code" id="director_code" class="form-control director_code" pattern="[0-9]+" required="">
Based on your question maybe you want like this please check and let me know if something missed.
$(".director_code").keyup(function() {
try
{
var value = $(this).val();
//$("#schoolId").val($(this).val());
var oschoolId = $('#schoolId > option').filter(function () { return $.trim($(this).text()) == $.trim(value) }).val();
if(oschoolId!=undefined)
{
$('#schoolId').val(oschoolId);
console.log(oschoolId);
console.log($(this).val());
}
}catch(e)
{
console.log("Error: "+e.message);
}
});
$("#schoolId").change(function(){
var value= $(this).children("option:selected").text();
$('#director_code').val(value)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="schoolId" id="schoolId" class="form-control schoolId" required="">
<option value="15">a</option>
<option value="16">b</option>
<option value="17">c</option>
<option value="18">d</option>
</select>
<input type="text" name="director_code" id="director_code" class="form-control director_code" pattern="[0-9]+" required="">

Javascript issue with selector session storage

Hello so I added some javascript to keep selection stored when page is reloaded in my select menu , but the issue is when I load the page for the first time nothing appears in my select menu (First choice of the select menu)
what appears
window.onload = function() {
var selItem = sessionStorage.getItem("SelItem");
$('#date').val(selItem);
}
$('#date').change(function() {
var selVal = $(this).val();
sessionStorage.setItem("SelItem", selVal);
});
<label class="op" for="date">Periode : </label>
<select id="date">
<option value="toutes">Toutes</option>
<option value="2019">Année en cours</option>
<option value="2018">Année pécédente</option>
<option value="2017">Année -2</option>
<option value="2016">Année -3</option>
<option value="2015">Année -4</option>
</select>
<br/><br/>
<input type="hidden" name="date" id="date1" class="datepicker w100" value="2015-01-01"type="date" placeholder="Du jj/mm/aaaa"> <input type ="hidden"name="date2" id="date2" value="2026-12-31"class="datepicker w100" type="date" placeholder="Au jj/mm/aaaa">
<br/>
So only set the value if there is something in storage.
if (selItem) $('#date').val(selItem);

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>

Categories