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();
});
});
Related
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.
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
I have a button script to change the buttons in a frame based on the page loaded in the main frame. The problem I'm experiencing is that while the background images, tabindex and text on the button (innerHTML) all change as expected, the onclick doesn't. It appears to completely ignore it. Here's the script I'm using:
function createbutton(btn_N, btn_I, btn_L, btn_D) // (Div Name, Tab Index, Button Text, Page To Load){
var btnN = top.frames['buttonbar'].document.getElementById(btn_N);
btnN.style.cssText = "display:block; cursor:pointer; padding-left:16px; padding-top:5px;";
btnN.onmouseover = function() {this.style.backgroundImage = "url('./osdimages/navBG_roll.png')";};
btnN.onmouseout = function() {this.style.backgroundImage = '';};
btnN.tabindex = btn_I;
btnN.innerHTML = btn_L;
btnN.onclick = btn_D;
}
The button call looks like this:
createbutton("button01", 1, "New Order/Browse", "parent.frames['content'].location.href='createorder/createorder.asp';");
There is a difference between attributes and properties.
The best example of this is as follows:
HTML: <input type="text" value="hello" id="test" />
Type something in the text box
document.getElementById('test').value is whatever you typed
document.getElementById('test').getAttribute("value") is whatever was in the HTML
Some attributes are directly mapped to properties and vice versa, but this is not always the case.
For instance, the onClick attribute takes a string that is then eval'd, but the onclick property takes a function. This is why your code isn't working.
Either pass a valid function, or use setAttribute.
You are setting onclick with a string, it needs a function to execute.
createbutton("button01", 1, "New Order/Browse", function(){ parent.frames['content'].location.href='createorder/createorder.asp'; });
Here's a confusing question. I need to replace an <input> with a different <input> but I need to preserve the onclick attribute. Here's an example:
<input type="image" class="previous_page_img graybutton mediumbutton" src="btn_prevpage.png" onclick="Add_Search_Param('page', 1); Refine();" alt="">
Since I cannot change the <input> type to a button, I want to replace it with a button, however, I need to preserve the "onclick" attribute. So first, I'd have to break up the element. Replace it with a button and append the original onclick attribute to the new button.
So in the end, I'd have this onclick="Add_Search_Param('page', 1); Refine();" added to the new button. Since the onclick changes, a simple .attr or .prop function would not be sufficient. It must clone the onclick attribute. Can anyone help me? Thanks.
Here's jsFiddle that does not preserve the onclick attribute but does everything else: http://jsfiddle.net/rAMcw/
You could do (i used a simple javascript function to test it)
<input type="image" class="previous_page_img graybutton mediumbutton" src="btn_prevpage.png" onclick="Add_Search_Param('page', 1); Refine();" alt="">
var onclick = $('.mediumbutton').attr('onclick');
var but = $('<input/>', { type: "button", value: "pressme", onclick: onclick});
$('.mediumbutton').replaceWith(but);
fiddle here http://jsfiddle.net/KjBm3/
Just create a new button right after the input, set the input to display: none; (or jQuery('#input').hide()) and have the button onclick trigger the input's onclick (jQuery('#button').click(function(){ jQuery('#input').trigger('click'); });
How about cloning?
var x = $('input').clone(true);
x.attr('type','button').addClass('previous_page_img graybutton mediumbutton').val('Previous Page');
$('input').replaceWith(x);
Updated jsFiddle
What is wrong with turning the existing input element into a button?
$("input.previous_page_img").prop("type", "button").val("Previous Page");
jQuery 1.4.2: (set the property in plain-old JavaScript);
$("input.previous_page_img").val("Previous Page")[0].type = "button";
Demo
Let's say for example i have a textarea and a toggle button:
<div class="input">
<textarea id="links">
http://facebook.com
http://friendster.com
http://google.com
http://facebook.com
http://friendster.com
</textarea>
Toggle
</div>
How do i make it possible for each link in the textarea to clickable with the click of the toggle button?
$('.toggle').click(function(){
var clickable = false;
if(!clickable){
var links = $(this).closest('.input').find('textarea').val().split('\n');
$.each(links,function(){
//lost here
});
}
return false;
});
You cannot make clickable links inside textarea, they are for a plain text.
There are possible workarounds though, you can make a div, copy formatted content of textarea to this div, when "Toggle" is clicked, and switch textarea and div.
DEMO
Your each function takes index and value parameters that you can use to make your anchors
$.each(links, function (i, val) {
var newA = $("<a />").text(val).attr("href", $.trim(val));
$("#links").append(newA).append("<br>");
});
(Though obviously you'll have to add them to a div, as the fiddle does. As anrie says, textareas can only hold text.)