Is there a way to prevent email detection with javascript - javascript

I'm going to try to describe this the best I can. I have a form that the user fills out, when it confirms the users info, it then prints it out on a table, and the user may edit it directly on the table using the contendEditable attribute. The problem i'm having is if the user edits his/her email address, the browser detects it as an email address (since it's not in an input element) and doesn't pass the email through the form. All other values go through fine. I'm using PHP to process the form and just print out the fields to make sure it goes through properly.
The confirm page should like this:
John,Smith,JSMITH,abc#123.com,111-222-3345
But it looks like this:
John,Smith,JSMITH,null,111-222-3345
Any suggestions?
It would be easier if i posted my code so here it is:
HTML:
<html>
<head>
<script type = "text/javascript" src = "ext.js"></script>
</head>
<body>
<form name = "setupForm" id = "setupForm" action = "confirmSetup.php" method = "post">
<div id = "confirmInfo"></div>
<div id = "hiddenFields"></div>
</form>
</body>
</html>
/* I didn't put my full code on here as it is way too long.
But this HTML document is what is shown after input fields
have been previously submit, and this page is just to confirm
the user input.
*/
JS:
function verifyInfo(){ // This function is called when user submits all his info
var firstname = document.getElementById("txtFirstname").value;
var lastname = document.getElementById("txtLastname").value;
var username = document.getElementById("hdnUsername").value;
var email = document.getElementById("txtEmail").value;
var phone = document.getElementById("txtPhone").value;
var output = "";
output += "<table id = 'confirm'>";
output += "<tr>";
output += " <th>Firstname</th>";
output += " <td id = 'tdFirstname'>";
output += " <div onkeyup = 'updateUsername()' contentEditable>" + firstname + "</div>";
output += " </td>";
output += "</tr>";
output += "<tr>";
output += " <th>Lastname</th>";
output += " <td id = 'tdLastname'>";
output += " <div onkeyup = 'updateUsername()' contentEditable>" + lastname + "</div>";
output += " </td>";
output += "</tr>";
output += "<tr>";
output += " <th>Username</th>";
output += " <td id = 'tdUsername'>" + username + "</td>";
output += "</tr>";
output += "<tr>";
output += " <th>Email</th>";
output += " <td id = 'tdEmail'>";
output += " <div style = 'min-width:1px;' onkeyup = 'verifyEmail(this.parentNode.id,event)' contentEditable>" + email + "</div>";
output += " <div id = 'validInvalid'>";
output += " <span class = 'dgreen'><br/>Valid email!</span>";
output += " </div>";
output += " </td>";
output += "</tr>";
output += "<tr>";
output += " <th>Phone</th>";
output += " <td id = 'tdPhone'>";
output += " <div style = 'min-width:1px;' onkeyup = 'verifyPhone(this.parentNode.id,event)' contentEditable>" + phone + "</div>";
output += " <div id = 'validInvalid1'>";
output += " <span class = 'dgreen'><br/>Valid phone!</span>";
output += " </div>";
output += " </td>";
output += "</tr>";
output += "</table>";
output += "<input type = 'button' name = 'submitSetup' id = 'submitSetup' value = 'Get Set Up!' onclick = 'goToConfirm()'/>";
document.getElementById("confirmInfo").innerHTML = output;
}
/* The way that function works is it takes the inputted text,
and places it into the table. This table enables the user to dynamically make any
changes necessary right onto the table. The username is created from first initial
and last name, which is called on the 'updateUsername()' function, which I am leaving
out.
*/
function verifyEmail(id,e){
var unicode = e.charCode ? e.charCode : e.keyCode;
if((unicode < 37 || unicode > 40) && unicode != 9){ // This doesn't allow email to be verified if the arrow keys, or tab key is pressed
var email = document.getElementById(id).firstChild.firstChild.nodeValue;
var emailFilter = /^[^0-9][A-z0-9_]+([.]A-z0-9_]+)*[#][A-z0-9_]+([.][A-z0-9_]+)*[.][A-z]{2,4}$/;
if(!emailFilter.test(email)){ // Checks if valid email
document.getElementById("validInvalid").innerHTML = "<span class = 'red'><br/>Not a valid email!</span>";
}else{
document.getElementById("validInvalid").innerHTML = "<span class = 'dgree'><br/>Valid email!</span>";
}
}
disableButton(); //If email or phone is invalid, button will be disabled
}
function verifyPhone(id,e){
var unicode = e.charCode ? e.charCode : e.keycode;
if((unicode < 37 || unicode > 40) && unicode != 9)){
var phone = document.getElementById(id).firstChild.firstChild.nodeValue;
if(phone.length > 12){ // Doesn't let user put it more than 12 characters (xxx-xxx-xxxx)
var difference = phone.length - 12;
phone = phone.substr(0,phone.length - difference);
document.getElementById(id).firstChild.firstChild.nodeValue = phone;
}
var phoneFilter = /\d{3}\-\d{3}\-\d{4}/;
if(!phoneFilter.test(phone)){ // Checks for valid phone number
document.getElementById("validInvalid1").innerHTML = "<span class = 'red'><br/>Not a valid phone!</span>";
}else{
document.getElementById("validInvalid1").innerHTML = "<span class = 'dgreen'><br/>Valid phone!</span>";
}
}
disableButton();
}
function disableButton(){
var email = document.getElementById("tdEmail").firstChild.nextSibling.firstChild.className;
var phone = document.getElementById("tdPhone").firstChild.nextSibling.firstsChild.className;
if(email == "red" || phone == "red"){
document.getElementById("submitSetup").disabled = true;
}else{
document.getElementById("submitSetup").disabled = false;
}
}
function goToConfirm(){ //This is the function that goes to confirmsetup.php. it works fine if email isn't edited in table, but if email is edited, it doesn't work
var firstname = document.getElementById("tdFirstname").firstChild.firstChild.nodeValue;
var lastname = document.getElementById("tdLastname").firstChild.firstChild.nodeValue;
var username = document.getElementById("tdUsername").firstChild.nodeValue;
var email = document.getElementById("tdEmail").firstChild.firstChild.nodeValue;
var phone = document.getElementById("tdPhone").firstChild.firstChild.nodeValue;
var hiddenfields = document.getElementById("hiddenFields");
var input = "<input type = 'hidden' name = 'hdnFirstname' id = 'hdnFirstname' value = '"+firstname+"'/>";
input += "<input type = 'hidden' name = 'hdnLastname' id = 'hdnLastname' value = '"+lastname+"'/>";
input += "<input type = 'hidden' name = 'hdnUsername' id = 'hdnUsername' value = '"+username+"'/>";
input += "<input type = 'hidden' name = 'hdnEmail' id = 'hdnEmail' value = '"+email+"'/>";
input += "<input type = 'hidden' name = 'hdnPHone' id = 'hdnPhone' value = '"+phone+"'/>";
hiddenFields.innerHTML = input;
document.setupForm.submit();
}
/* That is the end of my javascript file, it's a lot,
but hopefully you can understand it
*/
Finally, the final php script is simple:
<?php
$fn = $_POST['hdnFirstname'];
$ln = $_POST['hdnLastname'];
$un = $_POST['hdnUsername'];
$em = $_POST['hdnEmail'];
$ph = $_POST['hdnPhone'];
die($fn.",".$ln.",".$un.",".$em.",".$ph);
?>
the firstname, lastname, username, and phone alway print out correctly.
When the email is not edited, it prints out correctly,
When the email is edited, it prints out as null.


