¡Hello! I need to make this range start working when the check is pressed ¿Can I get some help? Thanks
`
<!DOCTYPE html>
<html>
<body>
<input type="checkbox" id="si" name="nivel" onclick="myFunction()"><label for="si">Si</label>
<input type="range"id="tickmarks" disabled="disabled" />
<datalist id="tickmarks">
<option value="bajo" label="Bajo"></option>
<option value="medio" label="Medio"></option>
<option value="alto" label="Alto"></option>
</datalist>
<script>
function myFunction() {
var nivel = document.getElementById("si");
var tickmarks = document.getElementById("tickmarks");
if (nivel.checked == true){
tickmarks.style.display = "block";
} else {
tickmarks.style.display = "none";
}
}
</script>
</body>
</html>
`
I tried to press the checkbox to make the range appear and it could be selected but when it appears it is disabled.
You can control whether an element is disabled by setting the element's disabled attribute to true/false.
<input type="checkbox" id="si" name="nivel" onclick="myFunction()">
<input type="range" id="tickmarks" disabled>
function myFunction() {
const nivel = document.getElementById("si");
const tickmarks = document.getElementById("tickmarks");
if (nivel.checked == true) {
tickmarks.disabled = false;
} else {
tickmarks.disabled = true;
}
}
Related
In this code I have 2 dependent dropdown lists and a button to duplicate/clone the form. The color selection changes based on what is selected in item. When I duplicate the dropdown list the function didn't work. I tried changing the id of the duplicated dropdown list but still can't manage to match the id of 2 dropdown list. Is there any solution? Thanks.
var count = 1;
var duplicate_div = document.getElementById('duplicate_1');
function addRecord() {
var clone = duplicate_div.cloneNode(true);
clone.id = "duplicate_" + ++count;
duplicate_div.parentNode.append(clone);
var cloneNode = document.getElementById(clone.id).children[0];
$(clone).find("*[id]").each(function() {
$(this).val('');
var tID = $(this).attr("id");
var idArray = tID.split("_");
var idArrayLength = idArray.length;
var newId = tID.replace(idArray[idArrayLength - 1], count);
$(this).attr('id', newId);
});
}
$(document).ready(function() {
$("#item_" + count).change(function() {
var val = $(this).val();
if (val == "shirt") {
$("#color_" + count).html("<option>Black</option> <option>Gray</option>");
} else if (val == "pants") {
$("#color_" + count).html("<option>Blue</option> <option>Brown</option>");
} else if (val == "shoe") {
$("#color_" + count).html("<option>White</option> <option>Red</option>");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="select-form">
<div class="duplicate" id="duplicate_1">
<br>
<label>item</label>
<select id="item_1">
<option value="template" disabled selected></option>
<option value="shirt">Shirt</option>
<option value="pants">Pants</option>
<option value="shoe">Shoe</option>
</select>
<label>color</label>
<select id="color_1">
<option disabled selected>Select item first</option>
</select>
</div>
</form>
<br><br>
<button type="button" id="add-button" onclick="addRecord()">add</button>
Since you've imported jQuery into the project, I suggest you fully use it.
It's recommended to use jQuery's .on method instead of onclick attribute.
The change event will not work on the dynamically created elements.
You should instead use "event delegation".
Last but not least, you can remove the ids if they serve as selectors. You can use jQuery to easily transverse the DOM
Try this
$(document).ready(function() {
var $cloned = $('.duplicate').first().clone(true);
var $container = $('.select-form');
$('#add-button').click(function() {
$container.append($cloned.clone());
})
$('.select-form').on('change', '.item', function() {
var val = $(this).val();
var $color = $(this).closest('.duplicate').find('.color');
if (val == "shirt") {
$color.html("<option>Black</option> <option>Gray</option>");
} else if (val == "pants") {
$color.html("<option>Blue</option> <option>Brown</option>");
} else if (val == "shoe") {
$color.html("<option>White</option> <option>Red</option>");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="select-form">
<div class="duplicate">
<br>
<label>item</label>
<select class="item">
<option value="template" disabled selected></option>
<option value="shirt">Shirt</option>
<option value="pants">Pants</option>
<option value="shoe">Shoe</option>
</select>
<label>color</label>
<select class="color">
<option disabled selected>Select item first</option>
</select>
</div>
</form>
<br><br>
<button type="button" id="add-button">add</button>
I am trying to get the value of first input or second input and assign it to a hidden input type. When the value updates from the above default value.
HTML
<input id="amount2" name="s_value6" type="number" value="48">
<input id="amount3" name="s_value11" type="number" value="500">
<input id="mak" type ="hidden" name="distance" value="">
jQuery
if(mafsForm.find("#amount3").val().length !== 0 || mafsForm.find("#amount2").val().length !== 0) {
var s_value11 = mafsForm.find("#amount3").val();
var s_value6 = mafsForm.find("#amount2").val();
var dist = $('#mak').val($(this).val());
}
Hope this is what you are looking for. To test this, remove 'hidden' from the hidden input field. Then change the value of any of the first two input boxes. On every change, 3rd input box will be updated with latest value. Below code only shows latest value from the last updated input box
$("#amount2, #amount3").change(function(){
var changedVal = $(this).val();
if(changedVal !== '0'){
$("#mak").val(changedVal);
}
});
This is a working example of pure javascript ...
<input id="amount2" name="s_value6" type="number" value="48">
<input id="amount3" name="s_value11" type="number" value="500">
<input id="mak" type="hidden" name="distance" value="">
<script>
var amnt2 = document.getElementById("amount2");
var amnt3 = document.getElementById("amount3");
var mak = document.getElementById("mak");
amnt2.addEventListener("change", function(event) {
setValue(this.value);
});
amnt3.addEventListener("change", function(event) {
setValue(this.value);
});
function setValue(num) {
mak.value = num;
}
</script>
The mafsForm variable was not assigned a selector in your code, so instead of mafsForm.find(selector).val() I wrote $(selector).val(). Also, I used the parseInt() method to convert the value to a number for summation. You can easily adapt this code for yourself.
$('#amount2, #amount3').on('change', function() {
var s_value11 = $("#amount3").val();
var s_value6 = $("#amount2").val();
if(s_value11.length !== 0 || s_value6.length !== 0) {
value_sum = parseInt(s_value11) + parseInt(s_value6);
console.log(value_sum);
var dist = $('#mak').val(value_sum);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="amount2" name="s_value6" type="number" value="48">
<input id="amount3" name="s_value11" type="number" value="500">
<input id="mak" type ="hidden" name="distance" value="">
Your issue is that $(this) is referencing the window object. Here's a working solution:
var mafsForm = $('#mafsForm');
var dist;
if(mafsForm.find("#amount3").val().length !== 0 || mafsForm.find("#amount2").val().length !== 0) {
var s_value11 = mafsForm.find("#amount3").val();
var s_value6 = mafsForm.find("#amount2").val();
dist = $('#mak').val(s_value11);
};
console.log(dist.val());
// Now if you want to update the value of the hidden value when changing the value of a filed you can do this
mafsForm.find("#amount3").on('input', function() {
var s_value11 = mafsForm.find("#amount3").val();
dist = $('#mak').val(s_value11);
console.log(dist.val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<form id = "mafsForm">
<input id="amount2" name="s_value6" type="number" value="48">
<input id="amount3" name="s_value11" type="number" value="500">
<input id="mak" type ="hidden" name="distance" value="">
</form>
I am working on a Google Add-On in Google Apps Script, and I am attempting to make an HTML Form as a sidebar, the code of which is here:
<body onload="google.script.run.onSettingsOpen()">
<form id="baseSettings" onsubmit="event.preventDefault(); google.script.run.processForm(this); google.script.host.close()">
<h2>What settings would you like to be on? Please select all that apply.</h2>
<br>
<input type="checkbox" name="checks" value="spaces" id="spaces">Double spaces
<br>
<input type="checkbox" name="checks" value="punctuation" id="punctuation">Punctuation outside of quotes
<br>
<input type="checkbox" name="checks" value="caps" id="caps">Capitilazation at beginning of sentences
<br>
<input type="checkbox" name="checks" value="contractions" id="contractions">Contractions
<br>
<input type="checkbox" name="checks" value="numbers" id="numbers">Small numbers
<br>
<input type="checkbox" name="checks" value="repWords" id="repWords">Repeated words
<br>
<br>
<input type="submit" value="Submit">
</form>
</body>
I am attempting to use User Properties to keep track of which boxes should be checked for this form (it is a settings panel). The user properties all start as true, and can be only true or false- no other values. I have written the following code to get the check boxes to reflect what has been previously selected by the user for their preferences:
function onSettingsOpen()
{
populateData ();
initializePreferences();
document.getElementById(propsList[1]).checked = (allPreferences.getProperty(propsList[1]) === "true");
document.getElementById(propsList[2]).checked = (allPreferences.getProperty(propsList[2]) === "true");
document.getElementById(propsList[3]).checked = (allPreferences.getProperty(propsList[3]) === "true");
document.getElementById(propsList[4]).checked = (allPreferences.getProperty(propsList[4]) === "true");
document.getElementById(propsList[5]).checked = (allPreferences.getProperty(propsList[5]) === "true");
}
The propsList array is as follows:
var propsList = ["spaces", "punctuation", "caps", "contractions", "numbers", "repWords"];
Here is the processForm function:
function processForm(formObject)
{
var ui = DocumentApp.getUi();
var results = JSON.stringify(formObject.checks);
for (var i = 0; i < 6; i++)
{
if (allPreferences.getProperty(allPros[i]) === "false" && results.includes(allProps[i]))
{
allPreferences.setProperty(allProps[i], true)
}
else if (allPreferences.getProperty(allPros[i]) === "true" && !results.includes(allProps[i]))
{
allPreferences.setProperty(allProps[i], false)
}
}
}
And here is the populateData() function:
function populateData ()
{
if (doc == undefined)
{
doc = DocumentApp.getActiveDocument();
bod = doc.getBody();
docTxt = bod.getText();
toEdit = bod.editAsText();
paragraphs = bod.getParagraphs();
ui = DocumentApp.getUi();
allPreferences = PropertiesService.getUserProperties();
}
}
My current issue is that I am getting an error message reading: "Execution failed: ReferenceError: "document" is not defined." I'm not sure what to do about this. I have tried it in JQuery as well, to no avail. All I want to do is be able to access the "checked" attribute of my form and edit it programatically. Any help appreciated, thanks
i don't know why the JS Function didn't work of Drop-down is not working when i click 1 of the option.
But on the button when i click its working.
Here's the code snippet:
<div class="btn-group">
<button onclick="myFunction()" class="btn btn-success">Disable</button>
<button onclick="myFunction1()" class="btn btn-success">Unlock</button>
</div>
<select class="">
<option onclick="myFunction()">Disable</option>
<option onclick="myFunction1()">Unlock</option>
</select>
<input type="text" name="x" id="x">
<script type="text/javascript">
function myFunction() {
document.getElementById("x").disabled = true;
}function myFunction1() {
document.getElementById("x").disabled = false;
}
</script>
And also what's the different of select option to simple button.
Why the button is working fine, except on select option ?
I don't think onclick is not supported on option elements. You could add onChange="optionChanged()" on the select element and create a new function in your JS. Something along the lines
function optionChanged() {
document.getElementById("x").disabled = !document.getElementById("x").disabled;
}
Something like this will work:
<div class="btn-group">
<button onclick="myFunction()" class="btn btn-success">Disable</button>
<button onclick="myFunction1()" class="btn btn-success">Unlock</button>
</div>
<select class="" onchange="selectOnChange(this)">
<option value="disable">Disable</option>
<option value="unlock">Unlock</option>
</select>
<input type="text" name="x" id="x">
<script type="text/javascript">
function myFunction() {
document.getElementById("x").disabled = true;
}function myFunction1() {
document.getElementById("x").disabled = false;
}function selectOnChange(e) {
if (e.value == "disable")
document.getElementById("x").disabled = true;
else
document.getElementById("x").disabled = false;
}
</script>
I already answer my own question. here's the working code.
i used onchange instead of onclick.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mySelect" onchange="myFunction()">
<option value="disable">disable
<option value="unlock">unlock
</select>
<button id="show">modal</button>
<p id="demo"></p>
<input type="text" name="x" id="x">
<script>
$(function() {
document.getElementById("x").disabled = true;
});
function myFunction() {
$('#show').show();
var x = document.getElementById("mySelect").value;
if(x == 'unlock'){
document.getElementById("demo").innerHTML = "You selected: " + x;
$('#show').hide();
document.getElementById("x").disabled = false;
}
if(x == 'disable'){
document.getElementById("demo").innerHTML = "You selected: " + x;
document.getElementById("x").disabled = true;
}
}
</script>
function showMe(id_show_element) {
document.getElementById(id_show_element).style.display = '';
}
<script type="text/javascript"> function showNhide(val,element_id) { if(val == 'Others') { document.getElementById(element_id).style.display = ''; } else { document.getElementById(element_id).style.display = 'none'; } } </script>
<select name="degrees" onchange="showNhide(this.options[this.selectedIndex].value, 'others_details');"> <option value="">Select Degree</option> <option value="O-Level">O-Level</option> </select> <span id="others_details" style="display:none"> <input type="text" name="others_degree" value="" /> </span>
There should be other error in your javascript code, following is the example through which I hide the element:
document.getElementById('dropdownListId').style.display = 'none';
to show this element I use following code
document.getElementById('dropdownListId').style.display = '';
I think there is other javascript error in your code, please share small piece of code.