Question

我正在使用Django创建一个表单，用户必须输入他们的电子邮件才能在将来收到通知。我添加了一个js函数来处理提交表单，因为我想显示一个模态。

点击提交表单的行为符合预期，当我按Enter键时，它没有。

这是处理表单的视图：

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { PostService } from './post.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
})


export class LoginComponent {
  data:any;

  constructor(private router:Router ,private MyService: PostService){ }

 checkByCredential(username: string, password: string) 
 {
   this.MyService.checkByCredential(username, password)
      .subscribe(users => {
           if(users)
              this.router.navigate(['homepage/home']);
           else
              console.log(users) //or do somethings else
      });        
  }
}

表单的html代码如下：

def add_notify_email(request):
    if request.method == "POST":
        form = NotifyEmailForm(request.POST)
        if form.is_valid():
            form.save(commit=True)
            return JsonResponse({"status": "success"})
        else:
            return JsonResponse({"status": "error"})
    else:
        form = NotifyEmailForm()
    return render(request, "landing/home.html", {"form": form})

单击按钮<form action="{% url "notify:notify_email_add" %}" method="post" id="notify_email_form_in_hero"> {% csrf_token %} <div class="form-group row"> <div class="col-sm-10 input-group" id="email_input_in_hero"> <div class="input-group-addon" id="coming_soon_email_icon_in_hero"><i class="fa fa-envelope fa fa-2x" aria-hidden="true" id="email_icon_in_hero"></i></div> <input class="form-control" type="email" name="email" onkeypress="if(event.keyCode === 13){addNotifyEmailInHero()}" placeholder="If you want to get notified when we go live, please enter your email...." maxlength="255" required id="id_email"/> </div> <div class="col-sm-2" id="notify_email_button_in_hero"> <button type="button" class="btn btn-block btn-primary" onclick="addNotifyEmailInHero()" id="submit_notify_email_in_hero"><i class="fa fa-bell nav-icon" aria-hidden="true"></i>Notify Me</button> </div> </div> </form> <script src="coming_soon.js"></script>时，将执行脚本submit_notify_email_in_hero：

coming_soon.js

单击按钮可以完美地完成表单，当您按Enter键提交时，会出现问题。

如果按Enter键，根据我的理解，函数function addNotifyEmailInHero(e){ var notifyEmailForm = $("#notify_email_form_in_hero"); var thanksModal = $("#thanks"); $.ajax({ type: 'POST', url: '/notify-email/add/', data: notifyEmailForm.serialize(), success: function(res){ alert(res.status); if(res.status === "success") { thanksModal.modal('show'); } else {$("#id_email").val(""); $("#id_email").attr("placeholder", "Please Enter A Valid Email Address"); } } })} $("#id_email").keyup(function (e) { if (e.which === 13) { addNotifyEmailInHero(); }});被执行但不是获取json响应并处理它，它只显示它：addNotifyEmailInHero

更新

我遵循了geebro的回答，除了建议的更改外，其他所有内容都是如此。这是通过HTML代码：

{"status": "success"}

它似乎有用，虽然我收到了额外的帖子请求：

<div class="container" id="notify_email_container_in_hero">
    <form onsubmit="addNotifyEmailInHero()" method="post" id="notify_email_form_in_hero">
        {% csrf_token %}
        <div class="form-group row">
            <div class="col-sm-10 input-group" id="email_input_in_hero">
                <div class="input-group-addon" id="coming_soon_email_icon_in_hero"><i class="fa fa-envelope fa fa-2x" aria-hidden="true" id="email_icon_in_hero"></i></div>
                <input class="form-control" type="email" name="email" placeholder="If you want to get notified when we go live, please enter your email...." maxlength="255" required id="id_email"/>
            </div>
            <div class="col-sm-2" id="notify_email_button_in_hero">
                <button type="submit" class="btn btn-block btn-primary" id="submit_notify_email_in_hero"><i class="fa fa-bell nav-icon" aria-hidden="true"></i>Notify Me</button>
            </div>
        </div>
    </form>
</div>

<script src="{% static "landing/js/coming_soon.js" %}"></script>

Answer 1

更改您的

@Where(clause = "status <> 'D'")

到

<button type="button" class="btn btn-block btn-primary" onclick="addNotifyEmailInHero()" id="submit_notify_email_in_hero"><i class="fa fa-bell nav-icon" aria-hidden="true"></i>Notify Me</button>

并将初始表单标记更改为

            <button type="submit" class="btn btn-block btn-primary"  id="submit_notify_email_in_hero"><i class="fa fa-bell nav-icon" aria-hidden="true"></i>Notify Me</button>

它应该工作

在表单中按Enter键不会正确执行js功能

1 个答案: