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(...