I have form with select dropdown, checkboxes and text fields. When I read redux documentation for reseting fields it gives more than 1 way to clear fields - https://redux-form.com/6.0.0-alpha.4/docs/faq/howtoclear.md/
In my situation formvalues are tied to dropdown selection. And I am trying to remove dropdown selection on reset if possible. But that is not possible. So I tried using (c) and (d) ways from the redux document, but they reset it to older values and they do not clear all fields like select drop down do not reset to default selection. The first 2 ways are too complicated for something as simple as resetting.
This is my code where I implemented reset -
const { handleSubmit, reset, errors, submitCallback } = props
//....other code
//....other code
const clearAll = () => {
props.dispatch(reset('myForm'));
};
This resets my form to previous selection and do clear fields. What am I doing wrong?
Related
Does anyone have more details on how to use Dynamic Fields in aslagle/reactive-table (I find the documentation confusing.
I'm trying to add a column with a check box, such that as a person clicks on a row, the check box is toggled.
This way a user can page through a table of records and select items, then when they are done selecting I'll save their final choices.
Right now I can only capture click events by row. But I cannot figure out how to save clicks from as a person moves from one page to another.
Here's how I create the checkbox, using a columncell template; I'm using a unique record id (i.e. 'rin') as a html element id.
<template name="checkboxCellData">
<input type="checkbox" id="{{ rin }}" checked="{{ clicked }}">
</template>
Heres the event toggle.
Template.regsUnderReview.events({
'click #reactive-table-1 tbody tr': function (event) {
// When the row is clicked get that rows data
var row = this;
let cb = document.getElementById(row.rin);
if (row.clicked) {
row.clicked=false;
//set check box when row is clikked
cb.checked = false;
} else {
row.clicked = true;
cb.checked=true;
}
}
});
I think I'm only saving the checkbook state in the DOM, and not the correct Reactive table location....I don't want to store the value in the database, because I'll have tons of users saving their selections...I'll only want cache their selections in the web browser and then on final seletion, save the IDs selected to a user settings database.
Meteor sessions may be what you're looking for.
You can initiate one with Session.set("yourKey", "yourValue"), and you can get the data by using Session.get("yourKey"). Sessions in Meteor are also reactive.
If you are using Meteor 1.3+, you will probably have to add the session package with meteor add session in order to use the above methods.
When you create a MDL table, one of the options is to apply the class 'mdl-data-table--selectable'. When MDL renders the table an extra column is inserted to the left of your specified columns which contains checkboxes which allow you to select specific rows for actions. For my application, I need to be able to process some JavaScript when a person checks or unchecks a box. So far I have been unable to do this.
The problem is that you don't directly specify the checkbox controls, they are inserted when MDL upgrades the entire table. With other MDL components, for instance a button, I can put an onclick event on the button itself as I'm specifying it with an HTML button tag.
Attempts to put the onclick on the various container objects and spans created to render the checkboxes has been unsuccessful. The events I attach don't seem to fire. The closest I've come is attaching events to the TR and then iterating through the checkboxes to assess their state.
Here's the markup generated by MDL for a single checkbox cell:
<td>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select mdl-js-ripple-effect--ignore-events is-upgraded" data-upgraded=",MaterialCheckbox">
<input type="checkbox" class="mdl-checkbox__input">
<span class="mdl-checkbox__focus-helper"></span>
<span class="mdl-checkbox__box-outline">
<span class="mdl-checkbox__tick-outline"></span>
</span>
<span class="mdl-checkbox__ripple-container mdl-js-ripple-effect mdl-ripple--center">
<span class="mdl-ripple"></span>
</span>
</label>
</td>
None of this markup was specified by me, thus I can't simply add an onclick attribute to a tag.
If there an event chain I can hook into? I want to do it the way the coders intended.
It's not the nicest piece of code, but then again, MDL is not the nicest library out there. Actually, it's pretty ugly.
That aside, about my code now: the code will bind on a click event on document root that originated from an element with class mdl-checkbox.
The first problem: the event triggers twice. For that I used a piece of code from Underscore.js / David Walsh that will debounce the function call on click (if the function executes more than once in a 250ms interval, it will only be called once).
The second problem: the click events happens before the MDL updates the is-checked class of the select box, but we can asume the click changed the state of the checkbox since last time, so negating the hasClass on click is a pretty safe bet in determining the checked state in most cases.
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
$(document).on("click", ".mdl-checkbox", debounce(function (e) {
var isChecked = !$(this).hasClass("is-checked");
console.log(isChecked);
}, 250, true));
Hope it helps ;)
We currently don't have a way directly to figure this out. We are looking into adding events with V1.1 which can be subscribed to at Issue 1210. Remember, just subscribe to the issue using the button on the right hand column. We don't need a bunch of +1's and other unproductive comments flying around.
One way to hack it is to bind an event to the table itself listening to any "change" events. Then you can go up the chain from the event's target to get the table row and then grab the data you need from there.
You could delegate the change event from the containing form.
For example
var form = document.querySelector('form');
form.addEventListener('change', function(e) {
if (!e.target.tagName === 'input' ||
e.target.getAttribute('type') !== 'checkbox') {
return;
}
console.log("checked?" + e.target.checked);
});
I want the validation for kendo AutoComplete when user does not select any value from AutoComplete Value that is populated.
For Little Bit background say I do have two controls one as Kendo AutoComplete and other is Input box if user types something in the AutoComplete the values is populated and he does not select any value and switch to next control it must give a validation message that please select the value from the AutoComplete.
and Also if the user type any string in the AutoComplete and Switch to next control it must also give the validation that "hey,this value is not in the AutoComplete" so that it must not save any other data other than AutoComplete datas that is being Populated.
Heres how your auto complete is defined
#(Html.Kendo().AutoComplete()
.Name("countries")
// etc.
On submit button click event
<script>
$("#btnSubmit").click(function(){
var autoCompleteValue = $("#countries").val();
if (autoCompleteValue == "" || autoCompleteValue == null){
return false; //cancels submit action
}
// else let submit go through
});
</script>
The null check is probably useless, cuz if it doesn't have a value it's usually equal to ""
The .val() solution did not work for me, because the .val() value of the control is still the text I entered (custom text, not any of the AutoComplete values), and that's wrong.
Solution is in preventing the custom input of Kendo AutoComplete. See this link:
Kendo UI - Prevent Custom User Input in the AutoComplete
I have applied validation through JQuery Validation Plugin on my page. The validation works fine but once the Clear button is hit to clear out all the fields on the form, and then the save button is clicked again, the validation doesn't fire and the form gets submitted. I have called the following javascript function on click of Clear button to clear out all the form fields :-
function ResetForm() {
jQuery(':input', '#form1')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
return false;
}
The Clear button is on a ChildPage and ResetForm function is on the MasterPage. Anybody have any guess why its getting submitted after clearing the fields ?
input is an element and not a attribute or a pseudo selectable, the main issue I see in your code is the : within the :input
Try changing to jQuery('#form1 input') to fetch the list of inputs
Also change the not() command to select filter the inputs by type
.not('[type="button"], [type="submit"], [type="reset"], [type="hidden"]')
also as for :hidden there's several factors you should know about this.
They have a CSS display value of none.
They are form elements with type="hidden".
Their width and height are explicitly set to 0.
An ancestor element is hidden, so the element is not shown on the page.
In light of your comment please try this tested version:
function resetForm()
{
$("#form1").find(':input').each(function()
{
var jelem = $(this);
switch(this.type)
{
case 'password':
case 'select-multiple':
case 'select-one':
case 'text':
case 'textarea':
jelem.val('');
break;
case 'checkbox':
case 'radio':
jelem.attr('checked',false);
}
});
}
#source: http://www.electrictoolbox.com/jquery-clear-form/
Another way to do this is to create a hidden input in your form but set the type as reset like so:
<input type="reset" style="display:none" />
and then do:
function resetForm()
{
$("#form1[type='reset']").click();
}
Actually the error was something else, the code provided by RobertPitt is correct for clearing of form fields and my code was also correct for clearing of form fields. But the problem is that, on the clear button I had applied a class="cancel" so that the form should not get submitted because it was an aspx:button.
But according to what is written in JQuery docs, clicking of a button whose class is cancel should skip the validation, but after that if I click on a normal submit button validation should fire which was not firing in my case.
I just removed the cancel class and it worked.
Does this help?
Reseting the form when usering the jquery validations plugin
I have sort of a table with a radio-button column. I managed to make radio-button column work dynamically inserting into a cell (div if matter). But, on postback innerHtml hasn't been updated with "checked" attribute.
Could you give me an idea how can I find out (on the server) if radio-button has been checked?
More info: This is on user control inside update panel.
This would be good post on my topic, still doesn't help
Any reason you cannot use a standard asp:RadioButton and use javascript to ensure it is mutually exclusive. I have done this before by adding a custom attribute to the radiobutton and then using a js function to uncheck all items with that attribute and then check the selected one. This works around the IE issue which prevents the groupname attribute from working on radioboxes that are in different containers.
radioButton.InputAttributes.Add("ClientGroupName", "grpRadioList");
radioButton.InputAttributes.Add("onclick",
string.Format(
"javascript:radiobuttonToggle('{0}','ClientGroupName','grpRadioList');"
,radioButton.ClientID));
and use the following JS to uncheck all radios and then check the one you want.
Note i used InputAttributes instead of Attributes as the radiobutton is wrapped inside a span tag so InputAttributes is for items added to the actual input control rather than the span.
function radiobuttonToggle(selectedRB, attribName, attribValue)
{
var objRadio = document.getElementById(selectedRB);
for(i = 0; i < document.forms[0].elements.length; i++)
{
elm = document.forms[0].elements[i];
if (elm.type == 'radio')
{
if(elm.getAttribute(attribName) == attribValue)
elm.checked = false;
}
}
objRadio.checked = true;
}
You can then expose radioButton.Checked as a property in your CS file and reuse this as a control.
Check Form.Request("radio-name") != null
You only get a non-null value when it's been checked.
Make sure your page elements are being rebuilt correctly on postback. Any binding process that inserted the radio buttons the first time around will have to be re-run before you can access them the second time.
Here is a working example, first I add radios to my webform by the method you linked :
function addRadio()
{
try{
rdo = document.createElement('<input type="radio" name="fldID" />');
}catch(err){
rdo = document.createElement('input');
}
rdo.setAttribute('type','radio');
rdo.setAttribute('name','fldID');
document.getElementById('container').appendChild(rdo);
}
Then at code behind I used only the code below to get the radio's value :
string value = Request["fldID"];
So, be sure you're trying to get the name of the radio buttons at server side. You should use name attribute at server side, not id.