Displaying all selected data - javascript

Everytime a user add a certain employee using a dropdownlist, It will be added and displayed. Here is my code.
<p id="employeeData"></p>
<center>
#Html.DropDownList("employee")
<input type="button" value="Add" onclick="insertNew();" />
</center>
<script type="text/javascript">
function insertNew() {
var emp_data = [];
//getting the selected value
var emp_name = document.getElementById("employee");
var selected_value = emp_name.options[emp_name.selectedIndex].value;
var selected_text = emp_name.options[emp_name.selectedIndex].text;
// getting the id where to show the output
var messageBox = document.getElementById("employeeData");
emp_data.push(selected_text);
messageBox.innerHTML = "";
messageBox.innerHTML += " " + emp_data + "<br/>";
}
</script>
But then, the output I was expecting was not achieve. Only the current selected data will be displayed and the previous one was replaced.
Any Ideas?
Thanks.

Related

Javascript - radio buttons onlick not working

I am stuck with a problem. I want to add call functions based on selection in radio button. But one of radio buttons doesn't work at all (not calling the function), other is not checked when clicked. Here is my code:
function clearElement(element_id){
document.getElementById(element_id).remove();
}
function createCheck(){
if (!document.getElementById('check')){
var btn = "<button onclick=\"checkData()\" id='check'>Check</button>";
document.getElementById("added").innerHTML += btn;
}
}
function addElements(){
var added0 = "<p>Choose the filling method:</p><br>";
var added1 = "<input type=\"radio\" value='Auto' id='auto' name=\"auto_manual\">I have ID</input>";
var added2 = "<input type=\"radio\" value='Manually' id='manual' name=\"auto_manual\"> Enter data manually</input><br>";
var added3 = "<p>Identification Code</p><br><input type=text id='ID'><br>";
var added4 = "<p>Enter your email address:</p><br><input type='email' id='mail' autocomplete=\"on\"></input><br>";
var added5 = "<button onclick=\"fillIn()\">Continue</button>";
document.body.innerHTML += "<div id=\"added\">" + added0 + added1 + added2 + added3 + added4 + added5 + "</div>";
var f0 = document.getElementById('auto');
var f1 = document.getElementById('manual');
f0.onclick = function() { createCheck();};
f1.onclick = function() { clearSelect('check');};
}
I want it to work the following way: if a user chooses "I have ID" option, the radio button is checked and the button "Check" will be created. If "Enter data manually", the button "Check" will disappear if exists.
Could you, please, help me with it?
Update (HTML):
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<title>Demo Web App</title>
</head>
<body>
<h1>Template Creator Bot</h1> <br> <br>
<script>
...
</script>
<div id='change'>
<select name="docs" id="selectedTemplate">
<option value="Order">Order</option>
<option value="Complaint">Complaint</option>
<option value="Other">Other</option>
</select>
<button onclick="addElements()">Next</button>
</div>
</body>
</html>
It would be better if you made the button element once and just toggled its visibility on demand.
There are also better strategies to compose dynamic html on your DOM instead of using innerHTML like using <template> or creating elements with document.createElement().
By the way, addressing specifically your issue here, I made a demo that adds the button in the main addElements() routine, and two functions: showButton() and hideButton() that will be called by the click event handlers added to the two radio options.
addElements();
function showButton(){
const target = document.getElementById('check');
if (target.classList.contains('hide'))
target.classList.remove('hide');
}
function hideButton(){
const target = document.getElementById('check');
if (!target.classList.contains('hide'))
document.getElementById('check').classList.add('hide');
}
function addElements(){
var added0 = "<p>Choose the filling method:</p><br>";
var added1 = "<input type='radio' value='Auto' id='auto' name='auto_manual'>I have ID</input>";
var added2 = "<input type='radio' value='Manually' id='manual' name='auto_manual'>Enter data manually</input><br>";
var added3 = "<p>Identification Code</p><br><input type=text id='ID'><br>";
var added4 = "<p>Enter your email address:</p><br><input type='email' id='mail' autocomplete='on'></input><br>";
var added5 = "<button onclick='fillIn()'>Continue</button>";
var added6 = "<button class='hide' onclick='checkData()' id='check'>Check</button>";
document.body.innerHTML +=
"<div id='added'>" + added0 + added1 + added2 + added3 + added4 + added5 + added6 + "</div>";
/*
Here adding the click event listener for the two radio options..
in the rest of your generated html you used the approach of defining handlers on html
so it's not clear why here you opted to do it programmatically for the radio options..
Anyway I only slightly changed the approach using addEventListener instead.
*/
var f0 = document.getElementById('auto');
var f1 = document.getElementById('manual');
f0.addEventListener('click', function() { showButton();});
f1.addEventListener('click', function() { hideButton();});
}
.hide{
display: none;
}
input[type=radio]{
cursor: pointer;
}