This is incorrect, values are parsed as text. Please review the code and make sure that you parse correct form names from http request object. It should fix your issue.

Related

How to save radio buttons to local storage

i have a quiz with radio buttons ,sow i have to save the answears on my local storge ,but im stuck i don t know what else to do,im learnig sow dont hate me pls,tnx
This is my code sow far
<form id="quiz"> </form>
<script>
let object;
let httpRequest = new XMLHttpRequest();
httpRequest.open("GET", "quiz.json", true);
httpRequest.send();
httpRequest.addEventListener("readystatechange", function () {
if (this.readyState === this.DONE) {
object = JSON.parse(this.response);
console.log(object)
}
let json = object
let quiz = document.getElementById("quiz");
let keyList = Object.keys(json.quiz);
for (let i = 0; i < keyList.length; i++) {
let key = keyList[i];
let questionItem = json.quiz[key];
let html = "<div>";
html += "<div><h2>Question " + (i + 1) + ": " + questionItem.question + "</h2></div>";
html += "<div>";
for (let i = 0; i < questionItem.options.length; i++) {
html += "<div >";
html += "<input type=\"radio\" id=\"q\" checked=\"checked\" name=\"qzz" + key + "_option\" value=\"" + questionItem.options[i] + "\">" + questionItem.options[i] ;
html += "</div>";
}
quiz.innerHTML += html;
}
quiz.innerHTML += "<input type=\"submit\" value=\"submit\">";
function save() {
var g1 = document.querySelector('input[type="radio]');
g1 = (g1) ? g1.value : '';
localStorage.setItem("g1", g1);
}
});

