Develop Reference

onchange event not handling button click event

I'm working on saving textarea value on browser refresh. When there's a change to textarea by keyboard events, the value gets stored in local storage. However, When the textarea value gets changed indirectly...like button clicks, the value doesn't get saved. That's the problem, So, I changed my event handler from onkeyup to onchange. Still, This remains a problem. Do anyone have a better idea for this. Here's the code -
<textarea id="thetext" class="" value="Write some value, and off focus this input. Refresh the browser, and see the text getting saved." onchange="saveValue(this);"></textarea><br/><br/>
<button id="thebutton" onclick="change()">Change</button>
<script>
document.getElementById("thetext").value = getSavedValue("thetext");
function saveValue(e){
var id = e.id;
var val = e.value;
localStorage.setItem(id, val);
}
function getSavedValue (v) {
if (!localStorage.getItem(v)) {
return "";
}
return localStorage.getItem(v);
};
function change() {
document.getElementById("thetext").value = "This value doesn't get saved if there's no keyboard action. But I want this to get saved on button click."
}
</script>
<style>
textarea{height:100px;width:100%}
</style>
Edit - Above code is working well on my environment.

you can do in easy way
function change() {
let newValue = "This value doesn't get saved if there's no keyboard action. But I want this to get saved on button click."
var event = new Event('input');
thetext.dispatchEvent(event);
// or
// document.getElementById("thetext").value = newValue;
// localStorage.setItem("thetext", newValue );
}
or complex usinng Object.defineProperty
thetext = document.getElementById("thetext")
thetext.value = getSavedValue("thetext");
function saveValue(e) {
console.log(e)
var id = e.id;
var val = e.value;
localStorage.setItem(id, val);
}
function getSavedValue(v) {
return localStorage.getItem(v) || "";
}
function change() {
document.getElementById("thetext").value = "This value doesn't get saved if there's no keyboard action. But I want this to get saved on button click."
}
function monitorValue(element, property) {
let descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(element), property);
Object.defineProperty(element, property, {
get: function() {
return descriptor.get.apply(this, arguments);
},
set: function() {
descriptor.set.apply(this, arguments);
// create and dispatch input event
var event = new Event('input');
element.dispatchEvent(event);
return this.value;
}
});
}
monitorValue(thetext, "value")
<style>textarea{height:80vh;width:100%}</style>
<textarea id="thetext" class=""
value="Write some value, and off focus this input. Refresh the browser, and see the text getting saved."
oninput="saveValue(this);
"></textarea><br/><br/>
<button id="thebutton" onclick="change()">Change</button>

