This question already has answers here:
How do I add something to my html using javascript without erasing the whole page
(3 answers)
Closed 6 years ago.
Hey i got this Code and I would like to add comments below the heading.
But right now after i click the submit send the header and the button wipes away.
However I would like them to stay so that the text input will be displayed below the button.
Thank you in advance!
<html>
<body>
<h1>Add comment below</h1>
<label for="vname">Comment:
<input type="text" id="vname" name="vname">
<input type="submit" value="Submit" onclick="addComment()">
<script>
function addComment()
{
var vname = document.getElementById("vname").value;
document.write(vname);
}
</script>
</body>
</html>
<html>
<body>
<h1>Add comment below</h1>
<label for="vname">Comment:</label>
<input type="text" id="vname" name="vname">
<input type="submit" value="Submit" onclick="addComment()">
<ul id="comments"></ul>
<script>
function addComment()
{
var vname = document.getElementById("vname").value;
var li = document.createElement('li');
li.innerText = vname;
document.getElementById('comments').appendChild(li);
document.getElementById("vname").value = '';
document.getElementById("vname").focus();
}
</script>
</body>
</html>
Related
Hey everyone i am trying to solve the following question
Using form, make a page in HTML where the user can enter a keyword and click on the “Search” button and then that keyword is searched on google.
But till now have no luck in figuring out how to redirect with the i/p from my textbox in form
here is the code
<html>
<head>
<title>What is PHP</title>
</head>
<body>
<script type="text/javascript">
function showDetails()
{
var a = document.getElementById('sea');
window.location = 'https://www.google.com/search?q='+ a;
}
</script>
<img src="https://www.google.com/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwjN2I-drPLfAhVBrY8KHUBlCwMQjRx6BAgBEAQ&url=https%3A%2F%2Fwww.froala.com%2Fwysiwyg-editor%2Fdocs%2Fserver%2Fphp%2Fimage-upload&psig=AOvVaw2Rv-5CgPx3gJo5_dzi6XFo&ust=1547729604931087" width="25%" height="25%">
</img>
<p>Php is amazing<br>Php is not cool</p>
<button onmouseover="alert('I Love HTML too!')">I Love HTML</button>
<br>
<br>
<form method="POST">
Search: <input type="text" name="fname" id="sea">
<input type="button" name="btn" onclick="showDetails()">
</form>
</body>
</html>
By selecting getElementById() method you select the element as a whole. You can get the value of an input-element with the value attribute.
var a = document.getElementById('sea').value;
I know this is continuously asked anew, and I've checked out different answers and tried different solutions but to no avail.
I just have to build a form that takes as input the cylinder ray and it height and then find the volume when we click a button.After finding it, shuold be cleared all fields with another button .The function to calculate volume it is working fine, but not the function that clear inputs.
Here is the code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<script type="text/javascript">
function llogarit() {
var rreze = parseInt(document.getElementById("val1").value);
var lartesi = parseInt(document.getElementById("val2").value);
var rez = document.getElementById("llogarit");
rez.value = (Math.PI * Math.pow(rreze, 2) * lartesi);
}
function fshij() {
document.getElementById("val1").value.clear();
document.getElementById("val2").value.clear();
document.getElementById("llogarit").value.clear();
}
</script>
</head>
<body>
<form>
<p>Vendos 2 vlera</p>
<p>rreze
<input type="text" name="rreze" id="val1" value="2" /></p>
<p> lartesi
<input type="text" name="lartesi" id="val2" value="2" /></p>
<p> Vellimi
<input type="text" name="vellimi" id="llogarit" value="" /></p>
<input type="button" onclick="llogarit()" value="llogarit" />
<input type="reset" value="fshij" onclick="fshij()" />
</body>
</html>
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset
You can reset all form controls in one form with reset method.
// <form name="FORM_NAME">
document.forms["FORM_NAME"].reset();
Try the following:
document.getElementById('myInput').value = ''
Try the follow and add a div tag to the code
<div class="yourClass">
<button onclick="cdClear();" class="yourClass">Clear</button>
</div>
Note: In HTM, you can replace the class with id if you have already coded.
<script type="text/javascript">
function cdClear(){var a=document.getElementById("codes");a.value="",a.focus(),</script>
If i had a button and an input field. How would i alert whatever is in the input field to the user, when the button is clicked.
Explain your code please.
Make it as simple as possible.
<input type="text" id="input" />
<button onclick="displayEnteredText()">Display</button>
<script>
function displayEnteredText() {
var inputText = document.getElementById("input"); // get the element with id "input" which is the textField
alert(inputText.value); // show the value of the input in alert message
}
</script>
One possible approach:
<!DOCTYPE html>
<html>
<head></head>
<body>
<input id="name" value="">
<input type="button" value="show me the name" onclick="alert(document.getElementById('name').value)">
</body>
</html>
Another possible approach:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var buttonElement = document.getElementById('button');
buttonElement.addEventListener('click', function() {
alert(document.getElementById('name').value);
});
}
</script>
</head>
<body>
<input id="name" value="">
<input id="button" type="button" value="show me the name">
</body>
</html>
With the second approach you can separate responsabilities, one person can create de html, and another person can focus in create javascript code.
Exists several ways to do this, but with two examples i think is enough in the current context
<body>
<input type="text" name="basicText" id="alertInput">
<button class="alertButton">Click me!</button>
</body>
<script type="text/javascript">
$(".alertButton").click(function(){
var value = $("#alertInput").val();
alert(value + " was entered");
});
</script>
In order to show what you typed in your alert, you need to reference the value inside the textbox. Since jquery is tagged in the post, I used it to get what's in the text box.
You can also try this one
HTML
<input type="button" id="btnclick" style="width:100px" value="Click Me" />
<input type="text" id="txtbox">
JS
$("#btnclick").click(function(){
var txtvalue = $("#txtbox").val();
alert("User enter " + txtvalue);
})
FIDDLE
Hi I'm new in javascript so I'm sorry if I my question is silly
I am suppodsed to make a dive where there would be two input fields and a button. When you press the button the text that is written in first field must move to the second one. This is what I have done:
<script>
function myfunction(){
var fp= document.forms["fora"];
fp.elements[1].innerHTML=fp.element[0].value;
fp.elements[0].value="";
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>Project 2 </title>
</head>
<body>
<div>
<form id=fora>
First phrase:<br>
<input type="text" name="first phrase" >
<br>
Second phase:<br>
<input type="text" name="second phrase">
</form>
<button type="button" onclick="myfunction()">push me
</button>
<buttom>
</button>
</div>
<p id="intro"></p>
</body>
</html>
Has anyone any idea what i am doing wrong??
You need to change innerHTML to value. And there is a typo fp.element (missing s , should be fp.elements)
var fp= document.forms["fora"];
fp.elements[1].value=fp.elements[0].value;
fp.elements[0].value="";
Change your javascript to read and set the values of the inputs based on the names:
function myfunction(){
document.getElementsByName("second phrase")[0].value = document.getElementsByName("first phrase")[0].value;
document.getElementsByName("first phrase")[0].value = "";
}
Change
fp.elements[1].innerHTML=fp.element[0].value;
to
fp.elements[1].value = fp.elements[0].value;
function myfunction(){
var fp= document.forms["fora"];
fp.elements[1].value = fp.elements[0].value;
fp.elements[0].value = "";
}
<form name="fora">
First phrase:<br>
<input type="text" name="firstPhrase" ><br>
Second phase:<br>
<input type="text" name="secondPhrase">
</form>
<button type="button" onclick="myfunction()">push me</button>
I am trying to make a form with one text input and a submit button. What I want the script to do is take the text after I click submit and store it as a value. After that, if I type something else (without refreshing the page) and click submit store the input as another value. This process can be done one hunded times so I will have 100 different values. What I also want to do with this values is put them in a new array.So:
var AllValues = [""+Val1+"",""+Val2+"",""+Val3"",..,""+Val99+"",""+Val100""];.
The code I have managed to write untill now is this but it won't actually help you:
<!DOCTYPE html>
<html>
<body>
<form id="form1">
Type the words here: <input type="text" name="fname"><br>
<input type="button" onclick="myFunction()" value="Submit">
</form>
<input type="button" onclick="myFunction2()" value="Print all inserted words at array">
<p id="demo"></p>
<script>
function myFunction() {
}
function myFunction2() {
var AllValues = [""+Val1+"",""+Val2+"",""+Val3"",..,""+Val99+"",""+Val100""];
document.getElementById("demo").innerHTML = AllValues;
}
</script>
</body>
</html>
I am asking this question after trying a lot of things which didn't worked and I know that the script will work only if I use HTML local storage but I don't have the knowledge to do it even if I did a lot of research on this topic. I dont want to only store the values but I want to get them inside a new Array. I am making the question a bit more general as always in order to help as many as possible. Could you please help me? Thanks in advance.
You had several issues, the main is that you have to provide the "id" attribute for the input text named "fname".
Next you have to store the AllValues array in context visible by two declared functions (in this case, the global context).
<!DOCTYPE html>
<html>
<body>
<form id="form1">
Type the words here: <input type="text" name="fname" id="fname"><br>
<input type="button" onclick="myFunction()" value="Submit">
</form>
<input type="button" onclick="myFunction2()" value="Print all inserted words at array">
<p id="demo"></p>
<script>
var AllValues = [];
function myFunction() {
var fname = document.getElementById("fname").value;
AllValues.push(fname);
}
function myFunction2() {
document.getElementById("demo").innerHTML = AllValues;
}
</script>
</body>
</html>
Try also the immediate function to avoid storing variables in global context. The code that I paste is not very clean of course, but working :)
For a very basic way of doing this, try the following:
HTML:
<form id="form1">Type the words here:
<input type="text" name="fname">
<br>
<input type="button" value="Submit" class="submit">
</form>
<input type="button" class="show-button" value="Print all inserted words at array">
<p id="demo"></p>
JS:
var values = new Array();
$(".submit").on("click", function () {
values.push($('input[name="fname"]').val());
});
$(".show-button").on("click", function () {
$("#demo").html(values.join("<br>"));
});
Fiddle here: http://jsfiddle.net/5z4g04js/2/
My answer:
<form id="form1">
Type the words here: <input id="words" type="text" name="fname"><br>
<input type="button" id="submitWords" value="Submit">
</form>
<input type="button" id="printWords" value="Print all inserted words at array">
<p id="demo"></p>
<script>
var arrWords = [];
var btnSubmit = document.getElementById('submitWords');
var btnPrint = document.getElementById('printWords');
var demo = document.getElementById('demo');
btnSubmit.onclick = function() {
var words = document.getElementById('words').value;
arrWords = words.split(' ');
console.log(arrWords);
}
btnPrint.onclick = function() {
for(var i = 0; i < arrWords.length; i++) {
demo.innerHTML += arrWords[i]+"<br>";
}
}
</script>
</body>
</html>
You could use jquery to do that:
var all_values =[];
function myFunction() {
var temp_val = $("#fname").val();
alert(temp_val);
all_values.push(temp_val);
}
function myFunction2() {
alert(all_values);
}
<form id="form1">
Type the words here: <input type="text" name="fname" id="fname"><br>
<input type="button" onclick="myFunction()" value="Submit">
</form>
<input type="button" onclick="myFunction2()" value="Print all inserted words at array">
<p id="demo"></p>
working demo
p.s. edited jquery answer with more changes. working demo
Using this getAllValues(name) function, you can return the values of any element with the name of 'name'.
function getAllValues(name) {
var nameMatches=document.getElementsByName(name);
var AllValues=[];
for (var i=0; i<nameMatches.length; i++) {
AllValues.push(nameMatches[i].name);
AllValues.push(nameMatches[i].value);
}
return AllValues;
}
To call this you would use getAllValues('fname').