Using migxloopcollection select not selecting with Formit

1

I am using Formit with migxloopcollection that accesses a custom database to select a person’s id that I want to save to another custom database in a “memberid” field. No matter what I try, I can see from the console log that it is selecting the correct id but not saving to the table using Formit.

In another of my topics on the same project there is suggested a “&selected” within the migxloopcollection call but “&selected” is not shown on the migxloopcollection github information. When I have tried &selected=[[!+fi.memberid]] in the migxloopcollection call it still has not worked

The resource code is:

[[!FormIt?
   &hooks=`customdupposit,formit2db,redirect`
   &preHooks=`db2formit`
   &prefix=`agc_`
   &packagename=`honours`
   &classname=`Positionagc`
   &tablename=`positionagc`
   &redirectTo=`1`
   &store=`1`
   &validate=`nospam:blank,
      memberid:required,
      position:required,
      yearwhen:required`
]]
<h2>Add Position Form</h2>
[[!+fi.successMessage]]
[[!+fi.validation_error_message:notempty=`<p>[[!+fi.validation_error_message]]</p>`]]

<form name="positiondet" action="[[~[[*id]]]]" method="post" class="form">
    <input type="hidden" name="nospam" value="">
    <input type="hidden" name="memberid" value="[[!+fi.memberid]]"/>
    <label for="position">
        Select position: 
        <span class="error">[[!+fi.error.position]]</span>
    </label>
<select class="possel" name="position" id="position" value="[[!+fi.position]]" onchange="showHonsForm()">
            <option value="0">Choose position...</option>
            <option value="Mens captain" [[!+fi.position:formitisselected=`Mens captain`]]>Mens Captain</option>
            <option value="Ladies captain" [[!+fi.position:formitisselected=`Ladies captain`]]>Ladies Captain</option>
            <option value="President" [[!+fi.position:formitisselected=`President`]]>President</option>
            <option value="Vice president" [[!+fi.position:formitisselected=`Vice president`]]>Vice President</option>
            <option value="Junior captain" [[!+fi.position:formitisselected=`Junior captain`]]>Junior Captain</option>
</select>
<div><span class="error">[[!+fi.error.memberid]]</span></div>

<div id="malesel" style="display:none">
<select class="membsel" name="maleid" id="male" value="[[!+fi.memberid]]" style="width:25%">
<option></option>
[[!migxLoopCollection?
&prefix=`agc_`
&usecustomprefix=`agc_`
&packageName=`honours`
&classname=`Playerdetails`
&selectfields=`id,fullname,gender`
&tpl=`tplOptionHons`
&sortConfig=`[{"sortby":"surname"}]`
&where=`{"gender":"Male"}`
]]
</select>
</div>
<div id="femalesel" style="display:none">
<select class="membsel" name="femaleid" id="female" style="width:25%">
<option></option>
[[!migxLoopCollection?
&prefix=`agc_`
&usecustomprefix=`agc_`
&packageName=`honours`
&classname=`Playerdetails`
&selectfields=`id,fullname,gender`
&tpl=`tplOptionHons`
&sortConfig=`[{"sortby":"surname"}]`
&where=`{"gender":"Female"}`
]]
</select>
</div>
<div id="bothgendersel" style="display:none">
<select class="membsel" name="bothid" id="bothgender" style="width:25%">
<option></option>
[[!migxLoopCollection?
&prefix=`agc_`
&usecustomprefix=`agc_`
&packageName=`honours`
&classname=`Playerdetails`
&selectfields=`id,fullname,gender`
&tpl=`tplOptionHons`
&sortConfig=`[{"sortby":"surname"}]`
]]
</select>
</div>
<div>
    <label for="yearwhen">
        Year: 
        <span class="error">[[!+fi.error.yearwhen]]</span>
    </label>
    <input style="width: 100px;" type="varchar" name="yearwhen" id="yearwhen" value="[[!+fi.yearwhen]]">
    <br class="clear">
