How do I add name property to a DOM input checkbox object - javascript

I want to add a name to a DOM input object so that I can save it into my database but I can't figure it out.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to create a Checkbox.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var x = document.createElement("INPUT");
x.setAttribute("type", "checkbox");
document.body.appendChild(x);
}
</script>
</body>
</html>
This code only makes dynamic checkboxes but I don't know how to add a name to it to send it via $_POST['name'];

set attribute name
function myFunction() {
var x = document.createElement("INPUT");
x.setAttribute("type", "checkbox");
x.setAttribute("name", "checkbox_name");
document.body.appendChild(x);
}
you need to add input element in form element

You can use .name DOM element property:
x.name = 'myCheckbox';
Moreover, you can set type using .type property:
var x = document.createElement("input");
x.type = 'checkbox';
x.name = 'myCheckbox';
document.body.appendChild(x);
// Just for demonstration:
document.getElementById('result').innerText = x.outerHTML;
<div id="result"></div>
If you ever have any questions regarding DOM element properties, you can refer to this MDN page.
As you have mentionted jQuery in question tags, I will also provide a jQuery approach:
$("<input/>").attr({'name': 'myCheckbox', 'type': 'checkbox').appendTo('body');

Related

"classList.add" doesn't add a class to a div and a form elements

I currently stumbled upon trouble with the inability to add a class to div/form elements via classList.add method.
The same very method works perfectly for other elements like input or button.
However, no magic happens with the div and the form.
Please, ignore that the JS code is linked externally within the HTML.
Here all that matters that these two lines don't work:
form.classList.add = "formList";
buttonWrapper.classList.add = "buttonContainer";
(function(){
function formCreation () {
//Here I add elements"
let container = document.createElement('div');
let form = document.createElement('form');
let input = document.createElement('input');
let buttonWrapper= document.createElement('div');
let buttonCreator = document.createElement('button');
let buttonRemover = document.createElement('button');
input.placeholder = 'Enter your new task';
buttonRemover.textContent = 'Delete'
buttonCreator.textContent = 'Add';
//Here I'm trying to add classess//
form.classList.add = "form";
//It won't work for the form'
buttonWrapper.classList.add = "buttonContainer";
//Neither it would work for the buttonWraper div"
input.classList.add('input');
buttonCreator.classList.add('creator');
buttonRemover.classList.add('remover')
container.append(form);
buttonWrapper.append(buttonCreator);
buttonWrapper.append(buttonRemover);
form.append(input);
form.append(buttonWrapper);
return {
form,
input,
buttonCreator,
};
}
document.addEventListener('DOMContentLoaded', function () {
let containerApp = document.getElementById('container');
let heading = createAppTitle('Things to be done');
let todoItem = formCreation();
let listItself = todoListCreator();
containerApp.append(heading);
containerApp.append(todoItem.form);
containerApp.append(listItself);
});
}());
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="container" class="container"></div>
<script src="index.js"></script>
</body>
</html>
I don't understand how this code would work on any element type.
The format:
form.classList.add = "formList";
buttonWrapper.classList.add = "buttonContainer";
is wrong.
Try
form.classList.add("formList");
buttonWrapper.classList.add("buttonContainer");
See MDN for info on using classList and its properties.

Uncaught TypeError from generated JavaScript elements

I'm generating a dynamic list of from/inputs and buttons from JSON. The button triggers a JavaScript function that reads the current content of the input in a form. However when the button is clicked I get the following error code Uncaught TypeError: Cannot read property '0' of undefined.
This tells me there are no elements in the form but I don't know why. Tryed 0-3 just to make sure.
Length also return undefined. I am able to edit the innerHTML of the form.
A striped down code I'm trying to get a value from.
<!DOCTYPE html>
<html>
<body onload="gen_form()">
<div id="connectResult"></div>
<p id="demo">RESULT HERE</p>
<script>
const connect_result = document.getElementById("connectResult");
function gen_form(){
var div = document.createElement("DIV");
div.setAttribute("id", "div0");
div.innerHTML += "sometxt<br/>";
var form1 = document.createElement("FROM");
form1.setAttribute("id", 'form_sometxt2_0');
var input1 = document.createElement("input");
input1.setAttribute("type",'text');
input1.setAttribute("name",'textbox');
form1.appendChild(input1);
div.appendChild(form1);
var btn4 = document.createElement("BUTTON");
btn4.setAttribute("id", 'WRITE_sometxt2_0');
btn4.innerHTML = 'WRITE';
btn4.setAttribute("onclick", "myFunction(this)");
div.appendChild(btn4);
connect_result.appendChild(div);
}
function myFunction(param) {
var text = document.getElementById("form_sometxt2_0").elements[0].value + "<br>";
document.getElementById("demo").innerHTML = text;
}
</script>
</html>
The following does exactly what I want but it is static. The above is based off this.
<!DOCTYPE html>
<html>
<body>
<form id="frm1">
<input type="text">
</form>
<button onclick="myFunction()">Try it</button>
<p id="demo">RESULT HERE</p>
<script>
function myFunction() {
var text = document.getElementById("frm1").elements[0].value + "<br>";
document.getElementById("demo").innerHTML = text;
}
</script>
</html>
My question is: What is the difference between these two code snippets and how do I fix said error?
I would prefer not to use a submit input as there will be a second button that edits the contents of the input value.
PS: I'm fairly new to JavaScript and its terminology.
Using Chrome as my debugger.
Tipo error.comment
var form1 = document.createElement("FROM");
should be:
var form1 = document.createElement("FORM");

Sharepoint DOM input type

I am trying to create a dynamic webform on SharePoint and I am having an issue when trying to set the types of the elements with JavaScript and DOM.
I tried setting other types such as file, numeric, but they throw the same error (Member Not Found)
objElement = document.createElement("div");
objAttribute = document.createAttribute("class");
objAttribute.value = "container";
objElement.setAttributeNode(objAttribute);
objElement.appendChild(document.createTextNode("Client Name"));
objInput = document.createElement("input");
objAttribute = document.createAttribute("style");
objAttribute.value = "margin-left:70px;padding-left:10px;height:25px;border-color:RGB(184, 184, 184)";
objInput.setAttributeNode(objAttribute);
objAttribute = document.createAttribute("type");
objAttribute.value = "text";
objInput.setAttributeNode(objAttribute);
Error only occurs when setting the type attribute.
Create the input textbox control like this:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to create a Text Field.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var x = document.createElement("INPUT");
x.setAttribute("type", "text");
x.setAttribute("value", "Hello World!");
document.body.appendChild(x);
}
</script>
</body>
</html>

