Develop Reference

How to display text with multiline from JavaScript to the HTML

I want to display multi line text, from JavaScript to the HTML using looping. The text position is after display the image. The text result should be like
Place ..... // newline price ....
<div id="display">
<script type="text/javascript" src="../controler/package.js"></script>
</div>
var display = document.getElementById('display');
function buildImages(images,place,k,price){
var last=document.createElement("IMG");
last.src=images;
last.width=800;
last.height=600;
last.style.marginTop=30;
display.appendChild(last);
var x = document.createElement("H3");
var t = document.createTextNode("Place:"+place);
var z = document.createTextNode(" price:"+price);
x.appendChild(t);
x.appendChild(z);
display.insertBefore(x,display.childNodes[k]);

The cleanest way is probably to do the same thing you would do in HTML: wrap your text nodes in <p> elements.
Wrapping the text in an HTML element will always help you later to customize style or whatever!
Raw text nodes are not that convenient.

There are multiple ways to achieve this. One is using br tags
var x = document.createElement("H3");
var t = document.createTextNode("Place:"+place);
var br = document.createElement("BR");
var z = document.createTextNode(" price:"+price);
x.appendChild(t);
x.appendChild(br);
x.appendChild(z);
Another could be using a pre tag
var x = document.createElement("H3");
var t = document.createTextNode("Place:"+place + "\n price:" + price);
x.appendChild(t);
Or you could could use two spans that have display: block;
var x = document.createElement("H3");
var t = document.createElement("SPAN");
t.style.display = "block";
t.innerText = "Place:" +place;
var z = document.createElement("SPAN");
z.style.display = "block";
z.innerText = "Price:" +price;
var z = document.createTextNode(" price:"+price);
x.appendChild(t);
x.appendChild(z);

It can not work like this by design. if you do not use
<pre>
or
<code>
if you want to use line feeds or if you prefer other tags like
<p>
then you has to use at least
<br>
by this you can still format the text as you wish. Will look usually a bit messy. I would use a table.

javascript problems while generating form

everything working as my desire but when I click on book room button it can not generate input field for me but its shows as [object HTMLFormElement] here is my code
function booking(roomBooking){
var f = document.createElement("form");
var in1 = document.createElement("input");
in1.type = "text";
in1.name = "user_name";
in1.id = "user_name1";
f.appendChild(in1);
document.getElementById("name").innerHTML=f;
}
I want to show form when I clicked on book room button.

Here you are:
You should just apply your f variable to "#name" element by using appendChild() function, because "f" it's an object and you cannot directly use it.
function booking(roomBooking) {
var f = document.createElement("form");
var in1 = document.createElement("input");
in1.type = "text";
in1.name = "user_name";
in1.id = "user_name1";
f.appendChild(in1);
document.getElementById("name").appendChild(f);
}

Can't read value of checkbox with value, innerHTML or checked

I'm doing a basic (becuse I'm not skilled and just like to play around bulidning small things to learn) database project, setting things by checking checkboxes. However, when trying to check a box and read if it is checked or not checked it always reads "null". I've tried .value, .innerHTML and .checked. Nothing gets me there. All I'm trying to do is to pick up the input (i.e. checked or not checked) with getElementById and store it in a var, and later on compare if the boolean is true och false to set the value in the databas accordingly.
function createSheet() {
var _container = document.getElementById("container");
checkbox = document.createElement("input");
checkbox.type = "checkbox";
var valueOfId = document.getElementById("idString").checked;
Error messege: Cannot read property 'checked' of null.
EDIT: Thanks for the answers! I didn't show these lines since I didn't think they mattered that much, but I was wrong so here they are:
function createSheet() {
var _container = document.getElementById("container");
for (var i = 0; i < 4; i++) {
p = document.createElement("p");
spanBird = document.createElement("span");
checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "myCheck" + i;
checkbox.value = 0;
checkbox.checked = birds.birdList[i].seen;
spanBird.innerHTML = birds.birdList[i].name;
p.appendChild(spanBird);
p.appendChild(checkbox);
container.appendChild(p);
console.log(document.getElementById("myCheck" + i));
document.getElementById("myCheck" + i).addEventListener("click", readBox);
}
}
function readBox(){
getId();
theId = theId.substring(7);
console.log("idString: " + idString);
var valueOfId = document.getElementById("idString").checked;
}
and the HTML reads:
<section id="container">
</section>
/EDIT
Any suggestions?

Couple things:
You don't need document.getElementById, since you have checkbox already.
As stated by others, to use document.getElementById, you need to set a id to the checkbox Element. And you also need to add the element to the document.
checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "idString"
console.log(checkbox.checked)
document.body.appendChild(checkbox)
console.log(document.getElementById("idString").checked)

Actually, it's not that the property checked is null, your parent object is null.
I mean, this part:
document.getElementById("idString")
is returning null, so it can't access the checked property.
You need to first set the element's id with this
checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.setAttribute("id", "idString");
document.body.appendChild(checkbox)
var valueOfId = document.getElementById("idString").checked;
Then you should be able to access the value

In order to work you id first need create the attributes for your element like this.
You cant call by id if it isnt instantiate. Try out.
HTML
<div id="content"></div>
JAVASCRIPT
checkbox = document.createElement("input");
checkbox.setAttribute("id", "idString");
checkbox.setAttribute("type", "checkbox");
checkbox.setAttribute("value", "0");
var element = document.getElementById("content");
element.appendChild(checkbox);
var valueOfId = document.getElementById("idString").value;
console.log(valueOfId);

Display new text input

I got a question regarding my code.
I got this function which opens a new window and creates a text input.
Now I am trying to display the new entered text in the new window but unfortunately it does not work..
Thank you very much in advance
Text:
<input type="submit" value="Send" onclick="myAlert()">
<script>
function myAlert()
{
var NewWindow= window.open();
var nameValue = document.getElementById("vname").value;
NewWindow.document.write(nameValue);
var input = document.createElement("input");
input.type = "text";
var btn = document.createElement("BUTTON");
var t = document.createTextNode("Send");
NewWindow.document.body.appendChild(input);
btn.appendChild(t);
NewWindow.document.body.appendChild(btn);
}
</script>

You don't have any input tag with id vanme . So the line,
var nameValue = document.getElementById("vname").value;
will definitely throw an error. Rightclick>Inspect Element > Console and see the error.
The code should work fine if you set an input tag with id vname .

Try this:-
output = 'Hello, World!';
window.open().document.write(output);
link:-Add content to a new open window

How to insert dynamically added text boxes into MySQL database

I used Javascript to dynamically add textbox in order for the user to add more items in one process. Here's the code that add textboxes:
<script type="text/javascript">
var quantity = document.getElementById('quantity');
var item = document.getElementById('item');
var serial = document.getElementById('serial');
var property = document.getElementById('property');
document.getElementById('add').onclick = function () {
var input = document.createElement('input'),
div = document.createElement('div');
input.type = "text";
input.setAttribute("name", "quant");
div.appendChild(input);
quantity.appendChild(div);
var input2 = document.createElement('input'),
div2 = document.createElement('div');
input2.type = "text";
input2.setAttribute("name", "items");
div.appendChild(input2);
item.appendChild(div);
var input3 = document.createElement('input'),
div3 = document.createElement('div');
input3.type = "text";
input3.setAttribute("name", "serno");
div.appendChild(input3);
serial.appendChild(div);
var input4 = document.createElement('input'),
div4 = document.createElement('div');
input4.type = "text";
input4.setAttribute("name", "proper");
div.appendChild(input4);
property.appendChild(div);
};
</script>
When the user clicks the "Add Text" button, one set (four textboxes) will appear. My problem is even if the user clicks and inputs data into those textbox, it will only insert one set of data (which was the last set of input). Its because of the "name" of the textbox are the same. How can I insert those multiple data? Or how can I set a unique name for the added textbox in order to insert them into the database?

You'll want to change the names with a [] appended to it. This will pass an array to the PHP on form submit.
input.setAttribute("name", "quant[]");
To get the values in PHP,
$quant_values = $_GET['quant']; // array of values
$value_one = $quant_values[0];
You will need to implement a loop to iterate through the values.