How to implement different condition for different dropdown in form

Published 1 month ago by Niyaz

Hi, i am doing a project in laravel which i need implement different condition for different dropdown (select option) Like , this is my 1st dropdown list option

{{ Form::select('category_of_works', ['0' => 'Minor Works', '1' => 'Major Works'], null , ['class' => 'form_control'])  }}

and this is my 2nd dropdown list option

{{ Form::select('community_id',[ '1' => 'Project1', '2' => 'Project2', '3' => 'Project3' , '4' => 'Project4'],null ,['class' => 'form-control'] ) }}

My query is if i select "minor works" from 1st dropdown and "Project2" from 2nd dropdown i have to get a sentence like "Your deposit is huge" in my terms and condition

And my Terms and condition is

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

Perviously, i have similar condition for one dropdown and i did it by javascript and query . But now i have it for 2 dropdown and i dont know how to proceed it.

Can anyone help me to solve it as i can do it by query or by laravel( php) ?

Yorki
Yorki
1 month ago (29,510 XP)

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

@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

Yorki
Yorki
1 month ago (29,510 XP)
  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
Niyaz

Also i can clearly understand your code But cannot understand this

if ($hugeDepo.length == 0) {

where does the "length" comes from

Yorki
Yorki
1 month ago (29,510 XP)

$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.

Niyaz

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

Niyaz

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

Yorki
Yorki
1 month ago (29,510 XP)

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/

Niyaz

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

Niyaz

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

Yorki
Yorki
1 month ago (29,510 XP)

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

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

Yorki
Yorki
1 month ago (29,510 XP)

Do some debugging in change method

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

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

Please sign in or create an account to participate in this conversation.