dropdown menu in javascript with adding new elements

I am new in javascript and in this moment I am trying to use "Basic DOM and JS". I am doing a dropdown menu, what gets his elements from an array. There is an input field, where you can add new items into the array.I also made a button to push and save the item into array and make the dropdown automatically with DOM.
My problem if you push the button, it makes always a new dropdown menu. Otherwise the array works good, but I need just one dropdown menu with the items of array. I think this problem comes out at listing with ul li too. Here is my whole code and thanks for helping
<!DOCTYPE html>
<html>
<head>
<style>
</style>
<meta charset="utf-8">
<script>
var select = new Array;
function array(){
var input = document.getElementById("input");
var value = input.value;
select.push(value);
var menu = document.createElement("select");
document.body.appendChild(menu);
for(var i = 0; i<select.length; i++){
var option = document.createElement("option");
var text = document.createTextNode(select[i]);
option.appendChild(text);
menu.appendChild(option);
}
}
</script>
</head>
<body>
<input id="input" type="text">
<input onclick="array()" type="button" value="Add">
</body>
</html>
You are creating the select tag every time array() is invoked. So create select tag once and rest of the time create option tag when array() is invoked. Here is your solution.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
<meta charset="utf-8">
<script>
var select = new Array;
var selectIsCreated = false;
var menu;
function array(){
var input = document.getElementById("input");
var value = input.value;
select.push(value);
if(!selectIsCreated){
menu = document.createElement("select");
document.body.appendChild(menu);
selectIsCreated = true;
}
var option = document.createElement("option");
var text = document.createTextNode(select[select.length-1]);
option.appendChild(text);
menu.appendChild(option);
}
</script>
</head>
<body>
<input id="input" type="text">
<input onclick="array()" type="button" value="Add">
</body>
</html>
So Suman already answered your question, but in terms of simplifying the code or the approach, I think you could take a different approach by removing the use of the "select" array entirely. The array isn't necessary to add in the value to the select list, as you can get everything you need from the input element, so you just need to work on adding the option to the actual select DOM element.
Here is the desired functionality re-factored a bit with this in mind.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
<meta charset="utf-8">
<script>
function createSelect() {
select = document.createElement('select');
select.id = 'select';
document.body.appendChild(select);
return document.getElementById('select');
}
function addOption(){
var input = document.getElementById("input");
var value = input.value;
// This will attempt to grab the 'select' element, but if it finds
// that it doesn't exist (i.e. getElementById returns a "falsy" value)
// then it will return the value of the createSelect function.
// This could also be done with more explicit "if" statements
var menu = document.getElementById('select') || createSelect();
// The same effect could be achieved by running this code:
/*
var menu = document.getElementById('select');
// If the select element hasn't been created/added to the page yet,
// then the above call to getElementById will return a "falsy" value,
// i.e. a value that isn't a strict boolean type but JS will treat it
// as "false".
if (!menu) {
menu = createSelect();
}
*/
var option = document.createElement("option");
var text = document.createTextNode(value);
option.appendChild(text);
menu.appendChild(option);
}
</script>
</head>
<body>
<input id="input" type="text">
<!--
I've renamed the array() function since we don't even
have an array anymore
-->
<input onclick="addOption()" type="button" value="Add">
</body>
</html>
You can see this in action on this jsFiddle

