For a few reasons, I can't have a <form> tag on the page, but I do have <form> elements like <input>, <textarea>, and <button>. I have a reset button and I need to reset everything inside the input and textareas when I click the button. There's also quite a few input boxes.
Additionally, there is a php script that fills in <span> tags with requested information that I would also like to make blank again when pressing the button.
Some example code below
HTML
<button id="reset" onclick="resetFields()">Reset Fields</button>
<input id="myID" type="text">
<input id="myID2" type="text">
<span id="mySpan">Some text here</span>
<span id="mySpan2">Some text here</span>
I think that is what you want:
function resetFields(){
var inputArray = document.querySelectorAll('input');
inputArray.forEach(function (input){
input.value = "";
});
var textAreaArray = document.querySelectorAll('textArea');
textAreaArray.forEach(function (textArea){
textArea.innerHTML = "";
});
var spanArray = document.querySelectorAll('span');
spanArray.forEach(function (span){
span.innerHTML = "";
});
}
http://jsbin.com/gamubageke/edit?html,js,console,output
<script>
function resetFields() {
var x = document.querySelectorAll(".resettable");
x.forEach(el => {
el.value='';
el.innerHTML='';
})
}
</script>
<body>
<button id="reset" onclick="resetFields()">Reset Fields</button>
<input id="myID" type="text" class="resettable">
<input id="myID2" type="text" class="resettable">
<span id="mySpan" class="resettable">Some text here</span>
<span id="mySpan2" class="resettable">Some text here</span>
</body>
If you use jquery, you can do something along the lines of
$("input[type='text'],textarea").val('');
$("#mySpan,#mySpan2").text('');
Related
I have an input box that I am typing into and a submit button. I want to display whatever is typed into the input box in a blank pre-existing <p> tag. How can I do this?
I currently have this code:
<label for="moveData">Enter data</label>
<input type="text" id="moveData" name="moveData"><br>
<button id="btn" type="button">Move the data</button>
<script>
document.getElementById("btn").onclick = function()
{
var input = document.getElementById("btn").value;
document.getElementById("p1").innerHTML = input;
}
</script>
<p id="p1"></p>
I want the <p id="p1"></p> to be replaced with the user text input as so: <p id="p1">(USER INPUT GOES HERE)</p> after the submit button is clicked.
You are picking the value from the button instead of the input. You just need to change this line:
<label for="moveData">Enter data</label>
<input type="text" id="moveData" name="moveData"><br>
<button id="btn" type="button">Move the data</button>
<script>
document.getElementById("btn").onclick = function() {
var input = document.getElementById("moveData").value; // <-- this line
document.getElementById("p1").innerHTML = input;
}
</script>
<p id="p1"></p>
i want any text like hello world to be appeared in a input field when i click the button. How can i do that?
enter code here
<button class='submit' onclick="myFunction()"> Click Me </button>
<input type= 'text' id='demo'>
Use eventListeners via addEventListener
window.addEventListener("load", onLoadHandler);
function onLoadHandler(){
let button = document.getElementById("myButton");
button.addEventListener("click",buttonClick);
}
function buttonClick(e){
let input = document.getElementById("textInput");
input.value = "Hello world!";
}
<div>
<input id="textInput">
</div>
<div>
<button id="myButton">
write in input
</button>
</div>
This is the HTML code:
<body>
<form>
<input id="input" type="text" name="input" value="Enter Here">
<input type="submit" value="Submit">
</form>
<div id="display">
</div>
</body>
This is the JavaScript:
input = document.getElementById("input");
if (input.value == "Hello") {
display.innerHTML = "Hello";
} else {
display.innerHTML = "Type";
}
When I change the input value by clicking on the input field and typing "Hello", it does not display "Hello" in display.innerHTML. I would like it to display "Hello" when "Hello" is typed into the input field. That's a lot of "Hello"'s! Any help would be great! Thanks in advance.
var input = document.getElementById("input"),
display=document.getElementById("display");
input.oninput=function(){
if (input.value === "Hello") {
display.innerHTML = "Hello";
} else {
display.innerHTML = "Type";
}
};
<input id="input" type="text" name="input" value="Enter Here">
<div id="display">
</div>
Your javascript code only gets executed once before you have entered anything in the input field.
You need to either setup a change handler for the input field or a submit handler for the form and set display.innerHTML.
Also, did you miss a display = document.getElementById("display");?
If you want use your button for submit the value of your textbox (your input type text-field) use onclick event as follows:
function displayData() {
var div_display = document.getElementById('display');
/* This is your input, but you shoud use another Id for your fields. */
var textValue = document.getElementById('input').value;
/* Change the inner HTML of your div. */
div_display.innerHTML = textValue;
}
<input id="input" type="text" name="input" value="Enter Here" />
<input type="submit" value="Submit" onclick="displayData();" />
<div id="display">
</div>
Hope it helps.
I have an input text field with a placeholder attribute. The placeholder disappears when I enter text, but I would like the the placeholder text to reappear after I click the button, "clear," or when the text field is empty. What are some ways I can achieve this?
Below is the code I have below. I tried
document.text.value = "hello";
but the text "hello" stays in the box when I start typing.
HTML
<input type="text" placeholder="hello">
<input type="button" value="clear" onclick(clearText)>
Javascript
function(clearText) {
document.text.value = " ";
}
When the text field is empty, the placeholder will reappear automatically.
When the clear button is clicked, you can use onclick attribute on the button and define the function like this:
Implementation with pure JS:
<script>
function clearText() {
// we use getElementById method to select the text input and than change its value to an empty string
document.getElementById("my_text").value = "";
}
</script>
<!-- we add an id to the text input so we can select it from clearText method -->
<input id="my_text" type="text" placeholder="hello">
<!-- we use onclick attribute to call the clearText method -->
<input type="button" value="clear" onclick="clearText();">
JSFiddle Demo
Or you can use jQuery:
<script>
function clearText() {
$("#my_text").val("");
}
</script>
<input id="my_text" type="text" placeholder="hello">
<input type="button" value="clear" onclick="clearText();">
JSFiddle Demo
The easiest way to do it:
<input placeholder="hello" onchange="if (this.value == '') {this.placeholder = 'hello';}"
/>
You were very close
HTML :
<input type="text" id='theText' placeholder="hello">
<input type="button" value="clear" onclick='clearText()'>
JavaScript :
clearText = function(){
document.getElementById('theText').value = "";
}
Demo : http://jsfiddle.net/trex005/7z957rh2/
There are multiple problems with your javascript syntax, starting from function declarations and ending with onclick event specification.
However, you were on the right way, and code below does the trick:
<input type="text" placeholder="hello">
<input type="button" value="clear" onclick="document.querySelector('input').value=''">
However, it will only work if this is the only input box in your document. To make it work with more than one input, you should assign it an id:
<input type="text" id="text1" placeholder="hello">
<input type="button" value="clear" onclick="document.querySelector('#text1').value=''">
and use "text2" and so on for other fields.
You should not forget to set "return false;"
document.getElementById('chatinput').onkeypress = function(){
var key = window.event.keyCode;
if (key === 13) {
var text = this.value;
var object = document.getElementById('username_interface');
email = object.email;
username = object.username;
empty = /^\s+$/;
// function Send Message
this.value = "";
return false;
}else{
return true;
}}
I need to change the value displayed in a form. For example:
<span id="copy" onClick="addValue()">**Text1**</span>
<span id="copy" onClick="addValue()">Text2</span>
Based from what I click, I want to move it to the input value like this:
<input id="paste" class="text" type="input" name="select" value="**Text1**"/>
Function
<script language="javascript" type="text/javascript">
<!--Hide Javascript
function addValue(){
document.getElementById('paste').value = this.innerText;
}
--> </script>
When I click on Text1 in value fild I get "undefined" instead of "Text1" ...
Give this a go.
You need to pass the element into your function so you can access it's properties to assign them to your form input.
HTML:
<form name="myForm">
<span onclick="copyText(this)" >Text1</span>, <span onclick="copyText(this)" >Text2</span>
<br>
<input name="myField"></input>
</form>
Javascript:
function copyText(element) {
document.myForm.myField.value = element.innerHTML;
}
I'd use:
function addValue(el) {
document.getElementById('paste').value = el.innerText || el.textContent || el.outerText;
}
And set the HTML tag like so:
<span id="copy" onClick="addValue(this)">**Text1**</span>
document.myForm.myField.value = "I'm a different value now!";
Is this what you're looking for?
Form and input should have a "name" property, like:
<form name="myForm">
<input name="myField" />
in the case above.