Jquery form Help

[EricOnAdventure]

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>

[Zane]

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

[EricOnAdventure]

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?
 

[Psycho]

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
}

[cyberRobot]

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

[Psycho]

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.

[Psycho]

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);
        }
    });           
});

[EricOnAdventure]

Thanks a lot Psycho, that is exactly what I was looking for.

[EricOnAdventure]

After testing it, the "required" property doesn't seem to be working at all. Any idea?

[Psycho]

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>

[EricOnAdventure]

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

[Psycho]

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.