We Keep Coding

assigning value to hidden field from javascript

I am trying to do what seems to be simple but am unable to accomplish
I am trying to set the value of a column after a row focus change in a grid to a hidden value in java script.
My imbedded javascript code:
function OnGridFocusedRowChanged() {
grdA.GetRowValues(grdA.GetFocusedRowIndex(), 'ClientID', OnGetRowValues);
}
function OnGetRowValues(values) {
//Set hidden value
document.getElementById('<%=hdnClientID.ClientID%>').value = values[0];
//Fire button click
btnPopulateGrids_Click();
}
where hdnClientID is the name of my hidden field
In GridA I have the setting as such that OnGridFocusedRowChanged gets executed each time a row focus change takes place.
To this point, it works fine, the values[0] in OnGetRowValues() contains the correct value from the corresponding row in GridA.
But in the corresponding code behind, I cannot access the value from hidden field hdnClientID. Always comes up null when accessing
Current_Client_ID = CInt(hdnClientID.Value);
cannot access or convert any value from
hdnClientID.ClientID.
either.
I'm missing something simple.

I had to complete a similar task recently and I too was unable to access the value from codebehind. I researched and found out that it is not that simple and that you can't do it with javascript. What I would recommend is to check if you have jQuery installed and if you do, change your function to this:
function OnGetRowValues(values) {
//Set hidden value
$('#<%=hdnClientID.ClientID%>').val(values[0]);
//Fire button click
btnPopulateGrids_Click();
//If you change your HiddenField to have OnValueChange event, you can trigger it with this
//__doPostBack('<%= CompanyCode.ClientID %>', '');
}
Also, I guess you are firing some function from code behind with btnPopulateGrids_Click();.
I would recommend adding OnValueChanged="hdnClientID_OnValueChanged"/> to your <asp:HiddenField/> and using my supplied function triggering method.

Get textbox value after append - jQuery

First I'll append some value to a textbox using jQUery :
$('#textboxId').val('someval');
Now the value is empty, when I see in console.log
This will not work, since the value is empty.
var someVar = $('#textboxId').val();
How do I get the appended value again in jquery?

