I have a form that has several radio groups. There is one particular radio group that I want the user to be able to reset without resetting the entire form. I created a button whose value is Reset Participation Levels. Here is the function for the click event of that button:
<script>
function ParticipationReset(){
document.getElementById('SponsorshipParticipaton_0').removeAttribute('disabled');
document.getElementById('SponsorshipParticipaton_1').removeAttribute('disabled');
document.getElementById('SponsorshipParticipaton_2').removeAttribute('disabled');
document.getElementById('SponsorshipParticipaton_3').removeAttribute('disabled');
document.getElementById('SponsorshipParticipaton_4').removeAttribute('disabled');
document.getElementById('SponsorshipParticipaton_5').removeAttribute('disabled');
document.getElementById('SponsorshipParticipaton_6').removeAttribute('disabled');
document.getElementById('ExhibitorParticipaton_0').removeAttribute('disabled');
document.getElementById('ExhibitorParticipaton_1').removeAttribute('disabled');
document.getElementById('SponsorshipParticipaton_0').checked = false;
document.getElementById('SponsorshipParticipaton_1').checked = false;
document.getElementById('SponsorshipParticipaton_2').checked = false;
document.getElementById('SponsorshipParticipaton_3').checked = false;
document.getElementById('SponsorshipParticipaton_4').checked = false;
document.getElementById('SponsorshipParticipaton_5').checked = false;
document.getElementById('SponsorshipParticipaton_6').checked = false;
document.getElementById('ExhibitorParticipaton_0').checked = false;
document.getElementById('ExhibitorParticipaton_1').checked = false;
}
</script>
However, when I click the button, all radio buttons in the form are reset even if they are not specified in the function. The link to the page is www.pfacmeeting.org/2016/exhibitorform.htm.
Any advice would be appreciated. Thank you
cdr6545
this is happening because the button is set as "reset" , for a particular reset, please change the line to:
<input type="button" name="ResetSponsor" id="ResetSponsor" value="Reset Sponsorship Participation" onclick="javascript:SponsorshipReset(this);" />
type="button"
You can reset all of the radio buttons in a group with a simple for loop like this:
var elements = document.getElementsByName("SponsorshipParticipation");
for(var i = 0; i < elements.length; i++) {
elements[i].removeAttribute("disabled");
elements[i].checked = false;
}
Or if you want to reset all radio button groups with a name ending in "Participation", you could change the first line to this:
var elements = document.querySelectorAll("input[name$='Participation']");
Here is an example of how you could implement the code I provided above:
HTML
<input type="button" value="Reset" onclick="resetParticipation()" />
JavaScript
function resetParticipation() {
var elements = document.querySelectorAll("input[name$='Participation']");
for(var i = 0; i < elements.length; i++) {
elements[i].removeAttribute("disabled");
elements[i].checked = false;
}
}
Related
In my PDF form I've got some radio buttons checked by default and I need to make them unchecked before printing the form.
I've tried this but it didn't seem working:
function deleteDefault()
{
for (let x of this.getElementsByClassName("radio")){
x.checked = False;}
}
function deleteDefault()
{
var x = this.getElementsByClassName("radio");
var i;
for (i = 0; i < x.length; i++){
x[i].checked = False;}
}
I even tried to uncheck one after another like so:
function deleteDefault()
{
this.getField("FieldName").checked = False;
}
.. but that didn't work nether.
Can someone please tell me where I'm making a mistake?
Thank you all, I'm just getting started with JavaScript
I figured it out this way:
this.getField("FieldName").value = "Disapproved";
That works for a radio button.
For list box or simple text box this works just fine:
this.getField("FieldName").value = "";
I have a quiz app application that I am working on that dynamically creates 2-4 buttons for the answer. However, if you click on an answer, you can keep clicking on the same answer or keep clicking the other answers. I want the user to be able to click one of the buttons but then not be able to keep clicking. caveat though: when a user clicks one of the buttons, a new "Next" button gets created and that one does still need it's click event.
tl;dr
I need dynamically created buttons to be clickable only once but a "Next" button to still be clickable.
Code:
function renderButtons() {
var answerContainer = document.getElementById("answer-buttons");
answerContainer.innerHTML = "";
for (var i = 0; i < 4; i++) {
var button = document.createElement("button");
button.classList.add("btn");
button.setAttribute("id", "answerBtns");
button.hasAttribute("data-correct");
button.setAttribute("data-correct", questions[count].answers[i].correct);
button.onclick = btnclick;
button.textContent = questions[count].answers[i].text;
answerContainer.appendChild(button);
}
}
// if user clicks on button check if true
function btnclick(e) {
e.preventDefault();
var value = event.target.dataset.correct;
scoreBox.textContent = "Score: " + score;
if (value === "true") {
score += 5;
document.body.style.background = "green";
} else {
document.body.style.background = "red";
}
var next = document.getElementById("answer-buttons");
var nextBtn = document.createElement("button");
nextBtn.classList.add("nextBtn");
nextBtn.textContent = "Next";
next.appendChild(nextBtn);
nextBtn.onclick = nextBtnFx;
if you want to see what I'm talking about, the app can be found here:
https://andrethetallguy.github.io/Animal-Quiz/
Thanks!!!
In the handler function nextBtnFx you could disable the button with
this.disabled = "true"
that would make it unclickable after the first click
ref: https://stackoverflow.com/a/17115132/13998159
<!DOCTYPE html>
<html>
<head>
<title>Button</title>
</head>
<body>
<input type="button" id="btn01" value="OK">
<button onclick="disableElement()">Disable</button>
<button onclick="enableElement()">Enable</button>
<script>
function disableElement() {
document.getElementById("btn01").disabled = true;
}
function enableElement() {
document.getElementById("btn01").disabled = false;
}
</script>
</body>
</html>
You can use these functions to disable/enable the buttons.
I am currently building a shopping list app that contains a form, input box and submit button. My goal is to allow the user to input values into the form up until there has been 6 items listed on the page; after it has reached 6, I would like to disable the button so that no more values can be added. However, if a user deletes an item (e.g. the list goes down to 5 items), I would like for the button to be enabled until it reaches 6 and then continue the same routine over again.
I have tried to use an array and an "if else if statement" specifying the conditions, but that has not worked. Below is the JS code that I have tried.
let items = [];
let list = document.querySelector('ul');
let input = document.querySelector('input');
let button = document.querySelector('button').addEventListener('click', buttonClick);
function buttonClick() {
let myItem = input.value;
console.log(items)
items.push(input.value);
input.value = '';
if (items.length === 6) {
let e = document.querySelector('button').disabled = true;
items.length = 0;
} else if (button.disabled === false) {
button.disabled = true;
}
Here is the HTML
<img src='img/paper.jpg'>
<div class='second'>
<label for="item">Enter a new item:</label>
<input type="text" name="item" id="item">
<button>Add item</button>
</div>
<ul>
</ul>
</div>
I continue to receive an error message on the console stating, "Cannot read property disabled of undefined".
I think you should change this line of your code
let button = document.querySelector('button').addEventListener('click', buttonClick);
To this one
let button = document.querySelector('button');
button = .addEventListener('click', buttonClick);
And then you can make it disabled or not without selecting it again
button.disabled = true or button.disabled = false
Your need to get your button by id.
Change this:
let e = document.querySelector('button').disabled = true;
to this:
document.getElementById("ID_OF_BUTTON").disabled = true;
Remember to change "ID_OF_BUTTON" to id you put on your button html.
I think chaining the method in below code is causing the issue:
let button = document.querySelector('button').addEventListener('click', buttonClick);
Solution:
1.First get the button control:
let button=document.querySelector('button');
2.Attach event handlor.
button.addEventListener('click',buttonClick);
I have a JavaScript variable:
var setClickTime = "2000";
I would like to give the user a choice of 2000 or 4000 based on their preference by clicking a button.
What is the best way to allow the user to change this variable? I have considered having two buttons one of which will have the class active when clicked. That would require me to set up an if / else statement to change the variable based on which button is active. But I am new to this and I do not know the best approach.
Just give your buttons IDs and bind listeners.
Say, you have two buttons id="setTime2000" and id="setTime4000", then you just need:
HTML Code:
<div>
<button id="setTime2000">Set time as 2000</button>
<button id="setTime4000">Set time as 4000</button>
</div>
JS Code:
$(document).ready() {
var mTime = 2000; // set the default value of time
$("#setTime2000").click(function () {
mTime = 2000;
}
$("#setTime4000").click(function () {
mTime = 4000;
}
// ... do something with the variable set
}
Do you just want a button event listener to change it:
<button id="changeBtn">4000</button>
JS
var setClickTime = "2000";
$("#changeBtn").click(function() {
setClickTime = "4000";
})
First, you have a JavaScript variable, it has nothing to do with jQuery.
Then, if you want something easy, without dependencies. Here a simple example:
var myValue = 2000;
updateOutput();
a.addEventListener('click', function() {
myValue = 2000;
updateOutput()
});
b.addEventListener('click', function() {
myValue = 4000;
updateOutput()
});
function updateOutput() {
output.value = myValue;
}
<button id="a">2000</button>
<button id="b">4000</button>
<input readonly id="output">
A generic answer in pure javascript.
<button class='setTime'>
2000
</button>
<button class='setTime'>
4000
</button>
Pure Javascript:
var setClickTime = "";
var buttons = document.getElementsByClassName('setTime')
for (i = 0; i < buttons.length; i++) {
this.onclick = function setTime(event) {
setClickTime = event.target.innerHTML;
alert(setClickTime);
}
}
fiddle: https://jsfiddle.net/b1vy8ahp/
You can define multiple radio buttons for more options ( with same name attribute to group them ) and then just delegate or bind a change event on that group of radios buttons to get the selected value.
<input type="radio" name="test" value="2000">2000
<input type="radio" name="test" value="4000">4000
<script>
var setClickTime;
$('input:radio[name=test]').on('change',function()
{
setClickTime = this.value;
});
</script>
Example : https://jsfiddle.net/DinoMyte/71hgeqnb/1/
I am trying to limit the number of additional form input fields that a user can add dynamically to a file upload form to just 3. The form is loaded with one static input field and through javascript can add additional fields with an add button or remove additional form input fields with a remove button. Below is the html in it's static form.
<fieldset>
<legend>Upload your images</legend>
<ol id="add_images">
<li>
<input type="file" class="input" name="files[]" />
</li>
</ol>
<input type="button" name="addFile" id="addFile" value="Add Another Image" onclick="window.addFile(this);"/>
</fieldset>
With javascript I would like to create a function where the number of child elements are counted and if the number is equal to three then the "Add Another Image" button becomes disabled. In addition, if there are three elements in the form the user - with the remove button - removes a child then the "Add Another Image" button becomes enabled again.
I think I'm may be missing some crucial lines of code. The below javascript code only allows me to add one additional input field before the Add Another Image button becomes disabled. Removing this field with the remove file button removes the field but the Add Another Image button is still disabled. Below is where I'm currently at with the javascript.
function addFile(addFileButton) {
var form = document.getElementById('add_images');
var li = form.appendChild(document.createElement("li"));
//add additional input fields should the user want to upload additional images.
var f = li.appendChild(document.createElement("input"));
f.className="input";
f.type="file";
f.name="files[]";
//add a remove field button should the user want to remove a file
var rb = li.appendChild(document.createElement("input"));
rb.type="button";
rb.value="Remove File";
rb.onclick = function () {
form.removeChild(this.parentNode);
}
//create the option to dispable the addFileButton if the child nodes total "3"
var nodelist;
var count;
nodelist = form.childNodes;
count = nodelist.length;
for(i = 0; i < count; i++) {
if (nodelist[i] ==3) {
document.getElementById("addFile").disabled = 'true';
}
else { //if there are less than three keep the button enabled
document.getElementById("addFile").disabled = 'false';
}
}
}
Oh, OK, I've tested out the code now and see a couple of problems:
You're counting the number of child elements but this includes the text elements so there's actually one for the <li> and one for the text within it.
You've enclosed the true/false setting for the disabled property in quotes but it doesn't work and always set's it to false.
The remove button doesn't re-enable the add button.
I found this to work:
function addFile(addFileButton) {
var form = document.getElementById('add_images');
var li = form.appendChild(document.createElement("li"));
//add additional input fields should the user want to upload additional images.
var f = li.appendChild(document.createElement("input"));
f.className="input";
f.type="file";
f.name="files[]";
//add a remove field button should the user want to remove a file
var rb = li.appendChild(document.createElement("input"));
rb.type="button";
rb.value="Remove File";
rb.onclick = function () {
form.removeChild(this.parentNode);
toggleButton();
}
toggleButton();
}
function toggleButton() {
var form = document.getElementById('add_images');
//create the option to dispable the addFileButton if the child nodes total "3"
var nodelist;
var count;
nodelist = form.childNodes;
count = 0;
for(i = 0; i < nodelist.length; i++) {
if(nodelist[i].nodeType == 1) {
count++;
}
}
if (count >= 3) {
document.getElementById("addFile").disabled = true;
}
else { //if there are less than three keep the button enabled
document.getElementById("addFile").disabled = false;
}
}
I would suggest a slightly different approach. Create all three file input fields statically and provide a clear button. If the user chooses to leave it empty they can. If that is not elegant use your "Remove" to simply hide the field (CSS style display: none;).
I'm not sure why you're using the for loop? Shouldn't it be like this:
var nodelist = form.childNodes;
if (nodelist.length >= 3) {
document.getElementById("addFile").disabled = 'true';
}
else { //if there are less than three keep the button enabled
document.getElementById("addFile").disabled = 'false';
}
The last part of that function is a bit strange. Technically, when adding fields, you should only be disabling the button (i.e. you could never enable the button by adding fields). I would suggest removing the for loop and going with:
var count = form.getElementsByTagName("li").length;
if(count == 3)
document.getElementById("addFile").disabled = true;
The reason the add field button is still disabled when you remove an item is because you don't re-enable the add field button when you click remove. Try this for the remove button click handler:
rb.onclick = function () {
form.removeChild(this.parentNode);
document.getElementById("addFile").disabled = false;
}