You can simplify your AJAX dialog by using fetch() instead of new XMLHttpRequest();. I straightened out a few things in your code (also see the initial remarks in #brianagulo's answer) and prepared a little set of sample data to demonstrate the whole functionality of the quiz. The jsonplaceholder.typicode.com url only serves as a working json-server endpoint. The received data is actually ignored here.
In your "production version" you will need to un-comment the line:
localStorage.setItem("quiz",JSON.stringify(ans))
The checked answers where collected in an object doing
[...document.querySelectorAll('input[type=radio]:checked')].reduce((a,{name,value}) =>(a[name]=value,a), {});
This
collects all checked radio button inputs with (document.querySelectorAll('input[type=radio]:checked')),
converts the collection of DOM elements into a proper array (with [... ])and eventually
reduce()-s its elements into an object where the element names are the property names and the (input-)element values are the property values.
And also please note that you can only store strings in local storage. Therefore I converted the ans object into a JSON string before using it in the .setItem() method.
const Q = {
quiz: [{
question: "Where was the Boston tea party?",
options: ["New York", "Detroit", "Boston", "Reno"]
}, {
question: "Where would you find Venice Beach?",
options: ["Detroit", "Venice", "Paris", "Los Angeles"]
}, {
question: "Where would you find Queens?",
options: ["London", "Paris", "Stockholm", "New York"]
}, {
question: "Where is Greenwich Village?",
options: ["London", "Paris", "Stockholm", "New York"]
}, {
question: "Where would you find the Gateway Arch?",
options: ["St. Quentin", "St. Louis", "St. Anton", "San Francisco"]
}]
}, quiz = document.getElementById("quiz");
var url = "quiz.json";
// in your productive version: comment out the following line
url = "https://jsonplaceholder.typicode.com/users/7"; // functioning test URL for fetch
function save(ev) {
ev.preventDefault();
const ans=[...document.querySelectorAll('input[type=radio]:checked')].reduce((a,{name,value}) =>(a[name]=value,a), {});
// in Stackoverflow snippets you cannot use local storage, so here is console.log instead:
console.log(ans);
// in your productive version: un-comment the following line
// localStorage.setItem("quiz",JSON.stringify(ans))
}
fetch(url).then(r => r.json()).then(object => {
// remove the following line:
object = Q; // use the static quiz from defined in Q instead ...
let json = object
let keyList = Object.keys(json.quiz);
for (let i = 0; i < keyList.length; i++) {
let key = keyList[i];
let questionItem = json.quiz[key];
let html = "<div>";
html += "<div><h2>Question " + (i + 1) + ": " + questionItem.question + "</h2></div>";
html += "<div>";
for (let i = 0; i < questionItem.options.length; i++) {
html += "<label>";
html += "<input type=\"radio\" id=\"q\" name=\"qzz" + key + "_option\" value=\"" + questionItem.options[i] + "\"> " + questionItem.options[i];
html += "</label><br>";
}
quiz.innerHTML += html;
}
quiz.innerHTML += "<input type=\"submit\" value=\"submit\">";
quiz.onsubmit=save;
});
<form id="quiz"> </form>

There is a typo on your save function. You are missing a quote after radio:
var g1 = document.querySelector('input[type="radio"]');
Also, your question is confusing but if what you are trying to do is get whether the radio is checked or not you must access the checked property and save that to localStorage. And if you want to save the state for all of the buttons then you should use querySelectorAll and save them that way instead. Example below of accessing a single input's checked value:
function save() {
// you can access it directly on this line
var g1 = document.querySelector('input[type="radio]').checked;
localStorage.setItem("g1", g1);
}
For saving them all
Lastly, it seems you are not actually calling the save() function. If your intention is to have the radios checked state saved to localStorage on click you may want to add an event to the submit button. For example:
<form id="quiz"> </form>
<script>
let object;
let httpRequest = new XMLHttpRequest();
httpRequest.open("GET", "quiz.json", true);
httpRequest.send();
httpRequest.addEventListener("readystatechange", function () {
if (this.readyState === this.DONE) {
object = JSON.parse(this.response);
console.log(object)
}
let json = object
let quiz = document.getElementById("quiz");
let keyList = Object.keys(json.quiz);
for (let i = 0; i < keyList.length; i++) {
let key = keyList[i];
let questionItem = json.quiz[key];
let html = "<div>";
html += "<div><h2>Question " + (i + 1) + ": " + questionItem.question + "</h2></div>";
html += "<div>";
for (let i = 0; i < questionItem.options.length; i++) {
html += "<div >";
html += "<input type=\"radio\" id=\"q\" checked=\"checked\" name=\"qzz" + key + "_option\" value=\"" + questionItem.options[i] + "\">" + questionItem.options[i] ;
html += "</div>";
}
quiz.innerHTML += html;
}
quiz.innerHTML += "<input type=\"submit\" value=\"submit\">";
function save() {
// you can access it directly on this line
var g1 = document.querySelector('input[type="radio]').checked;
localStorage.setItem("g1", g1);
}
let submitButton = document.querySelector('input[type="submit"]');
submitButton.onclick = (event) => {
/* this prevents page refresh and submission to the backend which is a form default */
event.preventDefault();
// then we call the save function here
save();
};
});
If this was helpful please consider selecting as the answer

Store Values of Checkboxes in Array in Google Apps Script

I have a dynamic array as such:
var PartnerEmailList = [one#email.com, two#email.com, three#email.com];
The following function creates a table that is displayed in a showModalDialog window.
function makeTableHTML() {
var PartnerEmailList = [one#email.com, two#email.com, three#email.com];
var result = "<table border=0>";
result += "<tr><td style=\"text-align:center\"><input type=\"checkbox\" name =" + PartnerEmailList[0] + " value =" + PartnerEmailList[0] + " checked></input></td>";
result += "<td style=\"vertical-align:text-middle\">" + PartnerEmailList[0] + "</td></tr>";
for(var i=1; i<PartnerEmailList.length; i++) {
result += "<tr><td style=\"text-align:center\"><input type=\"checkbox\" unchecked></input></td>";
result += "<td style=\"vertical-align:text-middle\">" + PartnerEmailList[i] + "</td></tr>";
}
result += "</table>";
result += "<input type=\"submit\" value=\"Submit\" class=\"action\" onclick=\"form_data()\">"
result += "<input type=\"button\" value=\"Close\" onclick=\"google.script.host.close()\">"
return result;
}
The user clicks a button within Google Sheets that runs the following script. This script pops up a ModalDialog window where the user can check which emails they want to send this product to.
function SelectEmails(){
var ui = SpreadsheetApp.getUi();
var result = makeTableHTML();
var bccSend = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('main_gen').getRange(2,2).getValue();
if(bccSend === ''){
//Call the HTML file and set the width and height
var html = HtmlService.createHtmlOutput(result)
.setWidth(450)
.setHeight(300);
//Display the dialog
var dialog = ui.showModalDialog(html, "Select the intended recipients of this briefing.");
}
}
I need to write a function that looks through all the checkboxes (they are all assigned a value within the html code) and stores the values of each one that is checked in an array. I will be calling this array in a different function to actually send out the email.
There may be a much better way to go about this, but this is what I have come up with so far. Any help would be much appreciated! Thanks!

Javascript text input devices

I wrote the code to learn text input devices. However, this is the error i receive:
ReferenceError
processForm is not defined
Can someone please help me fix the code ? The code is as follows:
<body> 
 <h1>Text Input Devices</h1>
   <form action = "">
<fieldset>
<label> Normal text field</label>
<input type = "text" id = "txtNormal" />
<label>Password field</label>
<input type="password" id ="pwd" />
<label>Hidden</label>
<input type ="hidden" id = "hidden" value = "I can't tell you it is hidden" />
<textarea id = "txtArea" rows = "10" cols = "40>"> This is big text area and it can hold a lot of text</textarea>
<button type = "button" onclick="processForm()">Click me</button>
</fieldset>
</form>  
</body>
<script type ="text/javascript">
function processForm() {
//Dohvati polja formulara
var txtNormal = document.getElementById("txtNormal");
var pwd = document.getElementById("pwd");
var hidden = document.getElementById("hidden");
var txtArea = document.getElementById("txtArea");
// Spakuj u varijablu vrijednosti formulara
var normal = txtNormal.value;
var password = pwd.value;
var secret = hidden.value;
var bigText = txtArea.value;
//Create output
var result = ""
result += "<dl> \n";
result += "<dt>normal<\/dt> \n";
result += "<dd> + normal + <\/dd> \n";
result += "\n";
result += "<dt>password<\/dt> \n";
result += "<dd>" + password + "<\/dd> \n";
result += "\n";
result += "<dt>secret<\/dt> \n";
result += "<dd>" +secret + "<\/dt> \n";
result += "\n";
result += "<dt>big text <\/dt> \n";
result += "<dd>" +bigText + "<\/dt> \n";
result += "<\/dl> \n";
var output = document.getElementById("output");
output.innerHTML = result;
} //End function
</script>
   

When I run your code the button is not the issue. Here is the error I get:
file.html:44 Uncaught TypeError: Cannot set property 'innerHTML' of
null
at processForm (file.html:44)
at HTMLButtonElement.onclick (file.html:12) processForm # file.html:44 onclick # file.html:12
Your error comes from here :
var output = document.getElementById("output");
output.innerHTML = result;
What is output? It is not defined anywhere an element with an id called output in your HTML.
I assume your wanted to output the content of your normal, password and textarea field somewhere ? But only you can know.
Then just change your output definition to :
var body = document.getElementsByTagName("body")[0];
body.innerHTML += result;
As so your body will take the 3 values and output it below your fields when you click your button.
Also there is one mistake you made with " and + signs in order to get your normal's field value.
I fixed it for your, so your entire code should be like this:
<body>
<h1>Text Input Devices</h1>
<form action = "">
<fieldset>
<label> Normal text field</label>
<input type = "text" id = "txtNormal" />
<label>Password field</label>
<input type="password" id ="pwd" />
<label>Hidden</label>
<input type ="hidden" id = "hidden" value = "I can't tell you it is hidden" />
<textarea id = "txtArea" rows = "10" cols = "40>"> This is big text area and it can hold a lot of text</textarea>
<button type = "button" onclick="processForm()">Click me</button>
</fieldset>
</form>
</body>
<script type ="text/javascript">
function processForm() {
//Dohvati polja formulara
var txtNormal = document.getElementById("txtNormal");
var pwd = document.getElementById("pwd");
var hidden = document.getElementById("hidden");
var txtArea = document.getElementById("txtArea");
// Spakuj u varijablu vrijednosti formulara
var normal = txtNormal.value;
var password = pwd.value;
var secret = hidden.value;
var bigText = txtArea.value;
//Create output
var result = ""
result += "<dl> \n";
result += "<dt>normal<\/dt> \n";
result += "<dd>" + normal + "<\/dd> \n";
result += "\n";
result += "<dt>password<\/dt> \n";
result += "<dd>" + password + "<\/dd> \n";
result += "\n";
result += "<dt>secret<\/dt> \n";
result += "<dd>" +secret + "<\/dt> \n";
result += "\n";
result += "<dt>big text <\/dt> \n";
result += "<dd>" +bigText + "<\/dt> \n";
result += "<\/dl> \n";
var output = document.getElementsByTagName("body")[0];
output.innerHTML += result;
} //End function
</script>

Call a JS method via EventListener

I have a JS function where I'm dynamically creating a set of buttons. The buttons are placed in rows such that everytime a button is clicked, that particular row needs to be added to another table below that division.
I am able to successfully add only the first row of the original table to the intended table below the check division. All the others are not working. I'm not sure why the event-listener is not being called for all the Select buttons.
Dynamically creating the Original Table
for(var q=0;q<attributesNameArray.length;q++)
{
var chkID = "chkID"+elementID+attributesNameArray[q];
var aggComboID = "Aggregate-Combo"+q;
var attrNameID = "attrName"+q;
var attrTypeID = "attrType"+q;
var btnID = q+"addSelectedColumnBtn";
chkname = attributesNameArray[q];
chkVal = attributesDataTypeArray[q];
var asNameLbl = "usr"+q;
asNameid = asNameLbl;
$("#tableSelectedAttributes").append(
"<tr>"+
"<td id='"+attrNameID+"'>"+attributesNameArray[q]+"</td>"+
"<td id='"+attrTypeID+"'>"+attributesDataTypeArray[q]+"</td>"+
"<td><input type='text' id='"+asNameid+"'></td>"+
"<td>"+
"<select id='"+aggComboID+"' name='Aggregate-Combo' class='form-control'>"+
"<option value='Select an option'>Select an option</option>"+
"<option value='MIN'>MIN</option>"+
"<option value='MAX'>MAX</option>"+
"<option value='SUM'>SUM</option>"+
"<option value='AVG'>AVG</option>"+
"<option value='COUNT'>COUNT</option>"+
"</select>"+
"</td>"+
"<td><button id='addSelectedColumnBtn' name='"+btnID+"' class='btn btn-info'>Select</button></td>"+
"</tr>"+
"</div>"
);
}
...
document.getElementById("addSelectedColumnBtn").addEventListener("click", function() {
displaySelectedColumns(this,fromNameSt);
}, false);
displaySelectedColumns(this,fromNameSt)
function displaySelectedColumns(sender,fromNameSt)
{
var clickedelemId=sender.name;
q = clickedelemId.charAt(0);
var aggComboID = "Aggregate-Combo"+q;
var attrNameID = "attrName"+q;
var attrTypeID = "attrType"+q;
var asNameLbl = "usr"+q;
var selTableId1 = "sel1"+selectedColumnCount;
var selTableId2 = "sel2"+selectedColumnCount;
var selTableId3 = "sel3"+selectedColumnCount;
var selTableId4 = "sel4"+selectedColumnCount;
var attributeName = document.getElementById(attrNameID).innerText;
var attributeType = document.getElementById(attrTypeID).innerHTML;
var selectedAsName = document.getElementById(asNameLbl).value;
var choice=document.getElementById(aggComboID);
var selectedAggregate = choice.options[choice.selectedIndex].text;
alert(attributeName+" "+attributeType+" "+selectedAsName+" "+selectedAggregate);
if(selectedAggregate == "Select an option")
{
if(selectedAsName == "" || selectedAsName == " " || selectedAsName == "null" || selectedAsName == "undefined" ||selectedAsName == null || selectedAsName == undefined)
{
alert("As name: false");
$("#displaySelectedColumnTable").append(
"<tr>"+
"<td id='"+selTableId1+"'>"+attributeName+"</td>"+
"<td id='"+selTableId2+"'>"+attributeType+"</td>"+
"<td id='"+selTableId3+"'></td>"+
"<td id='"+selTableId4+"'></td>"+
"</tr>"
);
}
else
{
$("#displaySelectedColumnTable").append(
...
Any suggestions in this regard will be highly appreciated.

Id's have to be unique across your html page, addSelectedColumnBtn is repeated for every button.
Make it a unique id first by appending the same q variable which you added for the select element
"<td><button id='addSelectedColumnBtn_" + q + "' name='"+btnID+"' class='btn btn-info'>Select</button></td>"+
Now call this addEventListener inside the for-loop only for all buttons
document.getElementById("addSelectedColumnBtn_" + q).addEventListener("click", function() {
displaySelectedColumns(this,fromNameSt);
}, false);

Trying to delete items from a multidimensional array (html,javascript)

I have table that is created that shows each item added to the array. In the last row of each column is an action field that lets you either edit or delete from the row. I am not sure how I am supposed to accomplish this. What I have so far does not work properly.
function del(item) {
participantList.splice(item,1);
displayLIst();
}
function addInfo() {
var fname = document.getElementById("fname").value;
var lname = document.getElementById("lname").value;
var email = document.getElementById("email").value;
if(fname !='' && lname !="" && email !='') {
participantList[count] = new Object();
participantList[count].Fname = fname;
participantList[count].Lname = lname;
participantList[count].Email = email;
participantList[count].Action = "<button onclick='del("+count+")'>Delete</button>" + "<button onclick='edit("+count+")'>Edit</button>";
count++;
document.getElementById("fname").value ="";
document.getElementById("lname").value = "";
document.getElementById("email").value = "";
}
displayList();
}
I want to delete every object from the specified row in the array.

How are you getting the elements and putting them into the participant list?
Do you have references to the elements? Can you include the HTML as well and all the related code to what you want to do?
Below is how I would get all of the elements, and remove one.
You can remove an element by calling .remove() on it
Here is my example code: http://jsfiddle.net/gabs00/cxt170re/
var listItems = document.querySelectorAll('li');
var item = listItems[1];
item.remove();
querySelectorAll creates a live node list
I grab one of those elements (index 1) and delete it with Element.remove();
Check out the fiddle to see it in action.

Here is a current working version:
var participantList = [];
var edit = function(item) {};
var del = function(item) {
participantList.splice(item,1);
displayList();
};
function addInfo() {
var fname = document.getElementById("fname").value;
var lname = document.getElementById("lname").value;
var email = document.getElementById("email").value;
var count = participantList.length;
if(fname !='' && lname !="" && email !='') {
var item = {};
item.Fname = fname;
item.Lname = lname;
item.Email = email;
item.Action = "<button onclick='del("+count+")'>Delete</button><button onclick='edit("+count+")' disabled>Edit</button>";
participantList.push(item);
document.getElementById("fname").value ="";
document.getElementById("lname").value = "";
document.getElementById("email").value = "";
}
displayList();
};
var displayList = function () {
// clean previous data
console.log(participantList);
document.getElementById("results").innerHTML = "";
var content = "";
for(var i = 0; i<participantList.length; i++) {
content += "<tr>";
content += "<td>" + participantList[i].Fname + "</td>";
content += "<td>" + participantList[i].Lname + "</td>";
content += "<td>" + participantList[i].Email + "</td>";
content += "<td>" + participantList[i].Action + "</td>";
content += "</tr>"
}
document.getElementById("results").innerHTML = "<table>" + content + " </table>";
};
With the following HTML Code:
<input type="text" id="fname" />
<input type="text" id="lname" />
<input type="text" id="email" />
<button onclick="addInfo()">
Add
</button>
<div id="results">
EDIT: Missing JSFiddle link: https://jsfiddle.net/d64314uk/

Categories