So what you want is that, the <textarea> value be stored in the localStorage every time it's changed.
I'd prefer defining a setter property on the textarea.
var ta = document.getElementById('thetext');
Object.defineProperty(ta, 'savedValue' , {
set: (value)=> {
ta.savedValue = ta.value = value;
localStorage.setItem(ta.id, value);
}
};
thebutton.addEventListener('click', (evt)=> {
ta.savedValue = 'my sample click value';
});
ta.addEventListener('change', (evt)=> {
ta.savedValue = evt.target.value;
};

Encapsulate function with submit and revealing module pattern

I am not sure if I understand this correctly.
The following example changes form action depending on a radio button selection. Then a javascript submit is executed.
I tried to build the whole thing after the revealing module pattern.
var myModule= (function () {
function makeSubmit() {
document.getElementById('form').addEventListener('submit', function(event){
event.preventDefault();
var form= document.getElementById('form'),
datasetURL = document.querySelector('input[name = "dataface"]:checked'),
actionURL = datasetURL.dataset.url,
searchterm= document.getElementById('searchterm').value,
submit;
(datasetURL.id == "db-01") ? submit = actionURL+searchterm: submit = actionURL;
form.action = submit;
form.submit();
});
}
return {
search: function () {
makeSubmit();
}
};
})();
$(document).ready(function () {
myModule.search();
});
My question is now whether this procedure is so correct.
Basically it works.

In this case you can pass private function as reference
return {
search: makesubmit
}
And invoke it as you did.

disable function using javascript

I can not seem to find the code to disable a javascript function. What I want to do is have a javascript function and then I want to disable it. Here is the code:
<script>
var fooFunc = function fooFunction() {
alert("HELLO");
};
$(document).ready(function() {
fooFunc.disable();
});
</script>
<button onclick="fooFunc()">Button</button>
Basically, when the button is click the function should not work, it should be disabled. Thanks

"Disabling" fooFunc is the same as setting it to an empty function (not to null--that will cause an error when it is called the next time). In this case:
$(document).ready(function() {
fooFunc = function() { };
});
But I don't see how this is different from simply removing the onclick handler from the HTML element.
If you want the ability to disable/re-enable the function, you can write it like this:
fooFunc = function() {
function _fooFunc() {
if (!enabled) return;
alert("HELLO");
}
var enabled = true;
_fooFunc.enable = function() { enabled = true; };
_fooFunc.disable = function() { enabled = false; };
return _fooFunc;
}();
If you want to extend this to allow any function to be enabled/disabled, you can write a higher-order function, which takes any function as a parameter, and returns a function with enable and disable methods attached to it:
function disablable(fn) {
function inner() {
if (!enabled) return;
fn();
}
var enabled = true;
inner.enable = function() { enabled = true; };
inner.disable = function() { enabled = false; };
return inner;
}
Now you can define fooFunc as
var fooFunc = disablable(function fooFunction() {
alert("HELLO");
});
and the rest of your code will work as you want.

You can access the onclick property of the element..
<button id="id" onclick="fooFunc()">Button</button>
<script>
document.querySelector('#id').onclick = '';
</script>

If you don't want the function to work at all and be totally disabled then use the below.
If you want the function to work only under certain conditions then you will need if/else statements so it will work only when the conditions that you have set are met.
$(document).ready(function(){
$("button").onclick(function(event){
event.preventDefault();
});
});

You were going to define it back to undefined or null.
fooFunc=undefined;

You Should be doing this :) Change function definition on very first run and you are good to go.
<! DOCTYPE html>
<html lang="en">
<body>
<script>
var fooFunc = function() {
alert("HELLO");
fooFunc = function(){};
};
var enablefooFunc = function()
{
fooFunc = function() {
alert("HELLO");
fooFunc = function(){};
};
}
</script>
<button onclick="fooFunc()">Run once and Disable FooFunc</button>
<button onclick="enablefooFunc()">Enable FooFunc</button>
</body>
</html>

Can't submit the form manually in Javascript when I do document.loginform.submit()

In the code bellow, if I have the line hackButton.type='hidden', my form gets submitted (which is what I want), but I don't want to hide the button. What is the alternative that I have? I can't change it to 'submit' or 'button' since they don't work.
var hackButton = document.loginform.submit_login;
hackButton.type='button';
var listener =
hackButton.addEventListener('click', function() {
//do things here before form submission
hackButton.type='hidden';
setTimeout("document.loginform.submit()", 3000);
}, true);

Try setTimeout("document.loginform.submit", 3000); or setTimeout(document.loginform.submit, 3000); or even setTimeout(function() { document.loginform.submit() }, 3000);

You should change your logic, as forms can also be submitted without clicking on the button. You could set a flag:
(function() {
var processed = false;
var form = document.getElementById('formID');
form.onsubmit = function() {
if(!processed) {
doStuff();
processed = true;
form.submit();
return false;
}
};
}());
Then use a normal, visible submit button.

applying a var to an if statement jquery

Need to apply a var to a statement if its conditions are met, this syntax isn't throwing errors but its not working.
<script type="text/javascript">
$(document).ready(function(){
var action_is_post = false;
//stuff here
$(this).ready(function () {
if ($("#stepDesc0").is(".current")) {
action_is_post = true;
}
});
//stuff here
</script>
should I use something other than .ready? Do I even need the $(this).ready(function ()... part? I need it to apply the var when #stepDesc0 has the class current.
$(document).ready(function(){
var action_is_post = false;
$("form").submit(function () {
action_is_post = true;
});
if ($("#stepDesc0").is(".current")) {
var action_is_post = true;
}
window.onbeforeunload = confirmExit;
function confirmExit()
{
if (!action_is_post)
return 'Using the browsers back, refresh or close button will cause you to lose all form data. Please use the Next and Back buttons on the form.';
}
});

<script type="text/javascript">
$(document).ready(function(){
var action_is_post=$("#stepDesc0").is(".current");
});
</script>
If you want the variable to be accessible outside the $(document).ready(function(){..., then you'll need to declare it outside the statement like this:
<script type="text/javascript">
var action_is_post;
$(document).ready(function(){
action_is_post=$("#stepDesc0").is(".current");
});
</script>
HTML (in order to test it):
Show value

$(function() {
var actionIsPost = $('#stepDesc0').is('.current');
alert( actionIsPost );
});
If you are adding the current class to #stepDesc0 on an event then put the .is check in the event handler.