如何将 toast 消息添加到提交按钮答案

【问题标题】：How to add toast message to a submit button如何将 toast 消息添加到提交按钮
【发布时间】：2021-03-10 20:58:52
【问题描述】：

我正在尝试在 toast 上显示错误消息。我有一个带有提交按钮的表单，如下所示。我的 html 表单是：

文件.html

<form method="post" enctype="multipart/form-data" >
    <div class="form-group">
      <label>Select Layer Type</label>
      <select class="form-control select2" style="width: 100%;">
       <option value="vector">Vector Layer</option>
      <option value="rasterfile">Raster Image</option>
      </select>
    </div>

    <div class="card-footer"> <button type="submit" class="btn btn-primary toastrDefaultError">Upload File</button></div>       
</form>

而js是

$(function () {
$('.select2').select2()
toastr.error('Error...') // I want to display msg from context instead 
    
})

表单动作是

menu.html

<li class="nav-item ">
  <a href="/fileupload/" class="nav-link">
    <i class="nav-icon fas fa-book"></i>
    <p> File Upload </p>
  </a>
</li>

我的python代码是

文件上传.py

def file_execution(request):
 try:
   #something processing
  except Exception as Er:
      print('Er:',Er)
      context['msg'] = 'Some error occured !!'

  return render(request,'file.html',context)

urls.py

path('fileupload/', fileupload.file_execution, name='fileupload'),

如果我将按钮类型更改为 type="button"，我将获得 toastr。如何将 toastr 消息添加到我的 type="submit" 按钮标签。 menu.html 的 File Upload 菜单的点击渲染 file.html 页面。我想在提交表单时在 toastr 中显示上下文消息

【问题讨论】：

未提供涉及代码，请在表单中添加submit处理程序
表单操作在相同的 url/页面上提交。我已更新问题，将菜单链接添加到表单页面
您提供的代码中没有显示祝酒词的代码
@farvilain 我已经更新了这个问题。我想在 toast 中显示上下文消息。有可能吗？

标签： javascript jquery jquery-plugins toast toastr

【解决方案1】：

你做错了。在这里，您可以通过单击按钮获得祝酒……无论服务器回答什么。不管有没有要求。这不是你想做的。

$(function () {
    $('.toastrDefaultError').click(function() {
      toastr.error('Error...')
    });
})

<button type="submit" class="btn btn-primary toastrDefaultError">Upload File</button>

更改表格以删除吐司

<form method="post" enctype="multipart/form-data" >
    <div class="form-group">
      <label>Select Layer Type</label>
      <select class="form-control select2" style="width: 100%;">
       <option value="vector">Vector Layer</option>
      <option value="rasterfile">Raster Image</option>
      </select>
    </div>

    <div class="card-footer">
      <button type="submit" class="btn btn-primary">Upload File</button>
    </div>       
</form>

在提交时，服务器完成他的工作并给出相同的页面，带有成功消息或错误消息。我将两者都放在示例中，但没有编写代码。

<form method="post" enctype="multipart/form-data" >
    <div class="form-group">
      <label>Select Layer Type</label>
      <select class="form-control select2" style="width: 100%;">
       <option value="vector">Vector Layer</option>
      <option value="rasterfile">Raster Image</option>
      </select>
    </div>

    <div class="card-footer">
      <button type="submit" class="btn btn-primary">Upload File</button>
    </div>
    <p class='errorMsg'>There is an error</p>
    <p class='successMsg'>There is an error</p>
</form>

验证一切正常，然后使用这个 JS

$(function () {
    //Find every errorMsg on the page and toast them
    $('.errorMsg').each( e => {
      const txt = $(e).text();
      toastr.error(txt)
    })
    //Find every successMsg on the page and toast them
    $('.successMsg').each( s => {
      const txt = $(s).text();
      toastr.tost(txt)
    })
})

【讨论】：