EricOnAdventure Posted May 20, 2016 Share Posted May 20, 2016 I am using Jquery to show or hide my "JOBFINISH1a" form question based on the answer to a the "JOBPRESENT1a" question. I want to require JOBFINISH1a ONLY if the answer to JOBPRESENT1a is "no". So hidden and not required or shown and required. Any ideas? I'm pretty new to jquery so I can't figure this out on my own. <script> $(document).ready(function (){ $("#JOBPRESENT1a").change(function() { if ($(this).val() == "No") { $("#jobfinish").show(); }else{ $("#jobfinish").hide(); } }); }); </script> <label id='tooltip1'> Are you currently working with this company?<span></span><a>帮助<span>INFO</span></a></label><br /><br> <select id='JOBPRESENT1a' name='JOBPRESENT1a' required><br> <option value='Yes'>Yes</option> <option value='No'>No</option><label> </select><br> <p id="jobfinish" style="display:none;"> <label id='tooltip1'> Which year did you finish working with this company?<span></span><a>帮助<span>INFO</span></a></label><br /><br> <select id='JOBFINISH1a' name='JOBFINISH1a' required><br> <option value=''>Which Year</option> <option value='2020'>2020</option> <option value='2019'>2019</option> <option value='2018'>2018</option> <option value='2017'>2017</option> <option value='2016'>2016</option> <option value='2015'>2015</option> <option value='2014'>2014</option> <option value='2013'>2013</option> <option value='2012'>2012</option> <option value='2011'>2011</option> <option value='2010'>2010</option> <option value='2009'>2009</option> <option value='2008'>2008</option> <option value='2007'>2007</option> <option value='2006'>2006</option> <option value='2005'>2005</option> <option value='2004'>2004</option> <option value='2003'>2003</option> <option value='2002'>2002</option> <option value='2001'>2001</option> <option value='2000'>2000</option> </select><br> </p> <br> Quote Link to comment Share on other sites More sharing options...
Zane Posted May 20, 2016 Share Posted May 20, 2016 Take out the line break in your SELECT tag. It also wouldn't hurt to have a default option <select> <option value='0'>-------</option> <option value='1'>Yes</option> See, it works here Quote Link to comment Share on other sites More sharing options...
EricOnAdventure Posted May 20, 2016 Author Share Posted May 20, 2016 Thanks Zane, but let me re-express what i am looking for, maybe you can help me with that. As is, it is required, which is perfect if on JOBPRESENT1a you choose no.But if you choose yes on JOBPRESENT1a, then JOBFINISH1a is still required, even though it is hidden. I could just remove required from JOBFINISH1a , except that I want JOBFINISH1a to be required if the response to JOBPRESENT1a is no.Does that make my problem more clear? Quote Link to comment Share on other sites More sharing options...
Psycho Posted May 20, 2016 Share Posted May 20, 2016 There is nothing in the code you have provided that makes any fields required. The only thing the code you provided does is hide/display the second field. Based on your comments there is some code somewhere to check for required fields. You should have logic that is implemented server-side (i.e. PHP), but you can also add logic client-side (i.e. JavaScript) for usability. You need to provide the code you already have to perform the validation in question in order for us to help. But, on a general level it would probably look something like this if($JOBPRESENT1a=='no' && $JOBFINISH1a=='') { //Error: If you are no longer working for the company, the year you left is required } Quote Link to comment Share on other sites More sharing options...
cyberRobot Posted May 20, 2016 Share Posted May 20, 2016 (edited) There is nothing in the code you have provided that makes any fields required.... The OP is using the required attribute. <select id='JOBFINISH1a' name='JOBFINISH1a' required> @EricOnAdventure - Have you looked into adding/removing the attribute dynamically. Perhaps you could use these: http://api.jquery.com/prop/ https://api.jquery.com/removeProp/ Edited May 20, 2016 by cyberRobot Added some links Quote Link to comment Share on other sites More sharing options...
Psycho Posted May 20, 2016 Share Posted May 20, 2016 The OP is using the required attribute. Ah, thanks. As this was a JS question, I assumed the validation was JS related and didn't look for that. Quote Link to comment Share on other sites More sharing options...
Psycho Posted May 20, 2016 Share Posted May 20, 2016 OP: 1. Since the initial value for the 'JOBPRESENT1a' field is yes, remove the required attribute from the 'JOBFINISH1a' field. 2. Change the function to show/hide the 'JOBFINISH1a' field to this $(document).ready(function (){ $("#JOBPRESENT1a").change(function() { if ($(this).val() == "No") { $("#jobfinish").show(); $("#JOBFINISH1a").prop('required', true); }else{ $("#jobfinish").hide(); $("#JOBFINISH1a").prop('required', false); } }); }); Quote Link to comment Share on other sites More sharing options...
EricOnAdventure Posted May 23, 2016 Author Share Posted May 23, 2016 Thanks a lot Psycho, that is exactly what I was looking for. Quote Link to comment Share on other sites More sharing options...
EricOnAdventure Posted May 23, 2016 Author Share Posted May 23, 2016 After testing it, the "required" property doesn't seem to be working at all. Any idea? Quote Link to comment Share on other sites More sharing options...
Solution Psycho Posted May 23, 2016 Solution Share Posted May 23, 2016 After testing it, the "required" property doesn't seem to be working at all. Any idea? It works fine for me in Chrome (not tested in other browsers). - If the first field is "Yes" the second field is hidden and not required. I can submit the page without errors/warnings. - If I set the first field to No, then the 2nd field is displayed and IS required. If I attempt to submit w/o making a selection in the 2nd field, the browser displays a warning. If I make a selection in the 2nd field, then I can submit w/o errors/warnings. Here is my full test page <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script> $(document).ready(function (){ $("#JOBPRESENT1a").change(function() { if ($(this).val() == "No") { $("#jobfinish").show(); $("#JOBFINISH1a").prop('required', true); }else{ $("#jobfinish").hide(); $("#JOBFINISH1a").prop('required', false); } }); }); </script> </head> <body> <form method="post" action="" id="theform"> <label id='tooltip1'> Are you currently working with this company?<span></span><a>??<span>INFO</span></a></label><br /><br> <select id='JOBPRESENT1a' name='JOBPRESENT1a'><br> <option value='Yes'>Yes</option> <option value='No'>No</option><label> </select><br> <p id="jobfinish" style="display:none;"> <label id='tooltip1'> Which year did you finish working with this company?<span></span><a>??<span>INFO</span></a></label><br /><br> <select id='JOBFINISH1a' name='JOBFINISH1a'><br> <option value=''>Which Year</option> <option value='2020'>2020</option> <option value='2019'>2019</option> <option value='2018'>2018</option> <option value='2017'>2017</option> <option value='2016'>2016</option> <option value='2015'>2015</option> <option value='2014'>2014</option> <option value='2013'>2013</option> <option value='2012'>2012</option> <option value='2011'>2011</option> <option value='2010'>2010</option> <option value='2009'>2009</option> <option value='2008'>2008</option> <option value='2007'>2007</option> <option value='2006'>2006</option> <option value='2005'>2005</option> <option value='2004'>2004</option> <option value='2003'>2003</option> <option value='2002'>2002</option> <option value='2001'>2001</option> <option value='2000'>2000</option> </select><br> </p> <br> <button type="submit">Submit</button> </form> </body> </html> Quote Link to comment Share on other sites More sharing options...
EricOnAdventure Posted May 24, 2016 Author Share Posted May 24, 2016 Thanks for all your help Psycho, but it still doesn't "require" the year if "no" is selected. Any more ideas or advice you can give on how to solve this? I am pretty new to jquery so i have no idea. I can do validation on the next page with PhP, but if I could get it to be done on this page that would be a lot better. Thanks Quote Link to comment Share on other sites More sharing options...
Psycho Posted May 24, 2016 Share Posted May 24, 2016 Thanks for all your help Psycho, but it still doesn't "require" the year if "no" is selected. Any more ideas or advice you can give on how to solve this? I am pretty new to jquery so i have no idea. I can do validation on the next page with PhP, but if I could get it to be done on this page that would be a lot better. Thanks As I stated, the example I provided above works for me as expected. Did you try that example page or are you only trying in on your full page? If you are only trying it on your full page, there's a good possibility that there are some errors in your code. Please try the sample script I provided (if you have not done so already). If the sample page does not work as expected, what browser are you using? Have you tried different browsers. I can't help you when all you tell me is that it doesn't work - when it works correctly for me. 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.