We Keep Coding

HTML select onChange doesnt work

I am not any kind of proficient in JavaScript.
So I wrote a simple function to use on HTML SELECT, but it doesn't work.
JavaScript:
<script type="text/javascript" language="JavaScript">
function changeFormAction() {
var value = document.getElementById("format");
if (value == "freeText") {
document.getElementById("regularExpression").setAttribute("disabled", false);
}
}
</script>
HTML:
<select id="format" name="customFieldType" onChange='changeFormAction()'>
...
</select>
<input id="regularExpression" type=text size=5 name="format" disabled="true">
Any help will be highly appreciated

value in your code contains the element "format". Usually, to get the value, you just add .value as suffix. But since this a select/dropdown you'll have to do:
var element = document.getElementById("format");
var value = element.options[element.selectedIndex].value;
var text = element.options[element.selectedIndex].text;
Now value and text will contain the different strings like below:
<option value="thisIsTheValue">thisIsTheText</option>
Use either to compare with. I'll use both below to show as an example:
function changeFormAction() {
var element = document.getElementById("format");
var sValue = element.options[element.selectedIndex].value;
var sText = element.options[element.selectedIndex].text;
if (sValue == "freeText" || sText == "freeText") {
document.getElementById("regularExpression").removeAttribute("disabled");
}
}

The issue is something else.. It does hit changeFormAction function on change of customField select list..
var value = document.getElementById("regularExpression");
is wrong usage..
you should use it as
var value = document.getElementById("regularExpression").value
And adding from comments for disabling it also can be
document.getElementById("regularExpression").removeAttribute("disabled");

This wont work because you are trying to fetch text box value using document.getElementById("regularExpression").value;
But on page load you are not having any thing as default value in text box
You might be needed to fetch value of select box.

I think you need something like this:
http://jsfiddle.net/ew5cwnts/2/
function changeFormAction(value) {
if (value == "freeText") {
document.getElementById("regularExpression").removeAttribute("disabled");
}
}
HTML:
<select name="customFieldType" onchange='changeFormAction(this.value)'>

How to change Label Value using javascript

I want to change the label value from '0' to 'thanks' in below label, on checkbox click event.
<input type="hidden" name="label206451" value="0" />
<label for="txt206451" class="swatch_text" >Chestnut Leather</label>
<input type="checkbox" name="field206451" class="swatch_check" id="txt206451" value="SELECTED"/>
The Javascript is as below.
var cb = document.getElementById('field206451');
var label = document.getElementById('label206451');
cb.addEventListener('click',function(evt){
if(cb.checked){
label.value='Thanks';
}else{
label.value='0';
}
},false);
But this is not working. Any idea?

very simple
$('#label-ID').text("label value which you want to set");

This will work in Chrome
// get your input
var input = document.getElementById('txt206451');
// get it's (first) label
var label = input.labels[0];
// change it's content
label.textContent = 'thanks'
But after looking, labels doesn't seem to be widely supported..
You can use querySelector
// get txt206451's (first) label
var label = document.querySelector('label[for="txt206451"]');
// change it's content
label.textContent = 'thanks'

You're taking name in document.getElementById() Your cb should be txt206451
(ID Attribute) not name attribute.
Or
You can have it by document.getElementsByName()
var cb = document.getElementsByName('field206451')[0]; // First one
OR
var cb = document.getElementById('txt206451');
And for setting values into hidden use document.getElementsByName() like following
var cb = document.getElementById('txt206451');
var label = document.getElementsByName('label206451')[0]; // Get the first one of index
console.log(label);
cb.addEventListener('change', function (evt) { // use change here. not neccessarily
if (this.checked) {
label.value = 'Thanks'
} else {
label.value = '0'
}
}, false);
Demo Fiddle

Try
use an id for hidden field and use id of checkbox in javascript.
and change the ClientIDMode="static" too
<input type="hidden" ClientIDMode="static" id="label1" name="label206451" value="0" />
<script type="text/javascript">
var cb = document.getElementById('txt206451');
var label = document.getElementById('label1');
cb.addEventListener('click',function(evt){
if(cb.checked){
label.value='Thanks'
}else{
label.value='0'
}
},false);
</script>

Based off your code, i created this Fiddle
You need to use
var cb = document.getElementsByName('field206451')[0];
var label = document.getElementsByName('label206451')[0];
if you want to use name attributes then you have to take the index since it is a list of items, not just a single one. Everything else worked good.

hope this help someone else :
use innerHTML for using label object.
document.getElementById('lableObject').innerHTML = res.FullName;

Javascript: I cant get a textbox to display a value updated on the client side