Dynamically add Radio Button Labels - JavaScript

Having trouble getting the a label dynamically assigned to a radio button. all of the code is working except the innerHTML. Cannot spot why. Thanks in advance for any help.
<!DOCTYPE html>
<html>
<body>
<form id="myForm">
</form>
<br>
<button onclick="addRadio()">Add radio buttons!</button>
<script>
// This function will add a new Radio buttons to the above
count = 0;
function addRadio()
{
count++;
//Create input type
var myRadio = document.createElement("input");
var myName = document.createElement("testRadio");
var myBreak = document.createElement("br");
var myLabel = document.createElement("label");
var labelMessage = "Radio Button: " + count;
var labelId = "l" + count;
myRadio.setAttribute("type", "radio");
myRadio.setAttribute("name", "testRadio");
myRadio.setAttribute("value", "Radio Button: " + count);
myLabel.setAttribute("for", labelId);
myRadio.setAttribute("id", labelId);
document.getElementById('myForm').appendChild(myRadio);
document.getElementById('myForm').appendChild(myLabel);
document.getElementById('myForm').appendChild(myBreak);
document.getElementById('labelId').innerHTML = 'labelMessage';
}
</script>
</body>
</html>
The label element might not be inserted by the next line itself. It is better to do
myLabel.innerHTML = 'labelMessage';
As you have the element already in a variable.
There is a tiny error in the code.
Before the .innerHTML you get the element by id 'labelId' as a string.
You need to select with the labelID as a var so:
document.querySelector(`label[for="${labelId}"]`).innerHTML = labelMessage;

How can i add a bulleted list to my java script code. Also how do i center the the user input like <center> but in javascript

i would like to know how i can make it so when people input something it goes in a bulleted list, in the middle of the screen. Like but in javascript?
I got my code from: How to display input back to the user on an HTML page?
<html><head></head><body>
<input id="title" type="text" maxlength="276" onkeyup="Allow()" >
<input type="submit" value="Save/Show" onclick="insert()" />
<div id="display"></div>
<script type="text/javascript">
var titles = [];
var titleInput = document.getElementById("title");
var messageBox = document.getElementById("display");
function Allow(){
if (!user.title.value.match(/[a-zA-Z1-9]$/) && user.title.value !="") {
user.title.value="";
alert("Please Enter only alphabets");
}
}
function insert () {
titles.push(titleInput.value);
clearAndShow();
}
function clearAndShow () {
titleInput.value = "";
messageBox.innerHTML = "";
messageBox.innerHTML += "To Do: " + titles.join(", ") + "<br/>";
}
</script>
</body>
</html>
jsbin example: https://jsbin.com/xahidolibu/edit?html,output
I've modified your code to:
create a list instead of comma deliminated string on clearAndShow()
added css to center align the list
jsbin: https://jsbin.com/lamebopidu/1/edit?html,css,output

populating a dynamic form with javascript

