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

Question

Question

How to Fill Field in a Table with a Value from a Drop-down List in the Same Table?

Forms Version 9
Updated February 16, 2015
asked on February 27, 2014 • Show version history

I'm not very good at doing custom javascript with tables so any help would be greatly appreciated.

 

I have a table on my form that includes a drop-down list (Description) that has specific values provided for each option in the list. I have a text field (Code #) in the table that I need to populate with the value that is selected from the drop-down list. This needs to happen for each row.

 

0 0

Answer

APPROVED ANSWER SELECTED ANSWER
replied on February 27, 2014 • Show version history

To answer the original question, you can use JavaScript to monitor a table for changes (like when a user selects something from a dropdown) and then perform actions on each table row. In this case, we want JavaScript to detect the table change, and, for each row, grab the selected value from the drop-down and fill the single line field with that value.

 

For the following code to work, add these classes. If you are using other JavaScript that uses these classes, you'll want to make some slight adjustments so that these values are unique and will not affect other code.

 

Add the filledField class to the single line field that should be filled with the value. Add the dropdown class to the dropdown field. Try this code:

 

$(document).ready(function () {
$('.cf-table-block').change(grabVal)
});

function grabVal() {
$('.cf-table-block tbody tr').each(function () {
  $(this).find('.filledField input').val($(this).find('.dropdown option:selected').val());
})
}


 

1 0

Replies

replied on February 27, 2014

So, you want it to fill the appropriate code in based on what is selected in the description field? Do the values in the description field come from a lookup? 

0 0
replied on February 27, 2014

A screenshot of the drop-down setup will probably help.

So when they select an item in the drop-down list, I need to populate the Code # text field with the value assigned to the option that was selected.

0 0
View 5 previous replies
APPROVED ANSWER SELECTED ANSWER
replied on February 27, 2014 • Show version history

To answer the original question, you can use JavaScript to monitor a table for changes (like when a user selects something from a dropdown) and then perform actions on each table row. In this case, we want JavaScript to detect the table change, and, for each row, grab the selected value from the drop-down and fill the single line field with that value.

 

For the following code to work, add these classes. If you are using other JavaScript that uses these classes, you'll want to make some slight adjustments so that these values are unique and will not affect other code.

 

Add the filledField class to the single line field that should be filled with the value. Add the dropdown class to the dropdown field. Try this code:

 

$(document).ready(function () {
$('.cf-table-block').change(grabVal)
});

function grabVal() {
$('.cf-table-block tbody tr').each(function () {
  $(this).find('.filledField input').val($(this).find('.dropdown option:selected').val());
})
}


 

1 0
replied on February 28, 2014

That unfortunately did not work as expected. We have some other JavaScript for this form. Below is the complete code with what you provided as well.

 

$(document).ready(function () {
  
  //disable submit button until signature is confirmed
    $('.Submit').attr('disabled', 'disabled');
    $('#donebutton').click(function () {
        $('.Submit').removeAttr('disabled');
        $('.sigwarning').hide();
    })
    //end disable submit button code
    
    //populate code# from selected description
    $('.cf-table-block').change(grabVal)
   });
     
    function grabVal() {
    $('.cf-table-block tbody tr').each(function () {
      $(this).find('.filledField input').val($(this).find('.dropdown option:selected').val());
    });

    //end populate code# from selected description
    
    //code for signature
    function htmlEncode(value) {
        return $('<div/>').text(value).html();
    }

    function htmlDecode(value) {
        return $('<div/>').html(value).text();
    }

    /**When the page loads, check if the sig data (hidden) field has a value.
       If it has a value, decode it and put it in the image, and remove the
       signature pad and its buttons.**/
    var sigvalue = $('.sigdata textarea').text();
    var sigrovalue = $('.sigdata .ro').text();
    if (sigvalue != '' || sigrovalue != '') {
      var decoded = htmlDecode(sigvalue == '' ? sigrovalue : sigvalue );
        var $img = $('<img class=imported></img>');
        $img.attr("src", decoded).appendTo('#sigimage');
        $('.sigGroup').remove(); //class added to the signature button and image custom HTML fields.
       $('.sigwarning').hide();
    }

    $.getScript('https://dl.dropboxusercontent.com/u/14829216/jSignature.min.js', function () {
        $('#signature').jSignature();
    });
    $('#donebutton').click(function () {
        var sigdata = $('#signature').jSignature('getData');
        $('.sigdata textarea').val(htmlEncode(sigdata));
        var $img = $('<img class=imported></img>');
        $img.attr("src", $('#signature').jSignature('getData')).appendTo('#sigimage');
        $('.sigGroup').remove(); //class added to the signature button and image custom HTML fields.

    });
    $('#clearbutton').click(function () {
        $('#signature').jSignature('clear');
    });

    //end code for signature
   });

 

0 0
replied on February 28, 2014

Just a few syntax issues. The following should work. Let me know if it does not.

 

