How to populate an html table with Javascript form elements? - javascript

Essentially I want to display 10 lines of a table and have them update with people's names as they submit forms. So essentially I need to write the form inputs to the table cells. WHen more than 10 people fill out the form I want the table to only show 10 so it will bump one of the earlier ones. So far this is what I am trying but I don't really know how to proceed.
<html>
<h2>Change Our Lights:</h2>
<form name="leds" id="ledSend" method="get" target="_blank" action="https://agent.electricimp.com/Fk43xPMkSrWF">
Lamp Control: <input type="radio" name="led" value="0" checked>Off
<input type="radio" name="led" value="1">On<br>
How long should the Lights stay on? <input type="text" name="timer" value="10">seconds<br>
Your name? For Our Records <input id="name" type="text" name="user" placeholder="Your name here"<br>
<br>
<input type="submit" value="Update!" onclick="updateTable();return false;"/>
</form>
<script type="text/javascript">
function updateTable(){
if (!document.getElementsByTagName) return;
tabBody=document.getElementsByTagName("tbody").item(0);
row=document.createElement("tr");
cell1 = document.createElement("td");
textnode1=document.forms['leds'].elements[3].value;
cell1.appendChild(textnode1);
row.appendChild(cell1);
tabBody.appendChild(row);
}
</script>
<body>
<h1>Who has Changed Our Lights?</h1>
<table border='1' id='mytable'>
<tbody>
<tr>"This Could Be You"</tr>
</tbody>
</table>
</body>
</html>
I can't get the form elements to appear in the table at all.

Your HTML had some typos and other problems. Your JavaScript was on the right track, but overly complicated (and generally it is good practice to put all of it in the head section of the HTML). Here is a workable test-page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test Page</title>
<script type="text/javascript"> <!--
var tabBody, row, cell;
function updateTable(){
tabBody=document.getElementById("editable");
row=document.createElement("tr");
cell = document.createElement("td");
cell.innerHTML=document.forms['leds'].elements[3].value;
row.appendChild(cell);
if(tabBody.childNodes.length==10)
tabBody.removeChild(tabBody.childNodes[0])
tabBody.appendChild(row);
}
// -->
</script>
</head>
<body>
<h2>Change Our Lights:</h2>
<!-- <form name="leds" id="ledSend" method="get" target="_blank" action="https://agent.electricimp.com/Fk43xPMkSrWF"> -->
<form name="leds" id="ledSend" action="" onsubmit="return false;">
Lamp Control: <input type="radio" name="led" value="0" checked />Off
<input type="radio" name="led" value="1" />On<br>
How long should the Lights stay on? <input type="text" name="timer" value="10" />seconds<br>
Your name? For Our Records <input id="name" type="text" name="user" placeholder="Your name here" /><br>
<br>
<input type="submit" value="Update!" onclick="updateTable();return false;"/>
</form>
<h1>Who has Changed Our Lights?</h1>
<table border='1'>
<thead><tr><th>This Could Be You</th></tr></thead>
<tbody id="editable"></tbody>
</table>
</body>
</html>

Related

Set up a button listener

