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.
Related
I have an input field:
<input id="RangeRate1" type="range" min="125.00" max="500.00" value="250.00">
When I reload the page, the value of the input is set to what was set the last time the range slider was changed. For instance, if the rate was changed to 300 prior to page reload, when the page reloads, if I console out the value of the range slider:
let RateSlider = document.querySelector("RangeRate1")
console.log("existing rate: ", RateSlider.value)
I get 300! even though the html input value is still shown as 250.00 as above. When I use ctrl shift r, the correct number is displayed, in this case the value I see in the input HTML code, 250. So, is there a way to flush out the old value or overwrite it with the actual value in the input tag lin?
Some browsers do this for "convenience" purposes even though it's less than convinient
You can just use some JavaScript to set the actual value to the attribute value (unless the attribute itself is also set by the browser to last value, in which case just set it to the hard coded value itself)
let RateSlider = document.querySelector("#RangeRate1")
RateSlider.value=parseInt(RateSlider.getAttribute("value"))
EDIT
alternatively if the input is part of a form (assuming form has id if "myForm") you can reset it
myForm.reset()
I'm trying to programatically autofill my information on a form like this (Stripe's testing form) however I'm having trouble filling/selecting some of the fields.
For example, merely changing the Node's value attribute is not working for fields like the cardNumber field, and changing the selectedIndex attribute for the country does not have any effect.
Example:
selectedIndex = 40 from another index like 3 gives you Canada, which when done manually, will cause a Postal Code field to appear. However, I'm having trouble achieving this programmatically by just changing theselectedIndex
You can manually dispatch an event:
var select = document.getElementById('billingCountry')
select.dispatchEvent(new Event('change', { 'bubbles': true }))
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.
I have a simple Kendo ComboBox:
HTML:
<div>
<h5>Brand</h5>
<div id="combo1"></div>
</div>
JavaScript:
j$("#combo1").kendoComboBox({
dataTextField: "name",
dataValueField: "id",
value: "Original_Brand_Value",
dataSource: {
transport: {
read: {
url: "..."
}
}
}
});
Note that the ComboBox has a default initial value of "Original_Brand_Value". How do I check if the Kendo ComboBox is "dirty" i.e. currently has a value other than "Original_Brand_Value"? Seems like I should be able to do something like:
j$("#combo1").data("kendoComboBox").isChanged()
**OR**
j$("#combo1").data("kendoComboBox").dataSource.isChanged()
But I have searched far and wide and there seems to be no such method. There has to be some way to do this, this must be a common use case.
As you have concluded, the kendoComboBox widget itself does not track whether it has been changed state. The datasource does have a hasChanges() method but making a selection does not change the datasource, it just gets a different value from it. However the kendoComboBox does raise events that you can use, for example 'select' that is fired when the user makes a selection: http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox#events-select
For example you could add this to your comboBox configuration:
select: function(e) {
var item = e.item; //jQuery object representing the selection
isDirty = true; //Set a flag or call a function as required. Perhaps check the item as well to make sure it isn't the default value.
}
Alternatively there is also a method called 'select' that can be used to get or set the selected item. You can use this to get the selected index (if it is not zero, then the comboBox has a non-default selection):
var selectedIndex = j$("#combo1").data("kendoComboBox").select();
This isn't the only way. If you were to use MVVM declarative syntax with the comboBox bound to a property on a kendo.Data.Model (which is observable), any changes will automatically set the dirty flag on that model: http://docs.telerik.com/kendo-ui/api/javascript/data/model#fields-dirty
MVVM is a very powerful design pattern to use with kendo but I think going into more detail is outside the scope of what you're asking.
You can use the value() method to check the current widget value and compare it to the initial value, but probably this approach is not appropriate, as it is too obvious.
http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox#methods-value
Another possible option is to subscribe to the change event of the widget and raise a custom dirty flag in a JavaScript variable. You could even set an expando on the ComboBox widget object.
http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox#events-change
On a side note, the ComboBox is an input widget that should hold and submit a form value. That's why it should be created from an input or select element, not from a div.
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.