enter value of input to the html, not the dom - javascript

I have an input in my html file (attribute id is: imgName).
while the user enters some text to this input, it's inserted to the DOM.
I want it to be inserted to the html.
so I try to do this thing:
$(document).keydown(function (e) {
if (e.target.id == "imgName") {
// get the char and create text node
var text = document.createTextNode(String.fromCharCode(e.which));
// insert it to the input
e.target.appendChild(text);
}
});
but it does nothing..
any help appreciated!

You've done something wrong:
Your are listening for an input-event on your complete document, but your input will only be on your input-field. so you need: $('#imgName').keydown...
You are using jQuery... so, use it to do this stuff is easier.
Your condition is not needed.
try this:
$('body').append(String.fromCharCode(e.which));
DEMO

You can't append something to an input, it's a self closing element that has no content, and to get the proper result from String.fromCharCode you should be using the keypress event
$('#imgName').on('keypress', function (e) {
var text = document.createTextNode(String.fromCharCode(e.which));
document.body.appendChild(text);
});
FIDDLE

Related

Javascript Generating Text into Textbox?

I wrote this little bit of code but I'm not sure why it's not working? It's supposed to take in the persons name and depending on what they selected it will output a website with their name at the end of it.
JSFiddle
http://jsfiddle.net/tQyvp/135/
JavaScript
function generateDynamicSignature() {
var dynSig = "";
var user = document.getElementById("usernameInput");
var e = document.getElementById("scriptListInput");
var strUser = e.options[e.selectedIndex].text;
if (strUser == "example") {
dynSig = "http://example.com/users/";
}
document.getElementById("generateSignature").addEventListener('click', function () {
var text = document.getElementById('dynamicSignatureOutput');
text.text = (dynSig + user);
});
}
HTML
<select class="form-control" id="scriptListInput">
<option value="example">Example 1</option>
</select>
There are a few problems with your code, I'll try to list them all.
First, you never added the username input to your HTML.
Next, you seem mixed up on the way to access/set the text of an HTML input. You do this through the value field. For the username input, you forgot to access any property, so you'll need to change it to:
var user = document.getElementById("usernameInput").value;
You later used the text property of both the select element and the output. These should also both be value.
Another problem is that you've placed a listener inside a listener. Your outer function, generateDynamicSignature, listens for the onclick event of the button. This function only runs after the button is clicked. But inside this function, you attach a new listener. This inner listener will only run if someone clicks the button twice.
I've included these changes in a new fiddle:
https://jsfiddle.net/zdfnk77u/
where is usernameInput in your html?
in the if, use === instead of ==
If and when you add the missing "usernameInput" element in your HTML, all you'll have to do is...
dynSig='http://example.com/users/'+usernameInput.value;
I think part of the problem is that you want to access the value and not the text of input elements. So for text and strUser, you want to do text.value instead of text.text and such.
Also, based on the JSfiddle, you probably want to rewrite how you're using the document listener and the onclick of the html element. Every time the button is clicked it goes through the generateDynamicSignature and creates a listener to change the value, but doesn't necessarily change the value itself. If you move the logic of the generate function inside the click listener, that should fix most of your problems.
You create your generateDynamicSignature inside $(document).ready.
There are two approaches.
define function generateDynamicSignature outside
$(document).ready
or
bind your button.click to a handler inside $(document).ready
Do not mix these two.

on input get only new input value

