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>
Related
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.
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");
I am trying to create forms dynamically using javascript, but I struggled with creating radio buttons in the form properly. The problem is I can't display a label beside each radio button
here is the index.html file
<!DOCTYPE html>
<html>
<head>
<title>Javascript</title>
</head>
<body>
<form id="myform">
</form>
<script type="text/javascript" src="custom.js"></script>
</body>
</html>
and the custom.js file
document.body.onload = newElement;
function newElement() {
var form = document.getElementById("myform");
var questions = {
name : "q1",
qType : "radio",
qLabel : "Is your system is automated online advising?",
options : ["Yes", "No"]
}
var label = document.createElement("label");
var lblContent = document.createTextNode(questions["qLabel"]);
label.appendChild(lblContent);
form.appendChild(label);
switch(questions["qType"]) {
case "radio":
var input = [];
var option;
var optionContent;
for(var i = 0; i < questions["options"].length; i++) {
input[i] = document.createElement("input");
input[i].setAttribute("type", questions["qType"]);
input[i].setAttribute("name", questions["name"]);
option = document.createElement("label");
optionContent = document.createTextNode(questions["options"][i]);
option.appendChild(optionContent);
input[i].appendChild(option);
form.appendChild(input[i]);
}
break;
}
}
Replace the last two lines of the for loop with
form.appendChild(input[i]);
form.appendChild(option);
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');
Something weird is happening here.
My website is using javascript to create dynamic divs, but although they are entered into the DOM (at least this is what I think), javascript returns null when calling that div.
This is the javscript code which is loaded before </body>
function AddPlayer(){
var name = document.getElementById('name').value;
createBox(name);
};
function createBox(name){
var span = document.createElement('span');
span.id = name;
span.innerHTML = name;
document.getElementById("gameArea").appendChild(span);
var span = document.createElement('span');
span.id = "score-" + name;
span.innerHTML = "0";
document.getElementById("gameArea").appendChild(span);
var inputSText = document.createElement('input');
inputSText.type = "button";
inputSText.value = "Add Points";
inputSText.onclick = function(){AddPoints(name);};
document.getElementById("gameArea").appendChild(inputSText);
};
function AddPoints(player){
document.load(document.getElementById("#score-"+ player).innerHTML = "Please work");
};
<html>
<head>
<title>Game Score Keeper</title>
</head>
<body>
<h2>Game Score Keeper</h2>
<input type="text" id="name" />
<input type="button" value="Add Player" onclick="AddPlayer()" />
<div id="gameArea">
</div>
<script src="index.js"></script>
</body>
</html>
Here is the jsfiddle of this project http://jsfiddle.net/jwmm6rk7/
You need to pass the id of the element to document.getElementById. That is, without the hash (#) symbol.
function AddPoints(player) {
document.load(document.getElementById("score-" + player).innerHTML = "HELLO");
};
lookslike you were jQuery user, you used # and name instead of player
function AddPoints(player) {
document.getElementById("score-" + player).innerHTML = "HELLO";
};