I was trying to make a "find and replace" page and my code is working properly except that the resulting string is only displayed for a split second before it disappears and the form is reset
Here is the HTML
<body>
<form>
Text<textarea id="string"></textarea>
<br>
Find:<input type="text" id="keyword">
<br>
Replace with:<input type="text" id="replacewith">
<button id="replace" onclick="findReplace()">Find and Replace</button>
</form>
<p id="result"></p>
</body>
Here is the js
<script>
function findReplace(){
var str = document.getElementById("string").value;
var input = document.getElementById("keyword").value;
var replaced = document.getElementById("replacewith").value;
var x = str.replace(input, replaced);
document.getElementById("result").innerHTML = x;
}
</script>
You will have to prevent the form from submitting, either by:
- Using findReplace as the submit eventHandler and calling event.preventDefault()
- Adding type="button" to the button element. (h/t radulfr)
- Adding onsubmit="return false" to your form element:
function findReplace() {
var str = document.getElementById("string").value;
var input = document.getElementById("keyword").value;
var replaced = document.getElementById("replacewith").value;
var x = str.replace(input, replaced);
document.getElementById("result").innerHTML = x;
}
<form onsubmit="return false">
Text<textarea id="string"></textarea>
<br> Find:
<input type="text" id="keyword">
<br> Replace with:<input type="text" id="replacewith">
<button id="replace" onclick="findReplace()">Find and Replace</button>
</form>
<p id="result"></p>
Related
I have a school project, where they asked us to create a form where you input values, and when you click submit, a new note will shoe and will be filled with the values from the form.
My problem is that I can't understand how to write the function that creates the notes with the values from the form.
I already did the form and the design for the page. Also started the function to create the note.
This is the form:
<form id="form1">
Mission Details: <textarea name="Details" rows="3" cols="20"></textarea> <br> <br>
Mission Due Date: <input type="Date" name="Date"> <br> <br>
Mission Due Time: <input type="Text" name="Time"> <br> <br>
<button type="button" onsubmit="createNote()"> Submit </button>
<button type="button" onclick="Clear()"> Clear </button>
</form>
This is the script i started:
function CreateNote(event) {
var form = event.currentTarget;
var details = form.Details.value;
var date = form.Date.value;
var time = form.Time.value;
}
var form = document.getElementById('form1');
form.onsubmit = CreateNote();
This is the div for the note and note content:
<div class="note">
<div class="noteDetails">
</div>
</div>
Eventually, the note will have a background from an image in a CSS file, and inside that note, it will have the values from the form.
1. Create a template for your note, lets say you display your text with <p></p>.
2. Leave it with empty values. Give it an id, lets call it "details".
3. After you have the desired values, use document.getElementById("details"), and fill the <p> with the value.
<div class="note">
<div class="noteDetails">
<p id="details"></p>
</div>
</div>
then in your JavaScript you can use
var stringInput = "Some String";
var detailsElement = document.getElementById("details");
detailsElement.innerHTML = " stringInput;
You can now use your div noteDetails. Inside it create three p elements with id details, date and time.
eg:
<div class="noteDetails">
<p id="details"></p>
<p id="date"></p>
<p id="time"></p>
</div>
Change your button element to:
<button type="button" onclick="createNote()"> Submit </button>
Note: your using createNote() in html and using CreateNote in JS
and inside your createNote function just add
function createNote() {
var form = document.getElementById('form1');
var details = form.Details.value;
var date = form.Date.value;
var time = form.Time.value;
var detailsPara = document.querySelector('#details');
detailsPara.innerText = details;
var datePara = document.querySelector('#date');
datePara.innerText = date;
var timePara = document.querySelector('#time');
timePara.innerText = time;
}
remove lines from your code
var form = document.getElementById('form1');
form.onsubmit = CreateNote();
UPDATE: if input values are to be shown immediately then add these to html
Mission Details: <textarea name="Details" rows="3" cols="20" oninput="createNote()"></textarea> <br> <br>
Mission Due Date: <input type="Date" name="Date" oninput="createNote()"> <br> <br>
Mission Due Time: <input type="Text" name="Time" oninput="createNote()"> <br> <br>
So essentially, I have an input and I want to modify the value before the user submits it. All I want to do is add a string to the end of this inputs value. I thought it would be something like:
<form action="myURL" onsubmit="myFunction" method="POST">
<input id="myID" value="someValue" />
<button type="submit">Press Me!</button>
</form>
<script>
myFunction()
{
var x = document.getElementById("myID").value;
document.getElementById("myID").value = x + "myString";
}
</script>
However, when the form is submitted the appended string is not sent and only the original string makes it. Does anyone know why this is happening?
You can submit the form using JavaScript:
Please Note: The function name should be preceded by the function keyword.
document.getElementById('myForm').onsubmit = myFunction;
function myFunction(){
var x = document.getElementById("myID").value;
document.getElementById("myID").value = x + "myString";
}
<form id="myForm" action="myURL" method="POST">
<input id="myID" value="someValue" />
<button type="submit">Press Me!</button>
</form>
You can do the changes in onclick event of the submit button instead of onsubmit.
<form action="myURL" id="myForm" method="POST">
<input id="myID" value="someValue" />
<button type="submit" onclick="myFunction(event)">Press Me!</button>
</form>
<script>
myFunction(event)
{
event.preventDefault();
var x = document.getElementById("myID").value;
document.getElementById("myID").value = x + "myString";
document.getElementById("myForm").submit();
}
</script>
You need to invoke the function in the submit event handler with brackets i.e. onsubmit="functionToCall()" instead of onsubmit="functionToCall".
You need the function keyword in front of the name of the function: you would write function functionName(){} instead of just functionName(){}.
You should set the variable x to equal the input element, not the input element's value so you will not need to query the DOM again.
<form action="myURL" onsubmit="myFunction()" method="POST">
<input id="myID" value="someValue" />
<button type="submit">Press Me!</button>
</form>
<script>
function myFunction()
{
event.preventDefault();//for demonstrative purposes
var x = document.getElementById("myID");
x.value += "myString";
}
</script>
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('');
I would like to take the text from two text areas and insert them concatenated into a following paragraph. I've made a calculator and odd/even validator, and had been able to draw the user input values just fine. Is there something different with text?
<p>
<textarea id="text1" rows="4" cols="50">Type here!</textarea>
<br>
<textarea id="text2" rows="4" cols="50">Now type something here!</textarea>
<br>
<button type="button" onclick="tafunc()">Click here to put text in paragraph below!</button>
</p>
<p id="result"></p>
<script>
function tafunc() {
var first, second, bothtextareas;
first = document.getElementById("text1").value;
second = doucment.getElementById("text2").value;
bothtextareas = first.concat(" ", second);
document.getElementById("result").innerHTML = bothtextareas;
}
</script>
document is misspelled in second assignment. and using value attribute for textarea is correct!
HTML:
<textarea id="text1" rows="4" cols="50">Type here!</textarea>
<br>
<textarea id="text2" rows="4" cols="50">Now type something here!</textarea>
<br>
<button id="btn1" type="button">Click here to put text in paragraph below!</button>
</p>
<p id="result"></p>
change your inline javascript to this:
var btn = document.getElementById("btn1");
btn.onclick = function () {
var first, second, bothtextareas;
first = document.getElementById("text1").value;
second = document.getElementById("text2").value;
bothtextareas = first.concat(" ", second);
document.getElementById("result").innerHTML = bothtextareas;
}
and here's a working jsFiddle
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').