This will not work, since the value is empty.
No, your code is valide and will work, you can notice that the value is added to the input field, but the value attribute always shows the default value. Browser Inspector never displayed the current value in the attribute. The current value is always visible just on the screen.
$('#textboxId').val('someval');
alert($('#textboxId').val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='textboxId'/>

Try like this:
$('#textboxId').append('someval');
var someVar = $('#textboxId').val();

Dynamically creating an input field with disabled = true is setting null values to zero

I have a timesheet table. At the bottom of the table there is a button which allows me to add a row. Understandably, all the cells in the new row start off empty. The JavaScript uses:
txtFld.setAttribute('value', '');
to do so.
However, in some situations I want some of the new fields to show up but be disabled so I (in those situations) add in:
txtFld.setAttribute('disabled', 'disabled');
The problem is that, when doing this, after submission, when the table re-renders itself, all those empty values show up as zeroes instead of empty strings. As far as calculations go, that's fine, but I don't want rows of zeroes. I want empty cells. If I take out the disabled part, it works fine.
I've temporarily remedied this by, instead of using disabled, using readonly, which seems to give me the desired results. The only problem is that, while the text field remains non-editable, the user CAN place the cursor inside the box. I want the cleaner, "can't even click in here" that the disabled gives me.
Any thoughts on why the disabled feature is doing this and how I can use disabled without the resulting row of zeroes?
For the record, I've mixed and matched every combination of:
txtFld.setAttribute('value','');
txt.setAttribute('value', null);
txtFld.value = '';
txtFld.value = null;
with
txtFld.setAttribute('disabled');
txtFld.setAttribute('disabled', 'true');
txtFld.setAttribute('disabled', 'disabled');
txtFld.disabled = 'true';
txtFld.disabled = 'disabled';
that I can think of with the same results (or worse) every time.
Thanks.

When a field is disabled, it's not included in the form parameters sent to the server.
In new browsers (IE11+, and pretty much everything else) you can use CSS to disable pointer events on the element:
txtFld.readonly = true;
txtFld.style.pointerEvents = 'none';
That'll make the element simply not respond to any clicks. (Here is a jsfiddle.) Because it's not disabled, a form POST will send the empty field to the server.
You should disable fields by setting the "disabled" property of their DOM nodes to true (the boolean constant, not the string).
txtFld.disabled = true; // disables field
txtFld.disabled = false; // enables field
The "disabled" property is treated as a boolean, so setting it to any string value (other than the empty string) will set it to true:
txtFld.disabled = "false"; // disables field
Another thing you can do to exploit the real disabled browser behavior and have empty parameters posted to the server is to use pairs of inputs:
<input type=text name=whatever data-companion=whatever-c> <!-- visible input -->
<input type=hidden name=whatever id=whatever-c> <!-- invisible input -->
Now whenever you enable the text field, you disable the hidden input, and vice-versa. That way there's always something posted.

How to make statements effect after a change event was fired?

I have a select element in a form with id of "qlt".
And if I change the value of that selection, other SELECT(#names) element changes its option(s).
However, it seems the change function takes effect at the moment I tick the dropdown, not after the value has changed.
So my jquery code condition below has an opposite effect. If the value of qlt is 14-1, then the selection will have "Hello (90x55mm)" as its option insted of Business Card (90x55mm.
var qlt = (jQuery("#qlt").val()).split(":")[0];
jQuery('#qlt').change(function(){
if(qlt=="14-1"){
ChangeOptions(["Business Card (90x55mm)"],"#names",[1]);
}
else if(qlt=="14-2"){
ChangeOptions(["Hello (90x55mm)"],"#names",[2]);
}
});
jQuery('#names').change(function(){
quantities=[50,100,250,500,1000,2000,5000];
ChangeOptions(quantities,"#qlnt",quantities);
});
If my question is not clear, you can visit the actual site here:
http://210.48.94.218/~printabl/products/labels-stickers/
The two select elements I am referring to are the Quality and Size dropdowns. The form is in the middle.

The actual problem looks like the order of callback execution
The qlt variable is set using the method calculate which is registered using jQuery("select").change(calculate); at line 701.
But the change options callback is registered at line 528 which will get executed before the calculate method is called that is why the value of qlt is not updated until next select.
One solution is to move jQuery("select").change(calculate); before line 528 another one is below
It might be a problem of some script execution, I assume qlt is supposed to be the current selected value in the #qlt input then you can declare a local variable and assign the current value using $(this).val()
jQuery('#qlt').change(function(){
var qlt = $(this).val().split(":")[0];
if(qlt=="14-1"){
ChangeOptions(["Business Card (90x55mm)"],"#names",[1]);
}
else if(qlt=="14-2"){
ChangeOptions(["Hello (90x55mm)"],"#names",[2]);
}
});

Form reset and programmatically set values

I am trying to reset a form using:
myForm.reset();
I tried to set values that way:
//solved by setting $('#myTextControl').attr('defaultValue', 'my initial value');
//Thanks RobG
$('#myTextControl').val('my value');
$('#myTextControl').attr('value', 'my value');
//solved by setting $('#myTextControl').attr('defaultChecked', false or true); initially
$('#myCheckboxControl')attr('checked', 'checked');
//Finally it works with radios too, as shown here -> http://jsfiddle.net/4VAkp/2/
$('#myRadioControl')attr('checked', 'checked');
The way you update a value is important, as you can see here -> http://jsfiddle.net/4VAkp/3/
Updating a value using attr will fix the value as the default:
Wrong
radio2.attr('checked', true);
text2.attr('value', 'my text2');
This will not set the value as the default (as expected):
Correct
radio.prop('checked', true);
text.val('my text');
This works fine when the values were set by a user, but don't work if values were set programmatically.
If I set a value programmatically first, then through the ui and finally reset it, it comes back to the programmatically set on.
I suspect that there should be a way to set a value programmatically without changing the default.
Any thoughts?
Thanks in advance,
Eric

Resetting the form sets the controls to their default value, which is either specified by the value attribute or set by the defaultValue property. Changes by the user do not change either of these—except in (older?) IE, where getAttribute is buggy.
To "reset" the form to some other set of values without modifying ether the value attribute or the defaultValue property, the value property of the controls must be programmatically set.