Can't access element attribute when it is clearly set - javascript

I have a problem that I haven't been able to solve.
In my class I set:
text.Attributes.Add("oldValue", text.Text);
Debugging the code I can see the value is being set properly. When I view the page source with chrome I see the following:
<input name="astextMon" type="text" value="4,25"
id="textMon" class="inputText"
autocomplete="on"
onfocus="ValidateReadStatus(this.id,this.ValueId);SetFocus(this.id);"
valueid="408412"
oldvalue="4,25"
onchange="return GridOnChange('0;0',this,'textMon',1,true);"
onkeydown="return GridOnKeyDown(this.id,'0;0');"
ondblclick="SetTextPos('0;0');"
>
As you can see, the oldvalue attribute is set and has the correct value, but if I try to access it I always get undefined. Even when accessing the element from the Chrome console.
What am I missing here?
EDIT. The typo in the name attribute happened when placing the code here. That is not the problem. I think case sensitivity is also not the issue, because when I remove:
text.Attributes.Add("oldValue", text.Text);
from my class, the oldvalue="4,25" property dissapears from the element. I also tried to change oldValue to oldvalue, but the same problem remains.
I am trying to access the object by using
alert(element.oldvalue) or alert(element["oldvalue"]) or
alert(element["oldValue"]) or alert(element["oldValue"]) none work.
If I type alert(element.value) It correctly alerts the value attribute.

Maybe the problem is that in your code snippet the input tag is not valid, after name attribute you must add a quote char.
<input name="astextMon" ...>

missing the first quote in name=astextMon" change it to name="astextMon"

JavaScript is case sensitive:
... oldvalue="4,25" ...
and
text.Attributes.Add("oldValue", text.Text);
refer to 2 different attributes.

You can use something like this to get the attribute define by you:
document.getElementById('textMon').attributes['oldvalue'].value;
Where you will get: oldvalue: 4,25
Few more things:
name=astextMon" should be name="astextMon"

Okay, so I solved my problem by using
$(element).attr("oldValue");
I have no idea why when using JQuery I can access the attribute just fine, but without it it is undefined. If anyone has an answer I would love to hear it.

Related

Cannot get value of textarea with Shopify Product Options by Bold

I'm trying to get the value of a textarea with Shopify Product Options by Bold and it is currently not working. I am able to get the value of a textarea locally, but I can not get the value when I move the code over to Shopify. I have looked here and here to no avail.
Here's the relevant code:
document.getElementById("248832").onkeyup=function(){getVal()};
var textbox = document.getElementsByName("properties[Message Body]")[0].value;
and here's the textarea I'm trying to get the value of
<textarea data-option-key="ta_248832" id="248832" class="bold_option_child shapp_full_width " name="properties[Message Body]"></textarea>
When I try to run this on Shopify, I get an error saying "Uncaught TypeError: Cannot set property 'onkeyup' of null", although I did notice that at one point shopify runs the following jQuery code, which might be what's causing my problem:
<script>
jQuery('#248832').change(function (){conditional_rules(7437760391);})
</script>
I am trying to get the value of the textarea so I can run get the amount of words in said textarea.
Any help would be greatly appreciated!
Look to see if the element that is returned as null has loaded yet. Others in similar situations fixed this by loading the script last. Hope this is helpful :)
https://stackoverflow.com/a/25018299/1305878
https://stackoverflow.com/a/31333349/1305878
https://stackoverflow.com/a/23544789/1305878
Solution
You are trying to use something similar to jQuery methods without jQuery:
document.getElementById("248832").onkeyup=function(){getVal()};
while DOM elements don't have the onkeyup method. It should be
jQuery("#248832").on("keyup",function(){getVal()});
Extra notes
even without using the recommended '.on' method, you have to write it as
jQuery("#248832").keyup(function(){getVal()});
(docs), not as
jQuery("#248832").onkeyup(function(){getVal()});
If you'd like to use DOM methods, that would be
document.getElementById("248832").addEventListener("keyup",function(){getVal()});
Also, may be you have wrote this as a minimal example, but the fact that you only call getVal() and don't pass the value somewhere sounds strange, although I don't know if what getVal() does exactly.

How to set value into textarea attribute using nightwatch.js