I am trying to get a forloop with input elements to run between a form and create a form dynamically with javascript
1: in scenario one , the form in the script is getting closed before the input elements populate.
2: in scenario two , when i put the for loop variable between the form ,the error that comes is undefined .
PLEASE HELP
SCENARIO ONE
<form>
No of Feilds <input type="text" id= "numberoffeilds">
<input type="button" value = "Create Feilds" onclick= "addfeilds1();">
</form>
<div id= "div4" style= "color:gray"></div>
<script>
function addfeilds1()
{
var totalfeilds = document.getElementById("numberoffeilds").value;
var i;
document.getElementById("div4").innerHTML += '<form action= "issue.html" method = "POST">';
for(i=0;i<totalfeilds;i++)
{
document.getElementById("div4").innerHTML += '<input type = "text">';
}
document.getElementById("div4").innerHTML += '<input type = "submit" value="submit" name="submit">';
}
</script>
SCENARIO TWO
<form>
No of Feilds <input type="text" id= "numberoffeilds">
<input type="button" value = "Create Feilds" onclick= "addfeilds2();">
</form>
<div id= "div4" style= "color:gray"></div>
<script>
function addfeilds2()
{
var totalfeilds = document.getElementById("numberoffeilds").value;
var i;
function forloop()
{
for(i=1 ;i<totalfeilds;i++)
{
document.getElementById("div4").innerHTML += '<input type = "text">';
}
}
var loopvar = forloop();
document.getElementById("div4").innerHTML += '<form action= "issue.html" method = "POST">'+
'<input type = "text">'+
loopvar + // it shows the loop as undefined
'<input type = "text">'+
'<input type = "text">'+
'<input type = "submit" value="submit" name="submit">';
}
</script>
You need to build the HTML elements in a string first and add them to the div as a last step.
Fixed scenario 1:
function addfeilds1()
{
var totalfeilds = document.getElementById("numberoffeilds").value;
var i;
var htmlString = "";
htmlString += '<form action= "issue.html" method = "POST">';
for(i=0;i<totalfeilds;i++)
{
htmlString += '<input type = "text">';
}
htmlString += '<input type = "submit" value="submit" name="submit">';
document.getElementById("div4").innerHTML = htmlString;
}
This prevents the form tag from being closed before it's populated with inputs.
Fixing scenario 2:
function forloop()
{
var htmlString = "";
for(i=1 ;i<totalfeilds;i++)
{
htmlString += '<input type = "text">';
}
return htmlString; // now forloop returns a string that can be added to the element. It no longers returns undefined.
}
Actually scenario 2 was fixing scenario 1, but you didn't include a return in your function. If you expect a function to create some text and concat that into a string you need your function to return a string.
Third example (advanced)
function addfeilds1()
{
var totalFields = parseInt(document.getElementById("numberoffeilds").value); //parse integer from value
if (isNaN(totalFields) || totalFields < 1)
{
//check if the input is valid, if not alert.
alert("Value is not a valid number or lower than 1.");
}
var container = document.getElementById("div4");
//create the form
var form = document.createElement("form");
form.setAttribute("action", "issue.html");
form.setAttribute("method", "POST");
for(var i=0; i<totalFields; ++i)
{
var node = document.createElement("input");
node.setAttribute("name", "field[]"); //this sends a array to the request page containing all input field values.
form.appendChild(node); //add the fields to the form.
}
//create the submit button.
var button = document.createElement("input");
button.setAttribute("type", "submit");
button.setAttribute("value", "submit");
button.setAttribute("name", "submit");
form.appendChild(button);
container.appendChild(form); //append the form to the div.
}

Add input fields to div container (javascript)

I want to add some html data to the end of a div container.
Currently, I do it with using innerHtml:
<script language="javascript">
var addid = 0;
function addInput(id){
var docstyle = document.getElementById('addlist').style.display;
if(docstyle == 'none')
document.getElementById('addlist').style.display = '';
addid++;
var text = "<div id='additem_"+addid+"'><input type='text' size='100' value='' class='buckinput' name='items[]' style='padding:5px;' /> <a href='javascript:void(0);' onclick='addInput("+addid+")' id='addlink_"+addid+"'>add more</a></div>";
document.getElementById('addlist').innerHTML += text;
}
</script>
<div id="addlist" class="alt1" style="padding:10px;">
New list items are added to the bottom of the list.
<br /><br />
</div>
The problem is that the value that was entered in the input fields is removed once another input field is added.
How can I add content without and keep the entered data?
PS: I do not use jquery.
innerHTML changes reset form elements. Instead use appendChild. See this demo http://jsfiddle.net/5sWA2/
function addInput(id) {
var addList = document.getElementById('addlist');
var docstyle = addList.style.display;
if (docstyle == 'none') addList.style.display = '';
addid++;
var text = document.createElement('div');
text.id = 'additem_' + addid;
text.innerHTML = "<input type='text' value='' class='buckinput' name='items[]' style='padding:5px;' /> <a href='javascript:void(0);' onclick='addInput(" + addid + ")' id='addlink_" + addid + "'>add more</a>";
addList.appendChild(text);
}
Take a look at this http://reference.sitepoint.com/javascript/Node/appendChild
So something like
document.getElementById('addlist').appendChild(text);

Categories