I have a front end form which contains text fields that are connected to a Craft table field. The issue I have is that if I do not fill out the text input fields on the front end it is still creating table rows in the Craft entry. When I looked in the database, I can see that even though I'm not filling out the text input fields in the form, it is still submitting information. This is what is being submitted when the text input field not being filled out: [{"col1":"","col2":""},{"col1":"","col2":""}]
My guess is that I have something incorrect in how I'm coding the text input field in the form.
My question: Is there a way to either prevent the table row from getting added if the text input field is empty on the front end form? If not, is there a way that I can use code on the summary template page where the images would be displayed on the front end to filter out any table rows that have no content?
Here's a screenshot of the form input:
Here's my input form code:
<label for="stillImages1" class="field-label">Still Image 1</label>
<div class="section">
<div class="frm-row">
<label for="" class="field prepend-icon">
<input type="url" name="fields[logReviewer_feedbackStillImages][0][col1]" class="gui-input" placeholder="Paste image 1 link">
<span class="field-icon"><i class="fa fa-image"></i></span>
</label>
</div><!-- end frm-row -->
<br />
<div class="frm-row">
<label for="" class="field prepend-icon">
<textarea class="gui-textarea" name="fields[logReviewer_feedbackStillImages][0][col2]" placeholder="Type image 1 comments"></textarea>
<span class="field-icon"><i class="fa fa-comments"></i></span>
</label>
</div><!-- end frm-row -->
</div><!-- end section -->
</label>
<label for="stillImages2" class="field-label">Still Image 2</label>
<div class="section">
<div class="frm-row">
<label for="" class="field prepend-icon">
<input type="url" name="fields[logReviewer_feedbackStillImages][1][col1]" class="gui-input" placeholder="Paste image 2 link">
<span class="field-icon"><i class="fa fa-image"></i></span>
</label>
</div><!-- end frm-row -->
<br />
<div class="frm-row">
<label for="" class="field prepend-icon">
<textarea class="gui-textarea" name="fields[logReviewer_feedbackStillImages][1][col2]" placeholder="Type image 2 comments"></textarea>
<span class="field-icon"><i class="fa fa-comments"></i></span>
</label>
</div><!-- end frm-row -->
</div><!-- end section -->
</label>
Here's a screenshot of the table field in Craft. Even if I don't actually enter text in the text fields in the form, 2 table rows are created in the entry as shown in this screenshot below.
Here's my code to display images if they were submitted.
{% if entry.logReviewer_feedbackStillImages|length %}
<div class="c-margin-b-40 ">
<div class="c-content-divider c-icon-bg c-bg-blue-3">
<i class="icon-picture c-rounded c-bg-blue-3 c-font-white"></i>
</div>
</div>
<div class="c-body">
{% for row in entry.logReviewer_feedbackStillImages %}
<div class="c-margin-b-80">
<div class="cl-feedbackText c-center c-margin-b-30">{{ row.comment|ucfirst }}</div>
<div class="embed-responsive embed-responsive-4by3 c-center c-margin-b-50">
<img class="embed-responsive-item" src="{{ row.droplrImageLink }}+">
</div>
</div>
{% endfor %}
</div>
{% endif %}