We Keep Coding

JS HTML DOM typeMismatch error

I am using XHTML, JSF and JavaScript to create a form, validate the information that has been submitted into their respective fields through the use of a onclick() in a h:commandButton.
I have managed to create a JS file that checks for empty fields and alerts the user if true, that works fine. I next wanted to try to make sure that the input matches the type defined in the tag using the typeMismatch property, in a function i've called Validity. Here is my code so far:
function Validity() {
var checkName=document.getElementById("formdiv:cardName");
var checkCard=document.getElementById("formdiv:cardnumber");
var checkExp=document.getElementById("formdiv:expDate");
var error="";
var inputChecks=[checkName, checkCard, checkExp];
for (i=0; i < inputChecks.length; i++){
if(inputChecks[i].value.validity.typeMismatch){
error= "Your fields dont match the required input type. E.g Card Number must be a number"
}
}
document.getElementById("errorMessage").innerHTML=error;
}
My problem lies on line 48 where i get a "Uncaught TypeError: Cannot read property 'typeMismatch' of undefined'. I have only been coding JS for a week so am relative new to it, so I'm sure it's down to how I'm declaring/ referencing something. I've have already checked w3schools and other sources all to no avail. So I'm hoping someone here will be able to help. Any suggestions would be greatly appreciated

The only thing that we can discern from the code you've given and the error is that the 'validity' property hasn't been defined.
It's important to note the difference between null and undefinied in JavaScript.
Effectively the fact that it's undefined suggests that it's never been set. My guess would be that you have some problem where either the code that's setting the validity property isn't being executed, or it's behaving differently than what you'd expect.
If you add more information such as the rest of the code (JavaScript and XHTML) someone might be able to answer more specifically.
Truthy and Falsy values might also be useful to learn about as it's quite common for these sorts of things to unexpectely happen

jquery val not passing data

I've got several input fields and such jquery code:
jQuery(document).ready(function($){
$('input').change(function(){
var amount1=$('.product-addon-wesprzyj-autora input').val();
var amount2=$('#pa_kategoria-cenowa').val();
var amount3=$('.quantity .qty').val();
var fractal=0.01;
var Total=(amount1*amount2*fractal*amount3)+(' PLN');
$('.product-addon-kwota-dla-autora input').attr('value', Total);
});
});
Strange thing is that jquery code works. In real time in changes values in my inputs, BUT after clicking sumbit, value from '.product-addon-kwota-dla-autora input' seems to be empty in database. Why is that? is there any way of pushinig this code to work? If i will type via keyboard data into that field, everything works. ANy ideas what is here wrong?

With the code you provided, I am not quite sure what your problem is. It could be a problem in your server side code where you save the data to the table. You need to debug and that find out.
But make sure that you are setting the form values properly so that your server side code will have the correct data from the form. You may consider using the val() method to set value.
$('.product-addon-kwota-dla-autora input').val(Total);
Also , when you read values from form inputs and use it for numeric operations, Consider converting the type to a numeric version by using parseFloat() or parseInt()
var Total=parseFloat(amount1)*parseFloat(amount2)*parseFloat(fractal)
*parseFloat(amount3)+(' PLN');
Also, You may inspect your browser's network tab to see what data your browser is posting to the server code. That should help you to understand where your problem is.

it might me that your "Total" variable is empty. alert('Total') and check for result. if it shows some value then try to change your line from this
$('.product-addon-kwota-dla-autora input').attr('value', Total);
into this
$('.product-addon-kwota-dla-autora input').val(Total);

Can't access object in jquery (prevObject?)

A function in my WP plugin has just randomly (as far as I can tell) stopped working.
Here's the code in question:
window.send_to_editor = function(html) {
var classes = jQuery('img',html).attr('class');
var items = classes.split(" ");
... more stuff here
}
I've confirmed that the html variable is indeed an img html tag. Here's what firebug shows when I do a console.log of the object (console.log(jQuery('img',html));):
Object[]
context -> undefined
jquery -> "1.11.2"
length -> 0
prevObject -> Object[img.alignnone.size-full.wp-image-1234 name.jpg]
And the error it shows is classes is undefined.
I figure there's something wrong with the object I get, but this used to work recently and I'm not aware of any changes in the site that could have caused this.
I'd appreciate any input on this.
EDIT:
More info. This happens with two plugins which are supposed to be unrelated (made by different people). It happens when, after uploading an image to the server (or selecting a previously uploaded picture) you try to insert it into the post.
As I said before this error has appeared out of nowhere, it was working as intended a couple days ago. The only thing I can think of that has changed since then is the domain name, but I can't see how that could be related.