</div>
    <div class="form-buttons">
        <input type="submit" value="Enter details">
    </div>
</form>

<script type="text/javascript">
    function showHonsForm() {
        var selopt = document.getElementById("position").value;
        if (selopt == "Mens captain") {
            document.getElementById("malesel").style.display = "block";
            document.getElementById("malesel").disabled = false;
            document.getElementById("femalesel").style.display = "none";
            document.getElementById("bothgendersel").style.display = "none";
        }
        if (selopt == "Ladies captain") {
            document.getElementById("femalesel").style.display = "block";
            document.getElementById("femalesel").disabled = false;
            document.getElementById("malesel").style.display = "none";
            document.getElementById("bothgendersel").style.display = "none";
        }
        if (selopt == "President"||selopt == "Vice president"||selopt == "Junior captain") {
            document.getElementById("bothgendersel").style.display = "block";
            document.getElementById("bothgendersel").disabled = false;
            document.getElementById("malesel").style.display = "none";
            document.getElementById("femalesel").style.display = "none";
        }
        if (selopt == 0) {
            document.getElementById("malesel").style.display = "none";
            document.getElementById("femalesel").style.display = "none";
            document.getElementById("bothgendersel").style.display = "none";
        }
    }
</script>
<script>
    // In your Javascript (external .js resource or <script> tag)
$(document).ready(function() {

$('.membsel').select2({
    placeholder: "Select member",
    allowClear: true
});

$('.membsel').on("select2:select", function (e) {
var memberid = $(this).select2().find(":selected").val();
  console.log(memberid);
// var memberid = e.params.data;
//  console.log(memberid);

});
$('.possel').select2({
    placeholder: "Select position",
    allowClear: true
});

$('.possel').on("select2:select", function (e) {
var position = $(this).select2().find(":selected").val();
  console.log(position);
// var memberid = e.params.data;
//  console.log(memberid);

});
//$('.femembsel').select2({
//    placeholder: "Select lady",
//    allowClear: true
//});
//$('.femembsel').on("select2:select", function (e) { 
//  var select_val = $(e.currentTarget).val();

//});
//$('.bothmembsel').select2({
//    placeholder: "Select player",
//    allowClear: true
//});
//$('.bothmembsel').on("select2:select", function (e) { 
//  var select_val = $(e.currentTarget).val();

//});
});

The &tplOptionHons i am using is:

<option value="[[+id]]" [[+id:eq=`[[+property.selected]]`:then=` selected="selected"`]]>[[+fullname]]</option>
2

I’m somewhat confused by your code.

You say you want to save the “memberid” field.
But this is a hidden field in your form:
<input type="hidden" name="memberid" value="[[!+fi.memberid]]"/>.

Where do you change or select the value for this field?

3

&selected is not an official property for the “migxLoopCollection” snippet. This is just a way to pass a value from the snippet call to the chunk that is used by the snippet.

If you call the snippet with

[[!migxLoopCollection? 
      ...
      &selected=`some value`
]]

you can then access the value of the property in the chunk with [[+property.selected]].

But you could also use a totally different name for the property:

[[!migxLoopCollection? 
      ...
      &whateveryouwant=`some value` //[[+property.whateveryouwant]] in the chunk
]]
4

The memberid field is selected using migxloopcollection to get the id of the member from a Playerdetails table and I thought Formit would enter the selected id into the memberid field of the Positionagc table.

I have removed the hidden field and shall look into your other suggestion.

Thanks halftrainedharry

5

If you want the value from this select

<select class="membsel" name="maleid" id="male" value="[[!+fi.memberid]]" style="width:25%">
</select>

to be stored in the “memberid” field with formit2db, then you probably have to change the name of the <select> from “maleid” to “memberid”.

Or alternatively write your own custom snippet to save the data instead of using formit2db.

6

Thanks halftrainedharry.
It appears that it was all down to the name of the select.
So simple, yet frustrating!