Insert radio with label using jQuery - javascript

I have created a JS quiz and it holds all the answer choices in arrays. The answer choices are then inserted into a created <input type="radio" . . . . /> element. However the choices, instead of being inside a label, they are held inside the input element alone. Here's to further expand what I'm talking about:
I want it to be like this
Here's the code that creates the inputs:
// Creates a list of the answer choices as radio inputs
function createRadios(index) {
var radioList = $('<ul>');
var item;
var input = '';
for (var i = 0; i < questions[index].choices.length; i++) {
item = $('<li>');
input = '<input type="radio" name="answer" value=' + i + ' />';
input += questions[index].choices[i];
item.append(input);
radioList.append(item);
}
return radioList;
}
Any help would be greatly appreciated.

The label should really encompass the radio button for best practices. Try this:
// Creates a list of the answer choices as radio inputs
function createRadios(index) {
var radioList = $('<ul>');
for (var i = 0; i < questions[index].choices.length; i++) {
var item = $('<li>');
var label = $('<label>');
var input = $('<input>', {type: 'radio', name: 'answer', value: i});
input.appendTo(label);
label.append(questions[index].choices[i]);
item.append(label);
radioList.append(item);
}
return radioList;
}

Related

Splice function in javascript not working properly

The button on click should generate radio buttons, one at a time, but I have an issue with the text node that should stick with the radio buttons. Here's part of the code:
var array = [];
items = document.getElementById("items").value.split(",");
for (var i = 0; i < items.length; i++) {
array.push(items[i]);
}
type = document.getElementById("type");
container = document.getElementById("container");
if (type.value == "radio") {
radio = document.createElement("input");
radio.setAttribute("type", "radio");
for (var i = 0; i < array.length; i++) {
text = document.createTextNode(array[0]);
container.appendChild(text);
container.appendChild(radio);
array.splice(0,1);
}
}
So this is the result, but I want the first radio button to have a value of '1', the second '2' etc.
First you don't need array the items array already contains the elements you want from text input
Also no need to slice/splice any array
Your problem was that you have to create another unique radio element for every element so what you did is appending same radio element many times which result in adding the radio button once
so you have to put
radio = document.createElement("input");
radio.setAttribute("type", "radio"); inside the for loop . . . . 😘😘
function Z() {
items = document.getElementById('items').value.split(",");
type = document.getElementById("type");
container = document.getElementById("container");
container.innerHTML = "";
if (type.value == "radio") {
for (var i = 0; i < items.length; i++) {
text = document.createTextNode(items[i]);
radio = document.createElement("input");
radio.setAttribute("type", "radio");
container.appendChild(text);
container.appendChild(radio);
}
}
}
<input onkeyup="Z()" id="items"> type:
<select id="type">
<option value="radio">Radio</option>
<option value="checkbox">Text</option>
</select>
<div id='container'></div>

.innerHTML += id, no duplicates