The jQuery selector always returns a jQuery object, but when the length is 0 then no elements were found matching the selector that you provided. In your example you've confirmed that nothing is selected as the length of the jQuery object is 0. Perform a check whether an element was selected like this:
var $els = jQuery('img',html),
classes;
if ($els.length) {
classes = $els.attr("class");
}
Keep in mind that your DOM query is limited by what you pass in as the html parameter. If you simply want to find the images on the page do: var $els = jQuery('img');

I finally managed to fix this; the key was parsing the html string variable into proper HTML, using jQuery.parseHTML(). Thanks to everyone who helped!

Reasons a variable can be undefined on iPad vs. being defined in my Browser?

I'm clueless.
In my Jquery Mobile Plugin I'm declaring:
var $currentEntry = $.mobile.urlHistory.stack[$.mobile.urlHistory.activeIndex].url;
$activePage = $('div:jqmData(url="'+ $currentEntry +'")');
So I'm taking the active page's url and use it to construct an $activePage object.
This works fine on desktop, but on my iPad (iOS3.3), $currentEntry is defined correctly, but $activePage is undefined.
Question:
What can be reasons for this?
You can rule out race conditions, because wrapping this in a 10sec timeout still produces the same result. Also, if I console the respective page directly and query it's data-url, it shows the correct value. So how come the above still gives me undefined on iOS
undefined
while working correctly everywhere else?
Thanks for any hints!
EDIT:
The element will be dynamic, but I can console for the page in my setup directly like so:
console.log( $('div:jqmData(wrapper="true").ui-page-active').attr('id') );
console.log( $('div:jqmData(wrapper="true").ui-page-active').attr('data-url') );
Both return the correct id and data-url, so the elements must exist.
EDIT2:
I can query for the attribute data-url which gives me the correct value. However, I cannot select using this attribute like so:
$('div[data-url="'+$currentEntry+'"]').length
which gives me 0

I am going to admit that I am blind-guessing, but you should try:
$activePage = $('div').filter(function(){return $(this).jqmData('url') === $currentEntry})
BTW, just for semantics i think "$currentEntry" shouldn't start with a dollar sign if it is not a jQuery object.

Is there anything wrong with this statement? (Javascript)

I would like to know if there is anything wrong with the below statement.
document.getElementById(monthId).options[document.getElementById(monthId).selectedIndex].value
Am asking this because, sometimes it seems to work fine and the rest of the time, it throws up an error - Object doesn't support this property or method.
BTW, monthId is the clientID of the dropdown present in a gridview in an asp.net page.
Thanks!

If no value is selected in the dropdown list, selectedIndex would be -1.

It's hard to evaluate without some more code as context. But without sanity checks around this line of code I would expect it to fail with an index out of bounds type exception when there is no selected index.

I tend to error check when using getElementById. I would expect that that is where your problem is.
Try this, and then test it in a debugger, but I will put an alert in.
var elem = document.getElementById(monthId);
if (elem.options) {
options[document.getElementById(monthId).selectedIndex].value
} else {
alert("elem doesn't have an options property");
}
You may want to not assume that the value property exists either, and do the same basic thing as I did here.
Once you get it working smoothly, where you know what is going to happen, you can start to remove the unneeded variables and go back to your original line, but for debugging, it is simpler to have one operation on each line and use separate variables, so that the debugger can show you what is happening.
You may want to understand the difference between undefined and null, and there are various pages on this topic but this one isn't too bad.
http://weblogs.asp.net/bleroy/archive/2005/02/15/Three-common-mistakes-in-JavaScript-2F00-EcmaScript.aspx

You can debug your problem by adding a breakpoint to your code in IE development tools, Firebug, Opera dragonfly or Chrome development tools and check your values.
Or you could add alert statements to check your values. Personally i think the code goes awry when selectedIndex is -1 (selectedIndex = -1 would occur when nothing is selected).
Check for yourself:
alert(document.getElementById(monthId)); // Returns null if nothing is found
alert(document.getElementById(monthId).selectedIndex); // If the selectedIndex is below 0 it could cause your error
document.getElementById(monthId).options[document.getElementById(monthId).selectedIndex].value