<script>
function create()
{
var div = document.createElement('div');
div.textContent = document.getElementById('text').value;
div.setAttribute('class', 'note');
document.body.appendChild(div);
div.style.background="yellow";
div.style.Width="300px";
div.style.height="100px";
if(document.getElementById('text').value=="")
{
div.parentNode.removeChild(div);
alert("Plz Put Some text");
}
}
</script>
<body>
<input type="button" onclick="create()" value="create"/>
<input type="text" id="text" />
</body>
Problem could be in this line.
<input type="text" id="text" />
Because you have checked this condition
if(document.getElementById('text').value=="")
But you did not give any value to the id="text".
try this . <input type="text" id="text" value="user" />
Related
I would like for every different item inputted to be outputted in a new box.
<!DOCTYPE html>
<html>
<body>
Form to get the input
<form id="form1">
<input name="item" type="text" size="20">
</form>
Box that should be duplicated to hold the new input.
<div class="box">
<p class="output"></p>
<div>
<button onclick="outputItem()">Add</button>
javascript:
<script>
function outputItem() {
var x = document.getElementById("form1");
item = x.elements.namedItem("item").value;
document.getElementById("output").innerHTML=item;
</script>
</body>
</html>
I am not sure if this is even close to what you want, but give this a try:
function outputItem() {
var els = document.querySelectorAll("#form1 input");
var box = document.querySelector('.box');
box.innerHTML = '';
els.forEach(
function(el) {
var newEl = document.createElement('div');
newEl.innerHTML = el.value;
box.appendChild(newEl);
}
);
}
<form id="form1">
<input name="item" type="text" size="20" value="item"><br/>
<input name="eggs" type="text" size="20" value="eggs"><br/>
<input name="milk" type="text" size="20" value="milk"><br/>
<input name="grains" type="text" size="20" value="grains"><br/>
<input name="legumes" type="text" size="20" value="legumes"><br/>
</form>
<button onclick="outputItem()">Add</button>
<hr/>
<div class="box"></div>
This creates a new <div> for every input and copies the .value from the <input> into the new <div>. Then it adds the <div> into the output area.
I have the following on jsfiddle. What I need to accomplish is when I click on a button the respective value is inserted in the blank.
https://jsfiddle.net/aminbaig/jefee77L/
Here is the Code:
HTML:
There is <span id="title">___________</span> wrong with this world!
<p>
Choose the appropriate word
</p>
<input type="submit" id="myTextField" value="something" onclick="change()" />
<input type="submit" id="byBtn1" value="Truck" onclick="change()" />
<input type="submit" id="byBtn2" value="Trash" onclick="change()" />
Javascript:
function change() {
var myNewTitle = document.getElementById('myTextField').value;
if (myNewTitle.length == 0) {
alert('Write Some real Text please.');
return;
}
var title = document.getElementById('title');
title.innerHTML = myNewTitle;
}
You can do like this
JS
get the value of the button from the function parameter
function change(value) {
var title = document.getElementById('title');
title.innerHTML = value;
}
HTML
change button type='submit' to type='button', Also pass the value as the function parameter
<input type="button" id="myTextField" value="something" onclick="change(this.value)" />
<input type="button" id="byBtn1" value="Truck" onclick="change(this.value)" />
<input type="button" id="byBtn2" value="Trash" onclick="change(this.value)" />
DEMO
use like this onclick="change(this.value)" .send the value of the input via click function
function change(val) {
if (val.length == 0) {
alert('Write Some real Text please.');
return;
}
var title = document.getElementById('title');
title.innerHTML = val;
}
There is <span id="title">___________</span> wrong with this world!
<p>
Choose the appropriate word
</p>
<input type="submit" id="myTextField" value="something" onclick="change(this.value)" />
<input type="submit" id="byBtn1" value="Truck" onclick="change(this.value)" />
<input type="submit" id="byBtn2" value="Trash" onclick="change(this.value)" />
I have a button called 'AddTextArea', on clicking, I get new text area, but how can I get the values that I have entered in the new text areas?
I tried like this-
var x= document.getElementById("div_quotes").value;
but it's not working.
Please help, as I am new to JS, thanks in advance.
<html>
<head>
<script type="text/javascript">
function addTextArea(){
var div = document.getElementById('div_quotes');
div.innerHTML += "<textarea name='new_quote[]' />";
div.innerHTML += "\n<br />";
}
</script>
</head>
<body>
<form method="post">
<!--<input type="text" name="text_new_author" /><br />-->
<div id="div_quotes"></div>
<input type="button" value="Add Text Area" onClick="addTextArea();">
<input type="submit" name="submitted">
</form>
</body>
</html>
var x= document.getElementById("div_quotes").value;
Above code will not work as div_quotes is a div and div do not have value property.
You will have to search for textareas in this div.
Sample
function addTextArea() {
var div = document.getElementById('div_quotes');
div.innerHTML += "<textarea name='new_quote[]' />";
div.innerHTML += "\n<br />";
}
function validate(){
var tas = document.querySelectorAll('#div_quotes textarea[name="new_quote[]"]')
for(var i = 0; i< tas.length; i++){
console.log(tas[i].value)
}
}
<form method="post">
<!--<input type="text" name="text_new_author" /><br />-->
<div id="div_quotes"></div>
<input type="button" value="Add Text Area" onClick="addTextArea();">
<input type="button" name="submitted" onclick="validate()" value="Validate">
</form>
Version 2
Now if you notice in above sample, if you type and then add another textarea, it will flush value of previous ones. This is because, you are setting .innerHTML += .... This will destroy and recreate all elements again. You should use document.createElement
function addTextArea() {
var div = document.getElementById('div_quotes');
var wrapper = document.createElement('div')
var ta = document.createElement('textarea');
ta.name = "new_quote[]"
wrapper.append(ta);
div.append(wrapper)
}
function validate(){
var tas = document.querySelectorAll('#div_quotes textarea[name="new_quote[]"]')
for(var i = 0; i< tas.length; i++){
console.log(tas[i].value)
}
}
<form method="post">
<!--<input type="text" name="text_new_author" /><br />-->
<div id="div_quotes"></div>
<input type="button" value="Add Text Area" onClick="addTextArea();">
<input type="button" name="submitted" onclick="validate()" value="Validate">
</form>
You can add a CSS Class to the new text area that is generated and get the data using
var x = document.getElementsByClassName("dynamicTxtArea")
I have added the class to the Text area that is being dynamically generated. Please check the code below.
<html>
<head>
<script type="text/javascript">
function addTextArea(){
div.innerHTML += "<textarea name='new_quote[]' class='dynamicTxtArea'/>";
div.innerHTML += "\n<br />";
}
</script>
</head>
<body>
<form method="post">
<!--<input type="text" name="text_new_author" /><br />-->
<div id="div_quotes"></div>
<input type="button" value="Add Text Area" onClick="addTextArea();">
<input type="submit" name="submitted">
</form>
</body>
</html>
This is the script:
<HTML>
<HEAD>
<SCRIPT type="javascript">
function goToPage(var url = '')
{
var initial = "http://www.blossompromotions.com/-p-";
var extension = "html";
window.location(initial+url+extension);
}
</SCRIPT>
<TITLE>Redirect 1</TITLE>
<BASE HREF="http://www.blossompromotions.com/">
</HEAD>
<BODY>
<P></P>
<FORM name="something" action="#">Label
<INPUT type="text" name="url" value="" onSubmit="goToPage(this.value)" />
<INPUT type="submit" value="GO" />
</FORM>
</BODY>
</HTML>
This redirects to the url but I want the user to be able to see and copy the url. Please tell a command instead of goToPage which will display the url on screen for the user to copy.
function goToPage(url){
var initial = "http://www.blossompromotions.com/-p-";
var extension = ".html";
var link = document.getElementById('gotoURL');
link.innerHTML = url ? initial+url+extension : '' ;
link.href = initial+url+extension;
}
<FORM name="something" action="#">
Label
<INPUT type="text" name="url" value="" onkeyup="goToPage(this.value)">
<INPUT type="submit" value="GO">
</FORM>
You can do it with JavaScript, and add an ID to your input text
function goToPage(var url = '')
{
var initial = "http://www.blossompromotions.com/-p-";
var extension = "html";
document.getElementById('url').value=initial+url+extension ;
}
<FORM name="something" action="#">
Label
<INPUT id="url" type="text" name="url" value="" onSubmit="goToPage(this.value)">
<INPUT type="submit" value="GO">
</FORM>
I have written the following code for a virtual keyboard using javascript.
Jsp page:
<form>
<label for="text">Enter Text: </label>
<input id="text" name="text" type="text" size="50" onfocus="myFunction(this)" />
<input name="" type="reset" value="Clear" />
</form>
Javascript:
function myFunction(x)
{
}
function clicked(val)
{
var txt;
txt = document.getElementById('text').value;
if(val != 'B')
{
txt = txt + '' + val;
}
else
{
txt = txt.substr(0,(txt.length)-1);
}
document.getElementById('text').value = txt;
}
$(".dialog").dialog({
autoOpen: false,
height: 200,
width: 930,
modal: false,
draggable: true,
resizable: true,
buttons : {
"ESC":function(){
var val="Esc";
clicked(val);
},
"1":function(){
var val="1";
clicked(val);
},
"Tab":function(){
var val="T";
clicked(val);
},
"Caps":function(){
var val="q";
clicked(val);
},
"Shift":function(){
var val="";
clicked(val);
},
"B":function(){
var val=" ";
clicked(val);
},
},
});
When the text box is focused display dialog like keyboard, when i click some button its entered button value in textbox except Caps,Shift,Enter and Tab.
Please provide the required code for those Caps,Shift,Enter,Tab .
I'm not sure how to maintain code in clicked(val) method .
Use jQuery:
$("#text").on("focus", function() {
$("#button1").show();
$("#button2").show();
});
I just noticed you commented on somebody else's answer saying you want to create buttons with JS dynamically.
Here's a way to do it:
HTML:
<div id="myDiv"></div>
jQuery:
var myBtn = $('<button/>', {
text: 'Awesome button',
click: function () {
alert("Hello!");
}
});
$("#myDiv").append(myBtn);
DEMO
I hope the following example would be helpful:
<script type="text/javascript">
<!--
function fClose() {
document.getElementById('divWithButtons').style.display = 'none';
}
function myFunction(x) {
document.getElementById('divWithButtons').style.display = '';
}
//-->
</script>
<div style="display:none; position:absolute; top: 100px; left: 100px; background-color: #eee;" id=divWithButtons>
<input type=button value=Really onclick=fClose() style="margin: 100px">
<input type=button value="Why not" onclick=fClose() style="margin: 100px">
</div>
<form>
<label for="text">Enter Text: </label>
<input id="text" name="text" type="text" size="50" onfocus="myFunction(this)" />
<input name="" type="reset" value="Clear" />
</form>
Wrtie the function like this:
function myFunction(x)
{
document.getElementById("btn1").style.display="block";
document.getElementById("btn2").style.display="block";
}
Also set the id of buttons as well.
<form>
<label for="text">Enter Text: </label>
<input id="text" name="text" type="text" size="50" onfocus="myFunction(this)" />
<input name="" type="reset" value="Clear" />
<button id="btn1" class="btn">Btn1</button>
<button id=btn2" class="btn">Btn2</button>
</form>
Hope this will work for you.
Try this
HTML
<form>
<label for="text">Enter Text: </label>
<input id="text" name="text" type="text" size="50" />
<input name="" type="reset" value="Clear" />
</form>
Script
$(function() {
$("#text").focusin(function() {
$('form').append('<button class="btn">Btn1</button>\
<button class="btn">Btn2</button>'); // It will add dynamically two buttons
$(".btn").show();
})
});
DEMO
try this with jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery( document ).ready(function() {
jQuery("#text").focus(function() {
jQuery('.btn').show();
});
// if you want button disappear after focus out
jQuery("#text").focusout(function() {
jQuery('.btn').hide();
});
});
</script>
...
<form>
<label for="text">Enter Text: </label>
<input id="text" name="text" type="text" size="50" />
<input name="" type="reset" value="Clear" />
<input class="btn" type="button" value="button2" name="btn2" style="display:none;"/>
<input class="btn" type="button" value="button1" name="btn1" style="display:none;"/>
</form>