We Keep Coding

IE11: select element freezes on changing option.text

I am using plain javascript for changing option's text to something else on some event. After that Select(multiselect) element freezes.If I comment line 2 below,then Select element will not freeze.Any suggestions? I want to use javascript only.
function updateSelect(select)
{
var opt = select.options[select.selectedIndex];
opt.text = "-";//--2
..
..
}

I am able to do it with Jquery with .text() function.
$("#"+opt.id).text("-");

This would resolve the problem:
option.textContent = "-";

How can I get td first child value?

I have a table where I want, for each row, get the first td and for this td I want the first input child value.
I'm able to get the markup for the input, but I can't extract the value.
Here is my code:
$('#table-unidades tr:not(:last-child)').each(function () {
$('td:first-child', this).each(function () {
var firstCell = $(this).children().eq(0);
var text = firstCell.html();
alert(text);
})
});
my alert outputs this:
<input type="text" name="unidades-first-td" value="UN - Unidade" disabled />
But all I want is the value.. I've tried with .text(), .val() , but it didn't work...

try this and get them all as an array once:
$("#table-unidades tr:not(:last-child)>td:first-child input:text:first-child")
.map(function () {return $(this).val(); }).get();

You need to use val() to get value of input, then use find() to find input field inside td
$('#table-unidades tr:not(:last-child)').each(function() {
$('td:first-child', this).each(function() {
var firstCell = $(this).children().eq(0);
var text = firstCell.find('input').val();
alert(text);
})
});

You don't need to use two each loops to find first child, also you must use .val() to get the value of an input, try this
$('#table-unidades tr:not(:last-child)').each(function () {
var text = $(this).find('td:first input:first').val();
});

Try
var val = firstCell.find('input').val();
alert(val);

Use .val() to get the value of the input element
$('#table-unidades tr:not(:last-child) td:first-child').each(function () {
var firstCell = $(this).children('input');
var text = firstCell.val();
alert(text);
});

var trs = $("tr", ".my-table");
for(var i=0; i<trs.length; i++){
var nval = $("td:first-child > input", trs[i]).val();
console.log(nval);
}
1 don't care about the reputation.
2 if it doesn't work, make it work.

Regex for change case when click in a button

I need to change case when I select part of a text and click in a button in javascript/jquery
this code doesn't work for a selected part
$("#button").click(function() {
value = "some selected text";
value.replace(/\-[a-z]/g, /\-[A-Z]/g);
});
output should be:
SOME SELECTED TEXT

Here this should work better:
$("#button").click(function() {
value = "some selected text";
value = value.toUpperCase();
});
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase
var lowerText="alphabet";
document.write(lowerText.toUpperCase());

changing text for a selected option only when its in selected mode

I am not sure if I confused everyone with the above title. My problem is as follows.
I am using standard javascript (no jQuery) and HTML for my code. The requirement is that for the <select>...</select> menu, I have a dynamic list of varying length.
Now if the length of the option[selectedIndex].text > 43 characters, I want to change the option[selectecIndex] to a new text.
I am able to do this by calling
this.options[this.selectedIndex].text = "changed text";
in the onChange event which works fine. The issue here is once the user decides to change the selection, the dropdownlist is showing the pervious-selected-text with changed text. This needs to show the original list.
I am stumped! is there a simpler way to do this?
Any help would be great.
Thanks

You can store previous text value in some data attribute and use it to reset text back when necessary:
document.getElementById('test').onchange = function() {
var option = this.options[this.selectedIndex];
option.setAttribute('data-text', option.text);
option.text = "changed text";
// Reset texts for all other options but current
for (var i = this.options.length; i--; ) {
if (i == this.selectedIndex) continue;
var text = this.options[i].getAttribute('data-text');
if (text) this.options[i].text = text;
}
};
http://jsfiddle.net/kb7CW/

You can do it pretty simply with jquery. Here is a working fiddle: http://jsfiddle.net/kb7CW/1/
Here is the script for it also:
//check if the changed text option exists, if so, hide it
$("select").on('click', function(){
if($('option#changed').length > 0)
{
$("#changed").hide()
}
});
//bind on change
$("select").on('change', function(){
var val = $(":selected").val(); //get the value of the selected item
var text = $(':selected').html(); //get the text inside the option tag
$(":selected").removeAttr('selected'); //remove the selected item from the selectedIndex
if($("#changed").length <1) //if the changed option doesn't exist, create a new option with the text you want it to have (perhaps substring 43 would be right
$(this).append('<option id="changed" value =' + val + ' selected="selected">Changed Text</option>');
else
$('#changed').val(val) //if it already exists, change its value
$(this).prop('selectedIndex', $("#changed").prop('index')); //set the changed text option to selected;
});

How to change button text or link text in JavaScript?

I have this HTML button:
<button id="myButton" onClick="lock(); toggleText(this.id);">Lock</button>
And this is my toggleText JavaScript function:
function toggleText(button_id)
{
if (document.getElementById('button_id').text == "Lock")
{
document.getElementById('button_id').text = "Unlock";
}
else
{
document.getElementById('button_id').text = "Lock";
}
}
As far as I know, button text (<button id="myButton">Lock</button>) is just like any link text
(Lock). So the fact that it's a button doesn't matter. However, I can't access the button text and change it.
I tried ('button_id'), (button_id), == "Lock", == 'Lock', but nothing works.
How can I access and change a button text (not value) or a link text?

Change .text to .textContent to get/set the text content.
Or since you're dealing with a single text node, use .firstChild.data in the same manner.
Also, let's make sensible use of a variable, and enjoy some code reduction and eliminate redundant DOM selection by caching the result of getElementById.
function toggleText(button_id)
{
var el = document.getElementById(button_id);
if (el.firstChild.data == "Lock")
{
el.firstChild.data = "Unlock";
}
else
{
el.firstChild.data = "Lock";
}
}
Or even more compact like this:
function toggleText(button_id) {
var text = document.getElementById(button_id).firstChild;
text.data = text.data == "Lock" ? "Unlock" : "Lock";
}

document.getElementById(button_id).innerHTML = 'Lock';

You can simply use:
document.getElementById(button_id).innerText = 'Your text here';
If you want to use HTML formatting, use the innerHTML property instead.

Remove Quote. and use innerText instead of text
function toggleText(button_id)
{ //-----\/ 'button_id' - > button_id
if (document.getElementById(button_id).innerText == "Lock")
{
document.getElementById(button_id).innerText = "Unlock";
}
else
{
document.getElementById(button_id).innerText = "Lock";
}
}