<p>Your sort order will change according to your HTML, so when you change your html, the sort order will change. You can use certain Javascript libraries to move your containers in your DOM, when you save the entry, your related entries will change.</p>

<p>As for every relation field in Craft, you only have to insert an array of ids to relate the elements.</p>

<pre><code>&lt;input type="hidden" name="fields[galleryBlock][{{ block.id }}][landscape]" value="{{ image.id }}"&gt;
</code></pre>

<p>Is wrong because you insert the id of an image, not an array</p>

<pre><code>&lt;input type="hidden" name="fields[galleryBlock][{{ block.id }}][landscape][]" value="{{ image.id }}"&gt;
</code></pre>

<p>is the correct way</p>

CC BY-SA 3.0
2018-03-08T20:30:34.150Z
2018-03-08T20:30:34.150Z
Robin Schambach
<p>I'm trying to rearrange the matrix block order using a frontend form.</p>

<ul>
<li>If I use JavaScript to change the order of inputs in the DOM will this change the order in the backend after form submission?</li>
<li>How do you include the correct value for image fields, is this using the image id?</li>
</ul>

<p>I have a reduced test case of what I came up with below, anyone see where I'm going wrong?</p>

<pre><code>&lt;form method="post" accept-charset="UTF-8" enctype="multipart/form-data"&gt;
   {{ getCsrfInput() }}
   &lt;input type="hidden" name="action" value="entries/saveEntry"&gt;
   &lt;input type="hidden" name="redirect" value="viewentry/{slug}"&gt;
   &lt;input type="hidden" name="entryId" value="{{ entry.id }}"&gt;
   &lt;input type="hidden" name="fields[galleryBlock]" /&gt;

   {% for block in entry.galleryBlock %}

       {% switch slide.type %}

       {% case 'landscape' %}
            {# block 1 #}
            {% set image = block.image[0] ?? null %}
            &lt;input type="hidden" name="fields[galleryBlock][{{ block.id }}][landscape]" value="{{ image.id }}"&gt;
            &lt;input type="hidden" name="fields[galleryBlock][{{ block.id }}][enabled]" value="1"&gt;

        {% case 'portrait' %}
            {# block 2 #}
            {% set image = block.image[0] ?? null %}
            &lt;input type="hidden" name="fields[galleryBlock][{{ block.id }}][portrait]" value="{{ image.id }}"&gt;
            &lt;input type="hidden" name="fields[galleryBlock][{{ block.id }}][enabled]" value="1"&gt;

    {% endswitch %}

{% endfor %}
</code></pre>

<p></p>

<matrix><frontend-form>
How to rearrange the order of blocks of a single matrix field using a frontend form?
# How to rearrange the order of blocks of a single matrix field using a frontend form?

(Asked by: username_0 on 2018-03-08)

I'm trying to rearrange the matrix block order using a frontend form.

If I use JavaScript to change the order of inputs in the DOM will this change the order in the backend after form submission?
How do you include the correct value for image fields, is this using the image id?

I have a reduced test case of what I came up with below, anyone see where I'm going wrong?

   {{ getCsrfInput() }}
   
   
   
   

   {% for block in entry.galleryBlock %}

       {% switch slide.type %}

       {% case 'landscape' %}
            {# block 1 #}
            {% set image = block.image[0] ?? null %}
            
            

        {% case 'portrait' %}
            {# block 2 #}
            {% set image = block.image[0] ?? null %}
            
            

    {% endswitch %}

{% endfor %}

**Tags:** matrix, frontend-form


---

## 1 answers

### Answer by username_1 on 2018-03-08. Score: 2 | Accepted answer

Your sort order will change according to your HTML, so when you change your html, the sort order will change. You can use certain Javascript libraries to move your containers in your DOM, when you save the entry, your related entries will change.
As for every relation field in Craft, you only have to insert an array of ids to relate the elements.


Is wrong because you insert the id of an image, not an array


is the correct way


---

