We Keep Coding

Cannot display edit form when clicked on edit button?

I have made contact list app which displays contact details. By Default it shows 2 contact details.
In index.html I have made 2 functions called showContacts() and editContact(id).
I am dynamically populating div tags i.e editcontact & contactlist in index.html
When I click on edit button it should show 3 input elements to take input from user and one submit button I tried to implement it (see code below) but only search bar disappear's and only default contacts are shown which should not be shown and it should display editing form.
var array = [];
function Person(fullName, number, group) {
this.fullName = fullName;
this.number = number;
this.group = group;
array.push(this);
}
Person.prototype.getFullName = function() {
return this.fullName + ' ' + this.number + ' ' + this.group;
}
var p1 = new Person("Jonathan Buell", 5804337551, "family");
var p2 = new Person("Patrick Daniel", 8186934432, "work");
console.log(array);
document.getElementById("contactlist").innerHTML = '';
function showContacts() {
for (var i in array) {
var id = i;
contactlist.innerHTML +=
`
<ul>
<div>
<p>Name: ` + p1.fullName + `</p>
<p>Number: ` + p1.number + `</p>
<p>Group: ` + p1.group + `</p>
<button type="button" class="btn btn-warning" onclick="editContact(` + id + `)">Edit</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
`
}
}
showContacts();
function editContact(id) {
document.getElementById("search").style.display = 'none';
document.getElementById("contactList").style.display = 'none';
document.getElementById("editcontact").style.display = '';
document.getElementById("editcontact").innerHTML =
`<div>
<input type="text" placeholder="Name here" id="nameInput2" value="` + array[id].fullName + `">
<input type="tel" placeholder="Number here" id="numberInput2" value="` + array[id].number + `">
<input type="text" placeholder="Group Here" id="groupInput2" value="` + array[id].group + `">
<button type="button" class="btn btn-success">Submit</button>
</div>`;
}
<div class="header">
<div id="dropdown">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Sort by Group
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>All</li>
<li>Work</li>
<li>Family</li>
</ul>
</div>
</div>
<div class="title">
<h2>All Contacts</h2>
</div>
<div class="button" id="addButton">
<p>
<a href="#">
<span class="glyphicon glyphicon-plus-sign"></span>
</a>
</p>
</div>
</div>
<div id="search">
<form>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>
<div id="contactlist">
</div>
<div id="editcontact">
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
screenshots :
1) Before on click editContact :
2) After onclick editContact :
Live demo can be seen here :
https://jsfiddle.net/w2hoqmts/

A couple of things.
You made a typo with your contactlist in your html (should be contactList).
In your loop for showContacts you are setting id as index and should be like
function showContacts() {
for (var i in array) {
var id = array[i].number;
document.getElementById("contactList").innerHTML +=
'<ul><div><p>Name: ' + array[i].fullName + '</p><p>Number: ' + array[i].number + '</p><p>Group: ' + array[i].group + '</p>' +
'<button type="button" class="btn btn-warning" onclick="editContact(' + id + ')">Edit</button>' +
'<button type="button" class="btn btn-danger">Delete</button>' +
'</div>';
}
}
Your editContact method is using the id as an index (as previous), which is wrong. You could do something like this instead (see code below). I filter the array with people based on the unique id provided from the link when you click edit.
function editContact(id) {
var obj = array.filter(function (ele) {
console.dir(ele);
if (ele.number === id) return ele;
});
console.dir(obj);
document.getElementById("search").style.display = 'none';
document.getElementById("contactList").style.display = 'none';
document.getElementById("editcontact").style.display = '';
document.getElementById("editcontact").innerHTML =
'<div>'+
'<input type="text" placeholder="Name here" id="nameInput2" value="'+ obj[0].fullName + '">'+
'<input type="tel" placeholder="Number here" id="numberInput2" value="' + obj[0].number + '">' +
'<input type="text" placeholder="Group Here" id="groupInput2" value="' + obj[0].group + '">' +
'<button type="button" class="btn btn-success">Submit</button>'+
'</div>';
}
I've made a updated fiddle based on your own
https://jsfiddle.net/w2hoqmts/3/