I'm trying to simply have a button update the contents of ah HTML textbox (on the client side).
Clicking the button fires the updateBox() method fine. Stepping through the code, I can see the text1.value field update fine but the text1 does not seem to get updated by changes to the dom.
Am I mistaken to think that you can do updates on the client side only by modifying dom data?
<input type=text name="text1" value="100"/>
<button name="but1" id="but1" onclick="updateBox" >clickme!</button>
<script type="text/javascript" >
var text1 = document.getElementsByName('text1');
function updateBox() {
//text1.value = "22"; <----tried this way, no good either :(
text1.innerHTML = "99";
}
</script>

Few things:
onclick="updateBox" should be onclick="updateBox()"
var text1 = document.getElementsByName('text1'); should be var text1 = document.getElementsByName('text1')[0]; (note the [0])
text1.value = "22"; is the one to use
jsFiddle example

Try use below,
var text1 = document.getElementsByName('text1')[0];
function updateBox() {
text1.value= "99";
}
Ref: https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByName

Thanks for everyone's responses.
With your advice I got the button to update. I appreciate the advice on how to implement the function correctly. This was just a test so I didn't pay much attention.
1) I had to use: onclick="updateBox" rather than "updateBox() in the button HTML because "updateBox" caused the event to fire with out clicking the button.
2) Big thanks for pointing out that I was referencing a collection instead of an item in the collection. Had to use: var tb1 = document.getElementsByName('tb1')[0];
3) For some reason the box would not update when I used:tb1.innerHTML = "99";
This worked: tb1.value = "99";

text1[0].innerHTML = "99"
Use innerHTML instead of value

try passing the variable to your function instead of declaring it outside of your function.
<input type=text name="text1" value="100"/>
<button name="but1" id="but1" onclick="updateBox('text1',99)" >clickme!</button>
<script type="text/javascript" >
function updateBox(t,v) {
var tv = document.getElementsByName(t)[0];
tv.value = v;
}
</script>

How to dynamically turn a text field into dropdown?

The name says all. I want to change a text field element into combo box using javascript. It will be nice if it's cross-browser.
EDIT: I may use jQuery

The trick is to create the dropdown element and add it to the form, as well as remove the text field. You can have HTML like this:
<form id='myform'>
...
<span id='textelement'>text goes here</span>
<input type='button' value='change text to dropdown' onclick='change()'/>
...
</form>
Then your change() function could be something like this:
function change() {
var _form = document.getElementById('myform');
var _text = document.getElementById('textelement');
_form.removeChild(_text);
var _combo = document.createElement('select');
_combo.setAttribute('size', '1');
_combo.setAttribute('id', 'dropdownelement');
_form.appendChild(_combo);
_combo = document.getElementById('dropdownelement');
//add first value to the dropdown
var _opt = document.createElement('option');
_opt.text = 'New option 1';
_opt.value = '1';
_combo.add(_opt);
//add second value to the dropdown
_opt = document.createElement('option');
_opt.text = 'New option 2';
_opt.value = '2';
_combo.add(_opt);
...
}
Note that I haven't tested this code - use it as a starting point only.

Are you wanting to change it client side or server side. If client side there really is not way without using javascript of some sort.

You can use InnerHTML but it isn't compatible with all browsers (Not compatible with: NN4 , OP5, OP6)

How to parse a variable in Javascript

I'm trying to use this code:
var field="myField";
vals[x]=document.myForm.field.value;
In the html code I have
<form name="myForm">
<input type='radio' name='myField' value='123' /> 123
<input type='radio' name='myField' value='xyz' /> xyz
</form>
But this gives me the error:
document.myForm.field is undefined
How can I get field to be treated as a variable rather than a field?

Assuming that your other syntax is correct (I havne't checked), this will do what you want:
var field="myField";
vals[x]=document.myForm[field].value;
In JS, the bracket operator is a get-property-by-name accessor. You can read more about it here.

Use the elements[] collection
document.forms['myForm'].elements[field]
elements collection in DOM spec
BTW. If you have two fields with the same name, to get the value of any field, you have to read from:
var value = document.forms['myForm'].elements[field][index_of_field].value
eg.
var value = document.forms['myForm'].elements[field][0].value
and, if you want to get value of selected radio-button you have to check which one is selected
var e = document.forms['myForm'].elements[field];
var val = e[0].checked ? e[0].value : e[1].checked ? e[1].value : null;

You have to do it like this:
var field = "myField";
vals[x] = document.myForm[field].value;
or even
vals[x] = document.forms.myForm.elements[field].value;

Based on your tags, it seems that you are using jQuery. If so, you can just do this and it will make your life much easier:
var vals = new Array();
$("form[name='myForm'] :radio").each(function() {
vals.push($(this).val());
});
:-D