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();
Related
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.
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
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.
I have just begun playing with MooTools, and I don't understand why the following happens:
var input = new Element('input');
input.set('type','text');
input.set('value','this is the value');
console.log(input);
results in: <input type="text">, so setting the value hasn't worked.
But if I do this:
var input = new Element('input');
input.set('type','text');
input.set('someValue','this is the value');
console.log(input);
I get the expected result of <input type="text" somevalue="this is the value">.
Am I overlooking something, is what I am trying to do not allowed, is this a bug in Chrome (11.0.696.71, OS X) or am I doing something else wrong?
Update: thanks for your answer! You are right, the value is actually being set; console.log(input.get('value')) gives back the proper value and I can see the value in the input field when I append the input object to the DOM.
Apparently, the value setting is just not reflected as an attribute of the HTML element, but only stored internally.
Are you sure the value isn't being set?
What do you get when you call: input.get('value')
I tested this (in firefox) and even though the console just logs <input type="text"> the value does in fact get set. Try adding the element to the page and you'll see it :)
I've had a similar problem with this 'red herring' which I've since solved, and thought I'd share.
I'm trying to make certain cells of a table row editable when the user clicks on the row:
var cells = this.getElements("td");
for (var ix=0;ix<cells.length; ix++){
if (cells[ix].hasClass("edType_text")){
var celltext = cells[ix].get("text");
cells[ix].set('text','');
var editTag = new Element ('input',{type:'text','value':celltext});
editTag.inject(cells[ix]);
}
}
This seemed to work OK but when I clicked on the cell I couldn't edit it. Firebug and Chrome tools showed the added input tag as
<input type='text'>
instead of the expected:
<input type='text' value='xxxxxx' />
However this is perfectly normal as commented on above.
Spotted the 'deliberate' error ?
Of course when I clicked on the input field it triggered the mouse event on the row again, thus preventing me getting at the input!!!! :-{
To avoid this just add this line of code at the end of the if block:
editTag.addEvent("mousedown",function(event){event.stopPropagation();});
When I first click on this function. It returns an undefined value. When I click on the function again, this code works fine in this form and every form after that.
alert(characters[x].ac+"/"+this.value+"/"+this.ac) returns undefined/undefined/0 initially.
It returns 26/undefined/0 when I click the function again and captures the value just the way I want. So it is basically saying that characters[x].ac is undefined when I initially click the bolded text to make the text field appear.
How do make the 'undefined' listing go away. It happens when I change the value of an array for the first time but works fine in the same array in every form after that.
function askAc(x) {
if(this.ac!=0) {
response=this.ac;
characters[x].setAc(response);
this.ac=0;
} else {
response="<input class=widgetstyle onClick=_setAc(this.value) size=2 type=text value="+characters[x].ac+">";
characters[x].setAc(response);
}
}
function _setAc(x) {
this.ac=x;
this.refresh();
}
Does your input field have a value="" attribute or is it missing? a missing value attr may result in undefined (maybe just in some browsers).
It is not clear from your code which input field you are accessing.