We Keep Coding

How to get the input value of a checkbox (true/false)

I have this html and I am trying to get the input value of a certain checkbox
var option = document.createElement('li');
var checkbox = document.createElement('input');
var label = document.createElement('label')
var optionId = "option" + "" + questionNumber + subquestionNumber;
var checkBoxId = "checkbox" + "" + questionNumber + subquestionNumber;
var labelId = "label" + "" + questionNumber + subquestionNumber;
var labelname = "name" + "" + questionNumber + subquestionNumber;
checkbox.type = "checkbox";
label.id = labelId;
label.name= labelname;
option.id = optionId;
option.className = "optionName";
checkbox.id = checkBoxId;
checkBoxId.htmlFor = option;
label.appendChild(document.createTextNode('Option ' + subquestionNumber));
option.appendChild(label); //add `label` to `li`
option.appendChild(checkbox); //add `checkbox` to `li`
q.appendChild(option);
var checkboxes = document.querySelector(labelId);
document.getElementById("testingBox6").innerHTML = checkboxes;
I want to save the input value to the variable checkboxes
Thank you for your time

With Jquery, it can be simple. But, you can try this without Jquery
document.getElementById(checkboxId).checked;

you can get true/false with checked
for example
var checkbox = document.createElement('input');
checkbox.setAttribute("type", "checkbox");
checkbox.addEventListener("change", ()=> {
console.log(checkbox.checked); // it gives true or false when you clicked
})

Or even you can use
document.querySelector('#checkBoxId').checked;

javascript - `<form>` and `</form>` in same line .Other elements generated outside form

I am creating a form using javascript ,and subsequently adding the elements.
This code runs onclick event of a button .
But the generated code contains the <form> and </form> code in single line and the elements generated after this line.
I have given inline style border to the form.
The form border covers only one line and the controls are generated outside the form.
How to bring all elements between the <form> and </form> ?
A portion of my code below.
var f_id = frm_main_id + "_set" + (set_no + 1);
var criterias_csv_id = frm_main_id + '_criteria_csv';
var criterias_csv = document.getElementById(criterias_csv_id).value
var criteria_array = criterias_csv.split("|");
var fldno = 0;
var i;
var fid = "activity" + act_no + "_time_" + (set_no + 1) + "time";
var x = document.getElementById("id_" + act_no + "_fieldset")
var f = document.createElement("form");
f.setAttribute('method', "post");
f.setAttribute('id', f_id);
f.setAttribute('action', "submit_criteria.php");
f.style.borderStyle = "solid";
x.appendChild(f);
//var table = document.getElementById("id_" + act_no + "_table");
var new_table = document.createElement("TABLE");
new_table.setAttribute('class', "class_open");
new_table.setAttribute('form', f_id);
new_table.style.borderStyle = "solid";
x.appendChild(new_table);
var new_row = document.createElement("TR");
new_table.appendChild(new_row);
var th = document.createElement("th");
new_row.appendChild(th);
th.innerHTML = "Observed Time" + (set_no + 1);
var th = document.createElement("th");
new_row.appendChild(th);
var s = document.createElement("input");
s.setAttribute('type', "datetime-local");
s.setAttribute('id', fid);
s.setAttribute('form', f_id);
s.setAttribute('required', true);
th.appendChild(s);
for (i = 0; i < criteria_array.length; i += 2) {
fldno++;
fid = "activity" + act_no + "_time_" + (set_no + 1) + "_criteria_" + fldno;
var new_row = document.createElement("TR");
new_table.appendChild(new_row);
if (i == 0) {}
var field_type = "";
var fldname = criteria_array[i];
field_type = criteria_array[i + 1];
field_type = field_type.trim();
switch (field_type) {
case "Numeric":
field_type = "number";
break;
case "TEXT":
field_type = "text";
break;
}
var new_row = document.createElement("TR");
new_table.appendChild(new_row);
new_col = document.createElement("td");
new_row.appendChild(new_col);
new_col1 = document.createElement("td");
new_row.appendChild(new_col1);
new_label = document.createElement("label");
new_label.setAttribute("for", fid);
new_label.innerHTML = fldno + ")" + fldname;
new_col.appendChild(new_label);
switch (field_type) {
case "number":
case "text":
var s = document.createElement("input");
s.setAttribute('type', field_type);
s.setAttribute('id', fid);
s.setAttribute('required', true);
s.setAttribute('form', f_id);
new_col1.appendChild(s);
break;
case "YN":
var s = document.createElement("SELECT");
s.setAttribute('id', fid);
s.setAttribute('form', f_id);
var option = document.createElement("option");
option.text = "";
option.value = "";
s.add(option);
var option = document.createElement("option");
option.text = "No";
option.value = "N";
s.add(option);
var option = document.createElement("option");
option.text = "Yes";
option.value = "Y";
s.add(option);
new_col1.appendChild(s);
break;
default:
break;
}
}
new_row = document.createElement("TR");
new_table.appendChild(new_row);
new_col = document.createElement("td");
new_row.appendChild(new_col);
s = document.createElement("input"); //input element, Submit button
s.setAttribute('type', "submit");
s.setAttribute('value', "Save");
s.setAttribute('form', f_id);
s.setAttribute('onclick', "x()");
//"clk_save(', $act_no, ',', $edit, ')">
new_col.append(s);
new_col = document.createElement("td");
new_row.appendChild(new_col);
new_col.append(s);
}
I currently set the form attribute of each element separately and it works fine. But the border around the form is only for the first line.
Any idea??