$(document).ready(function () {
   
    //disable submit button until signature is confirmed
    $('.Submit').attr('disabled', 'disabled');
    $('#donebutton').click(function () {
        $('.Submit').removeAttr('disabled');
        $('.sigwarning').hide();
    })
    //end disable submit button code
     
    //populate code# from selected description
    $('.cf-table-block').change(grabVal)
      
function grabVal() {
    $('.cf-table-block tbody tr').each(function () {
        $(this).find('.filledField input').val($(this).find('.dropdown option:selected').val());
    });
}
 
    //end populate code# from selected description
     
    //code for signature
    function htmlEncode(value) {
        return $('<div/>').text(value).html();
    }
 
    function htmlDecode(value) {
        return $('<div/>').html(value).text();
    }
 
    /**When the page loads, check if the sig data (hidden) field has a value.
       If it has a value, decode it and put it in the image, and remove the
       signature pad and its buttons.**/
    var sigvalue = $('.sigdata textarea').text();
    var sigrovalue = $('.sigdata .ro').text();
    if (sigvalue != '' || sigrovalue != '') {
        var decoded = htmlDecode(sigvalue == '' ? sigrovalue : sigvalue );
        var $img = $('<img class=imported></img>');
        $img.attr("src", decoded).appendTo('#sigimage');
        $('.sigGroup').remove(); //class added to the signature button and image custom HTML fields.
        $('.sigwarning').hide();
    }
 
    $.getScript('https://dl.dropboxusercontent.com/u/14829216/jSignature.min.js', function () {
        $('#signature').jSignature();
    });
    $('#donebutton').click(function () {
        var sigdata = $('#signature').jSignature('getData');
        $('.sigdata textarea').val(htmlEncode(sigdata));
        var $img = $('<img class=imported></img>');
        $img.attr("src", $('#signature').jSignature('getData')).appendTo('#sigimage');
        $('.sigGroup').remove(); //class added to the signature button and image custom HTML fields.
 
    });
    $('#clearbutton').click(function () {
        $('#signature').jSignature('clear');
    });
 
    //end code for signature
});

 

0 0
replied on February 28, 2014 • Show version history

Something with the code that we added to populate the single line field is causing problems with the signature field. It shrinks the signature box when the code is added. If I remove the code it works correctly.

 

0 0
replied on February 28, 2014

I found the problem. Below is the corrected code:

$(document).ready(function () {

    //disable submit button until signature is confirmed
    $('.Submit').attr('disabled', 'disabled');
    $('#donebutton').click(function () {
        $('.Submit').removeAttr('disabled');
        $('.sigwarning').hide();
    })
    //end disable submit button code

    //populate code# from selected description
    $('.cf-table-block').change(grabVal)

    function grabVal() {
        $('.cf-table-block tbody tr').each(function () {
            $(this).find('.filledField input').val($(this).find('.dropdown option:selected').val());
        });
    }

    //end populate code# from selected description

    //code for signature
    function htmlEncode(value) {
        return $('<div/>').text(value).html();
    }

    function htmlDecode(value) {
        return $('<div/>').html(value).text();
    }

    /**When the page loads, check if the sig data (hidden) field has a value.
       If it has a value, decode it and put it in the image, and remove the
       signature pad and its buttons.**/
    var sigvalue = $('.sigdata textarea').text();
    var sigrovalue = $('.sigdata .ro').text();
    if (sigvalue != '' || sigrovalue != '') {
        var decoded = htmlDecode(sigvalue == '' ? sigrovalue : sigvalue);
        var $img = $('<img class=imported></img>');
        $img.attr("src", decoded).appendTo('#sigimage');
        $('.sigGroup').remove(); //class added to the signature button and image custom HTML fields.
        $('.sigwarning').hide();
    }

    $.getScript('https://dl.dropboxusercontent.com/u/14829216/jSignature.min.js', function () {
        $('#signature').jSignature();
    });
    $('#donebutton').click(function () {
        var sigdata = $('#signature').jSignature('getData');
        $('.sigdata textarea').val(htmlEncode(sigdata));
        var $img = $('<img class=imported></img>');
        $img.attr("src", $('#signature').jSignature('getData')).appendTo('#sigimage');
        $('.sigGroup').remove(); //class added to the signature button and image custom HTML fields.

    });
    $('#clearbutton').click(function () {
        $('#signature').jSignature('clear');
    });

    //end code for signature
});

 

0 0
replied on February 16, 2015

Hi Eric

 

Regarding this method in a table. I would like to do something similar but just with the values the other way around. i.e. I would like the filledField (single line field) to choose the value in the dropdown list if it exists. I tried switching the values around but this did not work. I then tried the below script for the fucntion but it is also not working, can you please give me some guidance?

 

function grabVal() {
$('.cf-table-block tbody tr').each(function () {
 $('.dropDep').find('option[value="' +  $(this).find('.filledfieldDep input').val() + '"]').prop('selected', true);
})
}

 

Regards

 

Farren

0 0
replied on February 16, 2015

Hi Eric

 

Dont worry i found this problem, the script below is working for me.

 


function grabVal() {
$('.cf-table-block tbody tr').each(function () {
  
   var s = $(this).find('.filledField input').val();
     
     $('.dropDown').find('option[value="' + s + '"]').prop('selected', true);
  
})
}

0 0
replied on February 16, 2015

Okay New Problem

 

This works fine when the drop down options are set manually into the attributes of the drop down field. When the drop down filed is filled from a lookup condition it doesn't work anymore.

 

Any Ideas?

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...