I almost got what I want now. (Cobbled together from code all over the internet.)
But I need to know how to keep my query from being over written.
Example I have a text field. When a word on the dropdown is selected it puts the text in to the form field. If I select another word it replaces that word. What I want it to do is to be able to select as much as I want and no matter how many words I touch it'll keep those unless I go up and backspace or delete them out of the form field.
Here's my code.
http://pastebin.com/1wnAZMNM
One way is to append the new text to the input control instead of replacing its contents, possibly inserting a space character in-between:
$(".myselect").change(function() {
$(".textbox").val($(".textbox").val() + ' ' + $(this).val());
});
Related
I am building a tool to help me assemble different keyword combinations for AdWords. I have a simple form with three checkboxes, an input box (for the starting keyword), a submit button and a textarea for the results (the variations on the input).
The first time around it works great, my conditionals are all working and I can run off a series of keywords that, on each .submit(), will populate the textarea. The problem comes when I erase the contents. Here is an example of how it is populated:
if($("#phrase").is(":checked")) {
//Get keywords from input
var text = $("#keyword").val();
//Prepend and append double-quotes
text = "\"" + text + "\"";
//Output
var val = $("#output").val();
$("#output").append(text + "\r\n");
}
When I submit, I know it's still executing somewhere in my .submit() function because if I uncheck all of the boxes my alert (not shown) gets thrown.
Thinking it was something I was missing in the logic of my reset, I removed the reset entirely and posted it to my personal site so I could start working. I ran off some keywords, then manually deleted the contents of the textbox. Strangely, the same thing is still happening: after erasing/clearing the textbox, I can't get it to take the keyword and create any more variations!
I have created a fiddle here: Keyword Variations Fiddle -- I'm able to recreate the issue and have no idea why it's happening. Try deleting the text after you've generated a few keywords and then try to generate a few more.
Interesting issue. I was concerned about your use of append on the textarea since I remembered hearing that textareas were more like text inputs than divs so I tried using val instead, and it worked fine.
http://jsfiddle.net/gYFP3/4/
And here's the relevant code.
//Output
var $output = $("#output");
var val = $output.val();
$output.val(val + text + "\n");
I found it really hard to come up with a question title for this one so I apologise that it's fairly cryptic but I'll try explain better there.
Basically part of an app I'm developing involves placing 'placeholders' in a textarea and then modifying those placeholders outside of the textarea.
For example:
This is the <first> placeholder. This is the <second> placeholder.
This is the <first> placeholder again.
Basically i have JS that detects these placeholders and creates input boxes to hold the text. So there would be an input text box for first and one for second.
What I want to achieve is when I type a value into the textbox it changes the placeholder in the textarea to the content being typed into the textbox. Think sublime text editor's snippets for a textarea.
I'm trying to figure out how I can track the placeholders in the text area. For example if a placeholder was <first_name> and i started typing into the placeholders textbox 'Billy'. I could easily change the placeholder by using a string replace function. However now the placeholder <first_name> doesn't exist in the textarea and so now I can't go back and change it. I need to have a way of tracking these placeholders whilst they are changing.
I hope that makes sense.
If you're not bound to a <textarea> element, you can try with a simple div with the attribute contenteditable="true". This way you can use some <span> to mark all the placeholders.
I set up a demo on jsfiddle, try it.
Using an element with contenteditable="true" would be easier for that task, because you could represent placeholders as span elements and you would then only have to retrieve them by id or any other unique attribute to update their content.
If you have to use a textarea and the users can only modify it's content using external inputs, maybe you could initially track the index of each placeholers and their length and keep those synchronized as values are changed.
You could then easily replace content in the textarea. For example, if the placeholder starts at 15 and has a length of 13.
var string = 'this is a test {placeholder} bla bla bla',
placeHolderIndex = 15,
placeHolderLength = 13;
string =
string.substring(0, placeHolderIndex)
+ 'new value'
+ string.substring(placeHolderIndex + placeHolderLength);
//update indexes of every placeholders that comes after this
//one and update the content length of this placeholder.
Obviously, you don't want to hardcode any values and you will want to handle this process in a dynamic way, but that's just an example.
NOTE: I guess users can modify the textarea content if you're using one. In that case, it would make things a bit more complicated, because you would have to update the index of the placeholders for every modifications the user does and you would also have to prevent them from editing the placeholders-mapped text directly.
I'm using OpenMRS, it's an opensource medical records system. OpenMRS has a built-in html editor and I use this mostly in javascripting ang building the forms. In one of my forms,I have a textarea. My client would like his entries(in paragraph or in list) to be indented in the textarea.
Now when you try indenting the paragraph in the textarea then save the changes and preview the form, the paragraph becomes justified instead of retaining the indented lines.
However, if I try indenting the paragraph using ascii code for non-break space by typing or pressing alt-288, the paragraph becomes indented thus giving me the desired result. Now, the users don't prefer typing or pressing ascii equivalents coz that'll be hassle on their part.
I'm using mostly javascript and jQuery because it's what openmrs supports. If I could somehow bind the non-break space character upon pressing a key then this will work, but I'm at a lost here. How will I do this in javascript or jquery?
One solution which might work for you is to replace leading spaces in the textarea when you process/save or even each time it changes it something like :
ta.value = ta.value.replace (/\n +/, function (m) {
return '\n' + Array (m.length).join (' ');
});
The Array ... constructs creates an array containing length elements then joins with your non-breakspace character effectively creating a string of that many space chars.
Another possibility is to watch for space characters entering the text-area and transforming them. See here : Can I conditionally change the character entered into an input on keypress?
I have some text in a textbox. I automatically select some of it by calling textbox.setSelectionRange(a, b). But then, when I start typing again, the letters are appended on the right of the selection instead of replacing the selected text. Is there any way I can make the selection 'replaceable' by the user?
edit: it seems that if you execute the function twice on the same piece of text, the text doesn't replace any more. So that's what happened
Has anyone used javascript/ajax to take data from one form field and put it into another? I'm trying to create a form that when one text input is filled out a second is auto-populated with the first letter of the word that is in the first text input. I'm thinking I can limit the second text input to one character to help get the desired result, but I'm not having luck finding the javascript to get the second text input to auto-populate from the first. Any suggestions?
This seems like it would be pretty easy to do in jQuery.
$('#textBox1').keyup(function()
{
if($.trim($('#textBox2').val()) == '')
$('#textBox2').val($(this).val().substring(0, 1);
});