This is what my upload file & submit button look like
The white space below them has to be populated by a list of uploaded files (once that submit button is pressed). I know the directory within which they are saved. Is there some way to call and display just the file names within that area?
I am a little bit confused by the wording but I will give it my best shot. You can get a list of all the files and the names by just reading the upload input's file attribute, which contains an array of files with a few properties including their name. Then I would recommend either making the div that is that whitespace a flexbox and appending the filenames as internal elements to it. I can provide code if needed, but I think that covers the question. Please feel free to ask for clarification!
A rough code example:
document.getElementById("fileDrop").onchange = ()=>{
let ul = document.getElementById("list");
let files = document.getElementById("fileDrop").files;
for(let i = 0;i<files.length;i++){
let li = document.createElement("li");
li.appendChild(document.createTextNode(files[i].name));
ul.appendChild(li);
}
}
<html>
<head>
</head>
<body>
<input type="file" id="fileDrop" multiple>
<ul id="list">
</ul>
</body>
</html>
Related
I have an assigment, I don't understand it as i'm beginner.
Create a javascript script which will modify the DOM of a web-page.
The script must add a form with 4 elements: name, email, message(textarea) and submit button. Each element must contain a label with its name. For example, name field is input type, you must create still from javascript a label named "Name", same for the others except submit button. Also, each laber must have a colour added from javascript(red, blue, yellow). When you click submit button, it must have an alert: "Are you sure you want to send this message?".
Thank you in advance.
I need to use only Javascript for this and I can only find answers
that use HTML
Web applications use HTML to contain, render and display elements in the viewport (browser window).
Where do you intend to render the form and capture user input?
You can build the DOM structure using JavaScript alone, however, there will still be a HTML file, which will contain the HTML elements created using javascript.
Please provide clarity as to your desired goal and what type of application this is being used for.
My gut feeling, for simplicity, is that you will require to use HTML as your template file, and JavaScript for interactivity and manipulation of the HTML file.
The script must add a form with 4 elements: name, email, message(textarea) and submit button. Each element must contain a label with its name. For example, name field is input type, you must create still from javascript a label named "Name", same for the others except submit button. Also, each laber must have a colour added from javascript(red, blue, yellow). When you click submit button, it must have an alert: "Are you sure you want to send this message?". That's it.
This is a start, just to try to help you to understand the concepts.
I do, however, implore you to go and explore with confidence - you won't break anything, just give it a try!
I recommend you try taking a look at some of these articles, have a look at my (very rudimentary) code below, and feel free to ask any questions you have!
JS:-
W3 Schools JS and HTML reference
HTML:-
W3 Schools: HTML Forms
W3 Schools: Label Tag
W3 Schools: Text Area Tag (This has been left out of the solution on purpose - give it a try!!)
(function divContent() {
//Create a 'div' as a container for our form
var div = document.createElement('div');
// Perhaps you could style it later using this class??
div.className = 'row';
// I have used backticks to contain some more normal looking HTML for you to review, it's not complete though!!
div.innerHTML = `<form action="javascript:" onsubmit="alert('Your message here, or, run a function from your JavaScript file and do more stuff!!')">
<label for="name">Name:</label>
<input type="text" name="name" id="name" value="Mickey Mouse">
<br>
<label for="email">Email:</label>
<input type="text" name="email" id="email" value="mickey#mouse.co.uk">
<br><br>
<input type="submit" value="Submit">
</form> `
// Get the body of the document, and append our div containing the form to display it on page
document.getElementsByTagName('body')[0].appendChild(div);
}());
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="CoderYen | Wrangling with 0s & 1s Since The Eighties">
</head>
<body>
</body>
</html>
I'm trying to create a list which I can edit/update. I'll need to be able to store the list information in a variable of some sort and display the information on a HTML page.
My attempt is in the jsbin below.
JSBIN
https://jsbin.com/luxobineze/edit?html,js,console,output
So with that code, I'd like to:
Add names by filling in the form and clicking "Add Name"
Click [Edit] which will fill the form with the name that is to be edited
Click Update to update the global variable "names" (If I can do this, then I should be able to update the HTML's "List of Names" as well)
I'm not sure what to do in the updateName function since I'm not sure how to pass the relevant arguments into it in order to update the correct list item. Do I need to use more global variables to keep track of the list item that's being edited? Or is there a better, more standard way of coding this?
The code in the jsbin is here:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
Name: <input type="text" id="name-input"><br>
<button id="add-name" class="button">Add Name</button>
<button id="update" class="button">Update</button>
<div id="list">List of Names</div>
</body>
</html>
JavaScript
// global variable storing the list of names
var names = [];
function addName() {
var name = document.getElementById("name-input").value;
var list = document.getElementById("list");
if(name) {
names.push("name");
var wrapper = document.createElement("div")
wrapper.setAttribute("id", name)
var div_name = document.createElement("div");
div_name.appendChild(document.createTextNode(name))
var div_edit = document.createElement("div")
div_edit.appendChild(document.createTextNode("[edit]"))
div_edit.addEventListener("click", editName)
wrapper.appendChild(div_name)
wrapper.appendChild(div_edit)
list.appendChild(wrapper)
}
}
function editName() {
// Fill the input box with the name that you want to edit
var name = this.parentElement.getAttribute("id")
document.getElementById("name-input").value = name;
}
function updateName() {
var new_name = document.getElementById("name-input").value
// How do I update the global variable "names"?
}
document.getElementById("add-name").addEventListener("click", addName)
document.getElementById("update").addEventListener("click", updateName)
Edit
I ended up using some global variables to keep track of which item was currently selected: https://jsbin.com/zupawesifu/1/edit?html,js,console,output
What it sounds like you're doing is building the most basic of applications, a CRUD app. (Create, Read, Update, Delete)
Storing your values in a local variable is not the most desirable way of doing this, unless of course that is your desired functionality.
You ask "is there a more standard way". A more common way would be to store your values in a database, or, in an even simpler scenario, you could store these values in a local .JSON file. This will allow you to use your application at any time, close the application, refresh, or any other number of things without losing your stored or edited values.
I won't code a full CRUD app for you here, but there are many tutorials and templates out there for your learning pleasure. Here is very basic one.
I hope this helps!
http://mrbool.com/creating-a-crud-form-with-html5-local-storage-and-json/26719
I'm looking to change the title of an html page according to certain form elements, as well as some text found on that page. I found a good site describing how using Javascript can do almost what I need, located here: http://www.devx.com/tips/Tip/13469.
The problem with the script found there is that the option to change the title is restricted to the textarea, or if I try to include another element, I get an error message. I authored web page/form templates, nothing complicated, where the intended users, who, shall we say, are not very computer literate(one of them has never used computers), fill out certain textareas and drop-down options and then save the pages in an ARCHIVE folder. To make it easier for them, I would like to give them the luxury of saving the pages without having to type the relevant date and # (each form is basically one of a series of 59), essentially standardizing the titles of the saved pages which should make it easier to categorize them using another script in the future. Can the code below(the one found in the above web site) be extended to include more than one html item, such as the select drop-down options found below, and maybe something found inside elements such as a or div?
<HTML>
<HEAD><TITLE>Change Title Dynamically:</TITLE></HEAD>
<BODY>
<FORM action="" method=POST name="SampleForm">
<B>Enter Title for the window:</B>
<TEXTAREA NAME=WindowTitle ROWS=1 COLS=50></TEXTAREA>
<INPUT TYPE=BUTTON VALUE="Change Title" ONCLICK="javascript:UpdateTitle()">
</FORM>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
function UpdateTitle()
{
document.title = document.SampleForm.WindowTitle.value;
}
</SCRIPT>
</BODY>
</HTML>
<SELECT>
<option>-----</option>
<OPTION>JAN</OPTION>
<OPTION>FEB</OPTION>
<OPTION>MAR</OPTION>
<OPTION>APR</OPTION>
<OPTION>MAY</OPTION>
<OPTION>JUN</OPTION>
<OPTION>JUL</OPTION>
<OPTION>AUG</OPTION>
<OPTION>SEP</OPTION>
<OPTION>OCT</OPTION>
<OPTION>NOV</OPTION>
<OPTION>DEC</OPTION>
</SELECT>
I would recommend jQuery to get the values of the fields you want to display in the title and set it. More info on jQuery can be found at http://jquery.com/
You can use a jQuery selectors to get the values of the fields and concatenate it accordingly. Something like this:
document.title = $('textarea').val() + ' - ' + $('select').val();
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am a beginner to Javascript. Sorry for asking here, but I couldn't find a tutorial for this, and I hope someone can point me in the right direction.
I have an HTML page that has an unordered list on it. I have an input form that allows the user to submit a message. When the user submits a message, I want it to be added to the unordered list. This will be a permanent change to the website.
How do I make Javascript interact with the HTML like that?
---- Example:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul>
<li>example 1</li>
<li>example 2</li>
</ul>
<form>
<input type='text' name='Message' value="">
<input type='submit'>
</form>
</body>
</html>
The question's a little vague and I think it would be helpful to understand the concepts rather than have the specific code.
What you're trying to achieve, if you just want to manipulate the HTML using javascript, is to have an understanding of how JS can work with the DOM.
You do this by targeting elements. And you can target them either by their element type (div), a CSS classname, or most commonly by an id tag attribute.
In the example you've got above, when you submit the form you will need to call a function that will target the message input, grab its value. Then target the unordered list and append the HTML to the end of it containing the new message.
Since you're new, I would recommend learning jQuery. It'll get you up and running pretty quickly and you won't have to deal with as much diversity in varying browser implementations.
This will be a permanent change to the website.
NO this wont be..you probably need to store them in you db then.Following is just a demo of how to append to unordered list
HTML,
<ul id='message'>
<li>msg 1</li>
<li>msg 2</li>
</ul>
<form onsubmit='appendMessage(); return false;'>
<input type='text' id='message_text' value="" />
<input type='submit' />
</form>
JS
function appendMessage() {
var node = document.createElement("LI");
var message = document.getElementById('message_text').value;
var textnode = document.createTextNode(message);
node.appendChild(textnode);
document.getElementById("message").appendChild(node);
}
DEMO
var button = document.getElementsByTagName("input")[1];
button.onclick = function (){
var ul = document.findElementByTagName("ul")[0];
var li = document.createElement("li");
li.appendChild(document.createTextNode(this.value));
ul.appendChild(li);
};
Perhaps you could use LocalStorage and some of the functions above to archive that.
Here are a few examples of how to use LocalStorage and how to handler with objects(html tags with content for example).
http://coding.smashingmagazine.com/2010/10/11/local-storage-and-how-to-use-it/
Storing Objects in HTML5 localStorage
The drawnback´s are the support for older browsers and that the changes will only be available for the client where the changes where made.
The best aproach, it´s to combine the changes in javascript with some kind of storage(localstorage, SQL, NoSQL)
http://www.mongodb.org/ <--- NoSQL database
I have a html file that has a section for writing mdxquery , file sends queries to a js file and that file use this queries and other information and show a map on my html file, know i need to change this mdxqueries automatically by selecting different checkbox, i define different queries for different selections(my selectins are limmited), and now i want replace them in div section for it i defined different div(as you'll see dives are particular and the content of them is inside the div tag and arent changeable) that have different queries, now the problem is that, the js file read the queries ofdiv with just particular div, therefor i need to change the id of div , here is my cod that dont work, please see the code and tell me what is wrong:
<div class="first" style="width:80%;" id="mdxQueryEditor"
dojoType="GeoSOA.Spatialytics.widgets.MdxQueryEditor" title="MDX query editor"
submitButtonLabel="Submit"
mdxQuery="SELECT {[Measures].[report]} ON COLUMNS,
{[State].[City].members} ON
ROWS
FROM [ppgis]">
</div>
<div id="" class='second' dojoType='GeoSOA.Spatialytics.widgets.MdxQueryEditor' style='width:100%;display:none;'
mdxQuery='SELECT {[Measures].[report]} ON COLUMNS,
{[Boston].[City].members} ON ROWS
FROM [ppgis]'
submitButtonLabel='Submit'></div>
<div id="" class='third' dojoType='GeoSOA.Spatialytics.widgets.MdxQueryEditor'
style='width:80%;display:none;' mdxQuery='SELECT {[Measures].[report]} ON COLUMNS,
{([State].[All States].
[Boston].[Allston / Brighton], [Subject].[All Subjects])} ON ROWS
FROM [ppgis]'
submitButtonLabel='Submit'></div>
<script>
function generatorChoice(){
if(($("#Allston").is(":checked") )&&( !$("#All State").is(":checked")) && (!$("#Boston").is(":checked"))){
/*When the checkbox is checked*/
$(".first").attr("id", "");
$(".third").attr("id", "mdxQueryEditor");
$('.first').css('display','none');
$('.second').css('display','none');
$('.third').css('display','block') ;
}
}
</script>
I see a code $("#All State").is(":checked"), this could be potentially wrong.
Here you are trying to grab element with Id - "All State", but HTML Id's cannot have spaces in between, If that's not meet code inside If condition will not be executed and Id will not change.
I usually use getElementBy, for example I do this
var myDiv = document.getElementById('div1');
myDoiv.setAttribute('id', 'div2');