How to add toast message to a submit button

Question

I am trying to show error messages on toast. I have a form with a submit button as below. my html form is:

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

And js is

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

The form action is

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>

My python code is

fileupload.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'),

If I change the button type to type="button", I will get the toastr. How can I add toastr message to my type="submit" button tag. The click on File Upload menu of menu.html render file.html page. I want to show the context message in the toastr on submitting the form

Answer 1

You're doing it wrong. Here you get a toast on button click... no matter what the server answer. No matter if there is a request. This is not what you want to do.

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

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

Change the form to remove the toast

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

On submitting, the server do his job and give the same page, with a success message or an error message. I put both in the example but don't code that.

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

Verify everything works correctly, then use this 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)
    })
})