How to workaround using quotation marks in Bubble input forms - Find and Replace text

Hey there! If you're building an application with Bubble and using Xano for your backend, you may run into a situation where your users input data with double quotation marks (`"`), which can cause issues when parsing JSON. Don't worry, though! We've got a simple solution to handle this and ensure your data is stored correctly.

Step 1: Set Up a Find and Replace Action in Bubble

In your Bubble workflow, create an action that finds and replaces the double quotation marks with a different character or set of characters that are unlikely to be used by your users. For example, you can replace `"` with ``.

Here's how you can set this up:

1. In your Bubble workflow, add a new action.
2. Set the action to modify the value of your input field.
3. Click on the value field and select "Find and replace text."
4. In the "Find" field, enter `"` (double quotation marks).
5. In the "Replace with" field, enter `` (two asterisks).

This action will replace any double quotation marks in your input field with two asterisks before sending the data to your Xano API.

Step 2: Transform the Data Back to Double Quotation Marks in Xano

Now that we've replaced the double quotation marks with asterisks in Bubble, we need to transform them back to double quotation marks in Xano before storing the data.

1. In your Xano workspace, open the API endpoint where you're receiving the data from Bubble.
2. Find the function that handles the incoming data (e.g., `addRecord`).
3. Add a "Replace" filter to this function.
4. In the "Search for" field, enter `` (the characters you used in Bubble to replace the double quotation marks).
5. In the "Replace with" field, enter `"` (double quotation marks).

This filter will replace the asterisks (or whatever characters you used) with double quotation marks before storing the data in your Xano database.

Step 3: Test Your Solution

Now that you've set up the find and replace actions in both Bubble and Xano, it's time to test your solution.

1. Go to your Bubble application and enter some text in the input field, including double quotation marks.
2. Submit the form and check your Xano database.

You should see that the double quotation marks are correctly stored in your database, even if the user entered them in the input field.

And that's it! By following these steps, you can easily handle double quotation marks in JSON data when working with Xano and Bubble. This solution ensures that your users' input is stored correctly, regardless of whether they use double quotation marks or not.

Remember, this solution can be adapted to handle other special characters or formatting issues that may arise when working with user input and JSON data. The key is to find a character or set of characters that are unlikely to be used by your users and replace the problematic characters with them before sending the data to your API.

Happy building!