Jump to content

Recommended Posts

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>
Link to comment
https://forums.phpfreaks.com/topic/301221-jquery-form-help/
Share on other sites

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?

 

Link to comment
https://forums.phpfreaks.com/topic/301221-jquery-form-help/#findComment-1533112
Share on other sites

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
}
Link to comment
https://forums.phpfreaks.com/topic/301221-jquery-form-help/#findComment-1533117
Share on other sites

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 by cyberRobot
Added some links
Link to comment
https://forums.phpfreaks.com/topic/301221-jquery-form-help/#findComment-1533119
Share on other sites

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);
        }
    });           
});
Link to comment
https://forums.phpfreaks.com/topic/301221-jquery-form-help/#findComment-1533121
Share on other sites

  • Solution

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>
Link to comment
https://forums.phpfreaks.com/topic/301221-jquery-form-help/#findComment-1533174
Share on other sites

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

Link to comment
https://forums.phpfreaks.com/topic/301221-jquery-form-help/#findComment-1533183
Share on other sites

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.

Link to comment
https://forums.phpfreaks.com/topic/301221-jquery-form-help/#findComment-1533211
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.