We Keep Coding

Is it possible to manually edit data after a dropdown auto-populates the field?

I am the opposite of a code monkey, so please forgive me if this is a simple solution. I have searched and searched and though I've found possible code examples, cannot find any information on how to fix the issue.
I've created a form-fillable PDF. I have fields that calculate based on inputs. I have a dropdown box that auto-populates some of the numbers (to add to the manual inputs). All of these work great!
I thought I would get fancy and further fill some of my data in the form. This is where the problems get funky.
I am setting the fields as shown, but those numbers can no longer be modified afterward.
this.getField("RanksPsy").value = psy;
this.getField("RanksBlade").value = blde;
this.getField("RanksBrawl").value = brwl;
this.getField("RanksCou").value = cou;
this.getField("RanksDip").value = dip;
I have buttons to increase/decrease the Ranks... fields, but the dropdown locks them and I'd like to avoid that if possible.
Is there another way to set those fields without using this.getField?
Thank you.

If I'm honest, I didn't understand the question well 😅
I don't recognize the getField function, so I decided to google it and found a RAD PDF documentation, so I'm assuming that's the library you're using to do this.
As that documentation states,
getFunction gets the first PDF form field object in the loaded
PdfWebControl document with a given name.
And this is the example provided, it may help.
var field = myApi.getField("Test Name");
if(field) {
//set its name to "New Name"
field.setProperties( {"name" : "New Name"} );
}

The solution to this is to put the script as an 'on blur' event rather than a keystroke event. It writes the data and then leaves it alone, which is exactly what I was looking for.

jQuery Insert, then fade out and then remove

I am verifying the form, and if there are problems I am adding a message right after input with problem & then fade it out after some time. The thing is I would like to also remove that message from DOM.
I googled a bit and it looks like I have to use fadeout(function(){}) or queue. Well, that would be ok in other case, but as I am inserting it and removing with same line, its a bit more tricky. Is there some other simpler "one line" way?
I tried to add another (longer delay), but that does not work at all.
$("<div style='color: red'>Maximum length is "+$(this).attr('maxlength')+" characters!</div>").insertAfter($(this)).delay(5000).fadeOut().delay(5010).remove();
I can't also really use IDs, as it can throw multiple ones at same time or user can just quicky fix one input and click submit and it would remove old and new message at same time.
Thanks.
Ps.: Only way to do it I can think of is generating random ID for every element and using that ID to remove it, but thats just way too overcomplicated IMHO.
For clarification: That line above is inside a loop that loops trough every input and textarea in a form and they are just simple if checks for minlength, maxlength and numbers only. Thats why I can't put there some static ID/Class, it would not really work as I want it to (remove ONLY that added element, no others, even if there was same message added again as user submits form again etc.). Thx.

Each error message is related to a field I think, Therefore You can assign an Id to each error message without any problem. So this code can be useful:
$("<div style='color: red' id="FieldName_error">Maximum length is "+$(this).attr('maxlength')+" characters!</div>").insertAfter($(this));
//This function executes after 2 seconds.
setTimeout(function(){
$("#FieldName_error").fadeOut("slow", function(){
$(this).remove();
})
}, 2000)

Updating a text box with javascript

