Append a placeholder value to a text input field when form is submitted

Question

I have a Matrix field in my Craft control panel which contains content which creates a front end form. If the form field has a placeholder text entered in my Matrix field, I would like that text to be submitted along with the user's text input.

If the user entered "100" in the front end form text input field, and my placeholder text is "bpm", the result I would like submitted is: "100 bpm".

Here's my text input field form code:

<input type="{{ row.inputType }}" name="{{ block.fieldName }}" class="gui-input" placeholder="{{ row.label }}">

Here's a screenshot of my Matrix field:

Here's a screenshot of my front end form:

I tried adding a hidden input field below the text input field but the problem I ran into is that all placeholder text is submitted regardless of whether the user actually filled out a field.

<input type="hidden" name="{{ block.fieldName }}" value="{{ row.label }}">

So let's say that the user filled out the "fetal heart rate" text field but did not fill out the "estimated gestational age". Using the hidden text field both "bpm" and "weeks" is submitted even if the user didn't fill out the "estimated gestational age" field.

Summary of my question: Is there a way to conditionally append a value along user text input? Example, if the user entered "100" for "fetal heart rate" in the front end form text input field, and my placeholder text is "bpm", the result I would like submitted is: "100 bpm". If he skipped filling out any other text input fields then no additional values are submitted (like "weeks").

Answer 1

You could either do this the JavaScript way (listen to onSubmit, grab DOM values, append if necessary, otherwise remove), or the PHP way (from a plugin).

I'll pseudocode the latter because I hate the former.

1. Generate a Craft plugin.

2. Have it listen for the onBeforeSaveEntry event.

3. Inside that event listener, you can check if the entry being saved belongs to the section you're interested in.

4. If so, check your Fetal Heart Rate field.

5. If its value is "bpm", set it to null or an empty string.

6. If it's anything other than "bpm", append " bpm" to its existing value.

7. Repeat 4-6 for the "Estimated Gestational Age" field.

8. Bob's your uncle.