Javascript (not found) error on form submit [duplicate] - javascript

I am trying to copy the value of the textbox to the textarea However the value gets copied using the javascript function but it disappears from the textarea after a second. What am i doing wrong?Why does it get disappear after being copied?
this is the html:
<html>
<head>
<title>
</title>
<script src="scripts/script.js" type="text/javascript"></script>
</head>
<body>
<form>
<label>Key/Value Pair: </label><input type="text" name="inputText" id="t1"></br></br>
<label>Key/Value List: </label><br>
<textarea name="outputText" rows="10" cols="50" id="t2" ></textarea><br><br>
<input type="submit" value="Add" onClick="fn_copy()" />
</form>
</body>
and this is the javascript code:
function fn_copy()
{
var temp = document.getElementById("t1").value;
if(temp != "")
{
document.getElementById("t2").value = temp;
}
else
alert("Text is Empty");
}
Thank you.

Change your button type to button instead of submit. Otherwise your page will be refreshed (default behavior with submit) and hence the content of your textarea reset.
<input type="button" value="Add" onClick="fn_copy()" />

Your problem is that you are using input of type submit, when you click it, the fuction fn_copy execute, but also do a post request, and that is why the value disappears.
Change the input for a button like that and it will work
function fn_copy()
{
var temp = document.getElementById("t1").value;
if(temp != "")
{
document.getElementById("t2").value = temp;
}
else
alert("Text is Empty");
}
<form>
<label>Key/Value Pair: </label><input type="text" name="inputText" id="t1"><br><br>
<label>Key/Value List: </label><br>
<textarea name="outputText" rows="10" cols="50" id="t2" ></textarea><br><br>
<button type="button" onclick="fn_copy()">Add</button>
</form>
You can sse a working sample here: https://jsfiddle.net/8e5e4wuz/

http://www.w3schools.com/jsref/event_preventdefault.asp
Use preventdefault to stop it from submitting.

Try this. Add any id to the button, for example btn, and do this:
function fn_copy()
{
var temp = document.getElementById("t1").value;
if(temp != "")
{
document.getElementById("t2").value = temp;
}
else
alert("Text is Empty");
}
document.getElementById("btn").addEventListener("click", function(event){
fn_copy();
event.preventDefault();
})

Related

Why is my button not activating my validation function

I have an html page that access an external javascript file to validate the users input. My button doesnt seem to be doing anything and I dont understand why.
<html lang = "en">
<head>
<title>random</title>
</head>
<body>
<form>
<p>Please enter course information</p>
<input type="text" name="userInput" id="userInput" maxlength="15">
<input type="button" value="validate" onclick="validationFunction()">
<p id = "validationResults"></p>
</body>
</html>
//My external JS file that is supposed to validate the pattern WEB.110#4101_sp-2017
function validationFunction(input) {
var myRegularExpression = /([a-z]{3})(\W\d{3})(\W\d{4})(\W[a-z]{2})(\W\d{4})/gi;
return (myRegularExpression.test(input));
}
if (validationFunction(userInput)){
text = "valid";
} else {
text = "invalid";
}
document.getElementById("validationResults").innerHTML = text;
The below code works for what you want to achieve. Issues I noticed with your code:
Your form element had no closing tag
Rather than adding an onclick to a button within a form, you are better submitting the whole form, and grabbing the event object from an onsubmit event
You need to preventDefault on the event which stops the page refreshing
Your maxLength was set to 15 but your target expression is 20 characters
Your RegEx works, but could be cleaner
<!DOCTYPE html>
<html>
<head>
<title>random</title>
<script src="./script.js" defer></script>
</head>
<body>
<form id="form">
<p>Please enter course information</p>
<input type="text" name="userInput" id="userInput" maxlength="20"/>
<input type="submit"></input>
</form>
<p id="validationResults"></p>
</body>
</html>
const form = document.getElementById("form");
const paragraph = document.getElementById("validationResults");
form.addEventListener('submit', validationFunction);
function validationFunction(event) {
event.preventDefault();
const userInput = event.target.querySelector("#userInput").value;
const regEx = /([a-z]{3}(.\d{3})(#\d{4})(_[a-z]{2})(-\d{4}))/gi;
const isValid = regEx.test(userInput);
if (isValid) {
paragraph.innerHTML = "Valid";
} else {
paragraph.innerHTML = "Invalid";
}
};

Changing innerHTML based on input value

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.

How to output JavaScript results into an iframe

i'm trying to make it so when I press submit, it spits out the results of the first box, and outputs it as processed Javascript into the iframe, for some reason the box disappears on the webpage whenever I press the button.
function resetAreaBox(){
$('display').value = "";
$('textarea1').value = "";
}
function $(id){ return document.getElementById(id)}
function check() {
var box = $("textarea1");
if (box.value) {
$("display").innerHTML = box.value;
} else {
alert('Please enter text');
}
}
$("button").onclick = check;
<form>
<textarea id="textarea1" name="textarea1" rows="5" cols="40" placeholder="TEST"></textarea>
<iframe id="display"></iframe>
<br>
<br>
<input type="button" id="submitAlert" value="Reset Field" onclick="resetAreaBox()">
<input type="button" value="Submit" id="button">
</form>
JSBin - http://jsbin.com/midexefiqo/1/edit?html,js,output
There was many errors in your code. I fixed them.
You can't just add iframe in HTML and play with it. See the JS code.
On submit, it will call a function displayPreview in your if condition and preview.

make placeholder text reappear when no text is in the input field

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;
}}

Can I pass a variable textarea id to a JavaScript function?

I've run into a follow-up problem with this excellent solution:
Select checkbox when clicking in textarea (JavaScript?).
I need to apply the solution to more than one textbox in the same form. Is it possible in any way to alter the code into something like this (not working):
<html>
<body>
<textarea id="iamtextarea" rows="4" cols="10" onfocus="onFocusTextArea('iamtextarea');" onblur="onBlurTextArea('iamtextarea');">Enter some text in textbox</textarea>
<input type="checkbox" name="iamcheckbox" id="iamcheckbox" checked="checked"> I am checkbox<br>
<input type="hidden" name="hiddenString" id="hiddenString" value="Enter some text in textbox">
</body>
</html>
<script type="text/javascript">
function onFocusTextArea(variableName) {
document.getElementById("iamcheckbox").checked = false;
}
function onBlurTextArea(variableName) {
if(document.getElementById(variableName).value==document.getElementById("hiddenString").value) {
document.getElementById("iamcheckbox").checked = true;
}
}
</script>
What I want to do is to pass a variable id of the textarea to the javascript function so that I can use the same function for more than one textarea. Is that possible?
See jsfiddle here. This takes an element and a checkboxid
function onFocusTextArea(checkboxId) {
document.getElementById(checkboxId).checked = false;
}
function onBlurTextArea(element, checkboxId) {
if (element.value === "") {
document.getElementById(checkboxId).checked = true;
}
}
Some sample HTML
<textarea id="iamtextareaone" onfocus="onFocusTextArea('checkboxone');" onblur="onBlurTextArea(this, 'checkboxone');"></textarea>
<textarea id="iamtextareatwo" onfocus="onFocusTextArea('checkboxtwo');" onblur="onBlurTextArea(this, 'checkboxtwo');"></textarea>
<input type="checkbox" id="checkboxone" checked="checked">Checkbox One<br>
<input type="checkbox" id="checkboxtwo" checked="checked">Checkbox Two<br>

Categories

Resources