KevinM1 Posted September 12, 2007 Share Posted September 12, 2007 I'm no stranger to using JavaScript for form validation, but for some reason I can't get a simple validation to work. The setup is this: For my form, here's the relevent portion: <form id='productSearch' action='product.php' method='POST'> Keyword: <input name='keyword' type='text' /><br /> Search Options: <input name='radio' type='radio' value='1' />Product Name <input name='radio' type='radio' value='2' />Product #<br /> <!-- Some select elements and other things I'm not trying to validate at the moment --> <input name='submit' type='submit' value='Search' /> </form> My JavaScript, which is in an external file: var W3CDOM = (document.createElement && document.getElementsByTagName); function init(){ if (!W3CDOM) return; var inputform = document.getElementById('productSearch'); inputform.onsubmit = validate; } function validate(evt){ evt = (evt) ? evt : ((event) ? event : null); if(evt){ var elem = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); if(elem){ var numCheck; numCheck = isNotNumber(elem.keyword, elem.radio); if(numCheck){ return false; } else{ return true; } } } } function isNotNumber(argKeyword, argRadio){ if(isNaN(argKeyword.value) && (argRadio.checked && argRadio.value == 2)){ alert('Please Enter a valid numeric value for Item #'); argKeyword.select(); argKeyword.focus(); return true; } else{ return false; } } window.onload = init; The only things I can think of are: 1. 'elem' isn't actually my productSearch form, but perhaps the submit button. 2. The way I included the file may be messed up. I used the script tag outside the head of my HTML, as it's generated by the PHP scripts I'm currently rewriting. So, I used: <script type='text/javascript' src='adminhome.js'></script> But not in the head element. Am I missing something? I have more complex JavaScript form validation scripts that use the same approach I took here, and they work fine. I'm definitely stumped. Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted September 13, 2007 Author Share Posted September 13, 2007 After more testing, and adding the following debugging alerts to my code: var W3CDOM = (document.createElement && document.getElementsByTagName); function init(){ if (!W3CDOM) return; var inputform = document.getElementById('productSearch'); alert("ID of the form: " + inputform.id); inputform.onsubmit = validate; } function validate(evt){ evt = (evt) ? evt : ((event) ? event : null); if(evt){ var elem = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); alert("Do I still have the form? " + elem.id); if(elem){ var numCheck; numCheck = isNotNumber(elem.keyword, elem.radio); if(numCheck){ return false; } else{ return true; } } } } function isNotNumber(argKeyword, argRadio){ alert("Keyword and radio: " + argKeyword.name + ", " + argRadio.name); if(isNaN(argKeyword.value) && (argRadio.checked && argRadio.value == 2)){ alert('Please Enter a valid numeric value for Item #'); argKeyword.select(); argKeyword.focus(); return true; } else{ return false; } } window.onload = init; I'm getting a message that argRadio.name is undefined. Is this because both my radio buttons have the same name (which, to my knowledge is what they're supposed to have)? Or is there something else afoot? Quote Link to comment Share on other sites More sharing options...
KevinM1 Posted September 13, 2007 Author Share Posted September 13, 2007 I figured it out. My problems were mostly me being out of practice using JavaScript. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.