I am working on nighwatch.js for web ui testing, I want to set value to a textarea, and textarea has an attribute which has my actual text, I am writing full textarea and how I am setting in following.
<div class="textarea-description">
<textarea cols="50" class="myClass setText" data-def placeholder="text to be replaced using nightwatch"/>
</div>
I am trying to set value in above textarea's attribute data-def placeholder as following ways
browser.setValue('.textarea-description textarea[type=text]','nightwatch'); or
browser.setValue('.textarea-description textarea[data-def placeholder=text]','nightwatch'); or
browser.setValue('.textarea-description textarea[type=data-def placeholder]','nightwatch');
but nothing is working.
This might not be the best solution but it works:
browser
.execute("document.querySelector('.textarea-description .myClass').setAttribute('placeholder', 'nightwatch');")
If you have jQuery you can make it a bit nicer:
browser
.execute("$('.textarea-description .myClass').attr('placeholder', 'nightwatch');")
Thank you for your all valuable suggestions, all suggestions provided by you was able to give good knowledge but unfortunately none of the suggestion worked. I have resolved it by using following.
client.setValue('.textarea-description textarea','new text to be write.');
Actually attribute "data-def placeholder" was using only watermark that was not actual text, so it is working.
You could use xpath to get the attribute.
.useXpath().setValue('//textarea[contains(#placeholder,'text to be replaced using nightwatch')]#placeholder', 'nightwatch')
How to select specified node within Xpath node sets by index with Selenium?
This worked for me.
.assert.visible('div.textarea-description textarea.setText')
.moveToElement('div.textarea-description textarea.setText', null, null)
.mouseButtonClick('left')
.keys([browser.Keys.CONTROL, "a"])
.keys([browser.Keys.CONTROL, "nightwatch"])

Setting 'autofocus' attribute with JavaScript not working

I am writing a small plugin, and the plugin will encapsulate an autofocus setting, but when I add the attribute dynamically with JavaScript, it doesn't autofocus the page, which is weird. Is there anyway around this?
HTML:
<input type="text">
JS:
document.querySelector('input').setAttribute('autofocus', 'autofocus');
Without doing:
document.querySelector('input').setAttribute('autofocus', 'autofocus').focus();
jSFiddle: http://jsfiddle.net/wPUNN/
Try something like this
document.querySelector('input').focus()
Edit
If you want to HTML 5 standard you should make the HTML look something like this
<input type="text" autofocus>
http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#autofocusing-a-form-control:-the-autofocus-attribute
The best approach seems to be this:
document.querySelector('input').autofocus = true;
This post might help explain why to use a reflected property: https://stackoverflow.com/a/18770417/3920924
However it seems you need to apply it near the document load. Otherwise it doesn't seem to fire. I think that's because here (http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#autofocusing-a-form-control:-the-autofocus-attribute:the-dialog-element) it's defined to work as soon as the page is loaded. I haven't seen anything else that says it can be called later in time. Every time I've tried to fire it later with like a setTimeout of 3 seconds it never focuses the field.
Try to add the javascript code soon after the input element, so it will execute before the page load complete. In your case autofocus attribute is set to the element but focusing the element which has autofocus by browser is already done. so you setting the value after browser set the focus. when browser trying to set it no attribute is there. try like following code
<input type="text">
<script>
document.querySelector('input').setAttribute('autofocus', 'autofocus');
</script>
http://jsbin.com/yatugaxe/1/
If you need to do it on button click or something, you need to do it in JavaScript. setting an attribute doesn't mean browser is going to execute it at anytime.

what is the code to enable HTML input box that has been disabled, using javascript only, not jQuery

document.getElementById(boxname ).disabled=false;
doesn't work.
document.getElementById(boxname ).removeAtribute('disabled');
doesn't work.
What will work? javascript only no jQuery etc. please.
<input id="boxname" />
Setting the disabled property to false is the way to go, you just have to first select the element. To do that, pass an ID string to getElementById:
document.getElementById('boxname').disabled = false;
document.getElementById(boxname)
supposed to be
document.getElementById('boxname')
You are missing the Quotes in there. Id should be passed as a string.
OR
var boxname = 'boxname';
// Now you can pass in without any Quotes
document.getElementById(boxname)
Actually Sometimes works when code placed in a particular place in the script
See my rotation code: http://jsfiddle.net/crownabhisek/kPybv/42/
Here, in the script section, in the rotate() function, when the document.getElementById("rotation").removeAttribute("disabled"); is written in the 1st place where I've inserted a comment, it works. But in the 2nd place where I've inserted a comment it doesn't work.
No clue why.
But the code to disable is indeed document.getElementById("rotation").removeAttribute("disabled"); and it should actually work.

Set the value for a hidden parameter from the URL using javascript

I'm trying to set the hidden field for 'item_number' from the Url QueryString for a paypal form.
So the URL will look like this "http://website.com/customize.aspx?item_number=FFFF"
and code:
<script language="javascript" type="text/javascript">
document.getElementById('item_number').Value = Request.QueryString('item_number');
</script>
<input type="hidden" name="item_number" value="">
But this doesnt work for me. Whats wrong here???? is there a better way?
getElementById only finds elements by their ID. Your hidden doesn't have the id of item_number; it has that name, however. If you add id="item_number" to your input, then the code should work. You also need to move your script to after the DOM element. Otherwise, it will run before the input exists in the document.
Update
Just noticed another mistake. You're setting a Value property, and Request.QueryString('item_number') is also invalid. It looks like you're confusing ASP.NET code with JavaScript. The correct property name for the hidden input is value (lowercase). There is no equivalent of Request.QueryString in JavaScript. Rather, to extract query string values, see this answer for a good way to do so.

Categories

Resources