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.
Related
I am pretty new to Javascript. I am trying to add a form element to my Javascript Quiz results page.
function viewResultPage() {
console.log("viewResult Page: ", currentQuestionIndex, " ", timeleft);
// inner html Sets or returns the content of an element
welcometxt.innerHTML = ""
var allDoneEl = document.createElement("span");
allDoneEl.innerHTML = "Quiz is over and final score is: " + timeleft;
welcometxt.appendChild(allDoneEl);
// Create a form
const f = document.createElement("form");
// Add it to the document body
document.body.appendChild(f);
}
What I am trying to do is following the results page showing "your score is "
I need a form element for the users to enter their initials and submit.
const f = document.createElement("form");
//Add an input element to form
const input = document.createElement("input");
f.appendChild(input);
// Add it to the document body
document.body.appendChild(f);
// create a form for accepting the initial
var inputForm = document.createElement("form");
inputForm.setAttribute("id", "inputForm");
//Add an input element to form
var inputText = document.createElement("input");
inputText.setAttribute("type", "text");
inputText.setAttribute("id", "initialstext");
inputText.setAttribute("placeholder", "Enter your initials");
inputForm.appendChild(inputText);
// Add it to the document body
scoresSection.appendChild(inputForm);
// create a button for submitting the form
var submitBtn = document.createElement("button");
submitBtn.setAttribute("id", "submitBtn");
submitBtn.setAttribute("style", "float: center; position: relative;");
submitBtn.innerHTML = "Submit";
scoresSection.appendChild(submitBtn);
I tried this and it worked. Thank you #MrCano369
I try to generate a text field in a table:
The table gets bigger with the input of the user that's why I cant just write the
input syntax in the html document, because the cell isn´t generated from the beginning.
function tableAdd() {
var table = document.getElementById("table");
var titel = document.getElementById("Titel").value;
var description = document.getElementById("Description").value;
var row = table.insertRow();
var projectCell=row.insertCell(0);
projectCell.innerHTML = titel;
// down here is the problem
var x =row.insertCell(1);
x.innerHTML = document.createElement("INPUT")
x.innerHTML.setAttribute("type", "text");
}
The problem is that x.innerHTML is a string, not a html element. You need to set attribute on html element, not string. You can do like this:
var x =row.insertCell(1);
var y = document.createElement("INPUT");
y.setAttribute("type", "text");
x.appendChild(y);
You are trying to assign a reference of HTMLInputElement which is returned from the call to document.createElement("input"); to the non-existent innerHTML property of a HTMLTableRowElement (newRow in my example) reference, returned by insertCell(1);.
Instead you can assign any text value to the value attribute of the HTMLInputElement(input variable in my example) and append the dynamic input to the newly created cell.
function tableAdd() {
var table = document.getElementById("table");
var titel = document.getElementById("Titel").value;
var description = document.getElementById("Description").value;
var row = table.insertRow();
var projectCell=row.insertCell(0);
projectCell.innerHTML = titel;
var newRow =row.insertCell(1);
var input = document.createElement("input");
input.type = "text";
input.value= description
newRow.appendChild(input);
}
tableAdd();
<body>
<input type="text" id="Titel" value="test"/>
<input type="text" id="Description" value="test"/>
<table id="table">
</table>
<button onclick="tableAdd()">add</button>
</body>
Here is the reference documentation:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement/insertCell
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement
I have been working on a small contact form for a webpage and I used some code from a website to create the form. My problem is that the submit button wants to post the data and all is the submit button to create a message alert, and also redirect to another page after the message appears..
Any help would be greatly appreciated! Thanks!
here is the JS:
// Fetching HTML Elements in Variables by ID.
var x = document.getElementById("form_sample");
var createform = document.createElement('form'); // Create New Element Form
createform.setAttribute("action", ""); // Setting Action Attribute on Form
//createform.setAttribute("method", "post"); // Setting Method Attribute on Form
x.appendChild(createform);
var heading = document.createElement('h2'); // Heading of Form
heading.innerHTML = "Contact Form ";
createform.appendChild(heading);
var line = document.createElement('hr'); // Giving Horizontal Row After Heading
createform.appendChild(line);
var linebreak = document.createElement('br');
createform.appendChild(linebreak);
var namelabel = document.createElement('label'); // Create Label for Name Field
namelabel.innerHTML = "Your Name : "; // Set Field Labels
createform.appendChild(namelabel);
var inputelement = document.createElement('input'); // Create Input Field for Name
inputelement.setAttribute("type", "text");
inputelement.setAttribute("name", "dname");
createform.appendChild(inputelement);
var linebreak = document.createElement('br');
createform.appendChild(linebreak);
var emaillabel = document.createElement('label'); // Create Label for E-mail Field
emaillabel.innerHTML = "Your Email : ";
createform.appendChild(emaillabel);
var emailelement = document.createElement('input'); // Create Input Field for E-mail
emailelement.setAttribute("type", "text");
emailelement.setAttribute("name", "demail");
createform.appendChild(emailelement);
var emailbreak = document.createElement('br');
createform.appendChild(emailbreak);
var messagelabel = document.createElement('label'); // Append Textarea
messagelabel.innerHTML = "Your Message : ";
createform.appendChild(messagelabel);
var texareaelement = document.createElement('textarea');
texareaelement.setAttribute("name", "dmessage");
createform.appendChild(texareaelement);
var messagebreak = document.createElement('br');
createform.appendChild(messagebreak);
var submitelement = document.createElement('input'); // Append Submit Button
submitelement.setAttribute("type", "submit");
submitelement.setAttribute("name", "dsubmit");
submitelement.setAttribute("value", "Submit");
createform.appendChild(submitelement);
If I'm understanding your question correctly, you want the page to verify before submitting, correct?
If so, you can add a listener which optionally cancels the submit action.
createform.addEventListener("submit", function() {
return confirm("Continue?");
});
You can add an event listener for submit event on submit button. Prevent it's default behavior, show an alert and then redirect to whatever page you want
createform.addEventListener("submit", function(e) {
e.preventDefault();
var msg = window.confirm("Want to go to other page?");
if (msg) {
window.location.href = "url";
}
})
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);
}
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);