Frontend form and save to mysql

Need Help
#1

Hi! I’ve been trying hundreds of ways to creat a frontend form, capture data and save to mysql but nothing works, is there any tutorial I can follow?

#2

Hi,

give an example of what you tried.

#3

I started with the Watch and Learn videos, those are great tutorials for most topics:

Maybe this helps

1 Like
#4

Hi!

I finally made the plugin and it is working, but now I’ve spent days trying to upload multiple files with no luck, these are my codes:

MyForm.php (component):

<?php

namespace Imaginacion\Emotionalabc\Components;

use Cms\Classes\ComponentBase;
use Imaginacion\Emotionalabc\Models\MyModel;
use Illuminate\Support\Facades\Response;
use Illuminate\Support\Facades\Request;

class MyForm extends ComponentBase
{
    public function componentDetails()
    {
        return [
            'name' => 'My Form',
            'description' => 'Form to save data to MySQL',
        ];
    }

    public function onSave()
{
    $userId = post('user_id');

    $fieldData = post();

foreach ($fieldData as $fieldName => $fieldValue) {
    if (strpos($fieldName, 'file_id_') !== false) {
        $index = substr($fieldName, strlen('file_id_'));
        $contentFieldName = 'content_' . $index;

        $fileId = $fieldValue;
        $content = $fieldData[$contentFieldName];

        $data = new MyModel;
        $data->user_id = $userId;
        $data->file_id = $fileId;
        $data->content = $content;
        $data->save();
    }
}
    // Optional: Return a success message
    \Flash::success('Data saved successfully!');

	// Generate the success message
        $message = 'Data saved successfully!';
        
        // Check if the request is an AJAX request
        if (Request::ajax()) {
            // Prepare the response as JSON
            return Response::json([
                'success' => true,
                'message' => $message
            ]);
        }
        
        // Otherwise, return the success message
        return $message;
}
}

Model:

<?php

namespace Imaginacion\Emotionalabc\Models;

use Model;

class MyModel extends Model
{
    protected $table = 'form_data'; // Replace 'form_data' with your actual table name

    protected $fillable = ['user_id', 'field_id', 'content', 'file_name', 'file_path']; // Add the new fields
}


Form:
<form id="myForm" data-request="myForm::onSave" enctype="multipart/form-data">
   <input type="hidden" name="user_id" value="USER_ID_VALUE">
   
   
   <!-- Set 1 -->
   <input type="hidden" name="file_id_1" value="file_id_1" placeholder="File ID 1" required>
   <input type="text" name="content_1" placeholder="Content 1" required>

   <!-- Set 2 -->
   <input type="hidden" name="file_id_2" value="file_id_2" placeholder="File ID 2" required>
   <input type="text" name="content_2" placeholder="Content 2" required>

   <!-- Set 3 -->
   <input type="hidden" name="file_id_3" value="file_id_3" placeholder="File ID 2" required>
   <input type="text" name="content_3" placeholder="Content 3" required>

   <!-- Add more sets as needed -->
   <input type="file" name="files[]" multiple>

   <button type="submit">Save</button>
</form>

<div id="successMessage" style="display: none;"></div>

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(document).on('submit', '#myForm', function(event) {
    event.preventDefault(); // Prevent the default form submission
    
    var $form = $(this);
    var formData = $form.serialize(); // Get the form data
    
    $.request('onSave', {
        data: formData,
        success: function(data) {
            if (data.success && data.message) {
                // Display the success message
                var customMessage = "Custom success message";
var $successMessage = $('#successMessage');

$successMessage.text(customMessage).show();

                
               
                
                // Optional: Hide the form
                $form.hide();
            }
        },
        error: function(data) {
            // Handle any errors, if needed
        }
    });
});
</script>
{% framework extras %}{% component 'myForm2' %}

The idea is to save the file path(s) in the database “contents”.

Is there any way you could help me?

Regards.

#5

Create form with this:

You dont need import jquery a then using ajax. Form have attribute data-request to call native ajax in octobercms.

This call in page:
{% framework extras %} - layout obviously no in component
{% component ‘myForm’ %} - layout, pages or partials in EDITOR no from COMPONENT

Your form could look like this:

TWIG:
{{ form_ajax(__SELF__ ~'::onSave',{'data-request-files':'data-request-files','id':'myForm'}) }}

.... look at documentation for fields .... 

{{ form_submit('Save',{'class': 'btn btn-primary'}) }}

{{ form_close() }}

For Messages:

For UploadFiles:

1 Like