Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/467.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在一个表单中发布多个按钮的Ajax_Javascript_Jquery_Html_Django_Ajax - Fatal编程技术网

Javascript 在一个表单中发布多个按钮的Ajax

Javascript 在一个表单中发布多个按钮的Ajax,javascript,jquery,html,django,ajax,Javascript,Jquery,Html,Django,Ajax,我正在创建一个表单,其中包含Auth和Login按钮,计划在下面分别处理发送OTP和检查OTP是否有效的问题 我使用下面的代码来理解这一点,但当我得到任何按钮时,javascript似乎不起作用,我无法得到任何console.log值。浏览器上没有错误 otplogin.html <div id="otplogin"> <form class="form-horizontal" id="getotp" > {% csrf_token

我正在创建一个表单,其中包含
Auth
Login
按钮,计划在下面分别处理发送OTP和检查OTP是否有效的问题

我使用下面的代码来理解这一点,但当我得到任何按钮时,javascript似乎不起作用,我无法得到任何
console.log
值。浏览器上没有错误

otplogin.html

    <div id="otplogin">
     <form class="form-horizontal" id="getotp" >
          {% csrf_token %} 
            <div class="control-group">
                <label class="control-label" for="username">Username</label>
                <div class="controls">
                    <input type="text" id="username" name="username"  placeholder="Username">
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <button type="submit" value='auth'  class="btn">Auth</button>
                </div>
            </div>
        <div class="control-group">
            <label class="control-label" for="otp">OTP</label>
            <div class="controls">
                <input type="otp" name="otp" id="otp" placeholder="OTP">
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                <button type="submit" value='login'  class="btn">Login</button>
            </div>
        </div>
        </form>
    </div>
<script type="text/javascript">
(function () {  //the browser said the '$' as in the linked answer can not be recognized
$("#getotp btn").click(function (ev) {
        ev.preventDefault() 
        if ($(this).attr("value") == "auth") {
            console.log("CHECK 1");
            $.ajax({
                type:'POST',
                url:'/getotp2',
                data:{
                    username:$('#username').val()
                    ,csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()
                },
                success: function server_response(response) {
                console.log('POST1 success')
                }
            });
        }
        else if ($(this).attr("value") == "login") {
            console.log("CHECK 2");
            $.ajax({
                type:'POST',
                url:'/otplogin',
                data:{
                    username:$('#username').val(),
                    otp:$('#otp').val(),
                    csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()
                },
               success: function server_response(response) {
                console.log('POST2 success')
                }
            });
        }
    });
});

</script>

感谢您在这方面的帮助

您的选择是错误的:

(function(){
$("#getotp btn").click(function (ev){...});}
改为:

$(document).ready(function(){
$(".btn").click(function(ev){...});});

$(document).ready(function(){
$(".btn").click(function(ev){...});});
$("#getotp .control-group .controls .btn").click(...