Here what I have so I have a long list of check-boxes and I want to display them in text if they are check I was thinking of using the code below, but the problem I'm having is if they check and uncheck a check-box it shows up multiple times any suggestion on how to fix this?
.innerHTML += id;
If you need some more details here's a code dump of the relevant code:
Javascript
function findTotal() {
var items = new Array();
var itemCount = document.getElementsByClassName("items");
var total = 0;
var id = '';
for (var i = 0; i < itemCount.length; i++) {
id = "c" + (i + 1);
if (document.getElementById(id).checked) {
total = total + parseInt(document.getElementById(id).value);
document.getElementById(id).parentNode.classList.add("active");
document.getElementById(id).parentNode.classList.remove("hover");
document.getElementById('display').innerHTML += id;
} else {
document.getElementById(id).parentNode.classList.remove("active");
document.getElementById(id).parentNode.classList.add("hover");
}
}
console.log(total);
document.getElementById('displayTotal').value = total;
}
HTML
<label class="hover topping" for="c4">
<input class="items" onclick="findTotal()" type="checkbox" name="topping" value="1.00" id="c4">BABYBEL</label>
Note: many more label classes
Previous answer should do it. Here your code (see comment "clear container"
Additionally I have simplified your code a bit. Readability greatly increased.
Maybe you should switch to jQuery in general, much simpler for your example.
var displayElement = document.getElementById('display'),
displayTotalElement = document.getElementById('displayTotal');
function findTotal() {
var items = [],
itemCount = document.getElementsByClassName("items"),
total = 0,
id = '';
// clear container
displayElement.innerHTML = "";
for (var i = 0; i < itemCount.length; i++) {
id = "c" + (i + 1);
var element = document.getElementById(id),
elementsParent = element.parentNode;
if (element.checked) {
total = total + parseInt(element.value, 10);
elementsParent.classList.add("active");
elementsParent.classList.remove("hover");
displayElement.innerHTML += id;
} else {
elementsParent.classList.remove("active");
elementsParent.classList.add("hover");
}
}
console.log(total);
displayTotalElement.value = total;
}
Reset the text before the loop:
document.getElementById('display').innerHTML = '';
At the moment you're just always adding to whatever's already there…

Generating radio buttons with label

I'm trying to select items from a Select list and generate a Radio list.
Let's say I have these options in a list:
abc
dab
I want to print them in a radio list like this:
(radiobutton1) abc
(radiobutton2) dab
But right now I am just getting a result like this:
(radiobutton1)(radiobutton2) abc dab
Here is my code:
HTML
<radio id = MyRadio multiple></radio>
<label id = MyLabel multiple></label>
and Javascript:
function btn2Click() {
var SelectedItems = document.getElementById("MyList");
var i;
for (i = 0; i < SelectedItems.length; i++)
{
if(SelectedItems.options[i].selected)
{
var RadioSelect = document.createElement("INPUT");
RadioSelect.setAttribute("type", "radio");
var RadioText = document.createTextNode(SelectedItems.options[i].text+'\n');
RadioSelect.appendChild(RadioText);
document.getElementById("MyRadio").appendChild(RadioSelect);
document.getElementById("MyLabel").appendChild(RadioText);
}
}
}
something like this? http://jsfiddle.net/swm53ran/101/
<div class="radioButtons">
Place Radio Buttons Here
<br/>
</div>
$(document).ready(function() {
var list = ['dog', 'cat', 'fish'];
var html = "<input type='radio'/>";
for (var i = 0; i < list.length; i++) {
$('.radioButtons').append(html + list[i] + '<br/>');
}
});
Labels work with the for attribute. The for attribute needs to refer to the id of the radio input.
if(SelectedItems.options[i].selected)
{
var RadioSelect = document.createElement("INPUT");
RadioSelect.setAttribute("type", "radio");
var RadioText = document.createTextNode(SelectedItems.options[i].text+'\n');
document.getElementById("MyRadio").appendChild(RadioSelect);
document.getElementById("MyLabel").appendChild(RadioText);
}
Change the label html to:
<label id="MyLabel" for="MyRadio" multiple></label>
HTML
<div id="myRadioButtons" />
JS
var html='';
$.each(['apply', 'pear', 'peach', 'lime'], function (i, v){
html += "<input type='radio'/>" + v + '<br/>';
});
$('#myRadioButtons').append(html);
DEMO

format text fields created

I'm really new so I'll appreciate some help here. please refer to this fiddle.
$(function () {
var input = $('<input type="text" />');
$('#qty').bind('blur', function () {
var n = this.value || 0;
if (n + 1) {
setFields(n);
}
});
function setFields(n) {
$('#newFields').html("");
$('#newFields').append("<table>");
//to create rows and columns
for (i = 0; i < n; i++) {
for (j = 0; j < 1; j++) {
var somestr = "Sample ";
var num = i + 1;
$('#newFields').append("<td>" + somestr + num + ":" + "</td>");
$('#newFields').append("<td>");
var newInput = input.clone();
var newFields1 = $('');
newFields1 = newFields1.add(newInput);
newInput.appendTo('#newFields');
$('#newFields').after("</td>");
}
$('#newFields').after("</tr>");
}
}
});
I'll like to have the input text field appear on the right column (so it should be [column 1]"Sample #" [column 2] input text field, with "Sample 2" and another text field appearing on the next row and so forth). Been trying but couldn't get it. Thanks!
Try appending new rows to the existing table by targeting the table itself on the appendTo() method. You don't need to add a new table and, as you haven't been closing the table off with </table> this isn't working at present anyway.

How to manipulate form field values in javascript

I'm trying to get the value of a few checkboxes and enter them in a hidden form field.
My checkboxes look like this:
<form>
<input type="checkbox" name="chicken" id="chicken" value="chicken"/>Chicken
<input type="checkbox" name="meat" id="meat" value="meat"/>Meat
</form>
<form method="post" action="">
<input type="hidden" name="my-item-name" value="" />
<input type="submit" name="my-add-button" value=" add " />
</form>
I only need to submit the hidden field data so I'd like the value of the hidden field change when the checkbox is ticked. So if the first checkbox is ticked I'd like the value of the hidden field to become chicken and if both of them are ticked the value should be chicken,meat.
I'm using the following javascript
function SetHiddenFieldValue()
{
var checks = document.getElementsByName("checkbox");
var hiddenFieldVal = "";
for(i = 0; i < checks.length; i++)
{
if(hiddenFieldVal != "")
hiddenFieldVal += ",";
hiddenFieldVal += checks[i].value;
}
document.getElementById('my-item-name').value = hiddenFieldVal;
}
but when I add the items, it adds both of them, it doesn't check which one's been checked, is there a way to fix that, so when the first item is checked it'll only add that item and if both of them are checked, it'll add 2 items separated by comma,
for(i = 0; i < checks.length; i++)
{
if (!checks[i].checked)
continue;
....
}
You need to give the checkboxes the same name to have them grouped:
<input type="checkbox" name="food[]" id="chicken" value="chicken"/>Chicken
<input type="checkbox" name="food[]" id="meat" value="meat"/>Meat
And in your JavaScript function:
function SetHiddenFieldValue() {
var checks = document.getElementsByName("food[]");
var hiddenFieldVal = "";
for (var i=0; i<checks.length; i++) {
if (checks[i].checked) {
if (hiddenFieldVal != "")
hiddenFieldVal += ",";
hiddenFieldVal += checks[i].value;
}
}
document.getElementById('my-item-name').value = hiddenFieldVal;
}
You forgot to test for checks[i].checked
function SetHiddenFieldValue() {
var checks = document.getElementsByName("checkbox");
var hiddenFieldVal = "";
for(i = 0; i < checks.length; i++) {
if (checks[i].checked) {
if(hiddenFieldVal != "")
hiddenFieldVal += ",";
hiddenFieldVal += checks[i].value;
}
}
}
document.getElementById('my-item-name').value = hiddenFieldVal;
}
Hi your best to put the values into an array, makes it easier to then create the comma separated value. Also makes it a lot easier if you add more options later.
function SetHiddenFieldValue()
{
var checks = document.getElementsByName("checkbox");
var foods = new Array();
for (i = 0; i < checks.length; i++)
{
if (checks[i].checked)
{
foods[i] = checks[i].value;
}
}
document.getElementById('my-item-name').value = foods.join(",");
}

Categories