We Keep Coding

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.

Get value from ID and insert to input using javascript

I am new to JavaScript. I am getting result from label from another javascript. Now I want to send it to the input type hidden. Please help on how to do it
Below is the code that I am getting result from javascript
<label id="result"></label>
here i want to change the year input value to the above label id=result value. Please help
<script type="text/javascript">
var post_title = new Date();
document.getElementById("post_title").value=(post_title.getFullYear());
</script>
<input type="hidden" name="post_title" id="post_title" class="form-control"/>

I would suggest bringing your <script> element all the way to the bottom of your HTML so that the rest of the HTML loads and you can avoid any errors where the element does not exist (As #Lain said in the comments)
We can get the inner value of the <label> using
var label = document.getElementById("result");
var labelValue = label.innerHTML; //What this does is it returns a string of all HTML and text inside this element, in this case it would just be the value
//Then using the rest of your code, set the post_title to the label value
var post_title = document.getElementById("post_title");
post_title.value = labelValue;
All of the above belongs inside of your script tags, in case that wasn't clear
Let me know if that works or if that's what you're looking for

get value of hidden field set by another function

I have a form that has a checkbox that when click, triggers an event in javascript that assigns a value to a hidden field. However, I cannot access this when I try to validate the form. It actually causes the entire script to fail.
I've tried to access it with:
var hiddenField = document.forms[myForm].elements[hiddenField].value;
and with:
var hiddenField = document.getElementById('hiddenField').value;
and:
var hiddenField = document.getElementById('hiddenField');
then adding .value to variable when it's actually used in the script.
I've stepped through all of it in firebug and watched the other function assign the appropriate value to the hidden field. This variable assignment is actually where the script gets killed.
Any help or suggestions would be greatly appreciated!

Maybe you can try this:
<html>
<body>
<input id="hiddenField" type="hidden" value="test">
<script>
// Sets the hidden field value
document.getElementById('hiddenField').value = "Hello World";
</script>
<script>
// Reads the hidden field value
var hiddenFieldvalue = document.getElementById('hiddenField').value;
// Display. Should be "Hello World"
alert(hiddenFieldvalue);
</script>
</body>
</html>

document.getElementById('hiddenField')
For that to work, the input would need to have an id attribute with the value hiddenField. It looks like it has a name instead.
document.forms[myForm].elements[hiddenField]
Here, both myForm and hiddenField are JS variables that get evaluated to the property name when you are accessing the properties with bracket notation. I guess you want those names literally. Use either
document.forms["myForm"].elements["hiddenField"]
or
document.forms.myForm.elements.hiddenField

Get textarea value from textarea object

Why doesn't this work?. Here the input type is text:
var name = $("input[name='Event[name]']").serializeArray();
name = name[0].value;
var description = $("input[name='Event[description]']").serializeArray();
description = description[0].value;
When I want to get the from a textarea instead, it doesn't work.

This should work:
var name = $("input[name='Event[name]']").val();
var description = $("input[name='Event[description]']").val();
Let jQuery handle value.
The .val() method is primarily used to get the values of form elements such as input, select and textarea.

Replace your code as .val() to .text()

value isn't a property of a textarea. Textarea's are nodes that have content. Use the JQuery attribute for textContent.

A textarea as no value attribute. Use $("input[name='Event[description]']").val() since jQuery folds all values for all kind of input elements (input, select, checkbox and textarea) into this function call.
That means you should always use .val() to get the value for anything - your code will be more simple and you can even change the type of an input element without breaking anything.

Is there any particular reason as to why you use get value as array?
If not see below :
var name = $('#name').val();
var description = $('textarea#description').val();
considering name and description is what you have given as id for text field and text area.

How do I get the value of an input field with jQuery

I am trying to set the inner html value of a field and that works fine but when I try to retrieve it it fails.
My code:
var butId = buttonPressed.getAttribute('id');
$('#will'+butId).remove();
$('#hidDelete').html(butId); //THIS WORKS FINE
var temp = $('#hidDelete').html(); //THIS DOESNT
alert (temp); //THIS PRINTS NOTHING
My input field:
<input id="hidDelete" type="hidden" name="hidDelete"/>
Can anyone see whats wrong with it?

try $('#hidDelete').val() instead of html()

$().html() is for accessing content from within a pair of tags, eg. <div>foo</div>. You want $().val(). That's for getting/setting the 'value' of input fields.

$('#hidDelete').html(butId); //THIS WORKS FINE
var temp = $('#hidDelete').html(); //THIS DOESNT
alert (temp); //THIS PRINTS NOTHING
Instead of above use below
$('#hidDelete').val(butId);
var temp = $('#hidDelete').val();
alert (temp);
in jquery selector.html is used to get the inner html of elements. This should not be used for inputs type elements.