Get the text written in the onchange event handler - javascript

I'm trying to retrieve the text that I've written in the onchange attribute of my input tag.
For eg:
<input type="text" id="test1" name="test1" onchange="some_js_func();" />
I want to retrieve the value of the onchange, i.e, "some_js_func();" on load of my html page.
I've tried the following to access this in the same way as we access any value for an hmtl element using getElementById() function:
var myvar = document.getElementById("test1").change;
However the above code returns undefined.
Is there any way to get the value of the onchange as a string using only javascript and not jQuery or other client side scripting language?
I want the following specific text only: "some_js_func();"

You just need to do:
document.getElementById("test1").getAttribute("onchange");
The getAttribute() method will get the value of an attribute for the element.

Just use .getAttribute():
//Out input element:
var myElem = document.getElementById("test1");
//Here, the appended text node has the same value as the string inputted into the onchange attribute in the HTML:
document.body.appendChild(document.createTextNode(myElem.getAttribute("onchange")));
<input type="text" id="test1" name="test1" onchange="some_js_func();">

Related

Copy value from input field

I need to copy the value from the input field to the clipboard. Instead of getting the value of the input field I get null.
Here is my Code:
<input type="text" value=${model.anchor_url} id=${properties.anchor_name}>
<button class="c-button" onclick="myFunction()">
<span class="c-button__label">Copy</span>
</button>
<div data-sly-test="${model.anchor_url}">
<p>URL from Model :</p>
<pre>${model.anchor_url}</pre>
</div>
function myFunction() {
const field = document.getElementById(`${properties.anchor_name}`);
navigator.clipboard.writeText(field);
alert("Copied the text to clipboard: " + field);
}
The value for field variable results null even though the id exist and it has a value.
You get an Object with this line: document.getElementById(${properties.anchor_name}). With the parameter value you will get the value from the input field.
So you have to try:
const field = document.getElementById(`${properties.anchor_name}`).value;
You are trying to copy the element, instead of it's Value, you have to get it's Value using element.value, also if the value of field variable is null, this means the Element you are trying to get doesn't exist with that Element ID
And also, you were trying to copy the whole element instead of it's value, So Replace the first line in your function with this one:
const field = document.getElementById(properties.anchor_name).value;
Also there is no need to put template literals in your code as you can do so without that too!
For example assume there is a variable element_ID which can be written in JS like this:
var element_ID = "myInput"
now i want to get that Element, so I can just directly do this:
document.getElementById(element_ID)
instead of this:
document.getElementById(`${element_ID}`)
Thanks for all the help. It appears due to cross site scripting prevention JS can not be executed from html for the site I develop but has to be built using TypeScript.

Unable to assign "form" attribute to "input" tag via Javascript

According to specification input tag has a form attribute, which Specifies the form the input element belongs to.
HTML example:
<form id="putForm" action="index.html" method="post"></form>
<input type="text" id="field" value="foo">
Javascript code:
const putForm = document.querySelector('#putForm');
const field = document.querySelector('#field');
field.form = "putForm";
Attribute is not assigned, shows "null" when inspected with dev tools.
The form property has, for a very long time, been a read-only reference for the form element associated with the input and not a string with the ID of the form in it.
When the form attribute was introduced, the form property was already taken.
Use the setAttribute method instead.
field.setAttribute("form", "putForm");
I was able to accomplish this with the following code:
var input = document.getElementById('field');
input.attributes.form.value = "putForm";
why don't you just do
$("#field").val('anything');
and you are done

How to make Mootools get('html') including values of inputfields

When I have HTML input fields and a change them by direct input they should actually change there value attribute. But when I try to get the whole HTML record it just shows the old value attributes.
Somehow this is clear to me, couse the HTML is not overwritten, but I need the HTML containing the changed input values. How can I approach it?
Example:
$('input').addEvent('blur', function(){
alert($('adiv').get('html'));
});
<div id="adiv">Enter something in input box and press tab<div>....<input id="input" type="text" value="1">the mootools will grep the old value of 1 again....</div></div>
http://jsfiddle.net/hJtzc/1/
alerts allways:
> Enter something in input box and press tab<div>....<input id="input"
> type="text" value="1">the mootools will grep the old value of 1
> again....</div>
but what I need to get is:
> Enter something in input box and press tab<div>....<input id="input"
> type="text" value="[VALUE FROM USER]">the mootools will grep the old
> value of 1 again....</div>
Attribute value in HTML sets initial, default value of the element, DOM property value contains the actual, real value of the element . To change the default value of input element change defaultValue property:
$('input').addEvent('blur', function(){
this.defaultValue = this.value;
alert($('adiv').get('html'));
});
This is normal behavior that is not related to mootools framework

Changing the value of a form input field with jquery

how can i change the value of this input field using jquery?
<input type="hidden" name="emailaddress" value="admin#admin.com">
$('input:hidden[name=emailaddress]').val('something');
Here,
input:hidden point to hidden input
[name=emailaddress] check for name attribute.
so totally
$('input:hidden[name=emailaddress]') select the input which is hidden and with name attribute emailaddress.
.val() used to set/get value to input field. With parameter it acts as a setter and getter without it.
you need to give the input an id and then reference the id and change it. below is what i have used to change the value of a radio button. this uses JS
document.getElementById('ID').value = somevalue;
Along with
<input type="hidden" name="emailaddress" id ='ID'value="admin#admin.com">

Javascript and defaultValue of hidden input elements

Assume you have input element:
<input id="aaa" type="text" value="unchanged" />
Then launch js script:
var e = document.getElementById("aaa");
e.value = "changed";
alert(e.defaultValue + "/" + e.value);
Result will be "unchanged/changed". Unfortunately, when your input element is hidden:
<input id="aaa" type="hidden" value="unchanged" />
...the same js script seem not to be working any more. Result is "changed/changed".
Is this a proper way? If so, why only hidden form elements act different?
The "defaultValue" property is only maintained in a way you apparently expect for "text", "file", and "password" fields.
Here is the relevant portion of the DOM spec.
I suspect the reason for this is that user activity on its own cannot change the value of hidden elements. If you want to preserve the initial values, run something at "load" or "ready" to stash the value somewhere.
For hidden input elements, defaultValue isn't actually implemented. The reason why you get the same result ast .value is because the browser your using is just defaulting.
See here for a discussion of this with Firefox.

Categories