Following changes should be made in editContact() and showContacts() function.
function showContacts(){
for(var i in array){
var id = i;
contactlist.innerHTML +=
`
<ul>
<div>
<p>Name: `+ p1.fullName +`</p>
<p>Number: `+ p1.number +`</p>
<p>Group: `+ p1.group +`</p>
<button type="button" class="btn btn-warning" onclick="editContact(`+ id +`)">Edit</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
`
}
}
showContacts();
function editContact(id) {
document.getElementById("search").style.display = 'none';
document.getElementById("contactlist").style.display = 'none';
document.getElementById("editcontact").style.display = '';
document.getElementById("editcontact").innerHTML =
`<div>
<input type="text" placeholder="Name here" id="nameInput2" value="`+array[id].fullName+`">
<input type="tel" placeholder="Number here" id="numberInput2" value="`+array[id].number+`">
<input type="text" placeholder="Group Here" id="groupInput2" value="`+array[id].group+`">
<button type="button" class="btn btn-success">Submit</button>
</div>`;
}

get values from clicked paragraph with jquery

Can someone help me get the values of the firstName and the lastName from a paragraph that I click on so I can display them in another div. I only managed to get the whole text from the paragraph that I click on, but i need the values of the firstName and the LastName. Below is the commented code that I need help with. Thanks in advance.
function Contact(first, last) {
this.firstName = first;
this.lastName = last;
}
$(document).ready(function() {
let a_contacts = [];
$("#delBtn").click(function() {
$("li").remove();
});
$("#save").click(function() {
event.preventDefault()
var inputtedFirstName = $("input#new-first-name").val();
var inputtedLastName = $("input#new-last-name").val();
var newContact = new Contact(inputtedFirstName, inputtedLastName);
$("ul#contacts").append("<li class='contact'>" + "<p class='para' >" + 'First Name: ' + newContact.firstName + ' Last Name: ' + newContact.lastName + "</p>" + "<button class='btn del'>del</button>" + "</li>");
a_contacts.push(newContact);
$("input#new-first-name").val("");
$("input#new-last-name").val("");
});
// $('#contacts').on('click', 'p', function (e) {
// $("#show-contact").show();
// $("#show-contact h2").text(newContact.firstName);
// $(".first-name").text(newContact.firstName);
// $(".last-name").text(newContact.lastName);
// });
$('#contacts').on('click', '.del', function(event) {
$(event.target).parent().remove()
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1 id="haha">Address book</h1>
<div class="row">
<div class="col-md-6">
<h2>Add a contact:</h2>
<form id="new-contact">
<!-- form -->
<div class="form-group">
<label for="new-first-name">First name</label>
<input type="text" class="form-control" id="new-first-name">
</div>
<div class="form-group">
<label for="new-last-name">Last name</label>
<input type="text" class="form-control" id="new-last-name">
</div>
<button id="delBtn" class="btn">Add</button>
<button id="save" class="btn">Save</button>
</form>
<!-- form -->
<h2>Contacts:</h2>
<ul id="contacts">
</ul>
</div>
<div class="col-md-6">
<div id="show-contact">
<h2></h2>
<p>First name: <span class="first-name"></span></p>
<p>Last name: <span class="last-name"></span></p>
</div>
</div>
</div>
</div>

Wrap firstName and lastName with anchor tag (or etc) and get it over with this tag:
function Contact(first, last) {
this.firstName = first;
this.lastName = last;
}
$(document).ready(function() {
$(document).on('click', '.para',function(){
var fn = $(this).find('.fn').text();
var ln = $(this).find('.ln').text();
$('#show-contact').append('<p>First name: <span class="first-name">'+fn+'</span></p><p>Last name: <span class="last-name">'+ln+'</span></p>'); // Add
//$('#show-contact').html('<p>First name: <span class="first-name">'+fn+'</span></p><p>Last name: <span class="last-name">'+ln+'</span></p>'); // update
//console.log("first name is: " + fn + " last name is: " + ln);
});
let a_contacts = [];
$("#delBtn").click(function() {
$("li").remove();
});
$("#save").click(function() {
event.preventDefault()
var inputtedFirstName = $("input#new-first-name").val();
var inputtedLastName = $("input#new-last-name").val();
var newContact = new Contact(inputtedFirstName, inputtedLastName);
$("ul#contacts").append("<li class='contact'>" + "<p class='para' >" + 'First Name: <a class="fn">' + newContact.firstName + '</a> Last Name: <a class="ln">' + newContact.lastName + "</a></p>" + "<button class='btn del'>del</button>" + "</li>");
a_contacts.push(newContact);
$("input#new-first-name").val("");
$("input#new-last-name").val("");
});
// $('#contacts').on('click', 'p', function (e) {
// $("#show-contact").show();
// $("#show-contact h2").text(newContact.firstName);
// $(".first-name").text(newContact.firstName);
// $(".last-name").text(newContact.lastName);
// });
$('#contacts').on('click', '.del', function(event) {
$(event.target).parent().remove()
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1 id="haha">Address book</h1>
<div class="row">
<div class="col-md-6">
<h2>Add a contact:</h2>
<form id="new-contact">
<!-- form -->
<div class="form-group">
<label for="new-first-name">First name</label>
<input type="text" class="form-control" id="new-first-name">
</div>
<div class="form-group">
<label for="new-last-name">Last name</label>
<input type="text" class="form-control" id="new-last-name">
</div>
<button id="delBtn" class="btn">Add</button>
<button id="save" class="btn">Save</button>
</form>
<!-- form -->
<h2>Contacts:</h2>
<ul id="contacts">
</ul>
</div>
<div class="col-md-6">
<div id="show-contact">
<h2></h2>
</div>
</div>
</div>
</div>

One possible solution is to extract firstname and lastname using substr as follows.
function Contact(first, last) {
this.firstName = first;
this.lastName = last;
}
$(document).ready(function() {
let a_contacts = [];
$("#delBtn").click(function() {
$("li").remove();
});
$("#save").click(function() {
event.preventDefault()
var inputtedFirstName = $("input#new-first-name").val();
var inputtedLastName = $("input#new-last-name").val();
var newContact = new Contact(inputtedFirstName, inputtedLastName);
$("ul#contacts").append("<li class='contact'>" + "<p class='para' >" + 'First Name: ' + newContact.firstName + ' Last Name: ' + newContact.lastName + "</p>" + "<button class='btn del'>del</button>" + "</li>");
a_contacts.push(newContact);
$("input#new-first-name").val("");
$("input#new-last-name").val("");
});
$('#contacts').on('click', 'p', function (e) {
// Get current para's text
var txt = $(this).text();
// pre-define labels present in the text
var fnameLabel = 'First Name: ';
var lnameLabel = 'Last Name: ';
// define length of the labels
var fnameLabelLen = fnameLabel.length;
var lnameLabelLen = lnameLabel.length;
// define Index positions of the labels
var fnameLabelIdx = txt.indexOf(fnameLabel);
var lnameLabelIdx = txt.indexOf(lnameLabel);
// Get First Name value by calculating the Index position
// between labels first name and last name
var firstName = txt.substr(fnameLabelIdx+fnameLabelLen, lnameLabelIdx-fnameLabelLen);
// Get Last Name by calculating Index positions
// between lastname label and end of para
var lastName = txt.substr(lnameLabelIdx+lnameLabelLen, txt.length-lnameLabelLen);
$("#show-contact").show();
$("#show-contact h2").text(firstName);
$(".first-name").text(firstName);
$(".last-name").text(lastName);
});
$('#contacts').on('click', '.del', function(event) {
$(event.target).parent().remove()
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1 id="haha">Address book</h1>
<div class="row">
<div class="col-md-6">
<h2>Add a contact:</h2>
<form id="new-contact">
<!-- form -->
<div class="form-group">
<label for="new-first-name">First name</label>
<input type="text" class="form-control" id="new-first-name">
</div>
<div class="form-group">
<label for="new-last-name">Last name</label>
<input type="text" class="form-control" id="new-last-name">
</div>
<button id="delBtn" class="btn">Add</button>
<button id="save" class="btn">Save</button>
</form>
<!-- form -->
<h2>Contacts:</h2>
<ul id="contacts">
</ul>
</div>
<div class="col-md-6">
<div id="show-contact">
<h2></h2>
<p>First name: <span class="first-name"></span></p>
<p>Last name: <span class="last-name"></span></p>
</div>
</div>
</div>
</div>

You can do this with regex.
function Contact(first, last) {
this.firstName = first;
this.lastName = last;
}
$(document).ready(function() {
let a_contacts = [];
$("#delBtn").click(function() {
$("li").remove();
});
$("#save").click(function() {
event.preventDefault()
var inputtedFirstName = $("input#new-first-name").val();
var inputtedLastName = $("input#new-last-name").val();
var newContact = new Contact(inputtedFirstName, inputtedLastName);
$("ul#contacts").append("<li class='contact'>" + "<p class='para' >" + 'First Name: ' + newContact.firstName + ' Last Name: ' + newContact.lastName + "</p>" + "<button class='btn del'>del</button>" + "</li>");
a_contacts.push(newContact);
$("input#new-first-name").val("");
$("input#new-last-name").val("");
});
$("#show-contact").hide();
$('#contacts').on('click', 'p', function (e) {
var name = $(this).html();
var fname = name.match(/(?<=First Name: ).*?(?= Last)/);
var lname = name.match(/(?<=Last Name: ).*$/);
$("#show-contact").show();
$("#show-contact .first-name").html(fname);
$("#show-contact .last-name").html(lname);
});
$('#contacts').on('click', '.del', function(event) {
$(event.target).parent().remove()
});
});
#contacts>li:hover {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1 id="haha">Address book</h1>
<div class="row">
<div class="col-md-6">
<h2>Add a contact:</h2>
<form id="new-contact">
<!-- form -->
<div class="form-group">
<label for="new-first-name">First name</label>
<input type="text" class="form-control" id="new-first-name">
</div>
<div class="form-group">
<label for="new-last-name">Last name</label>
<input type="text" class="form-control" id="new-last-name">
</div>
<button id="delBtn" class="btn">Add</button>
<button id="save" class="btn">Save</button>
</form>
<!-- form -->
<h2>Contacts:</h2>
<ul id="contacts">
</ul>
</div>
<div class="col-md-6">
<div id="show-contact">
<h2></h2>
<p>First name: <span class="first-name"></span></p>
<p>Last name: <span class="last-name"></span></p>
</div>
</div>
</div>
</div>

how fill the dynamically created dropdownlist with data from database using ajax and web service in asp.net c#

var index = 0;
function newitem() {
index++;
var objTo = document.getElementById('newitem')
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass" + index);
var rdiv = 'removeclass' + index;
divtest.innerHTML = '<div class="col-sm-3 nopadding"><div class="form-group">
<select class="form-control" id="ddlitem' + index + '"name="ddlitem"><option
value="">--select--</select> </div></div><div class="col-sm-3
nopadding"><div class="form-group"> <input type="text"
class="form-control" id="txtquantity' + index + '"
name="txtquantity" value=""></div></div><div class="col-sm-3
nopadding"><div class="form-group"> <input type="text"
class="form-control" id="txtprice' + index + ' "name="txtprice"
disabled="disabled" value="" ></div></div><div class="col-sm-3
nopadding"><div class="form-group"><div class="input-group"> <input
type="text" class="form-control" id="txttotal' + index + '"
name="txttotal" disabled="disabled" value="" ><div
class="input-group-btn"> <button class="btn btn-danger"
type="button" onclick="remove_created_item(' + index + ');"> <span
class="glyphicon glyphicon-minus" aria-hidden="true"></span>
</button></div></div></div></div><div class="clear"></div>';
objTo.appendChild(divtest);
};
function remove_created_item(idOfCreatedItem) {
$('.removeclass' + idOfCreatedItem).remove();
}

It's messy, but I think I understand what you are doing.
After the objTo.appendChild(divtest); which inserts your select dropdown into the page, do your Ajax call to the API:
var copyOfIndex = index;
$.get( "/api/whatever", function( data ) {
$( "#ddlitem" + copyOfIndex ).html( data ); // data => can be the html containing all the <options>
alert( "Load was performed." );
});
not sure how your code is initialized above, but you should use a copy of your index (copyOfIndex here) to make sure the ajax call doesn't use an outdated value for index when the ajax call completes.
Also, looks like you need to close your before you insert the element in the DOM via objTo.appendChild(divtest);

Post multiple objects with jquery, dynamic field inputs

I am looking to post back using Jquery (Java, Spring-Data Server side). I am looking to pass back multiple objects while using dynamic input fields on client side.
Server side service can handle saving multiple TimeOffRequests as an Itterable List. However, With having 2 input fields tied to the object I am struggling to format the data properly. Currently will return 4 objects in the array vs 2 Any help would be greatly appreciated
HTML:
<div class="widget-body no-padding">
<div class="smart-form">
<fieldset>
<div id = wrapper>
<div class="row" id="addInput" >
<section class="col col-4">
<label class="input"> <i class="icon-append fa fa-calendar"></i>
<input type="date" name="startDate" id="startDate" placeholder="Request Date" class="hasDatepicker">
</label>
</section>
<section class="col col-2">
<label class="input"><i class="icon-append fa fa-clock-o"></i>
<input min="0" max="8" type="number" name="hour" id="hour" placeholder="Hours">
</label>
</section>
<section class="col col-2">
<a id="addField" title="Add More Fields" class="btn btn-primary" onclick="addInput('wrapper');"> + </a>
</section>
</div>
</div>
<section>
<label class="textarea"> <i class="icon-append fa fa-comment"></i>
<textarea rows="5" name="comment" placeholder="Notes"></textarea>
</label>
</section>
</fieldset>
<footer>
<button onclick="submitTimeOffRequest()" class="btn btn-primary">
Submit
</button>
</footer>
</div>
JS Submit
function submitTimeOffRequest(){
var timeoffRequests = [];
$("input[class = ptoDate ]").each(function () {
var date = $(this).val();
$("input[class= ptoHours]").each(function () {
var hours = $(this).val();
item = {};
item ["date"] = date;
item ["hours"] = hours;
timeoffRequests.push(item);
});
});
$.ajax({
contentType: 'application/json',
type: "post",
data: JSON.stringify(timeOffRequests),
url: "/api/timeoff/" + masterEngId,
async: true,
dataType: "json",
success: function() {
location.reload(true);
},
error: function(){
}
})}
}
JS Dynamically add input fields
var counter = 1;
function addInput(divName) {
var dateIdString = "startDate" + counter;
var hourIdString = "hour" + counter;
console.log(dateIdString);
var newdiv = document.createElement('div');
newdiv.innerHTML = "<div class='row'>" +
"<section class='col col-4'> " +
"<label class='input'><i class='icon-append fa fa-calender'>" +
"</i> <input class = 'ptoDate' type='date' name="+dateIdString+" id="+dateIdString+" placeholder='Request Date'</input> " +
"</label> " +
"</section>" +
"<section class='col col-2'>" +
"<label class='input'><i class='icon-append fa fa-clock-o'></i>" +
"<input type='number' class='ptoHours' name="+hourIdString+" id="+hourIdString+" placeholder='Hours'>" +
"</label>" +
"</section>" +
"<section class='col col-2'><a id='removeField' title='Remove Field' class='btn btn-danger' onclick='removeDiv()'> x </a> " +
"</section> " +
"</div>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}

I created a Javascript to-do list, but want to know how to keep the posts after browser refresh?

I wrote a JS to-do list, allowing the user to post an input on the page. However, I know that these posts disappear upon browser refresh. Could you possibly keep the posts in the page without being obliterated by the browser refresh by using Javascript cookies? And if so, how can I do that?
Please check full code here: JSfiddle
Here's the whole page code:
<script>
(function(){
var todo = document.querySelector( '#todolist' ),
form = document.querySelector( 'form' ),
field = document.querySelector( '#newitem' );
field2 = document.querySelector( '#newitemTxt' );
date = document.querySelector( '#datepicker' );
form.addEventListener( 'submit', function( ev ) {
var text = field.value;
var text2 = field2.value;
var textDate = date.value;
if ( text !== '' && text2 !== '' && textDate !== '') {
todo.innerHTML += '<li>' + '<span class="title">' + text + '</span>' + '<br />' + text2 + '<br />' + '<span class="date">' + textDate + '</span>' + '</li>';
}
ev.preventDefault();
}, false);
todo.addEventListener( 'click', function( ev ) {
var t = ev.target;
if ( t.tagName === 'LI' ) {
t.parentNode.removeChild( t );
};
ev.preventDefault();
}, false);
})();
</script>
<form action="#">
<div>
<label class="desc" id="title" for="title">List Title</label>
<input id="newitem" name="title" type="text" class="field text fn form-control" value="" size="8" tabindex="1">
</div>
<div>
<label class="desc" id="title" for="title">Add Task Date</label>
<input id="datepicker" name="title" type="text" class="field text fn form-control" value="" size="8" tabindex="1">
</div>
<div>
<label class="desc" id="title4" for="Field4">
Task Details
</label>
<textarea id="newitemTxt" name="Field4" class="form-control" spellcheck="true" rows="10" cols="50" tabindex="4"></textarea>
</div>
<div>
<button class="btn btn-info" type="submit" value="Add"> POST </button>
<button class="btn btn-warning" type="reset" value="Add"> RESET </button>
</div>
</form>
</div> <!-- end of form-section-->
<div class="col-md-8 result-section">
<ul id="todolist"></ul>
</div>

HTML5 storage should help you achieve this.
I created a quick demo here using localstorage. You can read up on localsorage here
//store string to a db called tasks
window.localStorage.setItem("tasks", "task 1");
//Read the previously saved string
var savedTasks = window.localStorage.getItem("tasks");

Take a look at html5 localstorage or sessionstorage they persist and store more data than cookies sessionstorage
Localstorage