Необходимо показать результат на той же странице - Django

Я создаю приложение для генератора паролей. Приложение работает и сохраняет значение в db.

Проблема в том, что всякий раз, когда я обновляю форму, она заново отправляется и принимает предыдущее значение и сохраняет его.

Кроме того, я хочу показывать email и пароль на одной странице.

При каждом обновлении я хочу показывать пустую форму с пустыми полями.

Views.py

def home(request):
    if request.method=='POST':
            inputemail = request.POST.get('InputEmail')
            gen = ''.join(random.choices((string.ascii_uppercase+string.ascii_lowercase+string.digits+string.punctuation), k=10))
            newpass = Item(email=inputemail,encrypt=gen)
            newpass.save()
            return render(request,'home.html',{"gen":gen})
        
    
    return render(request,'home.html',{})

Home.html

<form method = 'post' id='pass-form' >
    {% csrf_token %}
    <div class="mb-3">
      <label for="exampleInputEmail1" class="form-label">Email address</label>
      <input type="email" class="form-control" name="InputEmail" >
      <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
    </div>
    
    <button type="submit" name = "submit" class="btn btn-primary">Generate Password</button><br><br>
  </form>
  
    <div class="mb-3">
        <label for="exampleInputPassword1" class="form-label">Generated Password</label>
        <input type="text" id="InputPassword" name = "genpassword" value = {{gen}} >
      </div>

Urls.py

urlpatterns = [
    path('',views.home,name='home'),
]

Согласно документации:

вы всегда должны возвращать HttpResponseRedirect после успешной работы с данными POST. Этот совет не относится к Django; это хорошая практика веб-разработки в целом.

.

Так что нужно сделать другую страницу для показа сгенерированного пароля, которая будет открываться по id экземпляра модели Item, созданной в представлении так:

def home(request):
    if request.method=='POST':
        inputemail = request.POST.get('InputEmail')
        gen = ''.join(random.choices((string.ascii_uppercase+string.ascii_lowercase+string.digits+string.punctuation), k=10))
        newpass = Item(email=inputemail,encrypt=gen)
        newpass.save()
        return redirect('success', args=(newpass.pk))
       
    return render(request,'home.html',{})

def success(request, pk):
    item_obj = get_object_or_404(Item, pk=pk)
    return render(request,'success.html', {'gen':item_obj.encrypt})

urls.py

urlpatterns=[
    path('',views.home,name='home'),
    path('success/<int:pk>/',views.success,name='success')
]

success.html

<body>
    <h2>The form  is successfully submitted.</h2>
    <br> 
    <div class="mb-3">
            <label for="exampleInputPassword1" class="form-label">Generated Password</label>
            <input type="text" id="InputPassword" name="genpassword" value={{gen}} >
    </div>
    
    <a href="{% url 'home' %}"> Again go to password generator page.</a>
</body>


Другое возможное решение

Вы можете сделать поле электронной почты required в Html форме и затем жестко обновить страницу после отправки формы, используя событие Javascript submit таким образом, чтобы шаблон:

<form method='POST' id='pass-form'>
    {% csrf_token %}
    <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">Email address</label>
        <input type="email" class="form-control" name="InputEmail" required>
        <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
    </div>
    
    <button type="submit" class="btn btn-primary">Generate Password</button><br><br>
    </form>
    
    <div class="mb-3">
        <label for="exampleInputPassword1" class="form-label">Generated Password</label>
        <input type="text" id="InputPassword" name = "genpassword" value ={{gen}} >
    </div>
<script type='text/javascript'>
    let form =  document.getElementById('pass-form');
    addEventListener('submit', (event) => {
        location.reload(true); // hard refreshed
        console.log('hard refreshed')
    });

</script>

Примечание: Затем также есть некоторые браузеры, такие как Microsoft Edge, которые выдают всплывающее окно "Повторно отправить форму?", в котором говорится На странице, которую вы ищете, использовалась информация, которую вы ввели. Возвращение на эту страницу может вызвать повторение любого действия, которое вы там совершили. Вы хотите продолжить?

В момент нажатия на кнопку continue создается дублирование записей, поэтому я думаю, что, как указано в документации, первый подход лучше.

Вернуться на верх