I would like to make form fields submit a multi line text
For example this woul return:
This:
Last sticker 1234 miles 8888
Reading Brake rr1 lr5 Tire rr1 lr2
text about repairs
Is this possible?
Hi Rodney, what part are you having trouble with? It's not really clear in your post.
Combining the output and stacking them as one text entry
You can do that by Binding a Dynamic Value for the text area using the inputs from your form as the values for the text area but they won't be stacked as a standard text area will just be one continuous string as such;
Example:
<form id="inspecionForm" is="dmx-serverconnect-form" method="post">
<input id="date" name="date" type="date" class="form-control" placeholder="Inspection">
<input id="miles" name="miles" type="text" class="form-control" placeholder="Miles">
<input id="brakes" name="brakes" type="text" class="form-control" placeholder="Brakes">
<input id="tyre" name="tyre" type="text" class="form-control" placeholder="Tyres">
<textarea id="details" class="form-control" dmx-bind:value="'Inspection: '+date.value+', Miles: '+miles.value+', Brakes: '+brakes.value+', Tyres: '+tyre.value+'.'" dmx-bind:readonly="" name="details"></textarea>
</form>
Thanks for the breakdown. I was hoping for the formatted version, i have been trying it out
So what is the issues to format the values as you wish in the server action, where you store the value?
You mean like this?
Sorry but your request is open to multiple interpretations. Do you want it to be displayed from a Server Action that contains the results from a database query (you will need to supply us details of its output for that) or from the form inputs echoed below the form to display as text?
To achieve the above output here is the example:
<form id="inspecionForm" is="dmx-serverconnect-form" method="post">
<input id="date" name="date" type="date" class="form-control" placeholder="Inspection">
<input id="miles" name="miles" type="text" class="form-control" placeholder="Miles">
<input id="brakes" name="brakes" type="text" class="form-control" placeholder="Brakes">
<input id="tyre" name="tyre" type="text" class="form-control" placeholder="Tyres">
<textarea id="details" class="form-control" name="details" placeholder="Inspection details"></textarea>
</form>
<div class="row rounded border bg-secondary-subtle mt-3 pt-3 pb-2 ps-2 pe-2">
<div class="col text-dark lead">
<p><span class="fw-bold">Inspection</span>: {{inspecionForm.date.value}}</p>
<p><span class="fw-bold">Miles</span>: {{inspecionForm.miles.value}}</p>
<p><span class="fw-bold">Brakes</span>: {{inspecionForm.brakes.value}}</p>
<p><span class="fw-bold">Tyres</span>: {{inspecionForm.tyre.value}}</p>
<p><span class="fw-bold">Details</span>: {{inspecionForm.details.value}}</p>
</div>
</div>Using the design interface in Wappler (and not hand coding)
I combined the data I want to output into 3 seperate post files
lastInsp
Readings
Repairs
Then, in my insert action I use them as below for the value
but it ends up on one line.
I will try the code interface and the suggested formats
I want it to appear that way in the insert action of the database rather than one line
That is a terrible idea and quite bad practice. You should format the output and not the input (or store html and again this will be flattened to a single line and full of html syntax as the database won't interpret it so you'll still have a single line but full of html). May I ask why you want to format the insert? I don't understand the reason behind this? The column within the database will still be a single line but will have '\n' (used for each line break) throughout it (or if storing html as mentioned above it will still be a mess to anyone who doesn't know what it is). You should store each input to its own column in the database and then format them on the page for display to the User after the query is returned.
I have a database with years of history and long paragraph text of maintenance done. We're adding inspections which need to have certain foeld so I'm trying to make a form that inserts the required info into the database in paragraph format
Can I use JavaScript to format a text area input as a paragraph for storing to a database, is this bad practice, and what are the consequences of doing this or the possible issues I will face?
Yes, you can use JavaScript to format a <textarea> input as a paragraph before storing it to a database, but whether it's good practice or not depends on your intent and implementation.
Possible Valid Use Cases (Good Practice)
If your goal is to:
- Clean or normalize user input (e.g., trimming whitespace, fixing line breaks)
- Enhance readability before saving
- Preserve intended formatting (like paragraph breaks using
<p>tags or<br>)
...then using JavaScript as a first step in the formatting pipeline is acceptable, especially if complemented by server-side validation and sanitation.
Potential Issues and Bad Practices
Here are some consequences or problems you could face:
1. Client-side only = insecure
- JavaScript runs on the client; users can tamper with it or bypass it entirely.
- If you only format or sanitize input with JS and then blindly store it, you're vulnerable to XSS attacks, SQL injection (if you use raw SQL poorly), or invalid data.
Fix: Always sanitize and validate input on the server before storing.
2. Inconsistent formatting
- Not all browsers behave the same with JS string formatting.
- Newlines (
\n) may not translate the same way across systems (Windows uses\r\n, Unix uses\n).
Fix: Normalize line endings and test behavior across platforms.
3. Data loss or corruption
- Over-aggressive formatting (e.g., stripping all line breaks or replacing with HTML tags) could distort the user's intended input.
- Mistakes in JS logic can unintentionally truncate or modify meaningful data.
Fix: Be careful with transformations. Store raw input as-is, then optionally process a display version.
4. Encoding issues
- If JavaScript introduces HTML entities or character encodings (like replacing
&with&), the stored data might not render as expected when retrieved.
Fix: Ensure consistent encoding practices (e.g., store raw text, and encode only when rendering in HTML).
Best Practice Recommendations
- Let users type freely in the
<textarea>. - Use JavaScript only for UI enhancements, like showing previews or helping with formatting (e.g., Markdown or rich text).
- Store the raw input or a clean version on the server.
- Always sanitize and encode content server-side before displaying it, especially if it’s rendered as HTML.
I'd really consider the alternatives to the approach you are attempting to undertake... Best practice is to go with the default behavior for saving a text area to the database. Anything else you do is your choice but is not supported in Wappler natively (and for good reason) so you will have to employ your own solution using JavaScript. The above is the response from ChatGPT. There are multiple risks in what you are trying to achieve. Please consider those risks very carefully before continuing on that path.
do it server side on your server connect. Set a variable, then add the fields to the variable formatted the way you want them, then in the database insert, add the variable as the value for the DB insert and not the POST variables.
1 Like
Make sure the expression is something like $_POST.LastInsp + "\n" + $_POST.Readings + "\n" + $_POST.Repairs when inserting it in the database.
When displaying them in a HTML page you will not see the newlines, you will need to place it in a <pre> tag, style it using css as preformatted text or encode it as html by replacing the \n with <br>.
1 Like
For some stupid reason I assumed (incorrectly) that you for some reason wanted to do this Client side... I apologise @rokit