I am trying to edit a bit of code which is close to working. I want the text to first show "RSVP" but then pull the value of the radio box when someone selects it and uses it as the text of the main text.
https://jsfiddle.net/spadez/7gyrd08w/4/
It nearly works but this code snippet doesn't seem to pick up the value of the radio box. I think it's perhaps because keyup doesn't work on radio fields but I'm not sure how I can get this value.
function initInput() {
input = document.getElementById('input');
input.addEventListener('keyup', updateText);
input.value = 'RSVP';
}
You can use change, this will only trigger when the value changes.
function initInput() {
input = document.getElementById('input');
input.addEventListener('change', updateText);
input.value = 'RSVP';
}
Edit: I didn't provide an updated fiddle as I assume you can get it working from there.
Related
I'm working with a button and a text label in javascript and HTML. I have a code that clears the input text label, but i also need the same button to clear the output message it gives = "helloNameOP". How would I add the 2 in the same function? I have both my codes listed below, that work perfectly separated, but I cant figure out how to put them together to work simultaneously.
What I have tried:
//for removing the Input text label:
onclick = document.getElementById("helloNameInput").value="";
//for removing the Output message recieved:
inputField = document.getElementById("helloNameOP")
document.getElementById('helloNameOP').textContent = " "
I'm not a javascript person, more of a kotlin gal, so I'm trying to learn.
If I’m understanding correctly, you can get a reference to the button, and then add an event listener.
document.getElementById("the-button-id").addEventListener("click", function () {
document.getElementById("helloNameInput").value = "";
document.getElementById("helloNameOP").textContent = "";
});
I'm trying to create a custom control using leaflet; here you can see the jsfiddle: https://jsfiddle.net/1tca13f3/
When the user clicks on the submit button, i need to read the value from the dropdown and the one from the text field.
This...
L.DomEvent.on(this._container, 'click', this._doSomething, this);
...as predictable, doesn't work.. and I can't read the values from the input fields. How can I do this?
The main issue you are having is that you are just alerting the string 'clicked' in your _doSomething() function. You need to look up all the values and then you can do what ever you want with those values. Here is some quick code that will at least get you going in the right direction.
_doSomething: function(event){
if(event.target.className === 'leaflet-control-opt-submit') {
var select = document.querySelector('.leaflet-control-opt-dropdown');
var input = document.querySelector('.leaflet-control-opt-input');
console.log(select.value, input.value)
}
}
it first checks to make sure the event.target is the submit button if it is it looks up the values from the inputs and for now we just console.log() them you can do whatever you want from then on with the values.
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.
I know if I want to change the value of an input on a form according to what a user types into another input using:
$('#inputName').change(function() {
$('#inputURL').val($('#inputName').val());
});
But I'd like to have it so when someone types into the input it updates a Div with the text instead. IE they type into #inputName and this happens:
<div id="personsName"> text appears here as they type</div>
How'd I go about doing that? I doesn't work when I change #inputURL into #personsName :(
The change event is only triggered when leaving the textfield, so use keypress instead if you really want to "update the text on typing into a text field". .val only applies to form elements which actually have a value (e.g. <input> and <textarea> elements). In all other cases, you need the text method for modifying the text .
$("#inputName").keypress(function () {
$("#personName").text(this.value);
});
You can test this code here: http://jsfiddle.net/ntBnA/
You're almost there:
$('#inputName').change(function() {
$('#personsName').text($('#inputName').val());
});
//Cache this bad boy, its being repeatedly used!
var personsName = $('#personsName');
$('#inputName').bind({
keyup: function () {
//This is what you want.
personsName.text($(this).val());
},
change: function () {
//This is what you were doing. See the difference?
$('#inputURL').val($(this).val());
}
});
I have three <select> input fields: <select name=first>,<select name=second>and<select name=three>.
The 2nd and 3rd fields are disabled. If the user changes the value of the first field, the 2nd field should be enabled and so on. Is there an example related to this task? thanks
This is called cascading select, here are some examples
http://forums.digitalpoint.com/showthread.php?t=703846
http://www.everyweb.ru/wmaster/javas/menu/demo/dynasele.html
http://www.inside-oracle-apex.com/generic-solution-for-cascading-select-listslovs/
http://webdeveloper.earthweb.com/webjs/jsnavigation/item.php/91311
In its easiest way, you can bind an event handler to the elements for the change event and adjust the disabled property:
var form = document.getElementById('formId');
form.first.onchange = function() {
form.second.disabled = false;
};
form.second.onchange = function() {
form.three.disabled = false;
};
DEMO
I also suggest to disable the fields via JavaScript, otherwise, if users have JavaScript disabled, they cannot use the form.