How to implement different condition for different dropdown in form

You could accomplish this with jQuery like this

jQuery('input[name="category_of_works"], input[name="community_id"]').change(function () {
    var $category = jQuery('input[name="category_of_works"]');
    var $community = jQuery('input[name="community_id"]');
    var $hugeDepo = jQuery('.huge-depo');

    if ($category.val() == 0 && $community.val() == 2) {      
        if ($hugeDepo.length == 0) {
            jQuery('.agree-terms ul').append('<li class="huge-depo">Your deposit is huge</li>');
        }
    } else {
        $hugeDepo.remove();
    }
});

@yorki Thank you for your reply .. :)

I have three doubt :

1. should i have to put it into a function and trigger as onchange or as simply like your code
2. can i use "$" instead of "jquery" , because i used it perviousely
3. will this code will effect my previous code since i have used it as a separate code and trigger by onchange function in my select option

Please give me a better idea

1. You could put it into jQuery(document).ready function or just at the end of website.
2. Yes, you can use $ sign
3. You have to check it yourself, but should be no problem. However you could move this logic to your existing function

Also i can clearly understand your code But cannot understand this

if ($hugeDepo.length == 0) {

where does the "length" comes from

$hugeDepo is instance of jQuery object. This condition checks whenever .huge-depo DOM already exists in HTML.

You might just define empty div with class huge-depo in your HTML structure and then just change its inner HTML to Your deposit is huge or set it empty if it doesnt met conditions.

Sorry since i'm new to php. I'm asking a hell lots of questions to you? Hope i will get used to php

Hi

I am getting an error after trying the code on my console as

jquery is not defined

i tried in many ways to solve it but cannot find the solution

Its case sensitive. Try using jQuery or $ instead of jquery, also make sure you include jQuery library. Take a look at https://learn.jquery.com/

Yes, there is no error But i don't find any changed in my agree-terms (class) I changed some of the code as per my wish as

jQuery('input[name="community_id",input[name="category_of_works"]').change(function(){
 
var $community = jQuery('input[name="community_id"]');
var $category = jQuery('input[name="category_of_works"]');
var $secdepo = jQuery('#sec-depo')

if($community.val() == 2 && $category.val() == 0) {
  if(secdepo.length == 0){
    jQuery('.agree-terms ul').append('<li id="sec-depo">A refundable security deposit of AED 500.00.</li>')
  } 
} else {
   $('.agree-terms ul').append('<li id="sec-depo">A refundable security deposit of AED 5,000.00 .</li>')
}
});

I used id instead of class Is there any error

Also console.log will help me whether it is running or not please tell me how to do that to?

Well make it consistent

$('input[name="community_id"],input[name="category_of_works"]').change(function () { 
    var $community = $('input[name="community_id"]');
    var $category = $('input[name="category_of_works"]');
    var $secdepo = $('#sec-depo')

    if ($community.val() == 2 && $category.val() == 0) {
        if ($secdepo.length == 0) {
            $('.agree-terms ul').append('<li id="sec-depo">A refundable security deposit of AED 500.00.</li>')
        } 
    } else {
        $('.agree-terms ul').append('<li id="sec-depo">A refundable security deposit of AED 5,000.00 .</li>')
    }
});

Tried but didn't get the line in terms and condition

Do some debugging in change method

console.log($secdepo.length, $community.val(), $category.val());

I tried this

$('input[name="community_id"],input[name="category_of_works"]').change(function () { 
    var community = $('input[name="community_id"]').val();
    var category = $('input[name="category_of_works"]').val();
    var secdepo ;

    if (community == 2 && category == 0) {
             secdepo ='<li>A refundable security deposit of AED 500.00 </li>'
      } else {
        secdepo = '<li>A refundable security deposit of AED 5,000.00 </li>'
       }
        $('#secdepo').empty().append(secdepo);
});

and in my blade

<label class="col-xs-3 control-label">Terms and Conditions</label> 
                            <div class="col-xs-9">
                                <div class="agree-terms">  
<ul>
<div id="secdepo"></div>
<li>I understand xxxxxxxxxxxxxx.</li>
                                        <li>I confirm that xxxxxxxxxxxxxxxxxxxxxx</li>
                                        <li>I confirm that xxxxxxxxxxxxxx.</li>
 </ul>
                                </div>
                            </div>

but still didn't get it