Display input by clicking submit button - javascript

For example when i give an input saying "Good Morning" in the submit button. I should be able to view my input on the Html web page.
<input id="a"/>
<button type="submit" onclick="e()">Submit<button
<p id="k"></p>

Call a function on click of submit and fetch the value of the input box. Using .innerHTML append the value to the paragraph or a div
function e()
{
document.querySelector('#k').innerHTML=document.querySelector('#a').value
}
<input id="a"/>
<input type="submit" onclick="e()" value="Submit">
<p id="k"></p>

It's not quite clear what you're trying to do, but assuming I undertood correctly. You want to take an input's value & output it in the DOM when submitting the form.
You can check a code working sample here. Notice kindly that you can reuse this function again in another input by changing the parameters.
const submitForm = (value, displayer) => {
let input = document.getElementById(value);
let valueHolder = document.getElementById(displayer);
let inputValue = input.value;
valueHolder.innerHTML = inputValue;
input.value = '';
};
const form = document.getElementById('formSubmission');
form.addEventListener('submit', (e) => {
e.preventDefault();
submitForm('inputData', 'valueHolder');
});
<form id="formSubmission">
<input type="text" placeholder="Enter something..." id="inputData" />
<input type="submit" />
</form>
<h1 id="valueHolder"></h1>

Related

I want the innerHTML of my tag to be updated with the input value

const paragraph = document.querySelector(".paragraph")
const input = document.querySelector("input")
const updInnerHTML = () => {
paragraph.innerHTML = input.value
}
<form>
<input type="text" placeholder="Type Something">
<button onclick="updInnerHTML()">Update InnerHTML</button>
</form>
<p class="paragraph"></p>
The above code seems to work for a split second, the value appends to the <p> tag and vanishes immediately, Yeah I know this could be made permanent if I remove <form></form> tags, but then I'll lose the ability to automatically clear the input fields! Is there a work around for this? Do I need to use a database or atleast LocalStorage? Is there a way to achieve it without using a database?
use action="javascript:void(0);" for no form submit and then clear form by input.value ='';
const paragraph = document.querySelector(".paragraph")
const input = document.querySelector("input")
const updInnerHTML = () => {
paragraph.innerHTML = input.value;
input.value ='';
}
<form action="javascript:void(0);">
<input type="text" placeholder="Type Something">
<button onclick="updInnerHTML()">Update InnerHTML</button>
</form>
<p class="paragraph"></p>
Because the button will submit the form which will make the page reload, you can prevent that by setting type="button" to the button element ( type of button by default is submit ).
const paragraph = document.querySelector(".paragraph")
const input = document.querySelector("input")
const updInnerHTML = () => {
paragraph.innerHTML = input.value
}
<form>
<input type="text" placeholder="Type Something">
<button onclick="updInnerHTML()" type="button">Update InnerHTML</button>
</form>
<p class="paragraph"></p>

Javascript - How to add form's input into the dom properly?

I'm just trying to make a simple javascript form where everytime you type and submit something, it shows up in the page.
<form id="myForm">
<input id="text" type="text" name="name" value="">
<input id="submit" type="submit">
</form>
javascript:
document.getElementById("myForm").addEventListener('submit', function(){
var input = document.getElementById("text")
var output = input.value;
var printOutput = document.createElement('h1');
printOutput.innerHTML = output;
document.body.appendChild(printOutput);
});
This shows up for a second then disappears. I understand it's happening because the dom manipulation is happening inside the submit event. But I'm not sure how to go around that.
My first instinct was to use
return output;
then reference the whole function once I appendChild from outside it. But that didn't work either. I'm guessing cause It's an Eventlistener and not a normal function... any ideas on how to go with this?
You are ignoring the form primordial sense that is to send data over a server.
You don't need aform for what you intend. you need only input elements and a handler on the button.
function handler (){
var input = document.getElementById("text")
var output = input.value;
var printOutput = document.createElement('h1');
printOutput.innerHTML = output;
document.body.appendChild(printOutput);
document.getElementById("text").value='';
}
document.getElementById("submit").addEventListener('click', handler);
document.getElementById("text").addEventListener('keypress', function(e){ (e.charCode == 13) && handler();});
<div id="myForm">
<input id="text" type="text" name="name" value="">
<input id="submit" type="submit">
</div>
Add return false; at the end of the event listener. This stops the submit from actually happening which refreshes the page
Try this instead:
document.getElementById("myForm").addEventListener('submit', function(event){
event.preventDefault();
var input = document.getElementById("text")
var output = input.value;
var printOutput = document.createElement('h1');
printOutput.innerHTML = output;
document.body.appendChild(printOutput);
});
the simplest way of getting input and display on the same page is
function display()
{
var input=document.getElementById("text").value;
document.getElementById("display").innerHTML=input;
}
<form id="myForm">
<input id="text" type="text" name="name" value="">
<input id="submit" type="button" onclick=display() value="submit">
<div id="display"></div>
</form>
if you want to display multiple inputs i.e. each input entered by the user.
document.getElementById("display").innerHTML += input+"<br>";
Note: Always try to write easiest and shortest code for the optimized result.
yes it behaves how it should. it's form and what it does it submits all information to new page. you didn't provide action='' parameter and means it sends information on same page. when you click submit what happens is first you append h1 element and then it reloads, that's why it disappears. if you don't have other page to submit information get rid of forms.
<input id="text" type="text" name="name" value="">
<input id="submit" onclick='return getoutup();' type="submit">
<h1 id='output'></h1>
<script type="text/javascript">
function getoutup(){
document.getElementById('output').innerText=document.getElementById('text').value;
return false;
}
</script>
so you see that i have pre-created h1 tag, so you don't need much coding to append as function goes. just pre create with value of none and then change with one line of code. hope it helps. maybe it's not correct answer kind of changed your way.

