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.
Related
I am not sure whether its logical to get.
Here is the html code for my input box.
<input type="text" id="name" #name="ngForm" [ngFormControl]="userProfileForm.controls['name']"
[(ngModel)]="loggedUserInfo.name" (change)="firechange($event,'name')"
/>
and here is my firechange function
firechange($event, field){
if(this.userProfileForm.controls[field].valid){
this._userService.updateUserProfile(this.loggedUserInfo);
this._userService.loadUserData();
}
}
I want to pass only the event in the firechange function and inside the fire change function I want to get the input field name from the event so that I can understand that which input field in my form triggered the event. Expected code will be something like that
[ngFormControl]="userProfileForm.controls['name']"
[(ngModel)]="loggedUserInfo.name" (change)="firechange($event)"
/>
firechange($event){
if(this.userProfileForm.controls[$event.fieldname].valid){
this._userService.updateUserProfile(this.loggedUserInfo);
this._userService.loadUserData();
}
}
My ideal requirement is, in a form there are number of form fields, I don't even want to write firechange function in each individual form field. Is there any generic way to call the event on each input field value change for a particular form without writing it on each input field?
To get the actual name of the element you can do the following:
firechange(event){
var name = event.target.attributes.getNamedItem('ng-reflect-name').value;
console.log('name')
}
If the id is the same as the name you are passing you can get the name like
firechange(event){
if(this.userProfileForm.controls[$event.target.id].valid){
}
If you want to get hold of the element from within your fire change function you may want to try something like:
firechange(event){
let theElement = event.target;
// now theElement holds the html element which you can query for name, value and so on
}
If you in addition you want to instruct your component to apply the firechange() logic on all of your input fields with one single instruction in your component (and not having to specify this on every single input field) than I suggest you to look at in Angular2 how to know when ANY form input field lost focus.
I hope this helps
If id is not the same or it can change, here's more leverage...
You may want to reflect the [name] property the the element's attribute:
... #input [name]="item.name" [attr.name]="item.name" (change)="fn(input)" ...
Then,
...
fn(input) {
log(input.name); // now it returns the name
}
...
See more here
Try this:
<input type="text" (change)="firechange($event.target.value)">
This worked for me in Angular 10
$event.source.name
First I'll append some value to a textbox using jQUery :
$('#textboxId').val('someval');
Now the value is empty, when I see in console.log
This will not work, since the value is empty.
var someVar = $('#textboxId').val();
How do I get the appended value again in jquery?
This will not work, since the value is empty.
No, your code is valide and will work, you can notice that the value is added to the input field, but the value attribute always shows the default value. Browser Inspector never displayed the current value in the attribute. The current value is always visible just on the screen.
$('#textboxId').val('someval');
alert($('#textboxId').val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='textboxId'/>
Try like this:
$('#textboxId').append('someval');
var someVar = $('#textboxId').val();
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
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.
I want to copy the content of a sharepoint form field to a variable using Javascript.
Eg. I have a field named "Language" in my sharepoint edit form. Now I just want to get the value of that field to a varaible x.
Please help.
BR
It depends on the type (e.g. user, lookup, multilookup, text, note, etc.) of field. I am using jQuery in my custom list forms and the name of the field for any given content type will be added to the id of the corresponding html control with the text 'Field' appended to it. However, like any typical asp.net control, the id of the html form control rendered to the client will reflect its control hierarchy so you have to account for that when searching for a field. anyhow, the following works for me if i need to reference fields in my custom forms. ** notice the +Field which implies that the name of the field is concatenated with 'Field'
var $titleField = $('input[id*=TitleField]');
var $lookupField = $('select[id*=Name_Of_Field+Field]')
var $multiLookUpCandidate = $('select[id*=Name_Of_Field+Field][id*=SelectCandidate]')
var $multiLookUpResult = $('select[id*=Name_Of_Field+Field][id*=SelectResult]')
var $note = $('textarea[id*=Name_Of_Field+Field]');
You can pick up on the trend by viewing source and seaching for your contenttype/sitecolumn field name. You will find it in an html form control id. use that information to learn how to reference other field types.
Without posting your code its very difficult to understand what you want to do.... to get a value from a form you can do the following :
HTML
<form id="myform">
<input id="myinput" type="text" value="something" />
</form>
JavaScript:
var myinputval = document.getElementById("myinput").value;
myinputval would be "something" in this example
Demo : http://jsfiddle.net/Qk6FZ/
This might help:
http://depressedpress.com/2012/09/24/obtaining-a-javascript-reference-to-a-sharepoint-field/
Using that function you'd get the reference using something like:
var LanguageFld = getFieldRef("Language");
Once you have the refernece it's easy to get the value:
var CurValue = LanguageFld.value;
Hope this helps!