I am having some trouble with some javascript and how it can control the html "text box".
First, here's what I have;
javascript:
function UpdateOrder()
{
// enable/disable appropriate buttons
document.getElementById("reset").disabled=false;
document.getElementById("add").disabled=false;
document.getElementById("submit").disabled=false;
document.getElementById("edit").disabled=false;
document.getElementById("update").disabled=true;
// Show display box, 'DispCurOrder'
document.getElementById('all_labels').disabled=true;
}
function EditOrder()
{
// enable/disable appropriate buttons
document.getElementById("reset").disabled=true;
document.getElementById("add").disabled=true;
document.getElementById("submit").disabled=true;
document.getElementById("edit").disabled=true;
document.getElementById("update").disabled=false;
document.getElementById('all_labels').disabled=false;
}
The Idea is simple... I have some buttons and inputs to generate a 'line' of text that get's dumped to the disabled text box. If the operator notices that they made a type-o or want to change something, they click on 'edit order' and it disables all the regular buttons, and enables the text box and 'update' button. The 'update order' button reverses this.
Now, when I just use the add lines to the text box, all works well. You can see each line get appended to the text box (there's another java function that does a bunch of error checking and such, but the crux is that it takes the contents of the text box, parses it on the "\n" to an array, then appends the new line of text. It then takes the array and puts it all together as a new string and puts it back into the text box. Here is that portion without all the error checking stuff;
function AppendOrder()
{
// let's set up an error flag.
var AppendError="";
var str1=document.forms["MyForm"].DataEntry1.value;
var str2=document.forms["MyForm"].DataEntry2.value;
if( /* checking variable str1 for errors */)
{
AppendError="Error in str 1 here";
}
if( /* checking variable str1 for errors */)
{
AppendError=AppendError+"Error in str 2 here";
}
// Display the error message, if there are no errors, it will clear what was there.
$('#AppendStatus').html(AppendError);
if(AppendError=="")
{
// it's all good, update the display
// create line of text
curEntry=str1 + " -- " + str2;
// let's get the current order into a list
str=document.getElementById('all_data').innerHTML;
if(str1=="Empty")
{
// make curOrder = to 1 element array of curEntry
var curOrder=[curEntry];
}
else
{
// parse str1 into an array and parse it to curOrder.
// Then push curEntry on the end.
var curOrder=str1.split("\n");
curOrder.push(curEntry);
}
// now we should have an array called 'curOrder[]'. Let's show it
// on the web page.
$('#all_labels').html(curOrder);
}
}
Now, the problem that I'm having is that after I add a line or two (or more) to the display using the 'add' button and then go into the 'edit' mode (where the text box is enabled) and I make all my changes, the 'add' button doesn't work.
Oddly enough, when I press the 'reset' button (which is just a reset button) it then shows all the adds I did after the edit, and the edited stuff is gone.
Now... to the question... is there something I'm not understanding about the text box? Is there some trick I need to do to get it to work? Am I going about this all wrong? Should I be using a different tool for this other than the 'textbox'?
Any help is greatly appreciated!!
Greg

Found the typo in your jsFiddle.
The first thing that I did was to add:
alert('hi there');
to the very top of the script, inside the $(document).ready() wrapper. Note that on jsFiddle you cannot see the document.ready wrapper, it is invisibly included, so just put the alert at top of javascript block as I did (link to my new jsFiddle is at bottom of answer)
Next, I noticed that you are enabling/disabling several controls by referencing them individually by ID. You can reference several controls at one time if they share the same class, so I invented the class="orderentry" and added that attribute to each of those controls. This removed 8 lines of code, which made troubleshooting easier.
Then, I began deleting/undeleting. First, I deleted everything in the javascript panel except alert('hi there');, and ran the jsFiddle. The alert popped up. Great. So I used Ctrl+z to undelete everything. Next, I selected everything EXCEPT the next block of code, and deleted the selection. I ran the jsFiddle, and again the alert popped up.
I continued deleting/undeleting until I found out where the alert no longer worked -- and that revealed the offending code block. Just had to carefully study the syntax in that specific area and found the error:
$('#txtOrder').attr({'disabled':'disabled')}; <== ERROR: note final parentheses
instead of
$('#txtOrder').attr({'disabled':'disabled'}); <== CORRECT: note final parentheses
Hope this helped, good luck on the rest of your project.
Here is the corrected jsFiddle

You didn't share your HTML, so I made assumptions about what your markup looks like.
Working jsFiddle here
The above jsFiddle is a much simplified version of what you are creating. Obviously, it is very different from what you have done so that I could create it quickly.
Observe how I made certain things happen with jQuery; take what is useful and ignore the rest.
Specifically, you can see how I initially disabled the textarea control:
$('#txtArea').attr({'disabled':'disabled'});
Re-enabled the textarea control for editing, while also hiding the Edit button and displaying the Save button:
$('#txtArea').removeAttr('disabled');
$('#btnSave').show();
$(this).hide();
Importantly, this is how I ensure each addition adds to (rather than overwriting) existing content:
var ord = 'Requested By: ' + $('#txtReq').val() + '\r\n';
Very likely you already know many (most?) of the things I am pointing out, but I have no idea what you know so, again, keep the one or two things you find useful and ignore the rest. I only hope I've managed to hit on the bit that has you stumped at the moment.
I very rarely recommend W3Schools for anything, but look here for their excellent summary / reference of jQuery selectors, events, methods. (Keep hitting Next Chapter to cycle through all pages of this reference).

Input box will not "forget" the first value it gets Firefox 20.0

The problem I have is with an input box not forgetting the first input it gets. It then feeds it back even when the content should have been over written by a new input. The code I am using works fine with IE8 the problem is seen with Firefox 20.0.
I am working entirely in Javascript. There is no HTML beyond a body.
I use this to set up my input box:
addElementWithIdButNoNode("input","manimp","div42"); // add input box
addElementWithNodeAndId("button","Set","div42","setButton"); //add "set" button
document.getElementById("setButton").onclick=showIt;
"manimp" is the ID and the below successfully captures what is entered first time around as "theMainVar".
function showIt()
{
theMainVar=manimp.value;
theMainVar=parseFloat(theMainVar);
alert(theMainVar);
}
The problem is that if you run this again in Firefox you can enter any value you like but the alert comes back with what you entered the first time around.
You can manually sent the "manimp.value" to something else in javascript and it does change but it then stays stuck at this changed value.
I need a "reset manimp so it can accept a new value from the input box function"
I have had a look around and found lots of "reset()" and "clear()" funcitons but nothing works for me.
The same thing happens if I swap the input box for a drop down.
I'm new to Javascript so if the fix seem obvious to you, maybe it is!

Try getting the 'manimp' element inside your function, probably the value is referenced when the function is declared. So, inside your function use
theMainVar = document.getElementById('manimp').value;

TinyMCE Plugin building

I am working on modifying an existing spell check plugin for TinyMCE.
This is what is supposed to happen:
1. User hits "space" and the spell check runs.
2. If the word is spelled wrong the word gets wrapped with a span and gets a red underline
what I find happening is that when the user hits space bar the word does get spell checked but the cursor pops back to the end of the word just typed (instead of to where the space is) (you can see this in action at http://mail.solidhouse.com/webmail2/test.html)
here is my pseudcode:
var b = this.editor.selection.getBookmark();
//for each node
node.nodeValue.replace(r5, '$1$2');
this.editor.selection.moveToBookmark(b);
what I am suspecting is that moveToBookmark keeps the cursor within the element but I have no idea what to do to remedy this.
(I have tried incrementing b.start and b.end but that did not work)
I know this is hard to explain. Any thoughts on this are greatly appreciated.

try incrementing the bookmark start/end by 2 instead of 1 if you haven't already. since the underline adds a tag around the mispelled words, that's an additional 2 places that need to be accounted for in the bookmark: 1 for each side of the span.

Can you get yourself out of the element by grabbing its parent?
this.parentNode.moveToBookmark(b);
Or something like that.