how to submit html form data to django server and display output in real time using ajax

Question

I need to be able to implement a form submit and display like this. My html form does not have a submit button, i'm using jquery to detect onchange event in each input fields then submit the form data. The goal is to have the output of the calculation updated in real time as the user types in the second form input field.

Have done research however haven't found any article or similar implementation as this referenced in the link.

Issues:

My ajax code currently is able to submit form data, but it forces user to click somewhere else in the page in order for the form data to be submitted and output to display automatically.(Again not as expected behavior)

The httpresponse from django view prints the raw output in a blank white html tab.

The calculation is being handled by a python function back-end. How can i trick my code to have the same behavior as the one referenced in the link.

my template and jquery ajax so far:

{% extends "base.html" %}
{% block title %}Two Way True Odd Finder{% endblock %}
{% block content %}
<script type="text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    
      
      $("#Odd1").on("change",function(){
        if($("#Odd2").value !== "") {
           $("#Odd2").on("change", function(){

             $('#myform').submit()


             $.ajax({
            type: "GET",
            url: "{% url 'two_way_calc' %}",
            datatype: "json",
            success: function(data){
              console.log(data)
              // update DOM element with my view returned data
            }
          });


           });

        }
   });

 
  
  });

</script>



    <div class="container m-5">

      <a href="{% url 'dashboard' %}" class="btn btn-primary">Dashboard Home</a>

      <a href="{% url 'index' %}" class="btn btn-primary">3  Way True Odds Finder Calculator</a>

        
    </div>



<div class="container m-5 text-justify">
    <div class="row">
      <div class="col-4">
        <form action="" method="post" id="myform">
          {% csrf_token %}
          <div class="mb-3">
              <label for="Odd1" class="form-label">Odd 1</label>
              <input type="number" class="form-control" name="odd1" id="Odd1" min=" " value=" " step=".001" required='required'>
            </div>
          <div class="mb-3">
            <label for="Odd2" class="form-label">Odd 2</label>
            <input type="number" class="form-control" name="odd2" id="Odd2" min=" " value=" " step=".001" required='required'>
          </div>
         
          <!--<button type="submit" class="btn btn-primary">Submit</button>-->
          
        </form>

my django view

def two_way_calc(request):
    if request.method == 'POST':
        odd1 = float(request.POST.get('odd1'))
        odd2 = float(request.POST.get('odd2'))

        func_def = odd_finder_true_2(odd1, odd2)

        context = {
            'Juice': func_def['Juice'],
            'TotalImpliedProbability': func_def['TotalImpliedProbability'],
            'HomeOdd': func_def['HomeOdd'],
          
            'AwayOdd': func_def['AwayOdd'],
            'Home_True_Odd': func_def['Home_True_Odd'],
           
            'Away_True_Odd': func_def['Away_True_Odd'],
            'True_Probability': func_def['True_Probability'],
            'Home_implied_probability': func_def['Home_implied_probability'],
            
            'Away_implied_probability': func_def['Away_implied_probability'],
            'Inverted_Probability': func_def['Inverted_Probability'],
            }
        # return render(request, 'three_way_temp.html', context)
        return JsonResponse(context)
    else:
        return render(request, 'three_way_temp.html', {})

url py code

urlpatterns = [
    path('', views.index, name='index'),
    path('two_way_calc/', views.two_way_calc, name='two_way_calc'),
]

python function

def odd_finder_true_2(first_odd, second_odd):
    home_implied_probability = round((100/first_odd), 2)
    away_implied_probability = round((100/second_odd), 2)
    
    total_implied_probability = home_implied_probability + away_implied_probability
    
    
    inverted = (100/total_implied_probability) * 100
    
    juice = total_implied_probability - inverted

    hundred_odd_home = total_implied_probability/home_implied_probability
    hundred_odd_away = total_implied_probability/away_implied_probability
    prob_true = 1/(round(hundred_odd_home, 2)) + 1/(round(hundred_odd_away, 2))
    
    my_dict_two = {
        'Juice': round(juice, 2),
        'TotalImpliedProbability': round(total_implied_probability, 2),
        'HomeOdd': first_odd,
        'AwayOdd': second_odd,
        'Home_True_Odd': round(hundred_odd_home, 2),
        'Away_True_Odd': round(hundred_odd_away, 2),
        'True_Probability': round(prob_true, 1),
        'Home_implied_probability': home_implied_probability,
        'Away_implied_probability': away_implied_probability,
        'Inverted_Probability': round(inverted, 2)

    }
    
    
    return my_dict_two

Answer 1

You should use the keyup event type instead of change

According to the JQuery documentation

The change event is sent to an element when its value changes. This event is limited to elements, boxes and elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.

Kindly accept it as answer if it works for you, thanks!