Create song submission form

[honboey]

Start with user entering a song title and having it display on the frontend. Don't worry about connecting to the Spotify API just yet.

And don't worry about validating it just yet.

Then build ability to delete your previous entry.

Let's try and do this without writing to the db.

[honboey]

This might help

To achieve this behavior in your Django app with two forms, you can follow these steps:

1. Create a temporary object in memory to hold the data from the form submissions, but don't save it to the database.

2. After processing the form submissions and displaying the temporary object on the page, provide a "Reset" button or link that clears the temporary object and reloads the page.

Here's a high-level example of how you can implement this:

# views.py
from django.shortcuts import render, redirect
from .models import TemporaryObject
from .forms import Form1, Form2

def your_view(request):
    if request.method == 'POST':
        form1 = Form1(request.POST)
        form2 = Form2(request.POST)

        if form1.is_valid() and form2.is_valid():
            # Create a temporary object with form data but don't save it to the database
            temp_object = TemporaryObject(data_field=form1.cleaned_data['data_field'], other_field=form2.cleaned_data['other_field'])

            # Render the page with the temporary object
            return render(request, 'your_template.html', {'temp_object': temp_object, 'form1': form1, 'form2': form2})

    else:
        form1 = Form1()
        form2 = Form2()

    return render(request, 'your_template.html', {'form1': form1, 'form2': form2})

def reset_view(request):
    # Handle resetting the temporary object and redirect back to the main page
    if request.method == 'POST':
        # Clear the temporary object
        TemporaryObject.objects.all().delete()

    return redirect('your_view_name')  # Replace 'your_view_name' with the actual name of your view

In this example, TemporaryObject is a model that you can create to temporarily store the data from the forms in memory. The reset_view function allows users to reset the temporary object by clicking a "Reset" button or link, which clears any existing temporary objects and redirects back to the main page.

Remember to replace 'your_template.html' and 'your_view_name' with your actual template and view names. Also, customize the fields and validation logic for your forms accordingly.

[honboey]

And this was a how you reset the view 🪟 n refresh

Refreshing a page typically repeats the last request sent to the server, so if you want to reset the view when a user refreshes the page, you can use a combination of session data and JavaScript.

Here's a high-level approach:

1. When a user submits the form and you display the object on the page, store a flag in the session indicating that the form has been submitted successfully.

2. On the page, use JavaScript to check for the session flag when the page loads. If the flag is set, clear it and reset the form.

3. You can use Django's built-in session framework to store and retrieve the flag.

Here's some code to illustrate this approach:

In your Django view:

# views.py
from django.shortcuts import render, redirect

def your_view(request):
    form_submitted = request.session.get('form_submitted', False)

    if request.method == 'POST':
        # Process the form submission
        # ...

        # Set the session flag to indicate form submission
        request.session['form_submitted'] = True

    return render(request, 'your_template.html', {'form_submitted': form_submitted})

def reset_view(request):
    if request.method == 'POST':
        # Clear the session flag
        request.session.pop('form_submitted', None)

    return redirect('your_view_name')  # Replace 'your_view_name' with the actual name of your view

In your template (JavaScript section):

<!-- your_template.html -->
<script>
    // Check if the form was submitted on page load
    const formSubmitted = {{ form_submitted|default:"False" }};

    // Reset the form and clear the session flag if it was submitted
    if (formSubmitted) {
        // Add JavaScript code to reset your forms
        // For example, you can clear input fields or reset form data.

        // Then, use an AJAX request to reset the session flag
        fetch("{% url 'reset_view_name' %}", {
            method: 'POST',
            headers: {
                'X-CSRFToken': '{{ csrf_token }}',
            },
        })
        .then(response => {
            // Handle the response if needed
        })
        .catch(error => {
            console.error('Error resetting session flag:', error);
        });
    }
</script>

In this approach, when the user refreshes the page, the JavaScript code will check if the session flag is set. If it is, it will reset the form and clear the session flag using an AJAX request to the reset_view. This way, the view is effectively reset upon a page refresh if the form has been submitted previously.