XF 2.0 Using an array $this->filter('school_interest', 'array');

[AndrewSimm]

I have a forum that allows a staff member to enter player information. Part of that forum gets submitted to my player table and part to my school_of_interest table. The part that gets submitted to school_of_interest allows you to submit more than 1 entry per field and I use some javascript to dynamically create more input boxes. The problem is when I submit the form, it only takes the first entry.

$school_interest = $this->filter('school_interest', 'array');

<xf:select name="school_interest[]" placeholder="Select College">
<xf:option value=""></xf:option>
<xf:foreach loop="$colleges" value="$college">
<xf:option value="{$college.man_college_id}">{$college.manage_college_name}</xf:option>
</xf:foreach>
</xf:select>

 

[AndrewSimm]

Any idea on what I am doing wrong? Only the first one is added to the array.

 

[Mike]

I believe that should be fine based on what you've shown, though you may want to look at what's submitted to the server and what's actually in $_GET and $_POST directly (since we pull the input from PHP's super globals).

 

[AndrewSimm]

I believe that should be fine based on what you've shown, though you may want to look at what's submitted to the server and what's actually in $_GET and $_POST directly (since we pull the input from PHP's super globals).

I checked $_POST and still only got the first entry.

 

[Mike]

What does the content of the request look like going to the server? (Such as shown in Chrome's network panel.)

 

[AndrewSimm]

What does the content of the request look like going to the server? (Such as shown in Chrome's network panel.)

What exactly am I looking for here? FWIW the rest of the form submits fine, it's just the extra entries that are part of the array.

 

[Mike]

Click on your request and go to the "headers" tab. What does it show under "request payload"?

 

[AndrewSimm]

Click on your request and go to the "headers" tab. What does it show under "request payload"?

I see this

3

------WebKitFormBoundary8Wm22sN4kgOoiabW

Content-Disposition: form-data; name="chk[]"



on

------WebKitFormBoundary8Wm22sN4kgOoiabW

Content-Disposition: form-data; name="school_interest[]"



9

------WebKitFormBoundary8Wm22sN4kgOoiabW

Content-Disposition: form-data; name="school_status[]"



Undecided

------WebKitFormBoundary8Wm22sN4kgOoiabW

Content-Disposition: form-data; name="school_recruiter[]"

 

[AndrewSimm]

One thing to add is each row is added via js by clicking the "Add School" button shown in the screenshot above. By default the form only has one row.

 

[Mike]

So do you only see one entry for each named input there? That would generally be the problem then and would seem to either indicate the issue is in JS (form element name generation or submission content generation). You may need to look at that code in more detail.

 

[AndrewSimm]

So do you only see one entry for each named input there? That would generally be the problem then and would seem to either indicate the issue is in JS (form element name generation or submission content generation). You may need to look at that code in more detail.

In the header, I only see it once. When I view the HTML of the page I see each element and the appropriate name. I am only using js to create part of the form. I still submit the forum the traditional way.

 

[AndrewSimm]

Here is the js, I use to add the rows.

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    if(rowCount < 15){                            // limit the user from creating fields more than your limits
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;
        for(var i=0; i<colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
        }
    }else{
         alert("Maximum Schools is 15.");
              
    }
}

 

[DragonByte Tech]

You may find this template code useful:

            <xf:if is="$remainingResponses > 0">
                <li data-xf-init="field-adder" data-remaining="{{ $remainingResponses - 1 }}">
                    <xf:textbox name="poll[new_responses][]" value=""
                        maxlength="{{ max_length('XF:PollResponse', 'response') }}"
                        placeholder="{{ phrase('poll_choice...') }}" />
                </li>
            </xf:if>

From the poll_macros template in the public space. Other examples include captcha_question_edit in the admin space.


Fillip

 

[AndrewSimm]

The javascript adds the row and form element, it just post the first row. Is there any specific with js I need to know with XF? The code itself works in the sense that it adds the additional row.

 

[DragonByte Tech]

The javascript adds the row and form element, it just post the first row. Is there any specific with js I need to know with XF? The code itself works in the sense that it adds the additional row.

Sorry, I don’t understand what you mean by this. You should replace your custom JS with what I listed above, in order to make sure your code is fully integrated into XF2.


Fillip

 

[AndrewSimm]

Sorry, I don’t understand what you mean by this. You should replace your custom JS with what I listed above, in order to make sure your code is fully integrated into XF2.


Fillip

Fillip, here is the JS I am using, It works fine to create the additional inputs. The issue is when I submit the form it doesn't seem to recognize these inputs. I've used this script in a stand alone PHP and had no issues.

Are you saying that I can't use this script with XF2?

 

[DragonByte Tech]

Fillip, here is the JS I am using, It works fine to create the additional inputs. The issue is when I submit the form it doesn't seem to recognize these inputs. I've used this script in a stand alone PHP and had no issues.

Are you saying that I can't use this script with XF2?

I am saying that using your custom JS instead of built-in XF2 JS for adding form elements may very well be the cause of your problems, and I’m recommending you look into the code I posted to see if that works for you.


Fillip

 

[AndrewSimm]

I am saying that using your custom JS instead of built-in XF2 JS for adding form elements may very well be the cause of your problems, and I’m recommending you look into the code I posted to see if that works for you.


Fillip

Hi Fillip, I used the example code from above and while the javascript did add additional form fields and the names were correct, it still only sent the first value. If I just insert multiple rows into the HTML then it works fine. For some reason I can't get more than the first value from a dynamically created input field.

This does not submit more than 1 entry, even though I can add more in the UI

<li data-xf-init="field-adder" data-remaining="{{ $remainingResponses - 1 }}">
    <xf:select name="school_interest[]" placeholder="Select College">
        <xf:option value=""></xf:option>
        <xf:foreach loop="$colleges" value="$college">
            <xf:option value="{$college.man_college_id}">{$college.manage_college_name}</xf:option>
        </xf:foreach>
    </xf:select>
</li>

This works fine, but I want to dynamically create the number of rows, since it chances based off the entry

    <xf:select name="school_interest[]" placeholder="Select College">
        <xf:option value=""></xf:option>
        <xf:foreach loop="$colleges" value="$college">
            <xf:option value="{$college.man_college_id}">{$college.manage_college_name}</xf:option>
        </xf:foreach>
    </xf:select>

    <xf:select name="school_interest[]" placeholder="Select College">
        <xf:option value=""></xf:option>
        <xf:foreach loop="$colleges" value="$college">
            <xf:option value="{$college.man_college_id}">{$college.manage_college_name}</xf:option>
        </xf:foreach>
    </xf:select>