createTextNode surrounding my select list in unwanted quotation marks

I want to add a select list to my website using a button.
I need to use nodes because i need to be able to access it within the DOM so i can retrieve its value later on so I cant use innerHTML.
My problem is that createTextNode seems to surround my list in quotation marks and so it will not display. Can anyone help me out
<!doctype html>
<html>
<head>
<title> Pop Up </title>
<script>
function change()
{
var theDiv = document.getElementById("dropDownList");
var content = document.createTextNode("<select name='scrapbookID' id='scrapbookID'><option value='15'>one</option><option value='18'>two</option><option value='20'>three</option><option value='21'>four</option></select>");
theDiv.appendChild(content);
}
</script>
<style type = "text/css">
</style>
</head>
<body>
<div id = "signout">
Your are Currently signed in.<br />
Sign Out
<div id = "dropDownList">
<button onclick="change()">Add List</button>
</div>
</div>
</body>
What you need to have is .createElement() it creates a given element, where as createTextNode creates text node with given content.
function change()
{
var theDiv = document.getElementById("dropDownList");
var select = document.createElement('select');
select.name = 'scrapbookID';
select.id = 'scrapbookID';
select.innerHTML = "<option value='15'>one</option><option value='18'>two</option><option value='20'>three</option><option value='21'>four</option>"
theDiv.appendChild(select);
}
Demo: Fiddle
When you’re creating a text node, it’s treated as exactly that: text, not HTML. But it’s cleaner to just build the DOM properly!
function change() {
var theDiv = document.getElementById("dropDownList");
var selectBox = document.createElement("select");
selectBox.id = "scrapbookID";
selectBox.name = "scrapbookID";
var options = {
"15": "one",
"18": "two",
"20": "three",
"21": "four"
};
for(var x in options) {
if(options.hasOwnProperty(x)) {
var option = document.createElement("option");
option.value = x;
option.appendChild(document.createTextNode(options[x]));
selectBox.appendChild(option);
}
}
theDiv.appendChild(selectBox);
}

Categories

Resources