I have a problem with buttons on my website. I have taken it from a colleague and want to change the function of the keys.
At the moment this is solved directly in HTML. That looks like this:
<table class="formButtons">
<tr>
<td>
<form method="post">
<p> <input name='"Variable".allowStart' value="1" type="hidden"> </p>
<p> <input class="Start" value="Start" type="submit"> </p>
</form>
</td>
<td>
<form method="post">
<p> <input name='"Variable".allowStart' value="0" type="hidden"> </p>
<p> <input class="Stop" value="Stop" type="submit"> </p>
</form>
</td>
</tr>
</table>
When pressing the Start or Stop button, the whole page is reloaded. I do not want that.
As you can see, my variable '"Variable".allowStart"' is called and set to value=1. Now I want to set the value of the variable to 1 in Javascript. But I do not know how. Can you help me?
And please, detailed answers, I am a total beginner in programming.
Extra information:
'"Variable".allowStart'
is a variable that I get from my Siemens PLC.
It works as shown in the example. All I have to do is add the variable as a comment in the HTML file. Like this:
<!-- AWP_In_Variable Name='"Variable".allowStart' -->
I don't understand your '"Variable".allowStart' , but if you are able to use it in your javascript then you can proceed with this answer.
To stop the Start & Stop button from reloading the page, you can prevent the default behavior of the input elements by using preventDefault() and do your desired stuff from there.
Check out the modified HTML & the javascript for this:
window.onload = function (){
var start = document.getElementById('Start');
var stop = document.getElementById('Stop');
start.onclick = function (e) {
e.preventDefault();
//add desired code here
console.log('Clicked Start');
}
stop.onclick = function (e) {
e.preventDefault();
//add desired code here
console.log('Clicked Stop');
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weird Buttons</title>
</head>
<body>
<table class="formButtons">
<tr>
<td>
<form method="post">
<p> <input name='"Variable".allowStart' value="1" type="hidden"> </p>
<p> <input id="Start" class="Start" value="Start" type="submit"> </p>
</form>
</td>
<td>
<form method="post">
<p> <input name='"Variable".allowStart' value="0" type="hidden"> </p>
<p> <input id="Stop" class="Stop" value="Stop" type="submit"> </p>
</form>
</td>
</tr>
</table>
</body>
</html>

HTML/Javascript && Condition in an If Statement

I am sure there is a very simple fix to this and that I am most likely not doing this the most efficient way possible.
I am trying to create an if statement that will check to see if multiple radio buttons are selected in multiple questions. If they are selected, I would like an alert box to pop up with a certain message. There will be many selection combinations possible so I am assuming many if/else statements(?)
The Javascript in question is located at the bottom.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Spigit Input Form</title>
<meta name="description" content="Spigit Input Form">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<link rel="stylesheet" href="Project_File_CSS.css">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="jquery_spigit.js"></script>
</head>
<body>
<!--<script src="js/scripts.js"></script>
<script src="New_File_JS.js"></script>-->
<script type="text/javascript" src="selection_storage.js"></script>
<!--<script type="text/javascript" src="recommendation_logic.js"></script>-->
<!---------------------------------------------------------Operating Company Question----------------------------------->
<form name="operatingCompany">
<h3>What Operating Company Are You Employeed With?</h3>
<input type="radio" name="opco" value="GPC" >GPC</br>
<input type="radio" name="opco" value="APC" >APC</br>
<input type="radio" name="opco" value="MPC" >MPC</br>
<input type="radio" name="opco" value="Gulf" >Gulf</br>
<input type="radio" name="opco" value="SCS" >SCS</br></br>
<input type="button" value="Display User Selection" onclick=get_opco() />
</form>
<p id="opco_result"> </p></br>
<!---------------------------------------------------------Prototyped Question----------------------------------->
<form name="prototyped">
<h3>Has the innovation been prototyped?</h3>
<input type="radio" name="prototyped" value="Yes" >Yes</br>
<input type="radio" name="prototyped" value="No" >No</br></br>
<input type="button" value="Display User Selection" onclick=get_prototype() />
</form>
<p id="prototyped_result"> </p></br>
<!--------------------------------------------------------Adopted or Tested Question---------------------------->
<form name="adopted_tested">
<h3>Has the innovation been adobpted or tested?</h3>
<input type="radio" name="adopt" value="Yes" >Yes</br>
<input type="radio" name="adopt" value="No" >No</br></br>
<input type="button" value="Display User Selection" onclick=get_adopt_test() />
</form>
<p id="adopted_tested_result"> </p></br>
<!------------------------------------------------------Can it make money Question------------------------------->
<form name="makeMoney">
<h3>Is this a product or service that can make money?</h3>
<input type="radio" name="money" value="Yes" >Yes</br>
<input type="radio" name="money" value="No" >No</br></br>
<input type="button" value="Display User Selection" onclick=get_money() />
</form>
<p id="makeMoney_result"> </p></br>
<!---------------------------------------------------Alabama Power Specific Question----------------------------->
<h3>What is your innovative idea to help Alabama Power improve safety, grow revenue, reduce cost, or increase operational efficiency?</h3>
<textarea id="alabamaPower" rows="8" cols="50">
</textarea> </br></br>
<input type="button" value="Display User Input" onclick=textareacapture() />
<p id="result"> </p></br>
<!------------------------------------------------IT Specific Question------------------------------------------->
<form name="innovativeTechnology">
<h3>Is your innovation an innovative technology or process that boosts the company's productivity or brings additional value from a vendor relationship?</h3>
<input type="radio" name="innovative" value="Yes" >Yes</br>
<input type="radio" name="innovative" value="No" >No</br></br>
<input type="button" value="Display User Selection" onclick=get_innovative() />
</form>
<p id="innovativeTechnology_result"> </p></br>
<input type="button" value="Submit Form" onclick=get_recommendation() />
<script>
function get_recommendation(){
if((document.operatingCompany.opco[0,1,2,3,4].checked) && (document.prototyped.prototyped[0,1].checked) && (document.adopted_tested.adopt[0,1].checked))
{
alert("Everyday Solutions");
}
}
</script>
</body>
</html>
Use this test to identify whether any radiobutton has been checked:
($(":checked").length > 0)
You may refine the selector if you are only interested in a subset of the radio buttons or checkboxes on the page.
Have you checked at run time what the values are in your variables in the if? Also, currently you are checking that all of them are checked. Do you want to check if some of them are checked?
Also, are you sure you want to use an alert. A modal is really preferable. An alert will block the event loop.
Logical and(&&)
if (x>5 && x<10)
{
alert("your enter value between range 6 to 9");
}
Here, is javascript code you enter only 6 to 9 between range
And what about betwwen like ine PHP/C ?
if (5 < x < 10) {
...
}

Adding HTML fields with Add user Button

I want to add fields in my HTML code via an "ADD USER button such that all the validations done in the First three fields Email Name & Phone number should be same in the new generated 3 fields.I have used Jquery validate plugin.
My HTML code is as follows
<!DOCTYPE html>
<!--<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>-->
<html>
<head>
<meta charset="utf-8">
<title>Manageuser_addUser</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!--<script src="plugin/validation/dist/additional-methods.min.js"></script>-->
<script src="plugin/validation/dist/jquery.validate.min.js"></script>
<script src="plugin/utilities/validationutils.js"></script>
</head>
<body>
<div>
<h1>Manage Users!</h1>
<form id="formRegistration" method="post" action="">
<div>
<label for="email">Email Id*</label>
<input id="email" type="email" name="email" value="" placeholder="Enter your Email Id" />
</div>
<div>
<label for="name">Name*</label>
<input id="name" type="text" name="name" value="" placeholder="Enter your Name" />
</div>
I am trying to use this section of js and J query but its not working
<script type="text/javascript">
var i = 3;
function addField(tableid)
{
var row = document.createElement("tr");
var col1 = document.createElement("td");
var col2 = document.createElement("td");
var input = document.createElement("input");
input.setAttribute("type","text");
input.setAttribute("name","field" + i );
col1.appendChild(document.createTextNode("Field" + i));
col2.appendChild(input);
row.appendChild(col1);
row.appendChild(col2);
var table = document.getElementById(tableid);
table.appendChild(row);
i++;
}
<div>
<label for="phone">Phone</label>
<input id="phone" type="text" name="phone" value="" placeholder="+xx-xxxxxxxxxx" />
</div>
<div>
<input type="submit" name="add" value="Add User" id="publiclogin">
</div>
<div>
<input type="submit" name="add" value="Add more Fields" id="">
</div>
</form>
</div>
</body>
Your javascript code seems incomplete, there should be:
$("#formRegistration").validate();
within the script tags

Disable Multiple Form and enable one form Based on Condition in Javascript or jquery

I have four form like form-1 , form-2 , form-3 , form-4 and three Buttons as Button-1, Button-2 , Button-3.
When first jsp page load it has form elements which will display on the screen.
Now my question is when i click to button-2 it should display form-2 and disable other three forms (form-1 , form-3 , form-4 ).Same case with the others two buttons.
Please provide me proper solution using javascript or jquery.
I am using jsp page for html form design.
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript">
$("#b1").click(function(){
$("#f2,#f3,#f4").hide();
$("#f1").show();
});
$("#b2").click(function(){
$("#f1,#f3,#f4").hide();
$("#f2").show();
});
$("#b3").click(function(){
alert("jj");
$("#f1,#f2,#f4").hide();
$("#f3").show();
});
</script>
<style type="text/css">
#f2,#f3,#f4{
display: none;
}
</style>
</head>
<body >
<form id="f1">
<input type="text" name="name" placeholder="f1" >
</form>
<form id="f2">
<input type="text" name="name" placeholder="f2" >
</form>
<form id="f3">
<input type="text" name="name" placeholder="f3" >
</form>
<form id="f4">
<input type="text" name="name" placeholder="f4" >
</form>
<input type="button" value="b1" id="b1" >
<input type="button" value="b2" id="b2">
<input type="button" value="b3" id="b3">
</body>
</html>
I have done the coding as per above answer but i am not able to get the different form when i click. I check with alert message also the click is not working . Please tell me where i am doing wrong.
here is the sample.
live Demo : http://jsfiddle.net/a6NJk/626/
Html
You need four forms and three buttons for this:
<form id="f1">
<input type="text" name="name" placeholder="f1" >
</form>
<form id="f2">
<input type="text" name="name" placeholder="f2" >
</form>
<form id="f3">
<input type="text" name="name" placeholder="f3" >
</form>
<form id="f4">
<input type="text" name="name" placeholder="f4" >
</form>
<input type="button" value="b1" id="b1" >
<input type="button" value="b2" id="b2">
<input type="button" value="b3" id="b3">
Jquery
When you will click in the button you need to show corresponding form and hide all other form.
see jquery api : http://api.jquery.com/
$("#b1").click(function(){
$("#f2,#f3,#f4").hide();
$("#f1").show();
})
$("#b2").click(function(){
$("#f1,#f3,#f4").hide();
$("#f2").show();
})
$("#b3").click(function(){
$("#f1,#f2,#f4").hide();
$("#f3").show();
})
CSS
#f2,#f3,#f4{
display: none;
}
If you wanted to use anchor tag instead of button then change your html :
<form id="f1">
<input type="text" name="name" placeholder="f1" >
</form>
<form id="f2">
<input type="text" name="name" placeholder="f2" >
</form>
<form id="f3">
<input type="text" name="name" placeholder="f3" >
</form>
<form id="f4">
<input type="text" name="name" placeholder="f4" >
</form>
<a href="javascript:void(0)" id="b1" > b1</a >
<a href="javascript:void(0)" id="b2" > b2</a>
<a href="javascript:void(0)" id="b3" > b3</a >
Demo : http://jsfiddle.net/a6NJk/627/

