You are viewing limited content. For full access, please sign in.

Question

Question

Populate field values based on another field

asked on October 27, 2015

Hello,

I need help with Javascript to achieve below:

 

I have a field named Du with id: #q76

This has two values (Dropdown): yes / no

 

Based on the selection the values of the 5 other fields should correspond (also Dropdown):

#q175: Deine / Ihre

#q176: Deinen / Ihren

#q177: Dir / Ihnen

#q178: Dich / Sie

#q179: Deine / Ihre

 

My knowledge about javascript is very limited, so if someone can please help, would be grateful!

 

Regards,

Sahil

0 0

Answer

SELECTED ANSWER
replied on October 28, 2015

I found it Sahil!

Instead of "$('#q76 select').change(function(){", you need to use

"$('[id^=Field76\\(]').change(function(){"

2 0

Replies

replied on October 27, 2015 Show version history

Hi Sahil,

You can use Javascript's "if else" statements to make decisions based on the "yes/no" drop-down selection. Here's some code to get you started: 

$(document).ready(function(){
  
  $('#q76 select').change(function(){
    
    if($(this).val()=='yes'){
      
      $('#q175 select').val('deine');
      $('#q176 select').val('deinen');
      $('#q177 select').val('dir');
    }
    
    else if($(this).val()=='no'){
      
      $('#q175 select').val('ihre');
      $('#q176 select').val('ihren');
      $('#q177 select').val('ihnen');
    }
    
    else{
      
      $('#q175 select, #q176 select, #q177 select').val('');
    }
  });
});

For more information on customizing a form with Javascript, click here.

Please let me know if this works for you!

2 0
replied on October 29, 2015

Hi Sahil,

Try this out: 

$(document).ready(function(){
  
  $('[id^=Field76\\(]').on('blur change', function(){
    
    alert($(this).val());
    
    if ($(this).val() == 'Ja'){
      
      $('#q185 input').val($('[id^=Field16\\(]').val());
    }
    else if ($(this).val() == "Nein"){
    
  	  $('#q185 input').val($('[id^=Field17\\(]').val());  
    }
  });
});

If Field16 and Field17 are drop-down fields, selectors should be $('select[id^Field16\\(]')

 

1 0
replied on October 28, 2015

Hello Alexander,

Thanks for the code, I tried the below, it's in document ready function, however no luck:

 

//Populate Sie / Du values

  

  $('#q76 select').change(function(){

    if($(this).val()=='Ja'){

      $('#q180 select').val('Deine');

      $('#q181 select').val('Deinen');

      $('#q182 select').val('Dir');

      $('#q183 select').val('Dich');

      $('#q184 select').val('Deine');

    }

 

    else if($(this).val()=='Nein'){

 

      $('#q180 select').val('Ihre');

      $('#q181 select').val('Ihren');

      $('#q182 select').val('Ihnen');

      $('#q183 select').val('Sie');

      $('#q184 select').val('Ihre');

          }

    else{

      $('#q180 select, #q181 select, #q182 select, #q183 select, #q184 select').val('');

 

    }

  });

 

The field id's are changed as per my fields, please bear in mind that fields 180-184 are dropdown fields.

 

Regards,

Sahil

0 0
replied on October 28, 2015

