I found a solution that retains the value of a datatable search filter box after the page refreshes.
What I need to do is also ensure that a blank value can be retained.
When the user clicks the "clear button" and clears the search box, I need to set the value of the filter to blank. So when the page refreshes, the filter is blank.
Here is the input:
<input type="search" id="searchFilter" onkeyup='saveValue(this);' />
And here is the JavaScript:
document.getElementById("searchFilter").value = getSavedValue("searchFilter"); // set the value to this input
//Save the value function - save it to localStorage as (ID, VALUE)
function saveValue(e){
var id = e.id; // get the sender's id to save it .
var val = e.value; // get the value.
localStorage.setItem(id, val); // Every time user writing something, the
localStorage's value will override .
}
//get the saved value function - return the value of "v" from localStorage.
function getSavedValue(v){
if (!localStorage.getItem(v)) {
return ""; // You can change this to your defualt value.
}
return localStorage.getItem(v);
}
Here is the clear button click event:
$('.clearFilters').on('click', function()
{
$('#searchFilter').val("");
$('#example1').DataTable().search('').draw();
});
As stated, when the page is refreshed, the last value that was entered in the search is retained.
However, if the user clears the filter, and if the page refreshes, the last value that was entered appears again in the filter.
The filter needs to be blank if the clear button was clicked and the page refreshes.
I'm guessing I need to call the saveValue function from the clear button click event, but wasn't sure how.
I was able to solve my problem by triggering the keyup by setting the value to blank on the clear filter button event:
$('.clearFilters').on('click', function()
{
$('#searchFilter').val(""); // still needed to make sure the value gets cleared
$('#example1').DataTable().search('').draw();
$('#searchFilter').keyup().val(""); // this is what I added to trigger the keyup
});
Related
I want to reset only a specific input field and display the placeholder on an event but not able to do, there are other methods such as initializing the input field with empty string but it do not display the placeholder as well as it is also a value which I don't want. I want to reset it with null value. How to do it?
it was quite easy, I got confused with empty value and spaces. You only have to do is give your input field some id, and create a button to click and reset the value. in the js, store the value in some variable and just initialize it with empty value when you click the button.
const input = document.getElementById("input-value");
const button = document.getElementById("btn");
button.addEventListener("click",()=>{
input.value = ""; //donot use this input.value=" ", use input.value=""
});
We were using this snippet on an editable subgrid in a form, while one of the attribute trigger onchange event triggering this function and the necessary fields were marked as required so far. So users cannot save the editable subgrid row and autosave will also get blocked with a notification message.
Suddenly it stopped working now and no errors or exceptions while debugging, though the field is marked as required from onchange function - still users are able to save the record without value in required field. No clue why this behavior change is observed now.
Anyone else faced this issue and any workaround for this?
function ReasonChange(eContext) {
debugger;
// get the attribute which fired the onchange.
var reasonAttr = eContext.getEventSource();
// get the container for the attribute.
var attrParent = reasonAttr.getParent();
// get the value of the reason.
var reason = reasonAttr.getValue();
if (reason != null) {
// var field1 Attribute
var field1 = attrParent.attributes.get("new_followupdate");
//Callback
if (reason[0].id == "{33E9E459-5A8B-EA11-A812-000D3A5A17E3}") {
// set field as mandatory.
field1.setRequiredLevel("required");
}
else {
//clear field value
field1.setValue(null);
// set field as mandatory.
field1.setRequiredLevel("none");
}
}
One workaround i could think now is to add code on Onsave event and check if field value contains data if not show error message.
Also, have you checked in other browser if the behavior is same or different?
Please mark my answer verified if i were helpful
I've got a text box (called SMS) which is capable of having its value changed by selecting a button (addButton). See the JavaScript
<script>
$(document).ready(function(){
$(document).on('click','.addButton',function(e){
e.preventDefault();
var search_val = $(this).attr('data-value');
$('.sms').val(search_val);
});
});
</script>
I want to be able to add multiple values to this text box without the text boxes value completely updating each time.
For example:
A user can write: hello, your name is (user select 'Name' button and value is inserted'. Your address is (user selects address button).
With my current solution, any button clicked will remove all value form the text box and just insert the value of which ever button was pushed.
Use the function to update it's value:
$('.sms').val(function( index, value ) {
return value + search_val;
});
On click of a button, I am showing a popup with one text area and a submit button.
I am able to enter a value in the textarea (e.g.: "hello1"), and when clicking on the submit button, I am checking the textarea's entered value, it gives me "hello1", and fades out the pop up. (as expected)
Issue: the second time, I click the same button again, I entered the value "hello2", and after submitting, it shows me the last entered value in an alert and fades out.
Below is my code:
function onCalChange(cal) {
// inputField = cal.inputField;
startDate = cal.date;
var calVal = this.id;
popup2(calVal);
}
function popup2(calVal) {
idValue = calVal.split("-");
$('.popup2').css('display','block');
//$('.popup2').addClass('pop_up_bckgd');
$(".popup2").append("<div class='pop_up_bckgd'></div>");
$(".popup2").append("<div class='pop_up_container'><form>\n\
\n\
\n\
<label style='margin-left:65px;margin-top:40px;'class = 'label-value' for = 'reason-for-change-" + idValue[2] + "'>Reason for change</label>\n\
<br>\n\
<textarea id='reasontxt" + idValue[2] + "'style = 'width: 74%;margin-left: 62px;height:100px' class = 'text-box' name = 'reason' required></textarea>\n\
<br>\n\
<div style = 'text-align:center'><input class = 'submit-value2' type = 'button' value = 'Submit' name = 'submit1' onclick= 'clicksubmit(idValue[2]);' '></div ></form>")
}
function clicksubmit(id) {
var idNum= parseInt(id);
if ($('#reasontxt' + idNum).val() == "") {
// alert("1");
$('#reasontxt' + idNum).next(".validation").remove();
$('#reasontxt' + idNum).after("<div class='validation' style='color:red;margin-top:5px'>Please enter Reason for change Field</div>");
} else {
alert('2');
alert($('#reasontxt' + idNum).val());
$('#reason' + (idNum)).val($('#reasontxt' + idNum).val());
// $('#reasontxt' + idNum).val() == ""
$('.popup2').fadeOut();
}
}
After making he change specified by erkaner on the comments, I was able to reproduce the issue by copying your code into this JSFiddle: http://jsfiddle.net/v2djohhw/ (I had to make another minor change to hardcode the value of calVal for testing).
From what I saw, the issue is:
Every time that you click on the button, a form with a textarea and a submit button are appended to the popup (using $(".popup2").append(...));
the id of the textarea depends on the id of the button that was clicked (calVal);
so if the same button is clicked several times [or the button is different but it has an id which third part (as you are splitting it and only using the third value idValue[2]) matches the one of a previously clicked button], you will be appending multiple textarea over time, all of them with the same id.
when you submit, and read the value of the textarea, as there are multiple with the same id, the browser will take the value of the first textarea with the specified id.
Because of that you get always the same value that is the one of the first textarea.
How to fix it? Avoid having multiple elements with the same id.
One possible solution: delete the content of the .popup2 box every time you are going to display it, that way you make sure that the id of the textbox is really unique and you don't face unexpected errors:
$(".popup2").html("");
You can see it working here: http://jsfiddle.net/v2djohhw/1/
If you don't want to (or you cannot) delete the content of the .popup2 box, and want to show all the previous textareas, another solution would be keeping track of the number of times the button was clicked and add that value into the id of the textarea. That way you'll make sure the textbox id will be really unique.
You can see it on this other fiddle: http://jsfiddle.net/v2djohhw/2/
Tried to solve this multiple ways. 1. by simply adding the normal html "checked" default option to radio buttons in my form and 2. having js functions do it, being the gist of the ideas tried.
The issue: I'm finding that no matter how I do it, if the radio is designated as checked by default (before the user makes his/her choice), anything done after that will not be saved correctly (if at all) in localStorage. localStorage WILL save the initial default selections, however but, nothing can be changed from then on (even after "physically" selecting another option).
I know localStorage is working because if I leave off the default designation (and for the rest of the inputs) it functions perfectly.
The form code:
<label>Who is the contact person for this event?<span class="requiredtext">*</span></label>
<input type="radio" name="Contact_Person" id="Contact_Person1" value="Submitter is the contact person" onclick="contacthide()" checked required> I am<br />
<input type="radio" name="Contact_Person" id="Contact_Person2" value="Submitter is not the contact person" onclick="contactshow()" required>
The localStorage save code:
function localStoragefunctions() {
localStorage.clear();
if (Modernizr.localstorage) {
//Set variable to show that data is saved
localStorage.setItem("flag", "set");
//Save radio and checkbox data
$(window).bind('unload', function() {
$('input[type=radio]').each(function() {
localStorage.setItem('radio_' + $(this).attr('id'), JSON.stringify({
checked: this.checked
}));
});
});
The code that spits it back out if the user goes back to make changes before final submission:
$(document).ready(function() {
if (Modernizr.localstorage) {
//Browser supports it
if (localStorage.getItem("flag") == "set") {
$('input[type=radio]').each(function() {
var state = JSON.parse(localStorage.getItem('radio_' + $(this).attr('id')));
if (state) this.checked = state.checked;
});
Other than this, I have a confirmation page that grabs all of the variables stored in localStorage and presents them to the user for final inspection before they hit submit for good.
That consists of: var ContactPerson = localStorage.getItem('Contact_Person'); and then a document.write that spits out html and the variable's value. Again, this works fine if I don't try to set default radio choices (and works great for all other input types).
The ideal outcome would be choosing the most likely radio button choices by default so that it could possibly save the user time. I'd like to not have to present them with a form where they have to physically click each radio button if I can "make that decision for them" before hand.
Hope this all makes sense!
I know this an old question, but I've been troubleshooting a similar issue and thought I'd share my solution.
When you set your localStorage item, you are saving both radio inputs and their values, b/c your using the ID attribute as your key.
localStorage.setItem('radio_' + $(this).attr('id'), JSON.stringify({ checked: this.checked }));
This could be ok, but I've taken a different approach. And, I maybe missing something, so comments are welcome.
Instead, I use $(this).attr('name') to set the key. As a result, when either radio button in selected, you are saving the value to the same localStorage key.
In my scenario, I'm storing many inputs to localStorage, so my solution is a bit abstract. I'm calling saveToLocalStorage() using jQuery's .change() method on each input. Also, I'm saving the input's value directly to localStorage.
function saveToLocalStorage(input) {
if ( $(input).attr('type')=='radio' ) {
localStorage[$(input).attr('name')] = $(input).val();
} else {
localStorage[$(input).attr('id')] = $(input).val();
}
}
When retrieving from localStorage, I had to check if the localStorage key:value pair matched the radio input before selecting it. Otherwise, I was selecting both radio inputs. Note, in my scenario, I'm working with jQuery 1.4.4, hence the attr('checked', 'checked').
$('input[type=radio]').each(function() {
var key = $(this).attr('name');
var val = localStorage[key];
if ( $(this).attr('name') == key && $(this).attr('value') == val ) {
$(this).attr('checked', 'checked');
}
});