I have a text input where I get the input and use it. I have:
$(myinput).on('input', function() {
$(somediv).append($(this).val());
});
I would like to keep using the append function, but the problem is on every input, the entire input val() is being appended. So when I click 'a', its adding 'a', but when I click 'b' after a, it appends 'ab' not 'b'.
is there a way to only get the input of the most recent .input event without clearing out the input box?
you could use .text() instead of .append(). This will set the whole text, not just append it.
$(somediv).text($(this).val());
Or you could use the last char of your string.
$(somediv).text($(this).val().slice(-1));
See: how to get the last character of a string?
I am assuming that you want to use append because there is other content in somediv that you don't want to lose. If that is the case, you can create a sub-element to receive the text, append it just once, then change its contents when the input field changes:
var receiver = $('span');
$(somediv).append(receiver);
$(myinput).on('input', function() {
receiver.html($(this).val());
});
$("#myinput").on('input', function() {
$("#somewhere").val("");
setTimout(function() {
$("#somewhere").append($(this).val());
},10);
});
or
$("#myinput").focusout(function() {
$("#somewhere").val("");
setTimout(function() {
$("#somewhere").append($(this).val());
},10);
});
the timeout is for doing things without overlapping.
You can try also without timoeout
You could also bind to the keyup event:
$(document).on('keyup', '#inputID', function(e){
var key = String.fromCharCode(e.which);
$('div').append(key);
});
jsFiddle Demo

Is there any way to know that particular element is present in someother html page

I am doing processing with html page elements like button or text box.
I can not change the code or can not write any code on that particular page.
Therefore before i am doing that i want to check that all element are present in that page.
For Example- I have HTML page.
So is there any way to validate that all the element are presented in other html page by javascript or another way.
any help will be highly appreciated.
try this using jQuery:
var $button = $("button");
if($button.length !== 0) {
// button exists do something
} else {
// button DOES NOT exist do something else
}
try in javascript:
var $button = document.getelememtById("button"); /* button had an ID of #button */
if($button.length !== 0) {
// button exists do something
} else {
// button DOES NOT exist do something else
}
basically you check the length of that DOM object and do something if its length is not zero
of course this just gives you a proof of concept to use on those elements you want to test against
Yes you can write something that would compare the DOM of the two html pages.

Javascript: add a text into text area

I would like to load a text into text area, when clicked in a map area.
When I click in the second area, I would like to add another (different) text
How can I make this happen?
http://jsfiddle.net/CQvKJ/
I don't know Mootools, so I did this in JS only without framework.
This may not be a good solution, but this is basically what you want to do, no matter how you append the text.
Sample
http://jsfiddle.net/CQvKJ/2/
Updated JS
function funzione1() {
// alert("add text : 1.");
var e = document.getElementById('my_text');
e.value += "1";
}
function funzione2() {
// alert("add text: 2");
var e = document.getElementById('my_text');
e.value += "2";
}
Identify the <textarea> by id.
Retrieve the element in the click handlers.
Set the element's value to the text you want to show up.
Forked fiddle.

Dynamic javascript using JQuery?

My code is as follows:
<script>
$(document).ready(function() {
var tagCounter=0;
$("#tag-add-button").click(function () {
var text = $("#tagadd").val();
$("#set-tags").append("<input type='text' id='tag"+tagCounter+"' READONLY>");
$("#tag"+tagCounter).val(text);
$("#tagadd").val("");
tagCounter++;
});
});
</script>
This does the following:
When tag-add-button is clicked, it takes the text from the inputbox (tagadd) and puts it in a new inputbox thats appended to the set-tags div. The tagadd inputbox is then made blank.
The problem I'm having, is I want each input box to have its own remove button. But I don't see how the javascript can be generated for that when there can be an unlimited number of input boxes...
Any ideas?
Put the input element inside of a div or span, and make the remove button a sibling of the input element. Then, in the onclick handler of the button, just do something like $(this).parent().remove()
This has the effect of removing both the input element, and the remove button itself
Rather than using an id (#tag-add-button), use classes and then use the each function of jQuery and traverse to the appropriate elements.
$(document).ready(function() {
var tagCounter=0;
$("#tag-add-button").click(function () {
var text = $("#tagadd").val();
$("#set-tags").append('<input type="text" id="tag'+tagCounter+'" READONLY /><span class="remove">Remove</span>');
$("#tag"+tagCounter).val(text);
$("#tagadd").val("");
tagCounter++;
});
$('span.remove').bind('click',function(){
$(this).prev('input').andSelf().remove();
});
});

Categories