I guess the issue is on line: $('#q76 select').change(function()

Since this is a dropdown the changing value of this function doesn't make any effect...

Any suggestion.

0 0
replied on October 28, 2015 Show version history

Hi Sahil,

The code looks good to me. Here is a video of the code in action

The only thing I can't see is your $(document).ready(function(){ }); and the field ids. If you want to share some screen shots  I would be happy to look them over!

Edit: The values are case-sensitive, so please make sure all the upper-lower cases match.

0 0
replied on October 28, 2015

Hey Alex,

Thanks again,

The only difference is that my fields have default values, do you think this causes an issue?

 

0 0
replied on October 28, 2015

I do not think so, other than you would be able to take out the last "else" logic. That was meant to clear the values when the selection was empty, but that wont exist by default when you have a default value.

0 0
replied on October 28, 2015 Show version history

This is the whole code I have, with some other functions, I made an alert to see if it triggers, but no luck

$(document).ready(function() {
  
  
  //Populate Sie / Du values
  
  $('#q76 select') .change(function(){
 
     
    alert("Nathan Test")

    if($(this).val()=='Ja'){
      $('#q180 select').val('Deine');
      $('#q181 select').val('Deinen');
      $('#q182 select').val('Dir');
      $('#q183 select').val('Dich');
      $('#q185 select').val('Deine');
    }

    else if($(this).val()=='Nein'){

      $('#q180 select').val('Ihre');
      $('#q181 select').val('Ihren');
      $('#q182 select').val('Ihnen');
      $('#q183 select').val('Sie');
      $('#q185 select').val('Ihre');
          }
    else{
      $('#q180 select, #q181 select, #q182 select, #q183 select, #q185 select').val('');

    }

  });
  
  
  
  // Hide the appropriate Fields when form first loads
  $('#q174,#q164,#q163, #q87, #q74, #q168 , #q169, #q170, #q171, #q172, #q173').hide();
  
  
    $('.cf-section-block').on('blur', 'input', compute);
    $('.cf-section-block').on('blur', 'select', compute);
    
     function compute() {
          var a = parseNumber($('#q141 select').val());
          var b = parseNumber($('#q142 select').val());
          var c = parseNumber($('#q143 select').val());
          var d = parseNumber($('#q165 select').val());
          var x = parseNumber($('#q159 input').val());
          var y = parseNumber($('#q160 input').val());
          var z = parseNumber($('#q161 input').val());
          var q = parseNumber($('#q166 input').val());
 
 
          var total = (a*x) + (b*y) + (c*z) + (d*q);
          $('#q157 input').val(total);
    }
         
     
     function parseNumber(n) {
        var f = parseFloat(n); //Convert to float number.
       return isNaN(f) ? 0 : f; //treat invalid input as 0;
    }
    
     

//Concatenate Consultant & Domain field to Email
  
  $('.con').on("change",function(){
                     var x = $('.con input').val();
// Domain Field q46
            var y = $("#q87 input").val();
//Email field q48
	$("#q174 input").val(x+y);
});
  
 
 
});

 

Maybe you can find out some errors

 

Thanks.

0 0
replied on October 28, 2015

It might be just a typo, but you have a space between $('#q76 select') and .change(function(){

0 0
replied on October 28, 2015

I checked that's not space

Maybe seems so in pasting

0 0
replied on October 28, 2015 Show version history

Can you copy/paste the actual JS you're using? The rest of the lines of code seem fine so it would be odd why that one line randomly inserted a space when you say there's no space in your actual code.

Alternatively, can you try deleting that line and re-typing it in your form's JS section and test again?

0 0
replied on October 28, 2015

Alex, just to be sure, I re wrote the whole line, but no effect

0 0
replied on October 28, 2015

The values are case sensitive. Can you confirm that the choices/values in your drop down fields match up exactly with what you're specifying in the JS?

0 0
replied on October 28, 2015

Yes I confirm

0 0
replied on October 28, 2015

I'm registered for CFW today, will try to figure out there

0 0
replied on October 28, 2015

I'll pass along our discussion to today's CFW host.

0 0
replied on October 28, 2015

Very kind of you! 

0 0
replied on October 28, 2015

Hi Sahil,

I am pretty sure you are missing a final "});" at the end of your code.

replied on October 28, 2015

Thanks a lot Alex & sorry for confusion about the field being part of table.

 

If you can manage to trigger it, would be awesome! 

Many thanks! 

0 0
SELECTED ANSWER
replied on October 28, 2015

I found it Sahil!

Instead of "$('#q76 select').change(function(){", you need to use

"$('[id^=Field76\\(]').change(function(){"

2 0
replied on October 28, 2015

Alex,

You are the MAN!!! 

AWESOME & Thanks a Million!!! 

1 0
replied on October 28, 2015

My pleasure Sahil!

0 0
replied on October 29, 2015

Hi Alex,

I have another issue, the same field in the question:

So, I have 4 fields here in play, based on the same field's value Field 76 the value from 16 or 17 should be copied to field 185.

Both 16 & 17 are part of the same table & 185 is Single Line field.

I have verified with Inspect Item & both 16 & 17 also have (1) at the end.

 

I tried the code as below, but doesn't work:

$('[id^=Field76\\(]').blur(function(){
       alert($("id^=Field76\\(] :selected").val());
       
          if($().val()=='Ja'){
          $('#q185').val($('[id^=Field16\\(] input').val());
      }
      
      else if($(this).val()=='Nein'){
         $('#q185 input').val($('[id^=Field17\\(] input').val());
      }
});

 

The requirement is that on blur or on change the values should be copied to 185.

I first thought that I could just add the lines to the same function (which I would have preferred as the code would have been smaller, but even if it has to be independent function, will suffice.

 

Thanks a lot in advance!

Sahil

0 0
replied on October 29, 2015

Alex,

Awesome!!!! Works like a charm!

 

The only issue is the field 76 Comes before 16 & 17, so the function is triggered if I go back to either cause blur or Change, can you suggest something that it always happens as These fields are coming later???

 

Thanks in advance,

Sahil

0 0
replied on October 29, 2015 Show version history

Ok Alex,

I found a way, I triggerd the Event on another field which Comes later:

 

//$('[id^=Field76\\(]').on('blur change', function(){
  $('#q124').on('change', function(){
   
  // alert($('[id^=Field76\\(]').val());
   
    if ($('[id^=Field76\\(]').val() == 'Ja'){
     
      $('#q185 input').val($('[id^=Field16\\(]').val());
    }
    else if ($('[id^=Field76\\(]').val() == "Nein"){
   
     $('#q185 input').val($('[id^=Field17\\(]').val()); 
    }
  });

 

& since this field is a must, it will work, however two things (just to learn for future):

1. I tried 'blur' for field 124 it didn't work, by writing : $('#q124').on('blur change', function(){

2. What if I want to say , Event should Trigger if field 76 or 124 Change?

This way I can be sure that something will happen.

 

That's the worst Thing, once you see something working, greed Comes along ;)

 

Regards,

Sahil

0 0
replied on October 29, 2015

Hi Sahil,

1. I am assuming #q124 is a single-line field. If so, the selector is $('#q124 input')

2. If you want to trigger a function when different fields change, you can define the function as a variable and then pass it into the event handlers:

$(document).ready(function(){
  
  var myfunction = function(){
    
    if ($('[id^=Field76\\(]').val() == "Ja"){
      
      $('#q185 input').val($('[id^=Field16\\(]').val());
    }
    
    else if ($('[id^=Field76\\(]').val() == "Nein"){
    
      $('#q185 input').val($('[id^=Field17\\(]').val());  
    }
  }
                          
  $('[id^=Field76\\(]').on('blur change', myfunction);
  $('#q124 input').on('blur change', myfunction);
});

Let me know if #q124 is a single-line or drop-down, and if it's inside or outside of a table.

1 0
replied on October 29, 2015

It's single line & outside

0 0
replied on October 30, 2015

Alex, 

sorry about misinformation, q124 is a dropdown, I changed it to select & works as desired.

 

Thanks a lot, I have learnt a LOT only because of your Kind Help!!

Regards,

Sahil

0 0
replied on October 30, 2015

My pleasure, Sahil! Glad it is working out!

0 0
replied on October 29, 2015

Hi Sahil,

1. I am assuming #q124 is a single-line field. If so, the selector is $('#q124 input')

2. If you want to trigger a function when different fields change, you can define the function as a variable and then pass it into the event handlers:

$(document).ready(function(){
  
  var myfunction = function(){
    
    if ($('[id^=Field76\\(]').val() == "Ja"){
      
      $('#q185 input').val($('[id^=Field16\\(]').val());
    }
    
    else if ($('[id^=Field76\\(]').val() == "Nein"){
    
      $('#q185 input').val($('[id^=Field17\\(]').val());  
    }
  }
                          
  $('[id^=Field76\\(]').on('blur change', myfunction);
  $('#q124 input').on('blur change', myfunction);
}); 

Let me know if #q124 is a single-line or drop-down, and if it's inside or outside of a table.

replied on October 29, 2015
$(document).ready(function(){
  
  var myfunction = function(){
    
    if ($('[id^=Field76\\(]').val() == "Ja"){
      
      $('#q185 input').val($('[id^=Field16\\(]').val());
    }
    
    else if ($('[id^=Field76\\(]').val() == "Nein"){
    
      $('#q185 input').val($('[id^=Field17\\(]').val());  
    }
  }
                          
  $('[id^=Field76\\(]').on('blur change', myfunction);
  $('#q124 input').on('blur change', myfunction);
}); 

 

You are not allowed to follow up in this post.

Sign in to reply to this post.