Как динамически отправлять значения ввода формы с помощью события OnChange, используя JQuery в django

В настоящее время я разрабатываю простой калькулятор для определения истинного коэффициента, используя python, django и jquery. Мне нужно иметь form input submit actions executed by jQuery, когда пользователь вводит входные значения. Цель состоит в том, чтобы избавиться от submit buttons во фронтенде html. В настоящее время веб-приложения, основанные на калькуляторах, не требуют кнопок отправки. Функциональное поведение должно выглядеть как здесь. Я провел исследование и выяснил, что мне нужно использовать JQuery. После реализации функциональности в моем приложении, я могу ввести первый элемент ввода формы, однако при нажатии на второй элемент ввода формы, чтобы начать вводить текст, мое приложение аварийно завершает работу с server error 500, если я вернусь назад и введу второй элемент ввода формы, он обновит вывод.

Как я могу реализовать ввод формы onChange с помощью jquery, чтобы соответствовать приведенной выше функциональности.

Мой шаблон и код JQuery

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)
    else:
        return render(request, 'three_way_temp.html', {})

Функция Python, стоящая за расчетом

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

Итак, есть несколько вещей, которые я должен сказать перед вашим ответом

Прежде всего, лучше использовать AJAX вместо submit вашей формы, потому что AJAX предотвращает перезагрузку страницы, и с его помощью вам не нужно отправлять полный http-запрос и получать полный ответ. Он только отправит необходимую информацию на сервер и получит точный ответ, а js поможет вам внедрить эти данные в вашу страницу

Во-вторых, вам не обязательно нужен jQuery, вы можете делать то, что хотите, на чистом js, используя fetch API, однако jQuery - это тоже вариант

Теперь ответ

5xx Ошибки являются ошибками на стороне сервера и спасибо, что вы прислали свой полный код, я могу показать вам ошибку

Итак, проблема в том, что когда вы запускаете событие submit, вы изменяете один вход, и это вызывает отправку вашей формы,

НО, ЧТО НАСЧЕТ ВТОРОГО ВХОДА?

у него нет значения, и поэтому ваш сервер не может правильно выполнить вычисления

Как это исправить? Это зависит от вашего алгоритма, если вы можете найти значение по умолчанию, которое должно быть установлено на втором входе, это может решить проблему. Или Вы можете проверить это в коде jQuery

$(".form-control").on("change",function(){
    if($("Odd2").value !== "") 
        $('#myform').submit()
}) ;

Также код jQuery, который вы написали, правильный, но он может быть лучше

Вы используете событие change, которое срабатывает после изменения значения и когда пользователь покинул вход (blur event)

Вы получите лучший и более живой результат, используя input событие

$(".form-control").on("input",...)
Вернуться на верх