unable to add new text box on onclick() using javascript and disable an element

I am not able to add a new input box after the onclick event is called and is there way to disable the select options after the input box appears? I am sorry for such a noob question but I am at the dead end here, been trying this for an hour. Please link me to a place where I can easily learn JS with examples.
<script>
function funcGet(val)
{
if(val=="Create new category")
{
var element = document.createElement("input");
element.setAttribute("type", "input");
element.setAttribute("name", "new_cat");
var foo = document.getElementById("cat");
foo.appendChild(element);
}
}
</script>
<div name="cat">
<form method="post" action="">
<input type="text" placeholder="Enter a topic name" name="word"><br/>
<select name = "category" onchange="funcGet(this.value);">
<?php
displayCat();
?>
</select>
</div>
<select name = "site_type">
<?php
displaySitetype();
?>
</select>
<input type="submit" value="Submit data">
</form>
Try changing <div name="cat"> to
<div id="cat">
.getElementById only works on IDs,
as in
document.getElementById("cat");
If you want to leave <div name="cat"> you should use .getElementsByTagName[0] instead.
As foir a a link to learn JavaScript by example, I recommend the W3Schools JavaScript Tutorial, as they let you try out code as you learn it on their website. Once you become more familiar, you can reference the Mozilla Developer Network.
Here
var foo = document.getElementById("cat"); is giving null
There is no element exist with id cat
Error is:TypeError: foo is null
Change this:
<div name="cat">
To this:
<div id="cat">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>
Untitled Document
</title>
<script>
function generateRow() {
var d=document.getElementById("div");
d.innerHTML+="<td><input type='text'<td><input type='text'<td><input type='text' name='food'name='food'name='food'name='food'>";
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<label>
<input name="food" type="text" id="food" />
</label>
<td>
<input name="food" type="text" id="food" />
</td>
<td>
<input name="food" type="text" id="food" />
</td>
<div id="div">
</div>
<td>
<input type="button" value="Add" onclick="generateRow()"/>
</td>
<td>
<label>
<input type="submit" name="Submit" value="Submit" />
</label>
</td>
</form>
</body>

Categories