We Keep Coding

innerHTML works in Firefox but not in Chrome

If we execute below code in Firefox 23, both alert boxes show correct value. When I execute the same in Chrome 28, second alert shows blank window.
HTML
<input type="hidden" id="mappingIDinput"/>
JS
alert(mappingId);
document.getElementById("mappingIDinput").innerHTML=mappingId;
alert(document.getElementById("mappingIDinput").innerHTML);
How can I save & retrieve value in hidden input field which works across browsers(ignore IE if required).

for input field use value not html to get their value
IN JAVASCRIPT
SET
document.getElementById("mappingIDinput").value="abc";
GET
alert(document.getElementById("mappingIDinput").value);
in jQuery
SET
$("#mappingIDinput").val("abc");
GET
alert($("#mappingIDinput").val());

You cant use innerHTML to set value for an input tag but use value or val() in jquery.

Use .val() for all inputs. Inner html is for etc.
$("#mappingIDinput").val(mappingId);
Cheers

Single <select> has multiple selected options

My tag is a single-choice pulldown, the default behavior for a tag. I have three values in it, "No", "Yes", "All". I am trying to change the selected programmatically, as I have done a thousand times before, with the following code (I'm using JQuery 1.9.1):
$('#select').children(':selected').removeAttr('selected');
$('#select').children('option[value="yes"]').attr('selected', 'selected');
$('#select').children(':selected');
I don't even know how this is possible, but somehow, in Chrome 26.0.1410.65 running on 10.8.3, there will be two selected options. Only one of them will show in the UI, but the last line of code will return two elements.
This does work correctly in Firefox 16.0.2, so I am mystified. Does anyone know if this is a quirk of Chrome, or if this is correct behavior and it's just changed?

You can do this to select desired value
$('#select').val('yes');

Stop trying to manipulate properties using attribute methods! Older versions of jQuery let you do this, but newer ones won't.
$('#select').children(':selected').prop("selected",false);
$('#select').children('option[value="yes"]').prop("selected",true);
//$('#select').children(':selected');
Though .val() as pointed out by Mohammad Adil is a better way of handling this.

You should not use the selected attribute to change what option is selected. Instead, use the selectedIndex property of your dropdwn.
For instance, in your case you might want this:
document.getElementById('select').selectedIndex = 1;

jQuery 1.7.1 - Text input's 'value' not updating in Firebug Inspect element but is on screen

Using jQuery 1.7.1, I have noticed that the value attribute/property of a text input field does not update when I view it in Firebug's Inspect Element tool, but does update on the screen, i.e. in the actual visible text box.
For example, when changing the value of a text with the following (used inline):
jQuery(function() {
jQuery('#event').val("test");
});
the text box itself displays test but Firebug's Inspect Element does not represent the change:
<input type="text" value="" placeholder="" id="event" name="event" class="input-text">
I'm sure I have seen the value change in Firebug before using older jQuery, however not in this scenario, nor that of a colleague of mine also using jQuery 1.7.1.
Is this a quirk/bug of this particular version of jQuery or have I missed a step somewhere?

The value attribute always shows the defaultValue. Firebug never displayed the current value in the attribute.
The current value is always visible on the screen.
This has nothing to do with Firebug or jQuery, it is the HTML standard.

The attribute value never changes, only the property.
http://jsfiddle.net/cc5Pm/1/
var input = document.getElementsByTagName("input")[0];
setInterval(function(){
input.value = parseInt(input.value) + 1;
console.log(input.value, input.getAttribute("value"));
},1000);

Sometimes Firebug doesn't always reflect some changes, I have noticed this before.
If there is a refresh I haven't found it. You can either turn Firebug off and on again or just use the console to check the value has changed
console.log($("#event").val());

I've seen this too: i.e the value attribute of an input does NOT change in Firebug. Last time I paid attention to this was a while ago (like 2 years). Incidentally, I was using jQuery too, but I really doubt jQuery has anything to do with this. It's just how Firebug works (or at least worked).
Of course, you could still use the Firebug console to definitively get the value:
console.log( $('input#event').val() )

Set value of a select in IE using YUI3

I have a select box and I need to both set the selected value and issue a change event with javascript.
In Firefox, the following works with no problem:
Y.one('#my_select_box').set('value', STEP_VALUES);
Y.one('#my_select_box').simulate('change');
No such luck in IE (IE7 in this case). The selected's value does not even change. I have tried using 'selectedIndex' instead of 'value' too.
Any ideas?

A reasonable answer is mySelect.query('option[value=foo]').set('selected', true);, however according this ticket it looks like the set('value', value) approach should work on the select tag itself, so I'm still unsure about that (I'm using YUI 3.1.1), so I'm still interested in any comments.

I didn't have success with the suggested answer, however I did have success with.
Y.one("#object").set("selectedIndex", 1);
Where 1 is the index to be selected.

Unselect textbox on blur with jQuery in IE8

I'm trying to have the default behavior of a form select (or highlight) the text when you tab to the next input. I've had to add the .select() function on my password form fields for this to work in IE8. Is there an equivalent to the jquery .select() for deselecting text?
$("#MyTextBox").focus(function() {
$(this).select();
});
$("#MyTextBox").blur(function() {
// Deselect here
});

Not that I am aware, however this ought to work for you:
$(this).val($(this).val());
Here you set the value of the field to itself. the cursor should automatically be put on the end.

The posted answer by James Wiseman worked perfectly in IE8, but for me at least, didn't work in Firefox 3.6.x.
I appreciate that the original question is specific to IE8, however, to help out those searching for a single solution that works in FF and IE, I used the following code:
var temptext = $(textbox).val();
$(textbox).val('');
$(textbox).val(temptext);
(where textbox is the textbox object to work with).
It uses the same theory as James Wiseman's solution, however, it adds the specific step of setting the textbox's text to a blank string prior to setting the textbox text back to the original string. Hope this helps!