Popup text box in HTML with javascript - javascript

I need to design a text box textbox
As in the the above picture.
It should have two text box and if i edit one it should reflect in another(via versa).
Kindly help me on this.
Thanks in advance

Does this meet your requirements?
function showPopup() {
document.getElementById('2').style.display = "block";
}
function syncValueWith2() {
document.getElementById('2').value = document.getElementById('1').value;
}
function syncValueWith1() {
document.getElementById('1').value = document.getElementById('2').value;
}
<textarea onkeyup="syncValueWith2()" id="1"></textarea>
<br>
<textarea onkeyup="syncValueWith1()" id="2" style="display: none;"></textarea>
<input type="button" value="Show Popup" onclick="showPopup()">

#Keshav solution will update everytime you finish editing the text area
If you want to update it directly when you press the key, you can use jQuery and with this code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<textarea class="textarea-1" rows="4" cols="50">
test
</textarea>
<textarea class="textarea-2" rows="4" cols="50">
test
</textarea>
</body>
<script type="text/javascript">
var textarea1 = $('.textarea-1');
var textarea2 = $('.textarea-2');
textarea1.keyup(function() {
textarea2.val(textarea1.val());
});
textarea2.keyup(function() {
textarea1.val(textarea2.val());
});
</script>
</html>

Is this what you want?
var textarea1 = document.getElementById("textarea1");
var textarea2 = document.getElementById("textarea2");
var button = document.getElementById("button");
function Show(button) {
if (button.innerHTML = "Show") {
button.innerHTML = "Hide" ;
textarea2.style.display = "inline";
} else {
button.innerHTML = "Show" ;
textarea2.style.display = "none";
}
}
function change1() {
textarea2.value = textarea1.value;
}
function change2() {
textarea1.value = textarea2.value;
}
<textarea id="textarea1" onkeyup="change1();"></textarea>
<textarea id="textarea2" onkeyup="change2();" style="display:none"></textarea> <br />
<button onclick="Show(this)">Show</button>

Related

enable Submit button on ckeditor validation

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<script src="https://cdn.ckeditor.com/4.19.0/standard/ckeditor.js"></script>
</head>
<body>
<textarea cols="10" id="editor1" name="editor1" rows="10" onkeyup="val()"></textarea>
<input type="button" name="next" value="Submit" id="nxtbtnwht1" disabled/>
<script>
CKEDITOR.replace( 'editor1' );
function val()
{
var a = CKEDITOR.instances['editor1'].getData();
if(a!==null || a!==""){
document.getElementById("nxtbtnwht1").disabled = false;
}
else
{
document.getElementById("nxtbtnwht1").disabled = true;
}
}
</script>
</body>
</html>
I have ckeditor 4 in one page. On page, submit button is by default disabled I want to put validation on ckeditor4 textarea on check whether it is empty or not if it is empty put button as disabled and if some text is in ckeditor textarea then button should be visible. So How can I Do it with Javascript?
Ckeditor Textarea code:
<textarea cols="10" id="editor1" name="editor1" rows="10" onchange="val()"></textarea>
Submit Button Code:
<input type="button" name="next" value="Submit" id="nxtbtnwht1" disabled/>
Javascript code:
function val()
{
var a = CKEDITOR.instances['editor1'].getData();
if(a!==null || a!==""){
document.getElementById("nxtbtnwht1").disabled = false;
}
else{
document.getElementById("nxtbtnwht1").disabled = true;
}
}
You may try this.
var editor = CKEDITOR.replace('editor1', {});
editor.on("pluginsLoaded", function(event) {
editor.on('contentDom', function(evt) {
var editable = editor.editable();
editable.attachListener(editable, 'keyup', function(e) {
if (CKEDITOR.instances['editor1'].getData() == "") {
document.getElementById("nxtbtnwht1").disabled = true;
} else {
document.getElementById("nxtbtnwht1").disabled = false;
}
});
});
});
<script src="https://cdn.ckeditor.com/4.19.0/standard/ckeditor.js"></script>
<textarea cols="10" id="editor1" name="editor1" rows="10" onkeyup="val()"></textarea>
<input type="button" name="next" value="Submit" id="nxtbtnwht1" disabled />

Create button onclick event inside javascript

