具有两种功能的 Django 应用程序按钮 [重复]答案

【问题标题】：Django app button with two functionalities [duplicate]具有两种功能的 Django 应用程序按钮 [重复]
【发布时间】：2021-07-25 11:54:08
【问题描述】：

我正在构建一个 Django 应用程序，在其中一个 HTML 表单上，我有一个提交按钮，单击该按钮会在 views.py 中运行一个函数。

<input type="submit" id="senden" class="inputfiles"/>
<button for="senden" class="button" id="weiter_btn" >Submit</button>

但我希望它首先在客户端运行一个 javascript 函数，然后继续运行 views.py 中的函数。我尝试将 onclick 添加到按钮元素，但没有奏效。

<input type="submit" id="senden" class="inputfiles"/>
<button for="senden" onclick="example()" class="button" id="weiter_btn" >Submit</button>

我是否应该创建另一个运行 js 函数的隐藏按钮，然后以某种方式将其连接到提交按钮？

更新：

我已经尝试了this 帖子的第一个解决方案。现在它运行 javascript 函数，但它不会继续运行 .py 中的函数。这是js脚本：

<div>
        
        <script>
            var ocr = function(event){
                event.preventDefault();

                Tesseract.recognize(
                    document.getElementById('imgde').src,
                    'deu',
                    { logger: m => console.log(m) }
                ).then(({ data: {text}}) => {
                    console.log(text);
                    document.getElementById('txt_voc_de').innerHTML = ['<input type="hidden" name="txt_voc_de" id="txt_voc_de" value="',text, '"/>'].join('');
                })

                Tesseract.recognize(
                    document.getElementById('imgen').src,
                    'eng',
                    { logger: m => console.log(m) }
                ).then(({ data: {text}}) => {
                    console.log(text);
                    document.getElementById('txt_voc_en').innerHTML = ['<input type="hidden" name="txt_voc_en" id="txt_voc_en" value="',text, '"/>'].join('');
                })
                
                
   
                
            };

            var form = document.getElementById("imgForm");
            form.addEventListener("submit", ocr, false);
        </script>
        <input type="submit" id="senden" class="inputfiles" />
        <button for="senden" class="button" id="weiter_btn" >WEITER</button>
        {% csrf_token %}
        </div>

【问题讨论】：

标签： javascript html django

【解决方案1】：

您可以使用 preventDefault() 运行 onsubmit 函数，然后在 JavaScript 函数中调用 .py ，无论您想要在它之前做什么。

类似这样的：

<script>
     function beforeSubmit(event){
        event.preventDefault();
        
        //your before submit logic       
        document.getElementById("myForm").submit(); 
    }
</script>
<input type="submit" value="Click" onsubmit="beforeSubmit();" />

【讨论】：

感谢您的快速答复。我尝试了你的建议，但不知何故它不起作用。它只是调用 .py。