Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Changing input text value with Javascript doesn't change display

Tags:

javascript

I'm trying to change the value of a text input field based on user actions. I'm doing it like this:

document.getElementById(textFieldID).value = newValue;

It isn't quite working -- the original text in the field remains on the screen, unchanged. However, when I submit the form, it behaves as though the value was indeed changed correctly. (And a debug alert confirms that yup, I'm hitting that bit of the code and passing in the right field ID and text value.) Anybody have any insights? Is there something I need to be doing to redraw the input element?


Edit: Per Jeff B's request, and per the fact that this seems to have everybody stumped, here's some relevant bits of code:

<script LANGUAGE="JavaScript" TYPE="text/javascript">
   function changeText(changeSelector)
   {
      var myindex  = document.getElementById(changeSelector+"Recent").selectedIndex;
      var SelValue = document.getElementById(changeSelector+"Recent").options[myindex].value;
      document.getElementById(changeSelector).value = SelValue;
      document.getElementById("historicalText").value = SelValue;
      document.getElementById("historicalTextSelect").value = changeSelector;
   }
</script>

<input onChange="updateScrollingPreview1217(this); return true;" type="text" id="crawlMsg1217" name="crawlMsg1217" size="60" maxlength="1000" value="">

<select id="crawlMsg1217Recent" name="crawlMsg1217Recent" onchange="javascript:changeText('crawlMsg1217');">
[options go here]
</select>

And that "onChange" handler isn't what's gumming up the works; I get the same behavior with or without it.


Edit 2: It looks like the problem is being caused by "JSpell", a third-party spelling checker our product uses. (I'm told that clients prefer using it to a spellcheck built into the browser; go figure.) It appears to be slightly misconfigured on my test machine, so I'm going to try straightening that out and praying that it makes the problems go away. If it doesn't ... should be interesting.
Edit 3: Yup. Fscking JSpell. Just posted a complete answer for the sake of posterity, will accept it tomorrow when I'm allowed. My thanks to everybody who tried to help; +1's all around, wish I could give more.
like image 648
BlairHippo Avatar asked Dec 02 '09 21:12

BlairHippo


3 Answers

I have confirmed that the culprit is indeed JSpell, and that the precise trouble spot is this line:

window.onload=jspellInit;

Despite the prayers mentioned in Edit 2 above, making sure it was configured correctly did NOT make the problem go away. And this line is indispensable to JSpell's functionality. I don't know if JSpell always hoses Javascript functionality this way, or if there's some sort of perfect storm of factors that's causing it to pick a fight with my page, but that is indeed the source of my problems.

My thanks to everybody who tried to help. This was obviously a bit of a no-win in terms of getting the right answer, since it was caused by a component that was seemingly entirely unrelated and thus didn't get mentioned by me, but you at least confirmed that I was (in theory) doing things right and not simply going insane.

like image 62
BlairHippo Avatar answered Oct 26 '22 23:10

BlairHippo


Is the document's id actually "textFieldID" or is "textFieldID" a javascript variable that contains the ID of the text input to change? If it is not a variable, I believe you should make it:

document.getElementById('textFieldID').value=newValue;
like image 37
malonso Avatar answered Oct 26 '22 22:10

malonso


It's hard to debug this without the context, since the code you have ought to work fine. Can you confirm that you've got the right node by doing something like:

document.getElementById(textFieldID).style.border = "4px solid red";
like image 36
jhurshman Avatar answered Oct 26 '22 23:10

jhurshman