cancel
Showing results for 
Search instead for 
Did you mean: 
carlort
Nintex Newbie

Set textbox values based on checkbox choices

Hi,

In the picture below, I would like to use javascript, or any other means to check boxes from the operating units checkbox, and have the checkbox names appear in the account number text boxes automatically.  How would this be done using javascript?  operatingunit is the name of the checkbox control.  accountnumber1, accountnumber2, accountnumber3, accountnumber4, accountnumber5, and accountnumber6 are the names of the text boxes to have the checkboxes automatically fill.  A minimum of 1 checkbox will be checked.  A maximum of 6 checkboxes can be checked.   Thank you.multi_checkboxes.png

Labels: (1)
Tags (1)
0 Kudos
Reply
2 Replies
eharris04
Nintex Newbie

Re: Set textbox values based on checkbox choices

@carlort before I prescribe a solution, can you share what you're trying to achieve here? Not necessarily with the form but overall for the user submitting data.

 

This may help design the form to optimize that experience.

0 Kudos
Reply
Lewis-H
Nintex Newbie

Re: Set textbox values based on checkbox choices

Firstly, you must reload the select once after populating default values as below

$('#basic').multiselect('refresh')

Secondly, try to use onInitialized the method as described here

Finally, You're trying to assign back values from TextBox to Dropdown as below, where you're trying to assign the value as such with a comma 1,2 which actually doesn't exist as a value in dropdown.

$('#basic').children("option[value=" +
document.getElementById("txt1").value + "]").prop("selected", true);

Split the values as 1 and 2 and then assign and it works.

 

$(document).ready(function () {

    document.getElementById("txt1").value = "1,2,3"

    $('#basic').multiselect({
            includeSelectAllOption: true,
            numberDisplayed: 5,
            onInitialized: function(select, container) {
                console.log("Init");
                selectListValues();
            }
        });
        
        $("#basic").multiselect('refresh');
});

function selectListValues()
{
    var txtValue = document.getElementById("txt1").value;
    var selectedValues = txtValue.split(",");
    
    for(var i = 0; i < selectedValues.length; i++)
    {
        var val = selectedValues[i];
        
        if (val == null || val == "") continue;
        
      $('#basic').children("option[value=" + val + "]").prop("selected", "selected");
    }
}
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
</head>
<body>


 <input type="text" runat="server" id="txt1" visible="true" value="" onchange="selectListValues()" /> 

<div class="container">
    <select id="basic" multiple="multiple">
        <option value="1">Cheese</option>
        <option value="2">Tomatoes</option>
        <option value="3">Mozzarella</option>
        <option value="4">Mushrooms</option>
        <option value="5">Pepperoni</option>
        <option value="6">Onions</option>
    </select>
</div>

</body>
</html>

I hope this information helps!

Regards,

Lewis

0 Kudos
Reply