I know about the way of using html to occur an event when button is clicked
<onclick="function()">
but I was wondering If i could do this inside javascript so I created an event listener once event happens my function runs but I dont really know why it's not working.
setTimeout(() => {
alert("hi starquest");
}, 200);
var submit = document.getElementById('submit');
var input1 = document.getElementById('xname')
var input2 = document.getElementsByTagName('text')
submit.addEventListener("click", function(event) {
getUpdate();
});
function getUpdate() {
let text;
if (input1 == "nokia" && input2 == "nokia") {
text = "nuke"
} else {
text = "input nokia in both input"
}
document.getElementById("demo").innerHTML = text;
}
body {
background-image: url('https://backgroundcheckall.com/wp-content/uploads/2017/12/technology-background-image-11.jpg');
}
<h1>Input your text here</h1>
<label for="fname"></label> <input type="text" id="xname" name="fname"> + <label for="lname"></label> <input type="text" id="lname" name="lname"> =
<button>Submit</button>
<p id="demo"></p>
Few things:
You don't have anything with the id submit
You don't have a tag named text. You're looking for the element with the id lname.
setTimeout(() => {
alert("hi starquest");
}, 200);
var submit = document.getElementById('submit');
var input1 = document.getElementById('xname')
var input2 = document.getElementById('lname');
submit.addEventListener("click", function(event) {
getUpdate();
})
function getUpdate() {
let text;
if (input1.value == "nokia" && input2.value == "nokia") {
text = "nuke"
} else {
text = "input nokia in both input"
}
document.getElementById("demo").innerHTML = text;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
background-image: url('https://backgroundcheckall.com/wp-content/uploads/2017/12/technology-background-image-11.jpg');
}
</style>
<script src="test.js"></script>
</head>
<body>
<h1>Input your text here</h1>
<label for="fname"></label> <input type="text" id="xname" name="fname"> + <label for="lname"></label> <input type="text" id="lname" name="lname"> =
<button id="submit">Submit</button>
<p id="demo"></p>
</body>
</html>
There are a few issues with your code.
input2 is empty, because there is no element with tagname `text"
submit variable is undefined, because there is no element with id submit
you are comparing input1 which is an element to a string, you want compare it's value instead (the same goes to input2 once it's properly defined)
the result of the condition is reversed when it's true it will show "nuke"
setTimeout(() => {
alert("hi starquest");
}, 200);
var submit = document.getElementById('submit');
var input1 = document.getElementById('xname')
var input2= document.getElementById('lname')
submit.addEventListener("click", function (event) {
getUpdate();
})
function getUpdate(){
let text;
if(input1.value == "nokia" && input2.value == "nokia"){
text = "input nokia in both input"
} else {
text = "nuke"
}
document.getElementById("demo").innerHTML = text;
}
<h1>Input your text here</h1>
<label for="fname"></label> <input type="text" id="xname" name="fname"> + <label for="lname"></label> <input type="text" id="lname" name="lname"> =
<button id="submit">Submit</button>
<p id="demo"></p>

Get plain text from html but want to keep title attribute in select tag using javascript

I'm trying to parse html tags and want to remove from code (not title) which is given in TextArea1 and want to show output in TextArea2 on button click.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<textarea id="TextArea1" rows="10" cols="100"></textarea><br /> //for input
<textarea id="TextArea2" rows="10" cols="100"></textarea><br /> //for output
<input id="Submit1" onclick="parsehtml()" type="submit" value="submit" />
<script>
function parsehtml()
{
var div = document.createElement("div"); //created a div
div.innerHTML = document.getElementById('TextArea1').value; //copied the source text as HTML into the div
for (let select of div.querySelectorAll("select")) select.remove(); //Lopped select tags inside the div and removed them
document.getElementById('TextArea2').value = div.innerText.replace(" ", " "); //Copied the result into the target
}
</script>
</body>
</html>
In my TextArea1 i have code like
Hello
<select>
<option>Opttion1</option>
<option>Option2</option>
</select>
World
<select title="Welcome">
<option>Opttion11</option>
<option>Option22</option>
</select>
This code return output like:
Hello
World
Please help me to remove all <select>...</select> with all of it's <option> and innerText but want to keep title attributes value want to output like this:
Hello
World
Welcome //title of <select title=""> tag
You need to use document.createNodeIterator to parse and output what you want
function parsehtml() {
let root = document.createElement("div");
root.innerHTML = document.getElementById("TextArea1").value;
let node;
let output = "";
let nodeIterator = document.createNodeIterator(root, NodeFilter.SHOW_ALL);
while ((node = nodeIterator.nextNode())) {
if (node.nodeType === Node.TEXT_NODE && node.parentNode.tagName !== 'OPTION') {
output += node.textContent;
} else if (node.nodeType === Node.ELEMENT_NODE) {
if (node.hasAttribute("title")) {
output += node.getAttribute("title");
}
}
}
document.getElementById("TextArea2").value = output;
}
document.getElementById("Submit1").onclick = parsehtml;
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<textarea id="TextArea1" rows="10" cols="100">
Hello
<select>
<option>Opttion1</option>
<option>Option2</option>
</select>
World
<select title="Welcome">
<option>Opttion11</option>
<option>Option22</option>
</select>
</textarea><br /> //for input
<textarea id="TextArea2" rows="10" cols="100"></textarea><br /> //for output
<input id="Submit1" type="submit" value="submit" />
</body>
</html>

live update value if checkbox is checked or not

I am trying to update a textbox based on whether or not a checkbox is checked or not. Thanks to this post I got a text box working fine, but I can't get a checkbox to update the value. What am I missing?
<html>
<head>
<title>sum totals</title>
<script type="text/javascript">
function calculate(t){
var j = document.getElementById("output");
var rege = /^[0-9]*$/;
if ( rege.test(t.tons.value) ) {
var treesSaved = t.tons.value * 17;
j.value = treesSaved;
}
else
alert("Error in input");
}
$('input[name="selectedItems1"]').click(function(){
var j = document.getElementById("output");
if (this.checked) {
j.value=j.value+300
}else{
j.value=j.value-300
}
});
</script>
</head>
<body>
<form>
<input type="text" placeholder="Tons" id="tons" onkeyup="calculate(this.form)"/>
<br />
<input type="checkbox" name="selectedItems1" value="val1" />I have a car
<br/>
<input type="text" id="output" value="Output" />
</form>
</body>
</html>
Place the <script> tag after <form>
Reason:
When the html page loads, it'll be interpreted line by line. When it come to click(), jQuery will try to find the element input[name="selectedItems1"] which won't be loaded into the DOM at that time. So, jQuery won't attach the click() event handle to that checkbox. That's the reason why your code didn't work.
Try this :
<html>
<head>
<title>sum totals</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
<script type="text/javascript">
function calculate(){
var j = document.getElementById("output");
var rege = /^[0-9]*$/;
var tons = $('#tons').val();
if ( rege.test(tons) ) {
val = parseInt(tons);
var treesSaved = val * 17;
if($('input[name="selectedItems1"]').is(":checked"))
{
treesSaved = treesSaved +300;
}
else
{
treesSaved = treesSaved -300;
}
if(isNaN(treesSaved))
j.value=0
else
j.value=treesSaved;
}
else
alert("Error in input");
}
$(function(){
$('input[name="selectedItems1"]').change(function(){
calculate();
});
});
</script>
</head>
<body>
<form>
<input type="text" placeholder="Tons" id="tons" onkeyup="calculate()"/>
<br />
<input type="checkbox" name="selectedItems1" value="val1" />I have a car
<br/>
<input type="text" id="output" value="Output" />
</form>
</body>
</html>

ASCII Animation

I'm not sure what I'm missing here in my code. I can't get my clearTimeout to work... I keep getting an error saying myStopFunction() is not defined. Any ideas?
I've tried renaming it and checked to make sure that everything matches up, I'm just not sure why I keep getting this dang error!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ASCII Animations</title>
<h1> ASCII Animation Editor/Viewer </h1>
<br><h3> Jordan Keith: Linn-Benton Community College</h3>
<body>
<p> Enter the frams below, separated by "====="
<input onclick = "playAnimation();" type="button" id= "Play" value = "PLAY" />
<input onclick = "myStopFunction();" type="button" id= "Stop" value = "STOP" /></p>
<textarea id = "frameArea" cols="50" rows="30"></textarea>
<textarea id = "displayArea" cols="50" rows="30"></textarea>
<script src="ASCII.js"></script><br>
</form>
</div>
</body>
</html>
JavaScript
function playAnimation()
{
frameStr = document.getElementById("frameArea").value;
if(frameStr.indexOf("\r\n") !=-1)
{
frameSeq = frameStr.split("=====\r\n");
}
else
{
frameSeq = frameStr.split("=====\n");
}
currentFrame = 0;
showNextFrame();
}
var t;
function showNextFrame()
{
document.getElementById("displayArea").value = frameSeq[currentFrame]
currentFrame = (currentFrame+1)% frameSeq.length;
t = setTimeout("showNextFrame();" , 250);
}
function myStopFuntion()
{
clearTimeout(t);
}
Your call for myStopFunction is missing a C in function.
clearInterval(t);
is what is used to clear the timer for Javascript
myStopFunction is not getting called due to a typo in function name.
Replace function myStopFuntion() with function myStopFunction() .
Here is the running code:
<head>
<script>
function playAnimation()
{
frameStr = document.getElementById("frameArea").value;
if (frameStr.indexOf("\r\n") != -1) {
frameSeq = frameStr.split("=====\r\n");
} else {
frameSeq = frameStr.split("=====\n");
}
currentFrame = 0;
showNextFrame();
}
var t;
function showNextFrame()
{
document.getElementById("displayArea").value = frameSeq[currentFrame];
currentFrame = (currentFrame + 1) % frameSeq.length;
t = setTimeout(showNextFrame, 250);
}
function myStopFunction()
{
alert("Stopping Now");
clearTimeout(t);
}
</script>
</head>
<body>
<form>
<input onclick="playAnimation();" type="button" id="Play" value="PLAY" />
<input onclick="myStopFunction();" type="button" id="Stop" value="STOP" />
<textarea id="frameArea" cols="50" rows="30"></textarea>
<textarea id="displayArea" cols="50" rows="30"></textarea>
</form>
</body>
JSFIDDLE LINK: http://jsfiddle.net/52Nvj/4/

Categories

Resources