Develop Reference

Why clicking on my button don't alert range selected?

I' ve a button, so when user clicks it, it should alert range selected. If user didn't change the range selected (slider) default value 1 should be alerted.
Why is not alerting it?
Codepen:
https://codepen.io/ogonzales/pen/abNQXLg
Error: it should only alert 1 value:
JS:
$('#step_one_siguiente').on('click', function () {
let val = this.value;
alert($("#performance_options").prop("selected", true).text());
});

Here is a workaround that might be helpful.
let ranges = ['1080p','1440p','2k']
$('#step_one_siguiente').on('click', function () {
var index = parseInt($('input').val()) - 1
alert(ranges[index]);
});

I think it is because the way you use the syntax of the datalist is incorrect.
Values are not meant to be between the option tags but only in the value="" attribute.
However for this to work, the input value would need to match the list value, which is not compatible with a range control as the values you want are not a sequence.
https://www.w3schools.com/tags/tag_datalist.asp

Based on Ibrahim question, I was able to come up with:
Apparently I don't have to search for a selected range, as it only returns the value of the selected one.
<script>
$('#step_one_siguiente').on('click', function () {
alert($('[type="range"]').val());
});
</script>

Clear Asp.Net TextBox Control on OnFocus with Jquery or Javascript

I have been scouring the interwebs and stackoverflow, but I have not come across a solution that works. I need to erase the default text from the textbox when onfocus happens. I know it is hitting onfocus because my class for text color is set in there also and the color is changing. Here's my code and what I have tried.
ASP:
<asp:TextBox ID="txtAddEditDel" runat="server" CssClass="txtAddEditDel" ></asp:TextBox>
The default text is some random instructions it populates on Page_Load.
Jquery:
$(".txtAddEditDel").focus(function () {
var selectedRoleText = $(this).find('option:selected').text();
var selectedRoleId = $(this).find('option:selected').val();
var selectedRoleIndex = $(this).find('option:selected').index();
//enable add button
enableDisableLinkButtons(true, true, true);
if (selectedRoleText == 'Create, Edit, or Delete a Role Name.') {
$(".txtAddEditDel:text").val('');
}
$(".txtAddEditDel").removeClass('placeholderText');
});
The removeClass function is hit, but my value is not cleared.
Heres what I have tried:
$(".txtAddEditDel").val('');
$(".txtAddEditDel").val("");
$(".txtAddEditDel").text("");
$(".txtAddEditDel").text == '';
$(".txtAddEditDel").text == "";
$(this).val('');
document.getElementbyId('<%= txtAddEditDel.ClientID %'>.value = "";

$(".txtAddEditDel").val(''); should work, assuming its getting there. Have you put some debugging information to check the if clause is true? It may be a better idea to check against the value of the option rather than the text, as the text could easily be misspelt or changed where as a default value will, in my experience, be '' or 0 in this scenario

How to Make a Text Input box become non-writable when a checkbox is clicked?

On my website, users can enter their name, but they can also click a check box in order to post anonymously. I'm not that good with JS, so can anyone guide me in making it so when the check box is clicked the user becomes unable to write in the name input field? Thanks.

function toggleReadonly(element) {
var inputName = document.getElementById('inputName');
if(element.checked) {
inputName.setAttribute('readonly', true);
}
else {
inputName.removeAttribute('readonly');
}
}
<input type='text' id="inputName"/>
<input type='checkbox' onclick='toggleReadonly(this)'/>
You can see it working here.

You want to toggle the 'disabled' property of the input element, e.g.
var input = document.getElementById('theInput')
input.disabled = !input.disabled;
Add that in a function to the change event of the checkbox and you should be good to go.
EDIT: I whipped it up in a jsfiddle to make sure it would work.

How to update 2 textboxes with javascript?

How can I update a multiple textboxes value with Javascript, when user change the value of textboxes,
and I have a value already on those textboxes?
Am I doing in the right track on the code below?
<input type="text" id="amount_textbox" onChange="UpdateValue()" value="100">
<input type="text" id="amount_textbox" onChange="UpdateValue()" value="200">
function UpdateValue()
{
//alert ("you have changed the textbox...");
var x = document.getElementById('amount_textbox').value;
document.getElementById("amount_textbox").setAttribute("value", x);
document.getElementById('amount_textbox').value = x;
}
That function is working only for the first textbox, the second one can not update, how can I make other textbox work?

in jquery
$("#text").val("my new value");
in javascript
document.getElementById("text").setAttribute("value", "my new value");
document.getElementById('text').value = 'Blahblah';

First of all, I'm not sure why you'd want to set the value of the textarea(?) to itself - doesn't quite make sense, but here's the code nevertheless.
function checkTotal()
{
var tbox = document.getElementById('ammount_textbox');
var val = tbox.innerHTML;
tbox.innerHTML = val;
}

Your event handler is onClick, but it seems like you want to prevent changes? A click is not a change to the content of a form text box. Perhaps you want onChange?

change your onClick to onKeyup. With textareas, I have been able to access the value using just the value. Since the content is between opening and closing tags, you might be able to use the javascript innerHTML property ("That works with the button tag instead of value"). Good Luck!

function UpdateValue()
{
alert ("you have changed the textbox...");
var x = document.getElementById('amount_textbox').value;
document.getElementById("amount_textbox").setAttribute("value", x);
document.getElementById('amount_textbox').value = x;
}

Checkbox validated as "on" when form is submitted unchecked

I have a form here: http://www.problemio.com/test.php when you click on the "Click To Test Signup"
If you just submit the form without filling it out, the JS validation realizes that all the fields are empty, except for the checkbox at the bottom. It says that the checkbox is on even if it is unchecked.
Any idea why that happens? And what is the right way to validate the checkbox there?
var terms_and_conditions = $("#terms_and_conditions").val();
and this line outputs it as :on" alert ("Data string " + dataString);
Thanks!!

Use this instead to get the right value.
$("#terms_and_conditions").is(':checked')

you have to test like this (using the :checked-selector):
var terms_and_conditions = $("#terms_and_conditions:checked").val();
or, better, use .prop():
var terms_and_conditions = $("#terms_and_conditions").prop('checked');
this is because the value on a checkbox is always set - the only thing that changes is the checked-state so this is what you really have to test.

Try -
var terms_and_conditions = $("#terms_and_conditions").prop("checked");
that should return a boolean depending on whether the checkbox is checked or not.

you can try this:
$("#terms_and_conditions:checked").val();
you either get the val() or undefined.

Change this line from this:
var terms_and_conditions = $("#terms_and_conditions").val();
to this:
var terms_and_conditions = $("#terms_and_conditions").is(":checked");