Handling django form views using ajax

Question

I am looking for more elegant way to solve this problem. Say I have say two buttons x, y in main.html:

<input class= "btn-check", name = "options", id="x">
<label class="btn btn-lg btn-info", for="x">x</label>
    
<input class= "btn-check", name = "options", id="y">
<label class="btn btn-lg btn-success", for="y">y</label>

What I want to do is after the button is clicked, I will do something in python and so in django views I will create a view function for each of the buttons (my current implementation):

def funcX(request):
    booleanX = doSomethingforX()
    return JsonResponse({"success": booleanX})

def funcY(request):
    booleanY = doSomethingforY()
    return JsonResponse({"success": booleanY})

and the ajax calls would be:

$("[id='x']").on("click", function(e){
    e.preventDefault();
    
    $.ajax({
        type:"GET",
        url: "{% url 'funcX' %}",           
        success: function(response){
            if(response.success == true){
                //Do something
            }
        }       
    })
});

The ajax call will be the same for button Y.

Now, I was wondering if it is possible to do this with forms? Say the html becomes:

<form method="POST", class="form-group", id="post-form">
    <input type="submit", value="x", class= "btn-check", name = "options", id="x">
    <label class="btn btn-lg btn-info", for="x">x</label>

    <input type="submit", value="y", class= "btn-check", name = "options", id="y">
    <label class="btn btn-lg btn-success", for="y">y</label>

</form>

Then in django views I have a view for the main.html. This way it saves a lot of views written in django.

def main(request):
    
    if request.method == "POST" and request.POST["options"] == "x":
        booleanX = doSomethingforX()
        return JsonResponse({"success": booleanX})
    
    if request.method == "POST" and request.POST["options"] == "y":
        booleanY = doSomethingforY()
        return JsonResponse({"success": booleanY)})
    return render(request, "main.html")

Now the problem is I don't know how to write the ajax calls to receive from views and get the JsonResponse return for X and Y respectively...

Any ideas?

Answer 1

HTML

<form method="POST", class="form-group", id="post-form">
        {% csrf_token %}
        <input type="text" class= "btn-check" name = "options" id="options_input">
        <button type="submit" id="x">X</button>
        <button type="submit" id="y">Y</button>
</form>

JS

$('#x').click(function(){
    $('#options_input').val("X")
})
$('#y').click(function(){
    $('#options_input').val("Y")
})


$('body').on('submit','#post-form',function(e){
e.preventDefault();
var formData = new FormData(this);
$.ajax({
    type:"POST",
    url: "/url/",
    data: formData, 
    success: function(response){
    },
    error: function (response) {
    },
    cache: false,
    contentType: false,
    processData: false
})

});

VIEWS

def main(request):
   if request.method == "POST":
       submitted_type = request.POST.get("options")
       if submitted_type == "X":
         doSomethingforX()
         return JsonResponse({"success": X)})
       else:
         doSomethingforY()
         return JsonResponse({"success": Y)})