Changing div content with Javascript onClick

I'm trying to use a textbox and a submit button to change a div on the page. I want to take the text that has been typed in the textbox and put it in the div when the button is clicked. I have this code:
function myfunction() {
var myText = document.getElementById("textbox").value;
document.getElementById('myDiv').innerHTML = myText;
}
<form>
<input type="text" name="textbox" id="textbox" />
<input type="submit" name="button" id="button" onclick="myfunction()" />
</form>
<br/>
<div id="myDiv"></div>
But nothing happens. When I try it in the browser it just refreshes the page and adds ?textbox=someValueHere to the end of the URL. How can I get the div to display the textbox value?
The problem is that the submit button is posting the form, so you are not seeing the change - If you change your submit button to a normal button it will work
<input type="button"name="button" id="button" onclick="myfunction()" />
The form is submitting. You need to stop that by adding return false; (if you are using Jquery) Or remove the form entirely it is not required.
function myfunction() {
var myText = document.getElementById("textbox").value;
document.getElementById('myDiv').innerHTML = myText;
return false;
}
Nothing happens because the form is being submitted. You need to prevent the default action from happening, which is the form submission. See preventDefault() or return false in the MDN for more details on how to prevent an events default action from occurring.
Call event.preventDefault() to prevent the normal form submission.
function myfunction(e) {
e.preventDefault();
var myText = document.getElementById("textbox").value;
document.getElementById('myDiv').innerHTML = myText;
}
<form>
<input type="text" name="textbox" id="textbox" />
<input type="submit" name="button" id="button" onclick="myfunction(event)" />
</form>
<br/>
<div id="myDiv"></div>

Adding textbox on button click with javascript

I'm working on a web form with a textbox for pets and an "add pet" button. Each time the button is clicked, an additional textbox should be displayed below the original one.
I'm assuming this would be accomplished with an onclick event, but I can't figure out how to get it to work.
Here is the code I have so far:
<html>
<head>
<title>Project 4</title>
</head>
<body>
<form name="myForm" onsubmit="return validateForm()">
Pets: <input type="text" id="pets">
<input type="button" id="addPet" value="Add Pet">
<br>
</form>
<script type="text/javascript">
function makeCopy() {
var copy = <input type="text">;
return copy;
}
</script>
</body>
</html>
There are other pieces to this as well, but none of them affect this particular problem I am having so didn't see the need to include the full code as it's fairly long.
Any suggestions are greatly appreciated.
Update:
I realize after reading the answers that I should've included more of my code to give you guys a better idea of the actual layout of my page. I have several text fields in my form and need the additional textboxes to be displayed right below the original "pets" textbox. Here's a jfiddle I threw together to give you guys a better idea of the layout. http://jsfiddle.net/a5m8nqwk/
Something like this?
<form name="myForm" id="myForm" onsubmit="return validateForm()">
Pets: <br />
<input type="text" id="pets" />
<input type="button" id="addPet" value="Add Pet" />
<br/>
</form>
document.getElementById("addPet").onclick = function() {
var form = document.getElementById("myForm");
var input = document.createElement("input");
input.type = "text";
var br = document.createElement("br");
form.appendChild(input);
form.appendChild(br);
}
Edit: I'd suggest using a table to style the input boxes, keep them in line. FIDDLE
You could easily add elements to the DOM:
function createPetField() {
var input = document.createElement('input');
input.type = 'text';
input.name = 'pet[]';
return input;
}
var form = document.getElementById('myForm');
document.getElementById('addPet').addEventListener('click', function(e) {
form.appendChild(createPetField());
});
function add(type) {
//Create an input type dynamically.
var element = document.createElement("input");
var text = document.getElementById("textId");
//Append the element in page (in span).
text.appendChild(element);
}
h1 {
color: #0000ff;
}
<h1>KIAAT</h1>
<b>Adding textbox on button click with javascript</b>
<br><br>
<form>
<input placeholder="text" name="element" hidden> </input>
<input type="button" value="Click Me" onclick="add(document.forms[0].element.value)"/>
<span id="textId"> </span>
</form>

When working with a form element how would you access what was input into the element to display a message?

I have a form
<form>
<input id="input" type="number">
<input type="submit">
</form>
I want to be able to input a number into the number and click the submit button and javascript displays a number based on the number submitted.
(My Guess is that this question is very basic but I am pretty knew to javascript.)
Here is a very simple (jquery-less) example of what you might be after:
<script type="text/javascript">
function ShowANumber() {
var currentNumber = document.getElementById("input").value;
var newNumber = currentNumber * 10 // Do something with input
document.getElementById("result").innerHTML = newNumber;
return false; // Stop form submit
}
</script>
<form onsubmit="return ShowANumber();">
<input id="input" type="text"/>
<input type="submit"/>
</form>
<div>Result: <span id="result"></span></div>

Categories