normanm4
Member
http://www.musicanddrill.com/contact/
On the contact form listed above, the "size of program" is a number field that inserts a weird decimal value when clicking the selector next to the cell. Is this something easily fixed or does it appear to be a conflict within wordpress?
Thanks everyone.
Hi Michael,
I didn't follow how to recreate this issue? I looked at the form and I assume you're referring to the "What is the size of group?" field; however, I was unable to recreate any weirdness with the field. Could you clarify how I can see the issue?
Thanks!
I'm with Dave here. I didn't see a "size of program" field, and the number field I did see seems to be working normally.
Using Google Chrome 8.0.552.224 on Linux, I saw this (see screenshot):
Not sure if that is the same thing or not. I've seen the browser try and complete fields based on previous entries used for fields with the same name, but I've never seen a number field like that with an "up/down" arrow thing, and never entered a scientific notation number like that (I don't think).
I just tried in Firefox and the issue is not present. @normanm4 was the problem initially in Chrome?
Maybe this is HTML5 functionality that Chrome is taking advantage of? Since the page is XHTML 1.0 Transitional, you might want to turn of the HTML5 output, which would eliminate the number type, I think.
http://diveintohtml5.org/examples/input-type-number-min-max-step.html
http://validator.w3.org/check?uri=http://www.musicanddrill.com/contact/
Thanks for the extra research Chris! You are indeed correct. This is part of Chrome's support for the HTML5 number field and by disabling the "Output HTML5" option on the settings page ( here: http://grab.by/8rBn ) it will remove the number increment toggle.
However, if you like the increment toggle and just want to avoid the weird numbers, you can use a simple bit of jQuery to set the min and max attributes for this field which will force the field to only increment between those two numbers.
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#input_5_2').attr('min', 0).attr('max', 340);
});
</script>This example already has the number field from your form targeted, so it is just a matter of either pasting this script block in your header.php OR adding just the javacript in between the two script tags to a javascript file that is already being loaded by your theme (usually init.js or something similar).