HTML Question
How to take user inputs, add it to list objects, then display message for 2 seconds?
I'm a self-taught beginner.
What I aim to do is better explained in animated gif as seen high-speed below:
Here are some additional guidelines:
- The form should appear when clicking on the button "Add link".
- If the entered URL does not begin with "http: //" or "https: //", it adds "http: //" at the beginning.
- When the user validates the new link, it is added in top of the page, the add form disappears and an information message is displayed for 2 seconds.
Here are codes I've tried so far:
index.html
<body>
<h1>Activity</h1>
<div id="alert"></div>
<div id="jax">
<button id="addLink" onclick="sendTheAJAX()" class="button">Add link</button>
</div>
<div id="content"></div>
<script src="../js/weblinks.js"></script>
</body>
weblinks.js
var linkList = [
{
title: "Kottke",
url: "http://kottke.org",
author: "brett.suggs"
},
{
title: "National Geographic",
url: "http://www.nationalgeographic.com",
author: "jessica"
},
{
title: "American Museum of Natural History",
url: "http://www.amnh.org",
author: "aurora.nicole"
}
];
function createLinkElement(link) {
var linktitle = document.createElement("a");
linktitle.href = link.url;
linktitle.style.color = "#428bca";
linktitle.style.textDecoration = "none";
linktitle.style.marginRight = "5px";
linktitle.appendChild(document.createTextNode(link.title));
var linkUrl = document.createElement("span");
linkUrl.appendChild(document.createTextNode(link.url));
var titleLine = document.createElement("h4");
titleLine.style.margin = "0px";
titleLine.appendChild(linktitle);
titleLine.appendChild(linkUrl);
var detailsLine = document.createElement("span");
detailsLine.appendChild(document.createTextNode("Added by " + link.author));
var linkDiv = document.createElement("div");
linkDiv.classList.add("link");
linkDiv.appendChild(titleLine);
linkDiv.appendChild(detailsLine);
return linkDiv;
}
var content = document.getElementById("content");
linkList.forEach(function (link) {
var linkElement = createLinkElement(link);
content.appendChild(linkElement);
});
var request = new XMLHttpRequest();
request.open('GET', 'addLink.html');
request.onreadystatechange = function () {
if (request.readyState === 4) {
document.getElementById('jax').innerHTML = request.responseText;
}
};
function sendTheAJAX() {
request.send();
document.getElementById('addLink').style.display = 'none';
}
function checkURL (abc) {
var string = abc.value;
if (!~string.indexOf("http://")) {
string = "http://" + string;
}
abc.value = string;
return abc
}
function onSubmit() {
var title = document.getElementById("linkTitle").value;
linkList.push({
"title": title,
"url": document.getElementById("xLink").value,
"author": document.getElementById("name").value
});
linkList.forEach(function (link) {
var linkElement = createLinkElement(link);
content.appendChild(linkElement);
});
var alert = document.getElementById("alert");
alert.innerHTML = "<p>The link to \"" + title + "\"was succesfully added</p>";
setTimeout(function () {
alert.innerHTML = "";
}, 2000);
}
addLink.html
<form>
<input type="text" name="name" id="name" placeholder="Your Name">
<input type="text" name="linkTitle" id="linkTitle" placeholder="Link Title">
<input type="url" name="xLink" id="xLink" onblur="checkURL(this)" placeholder="Link URL">
<button type="submit" id="add" onclick="onSubmit()" class="button">Add</button>
</form>
My questions are:
1) In the checkURL function section, I've tried to add "https://" by:
if (!~string.indexOf("http://"|"https://")) {
string = "http://" + string;
}
It doesn't work. Just make it worse.
2) How to add user input from the form in addLink.html into linkList in js?
3) How to display information message "The link was successfully added" for 2 seconds?
Note: I didn't built code from scratch, the base code was provided.
Recommended for you: Get network issues from WhatsUp Gold. Not end users.
Answer Source
"http://"|"https://"evaluates in JS to0. Maybe you misunderstood logical OR (||) with bitwise OR (|)? Nevertheless,indexOfseems a bit cumberstone here, I would suggest using regex instead and rewritecheckURLas :
function checkURL (str) {
if (str.value && !/^https?\:\/\//i.test(str.value)) {
str.value = "http://" + str.value;
}
}
- Actually you are adding user input from the form into linkList, but since you using button
type="submit", you are submitting form on every click and causing page reload. Instead usetype="button"in your addLink.html:
<form>
<input type="text" name="name" id="name" placeholder="Your Name" />
<input type="text" name="linkTitle" id="linkTitle" placeholder="Link Title" />
<input type="url" name="xLink" id="xLink" onblur="checkURL(this)" placeholder="Link URL" />
<button type="button" id="add" onclick="onSubmit()" class="button">Add</button>
</form>
or return false in onSubmit function or use preventDefault at the top of it.
- Now message should be showing fine, but at the same time you appending existing list with itself again. Either you should add only last element or clear
contentelement and 'rerender' the whole list:
function onSubmit() {
var title = document.getElementById("linkTitle").value;
linkList.push({
"title": title,
"url": document.getElementById("xLink").value,
"author": document.getElementById("name").value
});
content.innerHTML = ""; // clearing the content div
linkList.forEach(function (link) {
content.appendChild(createLinkElement(link));
});
var alert = document.getElementById("alert"); // can be taken outside the function, as it is engough to get it once
alert.innerHTML = "<p>The link to \"" + title + "\"was succesfully added</p>";
setTimeout(function () {
alert.innerHTML = "";
}, 2000);
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download