Get the input with xPath from a Jquery data-bvalidator - javascript

I'm trying to get the values of an input field using xPath to validade that the site is working as expected.
But some of the input tags are using jquery data-bvalidator and i cannot access the text/value on them.
You have an example page here:
bvalidator usage
If you try to put some text, for example "Alfa" on the first input box and try to access it, in debug mode, using:
$x('//*[#id="form1"]/div/div[1]/p[1]/input')
you will just get the element <input type="text" data-bvalidator="alpha,minlength[10],required">and not the "Alfa" value.
how can i get around this?
PS: This only works in chrome.

Getting the value property with xpath is not possible.
Wiht xpaht you can get the value attribute value - if there is one. But this would never refelect the changes of the input value (property).
$x('//*[#id="form1"]/div/div[1]/p[1]/input/#value')
To get the property value you can use (in Chrome Debugger):
$x('//*[#id="form1"]/div/div[1]/p[1]/input')[0].value
Update due to the mentioned of selenium in comment:
With selenium you can use ele.getAttribute("value") where ele is the first element from the xpaht search result.
Or something like:
driver.findElement(By.xpath(
'//*[#id="form1"]/div/div[1]/p[1]/input')).getAttribute(‌​"value");

Related

Spotfire Document Property setting using JS

I have created JS script that capture user inputs and publish them in another hidden input document.
I confirmed it works because I made the hidden input visible and publish all the input as delimited string.
So far it works fine
but when I try to use the property document in another textarea, ironpython etc.. within the same DXP it is returning blank, even though I can see the string published in the previous text area.
I used this html tags ...
for input property to display the captured data.
jQuery to capture all the inputs
inval=$.....
......
....
then used this to publish them in the input field $('#dfdklsfksldfkslfs').text(inval).blur()
so far all works fine.
but after this when trying to use the document property in textarea, irontpython, within the same DXP, it is returning (BLANK) even though I can see them published in the textarea.
am I missing any steps? do I need to reassign some features?
also I have tried $('#dfdklsfksldfkslfs').val(inval).blur() this won't even publish the data in the inputfield.
here is the update with code
html
<div id='dispInput'> <spotfirecontrold id='dfdklsfksldfkslfs'></div>
jquery
$('button')click(function(){
inval=$('input').map(function(){
return $(this).val(); }).get().join('-');
$('#dfdklsfksldfkslfs').text(inval).blur() //this publish the result but don't assign the data to the document property
})
I am completely lost.
thanks a lot
Try setting timeout in the function (500ms will do).
$('button')click(function(){
setTimeout(function (){
inval=$('input').map(function(){
return $(this).val(); }).get().join('-');
$('#dfdklsfksldfkslfs').text(inval).blur()
}), 500
});
Hope this helps.

Output doesn't appear in Input field but value exists

I am confused, I used jQuery to $("#display").html(value) toward my html input with id ="display" but nothing appears in the html input.
However we can see the value in the element : "32" (see picture)
Any idea why the value doesn't appear?
I try to replace input by span and it works well.
image : example
thanks,
Thomas
You cannot set the innerHTML value of an input element (which is what jQuery is doing when you use $.html()). Instead, you need to use $.val().
Try using $("#display").val(value) instead.

Unexpected JS behavior when clearing input field value - STCombobox

I am using some JQuery Combobox that you can check out here: https://simpletutorials.com/uploads/1860/demo/index.html
As you can see, you can start typing and get the results filtered.
However, once you have selected a value, when clicking on the arrow to open the list, no other values are shown anymore. So, if I want to change college/state, I need to manually clear the input value. I don't like this, so I want to modify it.
I changed that code and added this JS on the click event of the list:
onclick="document.getElementById('statesCombo-ddi').value='';"
This line basically finds the input by id and sets its value to an empty string.
You can try out by looking for the td element having class "stc-button" (with Chrome, just focus on the arrow of the second combo box) and add my code to the tag.
===EDIT===
You can obtain the same results by adding this code directly to the input:
onclick="this.value=''"
===END EDIT===
This has a weird behavior:
If I SELECT an element from the list, it clears the value and everything works correctly.
If I TYPE some letters and then select a value from the list, no item is shown in the list after clicking.
What's wrong with it?
You can override one of the combo box methods to accomplish this:
STComboBox.prototype.filterAndResetSelected = function() {
this.$('ddi').val('');
this.filterList('');
this.selectRow(0);
this.$('ddl').scrollTop(0);
};
Does this help?
The unminified code is provided, is relatively small (12kb) and is fairly well commented, so you could make this modification directly to the source if you'd like.
Edit: Fixed to clear the input value (as indicated in the comment below)
By reading the source and doing a little debugging with Chrome's inspector (Control+Shift+i), you can find the particular ID of the element you need to clear (#collegesCombo-ddi) in order to clear the input box. Once you've found the element's ID you need to clear (and being very careful with plugins that assign multiple elements with the same ID, which is not allowed in the standard, and an indicator of poorly-written code):
$('#collegesCombo-ddi').val('');

html input displays different text to value that it posts

I am feeling really stupid and not sure if doing something really dumb what... so excuse me in advance.
I have the following HTML:
<input type="text" value="0" name="pcscubes" id="pcscubes">
I have the below jquery syntax:
var cubes=123.2;
$("#pcscubes1").val(cubes);
var test=$("#pcscubes1").val();
alert(test);
When the jquery executes, the input box will display 123.2 and the alert will be 123.2.
if you inspect the html object though, the value is still 0?
so the display of the input is different from what the real value is. so when I submit this form it posts 0 rather than 123.2
Now I have built a whole web app with this syntax and works perfectly. today it just stops working? I have restarted browser, checked old code that was working, logged off and on and still it does the same.
web app obviously has jquery loaded and jquery ui on this form.
using codeigniter?
any ideas as I am banging my head over something so stupid....
Out of interest I created the below fiddle and it is doing the same?
http://jsfiddle.net/49nqU/
why is the value 0 when it is showing 123.2?
Thanks as always,
This is a case of attributes vs. properties.
What you are seeing in the inspector is the value attribute, which does not update when you programmatically update a field's value property.
Pay no attention to what the DOM inspector says; it'll only show the value as it was when the page loaded (unless you explicitly change the field's value attribute rather than, as jQuery's val() does, its value property.)
Further reading: http://jquery-howto.blogspot.co.uk/2011/06/html-difference-between-attribute-and.html
Some attributes are closely tied to their property counterparts. That is to say, updating the property also updates the attribute. This is the case, for example, with the class attribute and its className property counterpart. value, however, is different; updating the property does not update the attribute (but, just to confuse things further, updating the attribute does update the property!)
val() is changing the value property, not attribute. The value attribute is initialized at the loading of the page. Once you change text field the value property and attribute have differnet values.
But you can use plain JS for changing the value attribute also.
Try:
var cubes=123.2;
document.getElementById('qty').setAttribute('value',cubes);
var test=$("#qty").val();
alert(test);
DEMO

Why does knockout not change the value attribute when updating value of input type text?

Title pretty much says it all. I'm just wondering if anyone would know why the value binding on knockout doesn't create/set a value attribute on the input element in the document.
Per request, making my comment into an answer:
The value attribute on an <input value="foo"> element is the initial value of the field. Once active in the page, the .value property is the current value. Attribute and property are not the same.
If you have some flawed piece of code (e.g. the printing plugin) that you're trying to work with that is using the attribute instead of the property, then I supposed you could set the attribute to match the property before calling that printing plugin or you could path the printing plugin to correctly access the property.

Categories

Resources