Multiple values separated by commas input

[NeoInJS]

I have a virtual field in a submission for. My input in that virtual field is comma separated values. What I want to achieve, is upon submitting the DataPage, the value will be separately into my table fields.

 

Example: Table fields are Name, Age and Gender

 

Virtual field Input:    Nelson, 50, Male

Expected outcome:

Nelson is stored in the Name field

50 is stores in the Age field

Male is stored in the Gender field

[nightowl]

Hi NeoInJS,

You can try the following:

1. Create a new virtual field. Let's assume that it's named Virtual1.
2. Include the actual fields for Name, Age, and Gender. Make them Hidden.
3. Create an HTML block with the Source button enabled.
4. Then put this code in the HTML block:

<script>
    document.getElementById('caspioform').onsubmit = function ()
    {
        // TODO: Add your field names here
        var fields = ['Name', 'Age', 'Gender'];

        var input = document.getElementById('cbParamVirtual1').value;
        var values = input.split(',');

        values.forEach(
            function (value, index)
            {
                // Map each CSV segment to each field in the 'fields' list above    
                document.getElementById('InsertRecord' + fields[index]).value = value.trim();
            }
        );
    }
</script>

Hope this helps.

[nightowl]

Hi NeoInJS,

If you're trying to achieve something like this:

var fields = [tag1 tag2 tag3 tag4 tag5]

• tag1 will be saved as field #1
• tag2 will be saved as field #2
• tag3 will be saved as field #3
• tag4 will be saved as field #4
• tag5 will be saved as field #5

Then, you can use the jQuery Tag-it! library to achieve this.

You can then use the following script in the footer of your submission page:

<!-- Latest jQuery + jQuery Migrate -->  
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.0.js"></script>

<!-- jQuery UI: Required by Tag-It! -->
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<!-- jQuery Tag-It! -->
<script src="//aehlke.github.io/tag-it/js/tag-it.js" type="text/javascript" charset="utf-8"></script>

<!-- Required jQuery UI Theme + Tag-It! theme -->
<link href="//code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css" rel="stylesheet" type="text/css">
<link href="//aehlke.github.io/tag-it/css/jquery.tagit.css" rel="stylesheet" type="text/css">

<script language="JavaScript">
    document.getElementById('caspioform').onsubmit = function ()
    {
        // TODO: Add your field names here
        var fields = ['Tag_1', 'Tag_2', 'Tag_3', 'Tag_4', 'Tag_5'];

        var input = document.getElementById('cbParamVirtual1').value;
        var values = input.split(',');

        values.forEach(
            function (value, index)
            {
                // Map each CSV segment to each field in the 'fields' list above    
                document.getElementById('InsertRecord' + fields[index]).value = value.trim();
            }
        );
    }
</script>

