bradkenyon Posted September 9, 2008 Share Posted September 9, 2008 I want to present a drop down menu, which a person will select from the following: Student Events Student Announcement Faculty Events Faculty Announcements Announcements (Both) Events (Both) Food Menu Items I plan on keeping the form the same, but based off of what kind of item they select to enter, then I want to include the appropriate .js validation form for it. So if someone selects Student Events, I want it to use the student_events.js file, which will validate the appropriate fields, because some items will need to be required and some won't, so I want to plug in the correct validation file based on what item they're selecting. so like I said, if they select Student Events, plug in <script src="student_events.js" type="text/javascript"></script> All items will use the same form, just certain items will have different required fields on the form. Hope this makes sense. so I envision there will an onselect event which will trigger a case or conditional if student events use: <script src="student_events.js" type="text/javascript"></script> if faculty events use: <script src="faculty_events.js" type="text/javascript"></script> so on and so forth any help is greatly appreciated. thank you. Quote Link to comment Share on other sites More sharing options...
Psycho Posted September 9, 2008 Share Posted September 9, 2008 Just create a link to an external script like you showed, but give it an ID. Then change the src of that external script on the fly. This works in IE & FF, not tested in other browsers. here is a very quick example - i.e. not production ready. HTML File <html> <head> <script type="text/javascript" id="validateScript" src="validate_ind.js"></script> <script type="text/javascript"> function changeValidation(validateID) { document.getElementById('validateScript').src = 'validate_' + validateID + '.js'; } </script> </head> <body> Form Type: <select onchange="changeValidation(this.value);"> <option value="ind">Individual</option> <option value="corp">Company</option> </select> <br /><span style="color:red;"> For Individual Name & Phone are required.<br /> For Company Name & Email are required.<br /> </span><br /> Name: <input type="text" name="name" id="name" /><br /> Phone: <input type="text" name="phone" id="phone" /><br /> Email: <input type="text" name="email" id="email" /> <br /><br /> <button onclick="validate();">Test Validation</button> </body> </html> validate_ind.js function validate() { nameObj = document.getElementById('name'); phoneObj = document.getElementById('phone'); if (!nameObj.value || !phoneObj.value) { alert('Validation Falied!\n\nName/Phone not entered.'); } else { alert('Validation Passed!'); } return; } validate_corp.js function validate() { nameObj = document.getElementById('name'); emailObj = document.getElementById('email'); if (!nameObj.value || !emailObj.value) { alert('Validation Falied!\n\nName/Email not entered.'); } else { alert('Validation Passed!'); } return; } Quote Link to comment Share on other sites More sharing options...
bradkenyon Posted September 10, 2008 Author Share Posted September 10, 2008 Why do you have: <script type="text/javascript" id="validateScript" src="validate_ind.js"></script> in here: <head> <script type="text/javascript" id="validateScript" src="validate_ind.js"></script> <script type="text/javascript"> function changeValidation(validateID) { document.getElementById('validateScript').src = 'validate_' + validateID + '.js'; } </script> </head> Quote Link to comment Share on other sites More sharing options...
obsidian Posted September 10, 2008 Share Posted September 10, 2008 I don't believe you can change the source of a JS file once the page is loaded. Your best bet is to just name your validation function calls according to what it is they do. Include one file with all the validation possibilities and only call the one appropriate to the user's selection. Quote Link to comment Share on other sites More sharing options...
Psycho Posted September 11, 2008 Share Posted September 11, 2008 Why do you have: <script type="text/javascript" id="validateScript" src="validate_ind.js"></script> in here: <head> <script type="text/javascript" id="validateScript" src="validate_ind.js"></script> <script type="text/javascript"> function changeValidation(validateID) { document.getElementById('validateScript').src = 'validate_' + validateID + '.js'; } </script> I had to create a JS external source file that I gave an ID to so I can change the source of that external file with the function. I don't believe you can change the source of a JS file once the page is loaded. With all due respect Obsidian, did you not read the part of my post that stated "This works in IE & FF, not tested in other browsers"? It absolutely DOES work, I have done this in the past. The code I posted works exactly as described. Quote Link to comment Share on other sites More sharing options...
obsidian Posted September 11, 2008 Share Posted September 11, 2008 With all due respect Obsidian, did you not read the part of my post that stated "This works in IE & FF, not tested in other browsers"? Nope, guess not. I must have completely missed that part. I stand corrected. It absolutely DOES work, I have done this in the past. The code I posted works exactly as described. Good to know. I'll have to do some reading, because it still sits kind of hokey to me. Does the code still validate this way? I wasn't aware that an id was a valid attribute of the script tag. 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.