I'm a novice in JS and trying to put some text dynamicly as a optionvalue for the radio button. But I can't seem to make the text appear. What am I doing wrong?
HTML
<form id="formulier">
<label for="a">
<input type="radio" id="a" name="a">
<!--here I want to show a value from an array ic answer[0]-->
<!--tried also this: <script>document.write(answer[0]);</script> -->
</label>
</form>
JS
var answer = <?php echo json_encode($antwoorden); ?>;
const a = document.getElementById("a");
// Ive tried:
a.value = answer[0];
a.innerHTML = answer[0];
a.innerText = answer[0];
None of them shows up. How can I make the text show up in HTML?
You can't output text by setting it as a value of radio buttons.
Instead you could set it as the textual content of the related label element.
To be able to select the associated label easily with JavaScript, assign the same class as the ìd of the <input type="radio"> element to it.
HTMl & JS Snippet
var answer = 'Dynamically inserted Message';
const a = document.getElementsByClassName("a")[0];
a.innerHTML = answer;
<form id="formulier">
<input type="radio" id="a" name="a">
<label for="a" class="a"></label>
</form>
Related
what i would like to do is, given a check box with 3 choices (only one is the correct one) I would like to open another html page if, once pressed a button below the check boxes, the answer is correct and, if the answer is wrong, color the text near the check box in red. I'm very new to html and javascript so I have no idea how to start.
Thank you in adavnce!
<div class = "test">
<form action = "pagina2.html">
<input type = "checkbox" id = "answer1" value = "Argentina">
<label for = "answer1"> Argentina </label><br>
<input type = "checkbox" id = "answer2" value = "Brasiliana">
<label for = "answer2"> Brasiliana </label><br>
<input type = "checkbox" id = "answer3" value = "Guatemalteca">
<label for = "answer3"> Guatemalteca</label><br><br>
<button id = "button1" onclick = "changeColor(id)" value = "Submit"> </button>
</form>
</div>
this what i wrote, thank you in advance
Is this a good solution to check multiple radio buttons with 1 label? I have a form with multiple steps. The last step shows a summary about the previous steps and I need to get all data from there. Is there a better option? How can I get the text from the input fields and insert it to the summary? JavaScript?
$('label').click(function() {
id = this.id.split('-');
if (id[0] === '1') {
id[0] = '2';
} else {
id[0] = '1';
}
$('#' + id[0] + '-' + id[1]).prop('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="one">
<input type="radio" id="1-1" name="1-level">
<label for="1-1" id="1-1">1</label>
<input type="radio" id="1-2" name="1-level">
<label for="1-2" id="1-2">2</label>
</div>
<div class="two">
<input type="radio" id="2-1" name="2-level">
<label for="2-1" id="2-1">1</label>
<input type="radio" id="2-2" name="2-level">
<label for="2-2" id="2-2">2</label>
</div>
Add a form element to wrap your input elements in. Forms can access all the inputs that are inside of it and see their names and their values. So in this case it is important that you use the value attribute on your input elements. Start by doing the above and make your code look like the example below.
Also, be careful with id's. They need to be unique, so they can only appear once in every document. Right now the label and their input elements have the same id.
<form id="step-form">
<div class="one">
...
</div>
</form>
Like #Shilly suggested, use the FormData API. This API is designed to get all the values from a form, think input, textarea and select elements and puts all of that data into a single object. This way you can create as many form-elements as you want, add them to the form and store their values in a single object.
The data in that object will be read as key-value pairs, which in this case are the name and value attribute values. For example: ['1-level', '2'], here we see the input with the name '1-level' and the value '2'.
I would not recommend using other input elements to show your results or summary. This could be confusing for the user as it suggests input. Instead print your results in plain text or create a list.
I do not know the jQuery equivalent of many of these API's or methods, so I've used Vanilla JavaScript to create a demo which, hopefully, demonstrates what you try to accomplish.
If you have any question, I've been unclear, or have not helped you in any way. Please let me know.
const form = document.getElementById('step-form');
const summary = document.getElementById('step-summary');
const clear = document.getElementById('step-clear');
// Remove all children of the summary list.
function clearSummary() {
while(summary.firstElementChild) {
summary.firstElementChild.remove();
}
}
// Clear list on click.
clear.addEventListener('click', event => {
clearSummary();
});
form.addEventListener('submit', event => {
// Clear list first.
clearSummary();
// Create a fragment to store the list items in.
// Get the data from the form.
const fragment = new DocumentFragment();
const formData = new FormData(event.target);
// Turn each entry into a list item which display
// the name of the input and its value.
// Add each list item to the fragment.
for (const [ name, value ] of formData) {
const listItem = document.createElement('li');
listItem.textContent = `${name}: ${value}`;
fragment.appendChild(listItem);
}
// Add all list items to the summary.
summary.appendChild(fragment);
event.preventDefault();
});
<form id="step-form">
<div class="one">
<input type="radio" id="1-1" name="1-level" value="1">
<label for="1-1">1</label>
<input type="radio" id="1-2" name="1-level" value="2">
<label for="1-2">2</label>
</div>
<div class="two">
<input type="radio" id="2-1" name="2-level" value="1">
<label for="2-1">1</label>
<input type="radio" id="2-2" name="2-level" value="2">
<label for="2-2">2</label>
</div>
<div class="three">
<input type="radio" id="3-1" name="3-level" value="1">
<label for="3-1">1</label>
<input type="radio" id="3-2" name="3-level" value="2">
<label for="3-2">2</label>
</div>
<ul id="step-summary"></ul>
<button type="submit">Review form</button>
<button type="button" id="step-clear">Clear summary</button>
</form>
I have a webpage with lots of inputs. They are all in this format, with the input tag before the label.
<input type='checkbox' id='myinput'>
<label for='myinput'>My Text</label>
Using javascript, if I didn't want to type type='checkbox' each time, I could do this, and each input would become a checkbox...
for (i=0;i<document.getElementsByTagName('input').length;i++) {
document.getElementsByTagName('input')[i].setAttribute('type', 'checkbox')}
I'd like to do the same thing with the label element. I don't want to use for='myinputsID' for every label. I realize I can nest the inputs inside the label like this to eliminate the for,
<label>My Text
<input type="checkbox" id="myinput">
</label>
but lets just say I don't want to do that. I need to keep the html in the same format with the input first and then the label... I would need to find a way to apply the htmlFor attribute to each label and assign it the ID of the input immediately preceding it. Is that possible?
Basically you have to use document.getElementsByTagName("input") to get a collection of all the input html elements on your page. Afterwards loop over this list to see which of those are actually checkboxes. If we found a checkbox, we can get the next html element using element.nextElementSibling. Finally just set the htmlFor attribute for those to the id of the input element.
var elements = document.getElementsByTagName("input");
for (var a = 0; a < elements.length; a++) {
if (elements[a].type == "checkbox") {
elements[a].nextElementSibling.htmlFor = elements[a].id;
}
}
<input type='checkbox' id='myinput1'>
<label>My Text</label>
<input type='checkbox' id='myinput2'>
<label>My Text</label>
<input type='checkbox' id='myinput3'>
<label>My Text</label>
I think this should work
var inputs = document.getElementsByTagName('input');
var input;
for (i=0;i<inputs.length;i++) {
input = inputs[i];
input.setAttribute('type', 'checkbox');
input.nextElementSibling.setAttribute('for', input.id);
}
I have the following code:
<fieldset id="dificuldade">
<legend>Dificuldade:</legend>
<input type="radio" name="dificuldade" value="facil"> Fácil </input>
<input type="radio" name="dificuldade" value="medio"> Médio </input>
<input type="radio" name="dificuldade" value="dificil"> Difícil </input>
</fieldset>
<fieldset id="tipo">
<legend>Tipo de jogo:</legend>
<input type="radio" name="Tipodejogo" value="somar"> Somar </input>
<input type="radio" name="Tipodejogo" value="subtrair"> Subtrair </input>
<input type="radio" name="Tipodejogo" value="dividir"> Dividir </input>
<input type="radio" name="Tipodejogo" value="multiplicar"> Multiplicar </input>
</fieldset>
<input type="button" value="Começa" id="button" ></input>
</form>
and here is the jsfiddle with both the html and the js http://jsfiddle.net/3bc9m/15/ . I need to store the values of the 2 fieldset so I, depending on the values picked can generate a game, but my javascript isn't returning any of them. What is wrong? I've been told that JQuery is much easier but i can't use it.
Your code on jsFiddle seems to be working fine for the most part. The only thing was that the elements output and output2 don't exist on the page.
So this code that was supposed to display the selected values wasn't working:
document.getElementById('output').innerHTML = curr.value;
document.getElementById('output2').innerHTML = tdj.value;
The part that actually retrieves the selected values is working fine.
Just add those two elements to the page, like this:
<p>Selected Values:</p>
<div id="output"></div>
<div id="output2"></div>
An updated jsFiddle can be found here.
EDIT
If a radio button from only one of the sets is selected, the code fails. You could use this code to find the selected values instead:
document.getElementById('button').onclick = function() {
var dif = document.getElementsByName('dificuldade');
var tip = document.getElementsByName('Tipodejogo');
var difValue;
for (var i = 0; i < dif.length; i++) {
if (dif[i].type === "radio" && dif[i].checked) {
difValue = dif[i].value;
}
}
var tipValue;
for (var i = 0; i < tip.length; i++) {
if (tip[i].type === "radio" && tip[i].checked) {
tipValue = tip[i].value;
}
}
document.getElementById('output').innerHTML = difValue;
document.getElementById('output2').innerHTML = tipValue;
};
An updated jsFiddle is here.
Consider this post that adresses the issue. It shows a few javascript methods as well as how you would use it in jQuery.
How can I check whether a radio button is selected with JavaScript?
Is there a specific reason you want to break it down by fieldset instead of directly accessing the radio buttons by name?
How do I use DOM in Javascript to check if a radio button is checked and then if so add new form elements to datesettings?
//Radio buttons
<input type="radio" id="dateoption" name="dateoption" value="1">
<input type="radio" id="dateoption" name="dateoption" value="2">
//Add new form elements
<span id="datesettings"></span>
Im currently reading a Javascript book but its not helping me understand. If someone could help me with this example then maybe the penny will drop. Thanks for your time.
Check out this page:
It explains the process so you understand why you're doing it a certain way, AND it gives good example code.
http://www.webdevelopersnotes.com/tips/html/finding_the_value_of_a_radio_button.php3
You would write a function to do the check, like this:
function CheckDateOptions() {
var o1 = document.getElementById("dateoption1");
var o2 = document.getElementById("dateoption2");
var eSettings = document.getElementById("datesettings");
if(o1.checked) {
eSettings.appendChild(...);
}
else if(o2.checked) {
eSettings.appendChild(...);
}
}
But, you have to make sure to assign your radio buttons unique id values. You can duplicate names to group the radio buttons, but for any element, the id should be unique.
<form id="TestForm">
<!-- //Radio buttons -->
<input type="radio" id="dateoption1" name="dateoption" value="1">Text 1</input>
<input type="radio" id="dateoption2" name="dateoption" value="2">Text 2</text>
<!-- //Add new form elements -->
<span id="datesettings"></span>
</form>