Question

Javascript: two if conditions

Updated November 9, 2015

asked on November 9, 2015 • Show version history

Hello,

I have a scenario:

There are three fields:

1. q3 = Radio Button with Values: A, B, C

2. q4 = Dropdown with Values: Inklusive, Exclusive

3. q5 = Single Line

I have various text which will be shown as Placeholder in q5 depending upon the values of q3 & q4, for example

if q3 = A & q4 = Inklusive

q5 should be = "Something Fancy"

if q3 = A & q4 = Exclusive

q5 should be = "Ugly something"

I tried to copy paste some of the code from answers, with my limited knowledge I came to :

$('#q4 input').change(function(){
   if($('#q3 input[value="A"]:checked') && $(#q4 select).val("Inklusive")){
       $("#q5 textarea").attr("placeholder", "Something Fancy");
}
else if ($('#q3 input[value="A"]:checked') && $(#q4 select).val("Exclusive")){
       $("#q5 textarea").attr("placeholder", "Ugly something");
}
})

As expected, doesn't work... Please help!

Thanks in advance,

Sahil

Screen Shot 2015-11-09 at 10.28.38.png (28.2 KB)

| Download

0 0

Answer

SELECTED ANSWER

replied on November 9, 2015

Hi Sahil!

I've modified the code above slightly, I think it was just finding the values of the inputs that was the trouble, otherwise it works perfectly!

It also looks like you might be using a single line input rather than a text area? So if you are you might need to replace "textarea" in your code with "input".

$('#q4 select').change(function(){
    
    var buttonValue = null;
    $("#q3 input").each(function(){
      if($(this).prop("checked") == true) {
        buttonValue = $(this).val();
      }
    });

    if(buttonValue == "A" && $('#q4 select').val() == "Inklusive"){

        $("#q5 textarea").attr("placeholder", "Inklusive");

     }

     else if (buttonValue == "A" && $('#q4 select').val() == "Exclusive"){

        $("#q5 textarea").attr("placeholder", "Exclusive");

  } else {
    $("#q5 textarea").attr("placeholder", "");
  }

  });

I've also added an "else" statement at the end that will remove the placeholder if the two conditions above are not met, but you can always get rid of this if you don't need it.

Cheers!

Dan

1 0

Replies

replied on November 9, 2015

So ,

I moved it to top like the code attached & now it WORKS!!!!

$(document).ready(function() 

{
  
  $('#q4 select').change(function(){
     var buttonValue = null;
    $("#q3 input").each(function(){
      if($(this).prop("checked") == true) {
        buttonValue = $(this).val();
      }
    });

    if(buttonValue == "A" && $('#q4 select').val() == "Inklusive"){
      
        $("#q5 input").attr("placeholder", "Inklusive");
		
     }

     else if (buttonValue == "A" && $('#q4 select').val() == "Exclusive"){

        $("#q5 input").attr("placeholder", "Exclusive");

  } else {
    $("#q5 input").attr("placeholder", "");
  }

  });


  //Load the Java library when the form loads

  loadScript();

   

  $.getScript("https://international.laserfiche.com/Forms/js/ckeditor/ckeditor.js", function() 

{

    CKEDITOR.replace('Field2',{customConfig :'',width:'740px',height:'1500px'}); // Convert multiline field to a CKEDITOR. Set width and height.

    

  });

    

  $('#Field2').val($('#Field1').html()); //Populate with default content

 

});
 

function loadScript()

{

  var script = document.createElement('script');

  script.type = 'text/javascript';

  script.src = 'https://international.laserfiche.com/Forms/js/ckeditor/ckeditor.js'; // absolute URL 

  document.head.appendChild(script);

}

Dan, can you please suggest how can I incorporate if the value is = 'B'

Thanks a lot!!!

1 0

replied on November 9, 2015

This is what I figured out so far:

$('#q4 select').change(function(){
     var buttonValue = null;
    $("#q3 input").each(function(){
      if($(this).prop("checked") == true) {
        buttonValue = $(this).val();
      }
    });

    if(buttonValue == "A" && $('#q4 select').val() == "Inklusive"){
      
        $("#q5 input").attr("placeholder", "Inklusive");
	}

     else if (buttonValue == "A" && $('#q4 select').val() == "Exclusive"){

        $("#q5 input").attr("placeholder", "Exclusive");
    }
      else if (buttonValue == "B" && $('#q4 select').val() == "Inklusive"){

        $("#q5 input").attr("placeholder", "Sahil Inklusive");
	}
       else if (buttonValue == "B" && $('#q4 select').val() == "Exclusive"){

        $("#q5 input").attr("placeholder", "Sahil Exklusive");
	}
   else {
    $("#q5 input").attr("placeholder", "");
  }

  });

Am I on the right track or is there a better way?

It does give desired results.

Thanks!

Sahil

1 0

replied on November 9, 2015

Hi Sahil,

Glad it's working!! And yes I think that's probably the best and easiest way to do it :)

Cheers, Dan

1 0

replied on November 9, 2015

Thanks Dan!!!

1 0

replied on November 9, 2015

Hi Dan,

Thanks a Million, however no luck :(

I tried it also with input, but still no luck.

I paste again the whole code I have, so maybe there is something wrong.

Again, Thanks a lot!

Sahil

$(document).ready(function() 

{

      

 //Load the Java library when the form loads

  loadScript();

   

  $.getScript("https://international.laserfiche.com/Forms/js/ckeditor/ckeditor.js", function() 

{

    CKEDITOR.replace('Field2',{customConfig :'',width:'740px',height:'1500px'}); // Convert multiline field to a CKEDITOR. Set width and height.

    

  });

    

  $('#Field2').val($('#Field1').html()); //Populate with default content

 

});

 

function loadScript()

{

  var script = document.createElement('script');

  script.type = 'text/javascript';

  script.src = 'https://international.laserfiche.com/Forms/js/ckeditor/ckeditor.js'; // absolute URL 

  document.head.appendChild(script);

}


$('#q4 select').change(function(){
    
    var buttonValue = null;
    $("#q3 input").each(function(){
      if($(this).prop("checked") == true) {
        buttonValue = $(this).val();
      }
    });

    if(buttonValue == "A" && $('#q4 select').val() == "Inklusive"){

        $("#q5 textarea").attr("placeholder", "Inklusive");

     }

     else if (buttonValue == "A" && $('#q4 select').val() == "Exclusive"){

        $("#q5 textarea").attr("placeholder", "Exclusive");

  } else {
    $("#q5 textarea").attr("placeholder", "");
  }

  });

0 0

replied on November 9, 2015

May I also ask if you could include the example for, if the button value = 'B' ?

I have to have conditions running on it & other values too.

Thanks!

0 0

replied on November 9, 2015

Hi Sahil,

That's strange, it works fine in my environment

For the above script to work you will have to assign values to each of the choices for both the dropdown and the buttons, so if you edit your form and open up the edit dialogue for these two fields it should look like this:

Can you confirm this is the same?

Thanks, Dan.

0 0

replied on November 9, 2015

Dan,

Sorry, I didn't have them, however after adding, still no luck?

0 0

replied on November 9, 2015

I tried to add an alert after the if statement & it also doesn't execute :(

0 0

You are not allowed to follow up in this post.

Question

Question

Javascript: two if conditions

Answer

Replies

Sign in to reply to this post.