Submit button not working and redirecting to 404 error page in Django
Question:
I have deployed Django in my site subdomain apps.example.com through cPanel and the home page of my Django app apps.example.com/adsense-eligibility-checker is working but when I fill the form and click on the SUBMIT Button it redirects to 404 error page instead of running the second function scanned(requests) in mainApp/views.py. But it works in local host.
This is inside mainApp/views.py directory:
def home(request):
return render(request, 'home.html')
def scanned(request):
email = request.POST['email']
site = request.POST['site']
rating = request.POST['stars']
source = request.POST.getlist('source')
......
return render(request, "result.html", {'rMsg':rMsg,'result0':result0, 'result1':result1,'site': site,'show_site':show_site, 'vips':m1, 'domain':domain, 'site_age':site_age, 'sent': sent})
Inside MainApp/urls.py:
from django.urls import path
from.import views
urlpatterns=[
path('', views.home, name='home'),
path('scanned/', views.scanned, name='scanned')
]
Inside home.html:
{% extends 'main.html' %}
{% load static %}
{% block content %}
{% csrf_token %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="{% static 'style.css' %}">
<form method='POST' action="/scanned/" class='FormBody'>
{% csrf_token %}
<div id='tab'>
<h2>Adsense Eligibility Checker</h2>
<fieldset class='siteAndEmail'>
<legend>Site & Email</legend>
<div class='form-wrapper'>
<div class='full-input'>
<label for="site">Your Site URL</label>
<input type="domain" name='site' class='input' placeholder="https://yoursite.com">
</div>
<div class='full-input'>
<label for="email">Your Email</label>
<input type="text" name='email' class='input' placeholder="[email protected]">
</div>
</div>
</fieldset>
<fieldset class='siteAndEmail reached'>
<legend>How did you reached us?</legend>
<label class='c1'>
<input type="checkbox" name='source' value='Facebook' />
<i id='icon' class="fa fa-facebook"
style='background:linear-gradient(white,lightblue); color:dodgerblue;'></i>
Via Facebook
</label>
<label class='c1'>
<input type="checkbox" name='source' value='Google Search' />
<i id='icon' class="fa fa-google"
style='background:linear-gradient(160deg,yellow, dodgerblue,rgb(255, 0, 119), rgb(157, 255, 0)); color:white;'></i>
Via Google Search
</label>
<label class='c1'>
<input type="checkbox" name='source' value='Quora' />
<i id='icon' class="fa fa-quora"
style='background:linear-gradient(rgb(236, 0, 0),rgb(158, 0, 0)); color:white;'></i>
Via Quora
</label>
<div style='display:inline-block;'>
OTHERS
<input type="text" name='source'
style="background:rgba(255, 255, 255, 0.048);font-family:'Courier New', Courier, monospace; border:0px; border-bottom:1px solid rgba(0, 0, 0, 0.568);line-height:1.5em; padding-left:3px;"
placeholder="others" />
</div>
</fieldset>
</div>
<fieldset class='siteAndEmail'>
<legend>Rate Our Service</legend>
<div class='rating'>
<label>
<input type="radio" name="stars" value="1" />
<span class="icon">★</span>
</label>
<label>
<input type="radio" name="stars" value="2" />
<span class="icon">★</span>
<span class="icon">★</span>
</label>
<label>
<input type="radio" name="stars" value="3" checked />
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
</label>
<label>
<input type="radio" name="stars" value="4" />
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
</label>
<label>
<input type="radio" name="stars" value="5" />
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
</label>
</div>
</fieldset><br>
<button class='butn'> S C A N </button>
</form>
{% endblock %}
Inside result.html:
{% extends 'main.html' %}
{% load static %}
{% block content %}
{% load static %}
{% csrf_token %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="{% static 'style2.css' %}">
<div class='borders'>
<h2>R E S U L T Of Scanning Via Adsense Eligibility Checker</h2>
<div id='result'>
<ul style='text-align:left;'>
<li type='disc'>
{{result1}}
<script>
if ('{{rMsg}}'== ''){
document.write('<br>');
console.log('rMsg Level 1');
}
else {
document.getElementById('rmsg').innerHTML=('{{rMsg}}');
console.log('rMsg Level 2');
}
</script>
{{result0}}
<a id='rmsg'></a><br><a alt='What are the pages required for Adsense Approval' title='Pages Required For Adsense Approval' style='display:inline-block; text-decoration:none; color:rgb(196, 255, 87);' href='https://blog.example.com/check-website-eligibility-for-google-adsense/#What_are_the_pages_required_for_Adsense_approval'>
Pages Required For Adsense Approval
</a>
</li>
<li type='disc'>{{domain}}</li>
<li type='disc'>{{site_age}}</li>
<p style='text-align:center;'><i id='icon' class="fa fa-globe" style='background:linear-gradient(rgba(0, 250, 146, 0.596),rgba(0, 140, 255, 0.637)); color:rgb(255, 255, 255);'></i>
<a href='{{site}}' style='display:inline-block; text-decoration:none; color:rgb(0, 255, 179);'>{{show_site}}</a> is awesome.
</p>
</ul>
</div>
</div>
<p style='font-size:medium;font-family:serif;'>{{sent}}</p>
<br>
<a style='font-family:Consolas;font-size:larger;font-weight:bolder;display:inline-block; text-decoration:none; color:rgb(196, 255, 87);' href='https://blog.example.com/check-website-eligibility-for-google-adsense/#What_are_the_minimum_requirements_for_Adsense_Approval' title='Minimum requirements for Adsense Approval'>Min-Requirements for Adsense Approval</a>
{% endblock %}
Answers:
type attribute also need be added, and action can be left empty if it has to go the current url
<button class='butn' type='submit'> S C A N </button>
Change this views.py:
def scanned(request):
email = request.POST['email']
site = request.POST['site']
rating = request.POST['stars']
source = request.POST.getlist('source')
......
# Inside function
return render(request, "result.html", {'rMsg':rMsg,'result0':result0, 'result1':result1,'site': site,'show_site':show_site, 'vips':m1, 'domain':domain, 'site_age':site_age, 'sent': sent})
Also, change your action by name. Like:
<form method='POST' action="{% url 'scanned' %}" class='FormBody'>
You have got issues with form url action make that correct and change button type to submit and redirect your url rather than rendering
return redirect('html_page')
The last character ‘r’ of slug adsense-eligibility-checker gets vanished into adsense-eligibility-checkescanned and finally, I added action='adsense-eligibility-checkerscanned' which worked perfectly.
I have deployed Django in my site subdomain apps.example.com through cPanel and the home page of my Django app apps.example.com/adsense-eligibility-checker is working but when I fill the form and click on the SUBMIT Button it redirects to 404 error page instead of running the second function scanned(requests) in mainApp/views.py. But it works in local host.
This is inside mainApp/views.py directory:
def home(request):
return render(request, 'home.html')
def scanned(request):
email = request.POST['email']
site = request.POST['site']
rating = request.POST['stars']
source = request.POST.getlist('source')
......
return render(request, "result.html", {'rMsg':rMsg,'result0':result0, 'result1':result1,'site': site,'show_site':show_site, 'vips':m1, 'domain':domain, 'site_age':site_age, 'sent': sent})
Inside MainApp/urls.py:
from django.urls import path
from.import views
urlpatterns=[
path('', views.home, name='home'),
path('scanned/', views.scanned, name='scanned')
]
Inside home.html:
{% extends 'main.html' %}
{% load static %}
{% block content %}
{% csrf_token %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="{% static 'style.css' %}">
<form method='POST' action="/scanned/" class='FormBody'>
{% csrf_token %}
<div id='tab'>
<h2>Adsense Eligibility Checker</h2>
<fieldset class='siteAndEmail'>
<legend>Site & Email</legend>
<div class='form-wrapper'>
<div class='full-input'>
<label for="site">Your Site URL</label>
<input type="domain" name='site' class='input' placeholder="https://yoursite.com">
</div>
<div class='full-input'>
<label for="email">Your Email</label>
<input type="text" name='email' class='input' placeholder="[email protected]">
</div>
</div>
</fieldset>
<fieldset class='siteAndEmail reached'>
<legend>How did you reached us?</legend>
<label class='c1'>
<input type="checkbox" name='source' value='Facebook' />
<i id='icon' class="fa fa-facebook"
style='background:linear-gradient(white,lightblue); color:dodgerblue;'></i>
Via Facebook
</label>
<label class='c1'>
<input type="checkbox" name='source' value='Google Search' />
<i id='icon' class="fa fa-google"
style='background:linear-gradient(160deg,yellow, dodgerblue,rgb(255, 0, 119), rgb(157, 255, 0)); color:white;'></i>
Via Google Search
</label>
<label class='c1'>
<input type="checkbox" name='source' value='Quora' />
<i id='icon' class="fa fa-quora"
style='background:linear-gradient(rgb(236, 0, 0),rgb(158, 0, 0)); color:white;'></i>
Via Quora
</label>
<div style='display:inline-block;'>
OTHERS
<input type="text" name='source'
style="background:rgba(255, 255, 255, 0.048);font-family:'Courier New', Courier, monospace; border:0px; border-bottom:1px solid rgba(0, 0, 0, 0.568);line-height:1.5em; padding-left:3px;"
placeholder="others" />
</div>
</fieldset>
</div>
<fieldset class='siteAndEmail'>
<legend>Rate Our Service</legend>
<div class='rating'>
<label>
<input type="radio" name="stars" value="1" />
<span class="icon">★</span>
</label>
<label>
<input type="radio" name="stars" value="2" />
<span class="icon">★</span>
<span class="icon">★</span>
</label>
<label>
<input type="radio" name="stars" value="3" checked />
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
</label>
<label>
<input type="radio" name="stars" value="4" />
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
</label>
<label>
<input type="radio" name="stars" value="5" />
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
<span class="icon">★</span>
</label>
</div>
</fieldset><br>
<button class='butn'> S C A N </button>
</form>
{% endblock %}
Inside result.html:
{% extends 'main.html' %}
{% load static %}
{% block content %}
{% load static %}
{% csrf_token %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="{% static 'style2.css' %}">
<div class='borders'>
<h2>R E S U L T Of Scanning Via Adsense Eligibility Checker</h2>
<div id='result'>
<ul style='text-align:left;'>
<li type='disc'>
{{result1}}
<script>
if ('{{rMsg}}'== ''){
document.write('<br>');
console.log('rMsg Level 1');
}
else {
document.getElementById('rmsg').innerHTML=('{{rMsg}}');
console.log('rMsg Level 2');
}
</script>
{{result0}}
<a id='rmsg'></a><br><a alt='What are the pages required for Adsense Approval' title='Pages Required For Adsense Approval' style='display:inline-block; text-decoration:none; color:rgb(196, 255, 87);' href='https://blog.example.com/check-website-eligibility-for-google-adsense/#What_are_the_pages_required_for_Adsense_approval'>
Pages Required For Adsense Approval
</a>
</li>
<li type='disc'>{{domain}}</li>
<li type='disc'>{{site_age}}</li>
<p style='text-align:center;'><i id='icon' class="fa fa-globe" style='background:linear-gradient(rgba(0, 250, 146, 0.596),rgba(0, 140, 255, 0.637)); color:rgb(255, 255, 255);'></i>
<a href='{{site}}' style='display:inline-block; text-decoration:none; color:rgb(0, 255, 179);'>{{show_site}}</a> is awesome.
</p>
</ul>
</div>
</div>
<p style='font-size:medium;font-family:serif;'>{{sent}}</p>
<br>
<a style='font-family:Consolas;font-size:larger;font-weight:bolder;display:inline-block; text-decoration:none; color:rgb(196, 255, 87);' href='https://blog.example.com/check-website-eligibility-for-google-adsense/#What_are_the_minimum_requirements_for_Adsense_Approval' title='Minimum requirements for Adsense Approval'>Min-Requirements for Adsense Approval</a>
{% endblock %}
type attribute also need be added, and action can be left empty if it has to go the current url
<button class='butn' type='submit'> S C A N </button>
Change this views.py:
def scanned(request):
email = request.POST['email']
site = request.POST['site']
rating = request.POST['stars']
source = request.POST.getlist('source')
......
# Inside function
return render(request, "result.html", {'rMsg':rMsg,'result0':result0, 'result1':result1,'site': site,'show_site':show_site, 'vips':m1, 'domain':domain, 'site_age':site_age, 'sent': sent})
Also, change your action by name. Like:
<form method='POST' action="{% url 'scanned' %}" class='FormBody'>
You have got issues with form url action make that correct and change button type to submit and redirect your url rather than rendering
return redirect('html_page')
The last character ‘r’ of slug adsense-eligibility-checker gets vanished into adsense-eligibility-checkescanned and finally, I added action='adsense-eligibility-checkerscanned' which worked perfectly.