<script language="JavaScript">
    function alphanumeric(v_plate)
    {
        if (!(v_plate.value.match(/[^a-zA-Z0-9,\-]|(,,)|(,,,)|(,,,,)|(,,,,,)| \s | # | @ | ! | ? | $ | % | ^ | & | * | ( | ) | ~ | ` | _ | + | = | ; | . | > | < | : | " | ' | 1{2,} /)))
        {
            return true;
        }
        else
        {
            alert("Only letters or numbers are allowed in this field");
            return false;
        }
    }
</script>

<script language="JavaScript">
    $(document).ready(
        function ()
        {
            var v_b = document.getElementById('Submit');
            v_b.onclick = function ()
            {
                if (alphanumeric(document.getElementById('cbParamVirtual1')))
                {
                     document.getElementById('caspioform').submit();
                }
                else
                {
                    return false;
                }
            }

            $('#cbParamVirtual1').tagit(
                {
                    // The hypothetical 'cbParamVirtual1' above is what I am trying to point to the Virtual1 text area in the DataPage.
                    // This will make JQuery Tag-it feature submit an array of values as shown in the script above, as comma-delimited.
                    // The hope is that the rules remain consistent through all through scripts.  All I am trying to do is change the display
                    // effect on the front end. No changes are required to the back end.
                    singleField: true,
                    singleFieldDelimiter: ','
                }
            );
        }
    );
</script>

To change the jQuery UI theme used by the script above:

1. Please go to https://code.jquery.com/ui/.
2. Choose your theme from the jQuery UI 1.12 > Themes section and copy the link address.
3. Replace the href attribute in the following line with the link you've got from STEP #2:

<link href="//code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css" rel="stylesheet" type="text/css">

Hope this helps.

[NikkiC]

Hi @nightowl,

I am facing a similar issue, but slightly different and I can't quite seem to tailor your solution to fit.  I was wondering if you could give me some pointers?

OK, so I have a Submission form datapage, the datasource is my table [DataSources].  I have 2 fields that need to be updated, [Datasource] and [Project].  I'd like to potentially create up to 30 new records, each with a value in the [Datasource] column and the [Project] column.

I want to be able to select items graphically, so I have a table of 30 logos, and when I click on any of these, I want them to be "selected".  The Project name will always be the same, but there could be up to 30 Datasources if they select all the logos.

At present, I have used an html block to display all of my logos and javascript to pass them all to the relevant field.  I'll show you the first 5:

<a href="#" onClick="SelAdobe()"><img src="http://account.testboard.com/images/logos/Logo-Adobe.gif" id="Adobe" class="MAIN"></a>
<a href="#" onClick="SelBARB()"><img src="http://account.testboard.com/images/logos/Logo-BARB.gif" id="BARB" class="MAIN"></a>
<a href="#" onClick="SelBBCweather()"><img src="http://account.testboard.com/images/logos/Logo-BBCweather.gif" id="BBCweather" class="MAIN"></a>
<a href="#" onClick="SelBloomberg()"><img src="http://account.testboard.com/images/logos/Logo-Bloomberg.gif" id="Bloomberg" class="MAIN"></a>
<a href="#" onClick="SelBrandwatch()"><img src="http://account.testboard.com/images/logos/Logo-Brandwatch.gif" id="Brandwatch" class="MAIN"></a>

<script>
  function SelAdobe() {
    document.getElementById("Adobe").className = "SELECTED";
    document.getElementById("InsertRecordDatasource").value += "Adobe,";
    document.getElementById("InsertRecordProject").value += "[@authfield:User_info_Project],";
    document.getElementById("InsertRecordDatasource").multiple = true;
}
function SelBARB() {
    document.getElementById("BARB").className = "SELECTED";
    document.getElementById("InsertRecordDatasource").value += "BARB,";
    document.getElementById("InsertRecordProject").value += "[@authfield:User_info_Project],";
    document.getElementById("InsertRecordDatasource").multiple = true;
}
function SelBBCweather() {
    document.getElementById("BBCweather").className = "SELECTED";
    document.getElementById("InsertRecordDatasource").value += "BBC Weather,";
    document.getElementById("InsertRecordProject").value += "[@authfield:User_info_Project],";
}
function SelBloomberg() {
    document.getElementById("Bloomberg").className = "SELECTED";
    document.getElementById("InsertRecordDatasource").value += "Bloomberg,";
    document.getElementById("InsertRecordProject").value += "[@authfield:User_info_Project],";
}
function SelBrandwatch() {
    document.getElementById("Brandwatch").className = "SELECTED";
    document.getElementById("InsertRecordDatasource").value += "Brandwatch,";
    document.getElementById("InsertRecordProject").value += "[@authfield:User_info_Project],";
}
</script>

This is all working, in that it updates my table with the selections ... but all on one line.  So if we clicked on all the above, it would insert only 1 record like this:

Project column: Project1,Project1,Project1,Project1,Project1,

Datasource column: Adobe,BARB,BBC Weather,Bloomberg,Brandwatch,

Whereas I'd want it to insert 5 separate records.

Is this something you can help me with?

Many thanks!

Nikki

[nightowl]

Hi NikkiC,

Thanks for the comment.

I just noticed that the script is meant to save the CSV values into separate columns (horizontally) and not into separate rows (vertically), as you wish. I need to correct the original reply.

Going back to your question, this might need either:

1. a custom trigger, or
2. repeated submission via JavaScript

Let me see if I can come up with a different script.

[NikkiC]

Thank you so much @nightowl!  I've been going round and round in circles on this for a couple of weeks, and definitely need some help!  

Fingers crossed 

[JasonKing]

Was there ever any luck with this?