Thanks for suggestions.
I have posted the full code.
I did following correction and everything is fine
x.appendChild(new_table); replaced x. with f.

How to delete a selection of textarea

I'm making a a simple texteditor and for that I'm using a function which gets the selected text of a textarea.
My problem is not getting the selected text but when i add some tags to the selected text, for example bold or italic, it appends. So what I want is to delete the selection first before adding it to the textarea.
Here's my code:
<input type="button" id="bold" value="BOLD"/>
<input type="button" id="undo" value="UNDO"/>
<textarea id="message" cols="50" rows="20"></textarea>
var text = [];
var textarea = document.getElementById('message');
//simple texteditor
function edit(tag) {
var startPos = textarea.selectionStart;
var endPos = textarea.selectionEnd;
var selection = textarea.value.substring(startPos, endPos);
var surrounder = selection.replace(selection, "<" + tag + ">" + selection + "</" + tag + ">");
textarea.value += surrounder;
updatePreview();
textarea.focus();
}
document.getElementById('bold').onclick = function () {
edit('b');
};
document.getElementById('undo').onclick = function () {
document.execCommand('undo',false,null);
};
thanks in advance!

I think this works for you:
var text = [];
var textarea = document.getElementById('message');
//simple texteditor
function edit(tag) {
var startPos = textarea.selectionStart;
var endPos = textarea.selectionEnd;
console.log(startPos);
var selectionBefore = textarea.value.substring(0, startPos);
var selection = textarea.value.substring(startPos, endPos);
var selectionAfter = textarea.value.substring(endPos);
var surrounder = selection.replace(selection, "<" + tag + ">" + selection + "</" + tag + ">");
var newText = selectionBefore + surrounder + selectionAfter;
textarea.value = newText;
updatePreview();
textarea.focus();
}
document.getElementById('bold').onclick = function () {
edit('b');
};
document.getElementById('undo').onclick = function () {
document.execCommand('undo',false,null);
};
https://jsfiddle.net/3L659v65/

I need Javascript syntax and logic advice

