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
Related
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>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I'm trying to create a button that changes color when username and password fields have both been entered with some sort of input (IE; neither username or password text boxes are empty)
Is there a way I can get a function to trigger when input of a text box is changed in NativeScript? I've asked at the NativeScript slack, among other sites but I don't seem to get a reply ever.
I thought this was a relatively simple request, especially when I'm using vanilla JS. Surely it must be simpler than using a framework such as Angular or Vue?
I do not want to use a framework, I am looking for a way to do this with plain JS. What have I tried? I've tried onChange="", textChange="", change="" but none seem to work.
If you are using plain JavaScript / TypeScript without any framework, then you must add your textChange listener after loaded event.
XML
<TextField loaded="onTextFieldLoaded"></TextField>
JS
function onTextFieldLoaded(args) {
const textField = args.object;
textField.off("loaded");
textField.on("textChange", onTextChange);
}
function onTextChange(args) {
console.log("Changed: " + args.value);
}
Here is a Playground Sample.
You can use onkeyup event to trigger the validation for the form.
See the Snippet below:
document.addEventListener("load", function(){
});
function validate(event){
if(document.getElementById("username").value.trim()!="" && document.getElementById("password").value.trim()!=""){
document.getElementById("btn").removeAttribute("disabled");
}else{
document.getElementById("btn").setAttribute("disabled", "disabled");
}
}
.enable{
}
<div>
<label for="username"><input type="text" id="username" name="username" onkeyup="validate(event)"/></label>
<label for="password"><input type="password" id="password" name="password" onkeyup="validate(event)"/></label>
<button id="btn" value="Submit" disabled>Submit</button>
</div>
Edited my whole answer because I initially gave you a whole demo in Javascript lol. Maybe someone with a lot of reputation points should make a Nativescript tag.
Anyway, have you tried it like this?
<TextField hint="Enter text" text="" (textChange)="myFunction($event)"></TextField>
OR
var el = page.getViewById("myEl");
el.on("textChange", myFunction);
function myFunction() {
console.log('woo');
}
And here's some relevant-looking documentation: https://docs.nativescript.org/angular/ui/ng-ui-widgets/text-field#text-field-binding
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I have this element, it is auto generated by mcssl checkout form. It is a custom field. I'm trying to select it using javascript like so:
var form_field_gclid = document.getElementById("#ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox");;
console.log(form_field_gclid);
<input name="ctl00$ctl00$mainContent$scPageContent$customFieldsControl$customFieldsRepeater$ctl00$customFieldTextBox" type="text" maxlength="200" size="50" id="ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox" class="text">
But I'm getting null as a result. I've tried also, document.querySelectorAll(...); but the same result. It's working when I tried it from console but I'm wondering why it won't work if it's on page javascript. Any ideas would be appreciated. Thank you.
I tried getting rid of the # sign but same result.
<script type="text/javascript">
(function() {
var form_field_test = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox");;
console.log(form_field_test);
}());
</script>
This is the full script I'm using.
You do not need the # in your call to document.getElementById. Simply remove it.
var form_field_gclid = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox");
If you were using jQuery, however, you would need it:
var myElement = $('#myElementId');
But since you are using vanilla JS, simply pass in the element's id as a string.
You have to put the script below the html of the input you are trying to hook.
If the form is not rendered the script will return null.
In your webpage you run the script before the input form is rendered.
I think you are looking for the input value. Right?
Also i added a button for you to give you an example about how to add more functionality. For example, how to add a background color to your input
var form_field_gclid = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox").value;
console.log(form_field_gclid);
// add color to your input
function addColor(){
form_field_gclid = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox").style.backgroundColor = "green";
}
If you mean to get the value of the input, i think you are looking for this:
<input name="ctl00$ctl00$mainContent$scPageContent$customFieldsControl$customFieldsRepeater$ctl00$customFieldTextBox" type="text" maxlength="200" size="50" id="ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox" class="text" value="1">
<button onclick="addColor();">change color</button>
You could try this old school vanilla ::
var form_field_gclid = ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox;
console.log( form_field_gclid );
<input type="text" maxlength="200" size="50" id="ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox" class="text">
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 5 years ago.
Improve this question
am new to web development i have developed one website and now i want to place a text field on top corner and give options to pick a city and display content based on selected city. for example: in a web page i should have a text box, if i enter some city name it should display tat cities contents (use case: if i select Delhi it should display Delhi's content, if i select Mumbai it should display Mumbai's content how can i achieve this task ) any code, any references can be appreciated, Thanks in advance. (HTML, javascript, java anything is ok)
Here is something like what you want, you can make a popup instead of a dropdown if you want. Tell me if you need anymore help, or need to understand the code. This code is based of Dmitriy Lishtvan's answer for this question. I just made it relate to your question.
$(function(){
$('.selectOption').change(function(){
var selected = $(this).find(':selected').text();
//alert(selected);
$(".desc").hide();
$('#' + selected).show();
}).change()
});
.desc {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selectOption">
<option>--Choose One---</option>
<option>Chennai</option>
<option>Washington</option>
<option>Hamburg</option>
</select>
<div id="changingArea">
<div id="Chennai" class="desc"><iframe height=900 width=900 src="https://en.wikipedia.org/wiki/Chennai"></iframe></div>
<div id="Washington" class="desc"><iframe height=900 width=900 src="https://www.washingtonpost.com"></iframe></div>
<div id="Hamburg" class="desc"><iframe height=900 width=900 src="https://www.tripadvisor.com/Tourism-g187331-Hamburg-Vacations.html"></iframe>
</div>
</div>
In Java you can use the TextField class to have the user input. Then you can use a JButton and then when the user clicks the button the corresponding content(Organize the content with an array).
Link to info about TextFields
https://docs.oracle.com/javase/tutorial/uiswing/components/textfield.html
Also JButton
https://docs.oracle.com/javase/tutorial/uiswing/components/button.html
Good Luck!
I think this is what you want
`http://jsfiddle.net/XCUDF/`
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Improve this question
I am having an issue with javascript and i don't know how to solve it ...
Actually my code is working good with jsfiddle, but when i try to insert on my HTML page ,it simply doesnt work anymore ...
What i want to, is to add the < li> on < ul> each time i tried to hit the button named "Add" !
HTML code:
....
<td width="50%" valign="top">
<b> SUPER: </b>
<ul id="ul">
</ul>
</td>
....
<input type="submit" value="Add" onclick="add()"/>
....
JavaScript code:
<script type="text/javascript">
function add(){
var ul = document.getElementById("ul");
var li = document.createElement("li");
li.innerHTML = "LoL";
ul.appendChild(li);
}
</script>
The result with that code : it doesn't add anything on my HTML page when i try to hit the button...
Thankfully,
May be oversimplifying this, but here's a thought: Your input button is a SUBMIT, so when the onClick performs, the submit happens immediately thereafter, restoring the page to its original state. The process happens so quickly the appearance is that the code did nothing.
Just change the input type to "button", eg
<input type="button">