I have a two part question. The first is that I tried to replace all of my document.write with innerHTML and now nothing generates on the page correctly. The second part of my question is that I can't figure out the logic on my toggleCurrent function so that I can hide show the currently displayed view. example - if the thumbnail view is visible I want to hide/show or if the full view is visible I want to hide/show that. http://jsfiddle.net/5M3k7/
//Creating generic Object
function Person(name,age,biog,thumb,char,bg,cider) {
this.fullName = name;
this.age = age;
this.biog = biog;
this.thumb = thumb;
this.char = char;
this.bg = bg;
this.cider = cider;
}
//Creating new Objects
var jay = new Person ("Jay Jones",24,"Story","img","guy","bg","Fleet",true);
var jai = new Person ("Jai Janes",23,"Story","img","gal","bg","Sleet",true);
var dan = new Person ("Dan Dones",19,"Story","img","guy","bg","Leet",true);
var den = new Person ("Den Danes",49,"Story","img","guy","bg","Treat",true);
var dun = new Person ("Dun Dunes",20,"Story","img","guy","bg","Meet",true);
var vim = new Person ("Vim Vanes",22,"Story","img","guy","bg","Meat",true);
//Defining arrays
var characters = [jay, jai, dan, den, dun, vim];
//For loop goes though character array and prints it out.
var thumbs = function() {
var full = document.getElementById('full');
var cLength = characters.length;
for (var i = 0; i < cLength; i++){
full.innerHTML = '<div class="wrap"><div class="cont">' + "Name: " + characters[i].fullName + '<br/>' + 'Age: ' + characters[i].age + '<br/>' + 'Cider: ' + characters[i].cider + '</div></div>';
}
return;
};
var full = function() {
var thumb = document.getElementById('fullthumb');
var cLength = characters.length;
for (var i = 0; i < cLength; i++){
thumb.innerHTML = '<div class="fullwrap"><div class="bg"><div class="fullcont">Name: '
+ characters[i].fullName + '<br/> Age:' + characters[i].age + '<br/>Cider:' + characters[i].cider + '<div class="char"></div></div></div></div>';
}
return;
};
//Toggle Function
function toggleMenuDiv() {
var full = document.getElementById('full');
var thumb = document.getElementById('fullthumb');
var butt = document.getElementById('button');
if (full.style.display == 'none') {
full.style.display = 'block';
thumb.style.display = 'none';
butt.innerHTML = 'THUMB VIEW<span class="arrow-e"></span>';
}
else {
full.style.display = 'none';
thumb.style.display = 'block';
butt.innerHTML = 'FULL VIEW<span class="arrow-e"></span>';
}
}
//Toggle Function
function toggleCurrent() {
var chng = document.getElementById('change');
var thumb = document.getElementById('fullthumb');
var full = document.getElementById('full');
while (full.style.display == 'none')
{
if(thumb.style.display == 'block') {
chng.innerHTML = 'HIDE<span class="arrow-n"></span>';
}else{
thumb.style.display = 'none';
chng.innerHTML = 'SHOW<span class="arrow-s"></span>';
}
}
}

Because you keep overriding the last thing entered in.
full.innerHTML = '<div class="wrap"><div class="cont">' + "Name: " + characters[i].fullName + '<br/>' + 'Age: ' + characters[i].age + '<br/>' + 'Cider: ' + characters[i].cider + '</div></div>';
You are need to append to the innerHTML
full.innerHTML = full.innerHTML + '<div class="...

Copying dropdown values

I'm trying to copy two dropdown values and add them to a textarea. I copy one just fine but can't copy two. I'm trying to copy the value of 'amount' and the value of 'type' combine them and insert into a textarea. My code:
function copy() {
var sel = document.getElementById("amount");
var text = sel.options[sel.selectedIndex].value;
var out = document.getElementById("textarea");
out.value += text + "\n";
}

var sel1 = document.getElementById("amount");
var sel2 = document.getElementByid("type");
var amt = sel1.options[sel1.selectedIndex].value;
var typ = sel2.options[sel2.selectedIndex].value;
var out = document.getElementById("textarea");
out.value += amt + " " + typ + "\n";

You may want to rename your field named "type" as that could very possibly be a reserved variable name.
Also, I don't see where you are pulling in the value of type? Try this:
function copy() {
var sel = document.getElementById("amount");
var textInput = document.getElementById("some_type");
var text = sel.options[sel.selectedIndex].value + textInput.value;
var out = document.getElementById("textarea");
out.value += text + "\n";
}