I have a simple form that uses JavaScript to validate and submit the form using POST to the database.
The script works for 2 forms but won't submit for other forms for some reason and I can't work out why. I've even copied the existing form and JS replaced it with new names and it still doesn't work and I cannot figure out why. I've tried to debug, but I'm getting http200 for every request so not throwing any errors that I can see.
Working version:
var investor_form = document.getElementById("add-investor");
investor_form.addEventListener("submit", function (e) {
e.preventDefault();
if (validated(this)) {
this.classList.add("was-validated");
var i_name = document.getElementById("investor-name").value;
var i_website = document.getElementById("investor-website").value;
var i_portfolio = document.getElementById("investor-portfolio").value;
var i_comment = document.getElementById("ckeditor-classic").value;
const csrftoken = document.getElementsByName("csrfmiddlewaretoken")[0].value;
const formdata = new FormData();
formdata.append("investor_name", i_name);
formdata.append("investor_website", i_website);
formdata.append("investor_portfolio", i_portfolio);
formdata.append("investor_comment", i_comment);
const xhr = new XMLHttpRequest();
xhr.open("POST", "/apps/add_investor");
xhr.setRequestHeader("X-CSRFToken", csrftoken);
xhr.send(formdata);
xhr.onload = () => {
window.location.reload();
};
}
})
// Form validation
function validated(form) {
console.log(form)
var i_name = document.getElementById("investor-name");
var i_website = document.getElementById("investor-website");
var i_portfolio = document.getElementById("investor-portfolio");
i_name_value = i_name.value.trim();
i_website_value = i_website.value.trim();
i_portfolio_value = i_portfolio.value.trim();
if (i_name_value === "") {
message = "Please fill investor name field"
setErrorFor(i_name, message);
} else {
setSuccessFor(i_name)
}
if (i_website_value === "") {
message = "Please fill investor website field"
setErrorFor(i_website, message);
} else if (!isUrl(i_website_value)) {
message = "Website is not valid"
setErrorFor(i_website, message);
} else {
setSuccessFor(i_website)
}
if (i_portfolio_value === "") {
message = "Please fill investor portfolio field"
setErrorFor(i_portfolio, message);
} else if (!isUrl(i_portfolio_value)) {
message = "Porfolio is not valid"
setErrorFor(i_portfolio, message);
} else {
setSuccessFor(i_portfolio)
return true;
}
}
// For Display Eroor
function setErrorFor(element, message) {
element.classList.remove('is-valid');
element.classList.add('is-invalid');
parent = element.parentNode;
for (var i = 0; i < parent.childNodes.length; i++) {
if (parent.childNodes[i].className == "invalid-feedback") {
notes = parent.childNodes[i];
notes.innerHTML = message;
break;
}
}
}
// For success Message
function setSuccessFor(element) {
element.classList.remove('is-invalid');
element.classList.add('is-valid');
}
// Check URL Pattern
function isUrl(url) {
var re = /(ftp|http|https):\/\/(\w+:{0,1}\w*#)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%#!\-\/]))?/;
return re.test(url)
}
Non-working version with name changes
// Project Form submit
var project_form = document.getElementById("add-project");
project_form.addEventListener("submit", function (e) {
e.preventDefault();
if (validated(this)) {
this.classList.add("was-validated");
var i_name = document.getElementById("project-name").value;
var i_website = document.getElementById("project-website").value;
var i_comment = document.getElementById("ckeditor-classic").value;
const csrftoken = document.getElementsByName("csrfmiddlewaretoken")[0].value;
const formdata = new FormData();
formdata.append("project_name", i_name);
formdata.append("project-website", i_website);
formdata.append("project_comment", i_comment);
const xhr = new XMLHttpRequest();
xhr.open("POST", "/apps/add_project");
xhr.setRequestHeader("X-CSRFToken", csrftoken);
xhr.send(formdata);
xhr.onload = () => {
window.location.reload();
};
}
})
// Form validation
function validated(form) {
console.log(form)
var i_name = document.getElementById("project-name");
var i_website = document.getElementById("project-website");
i_name_value = i_name.value.trim();
i_website_value = i_website.value.trim();
if (i_name_value === "") {
message = "Please fill project name field"
setErrorFor(i_name, message);
} else {
setSuccessFor(i_name)
}
if (i_website_value === "") {
message = "Please fill project website field"
setErrorFor(i_website, message);
} else if (!isUrl(i_website_value)) {
message = "Website is not valid"
setErrorFor(i_website, message);
} else {
setSuccessFor(i_website)
return true;
}
}
// For Display Eroor
function setErrorFor(element, message) {
element.classList.remove('is-valid');
element.classList.add('is-invalid');
parent = element.parentNode;
for (var i = 0; i < parent.childNodes.length; i++) {
if (parent.childNodes[i].className == "invalid-feedback") {
notes = parent.childNodes[i];
notes.innerHTML = message;
break;
}
}
}
// For success Message
function setSuccessFor(element) {
element.classList.remove('is-invalid');
element.classList.add('is-valid');
}
// Check URL Pattern
function isUrl(url) {
var re = /(ftp|http|https):\/\/(\w+:{0,1}\w*#)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%#!\-\/]))?/;
return re.test(url)
}
I've just done a find and replace for investor to project and then I have created copies of the forms/model/views/urls etc and updated to project
but it just won't update the database.
If I go into Django admin I can manually add the records, so I know the migration has worked.
response when clicking submit
[30/Oct/2021 20:10:36] "GET /apps/add_project HTTP/1.1" 200 32840
[30/Oct/2021 20:10:59] "POST /apps/add_project HTTP/1.1" 200 59
[30/Oct/2021 20:10:59] "GET /apps/add_project HTTP/1.1" 200 32840
views.py
class addProjectView(View):
template_name = 'pages/add_project.html'
def get(self, request, *args, **kwargs):
return render(request, self.template_name)
def post(self, request, *args, **kwargs):
form = addProjectForm(request.POST)
if form.is_valid():
form.save()
data = {"success": "successfully added"}
else:
data = {"error": form.errors}
return JsonResponse(data, safe=False)
add_project_view = addProjectView.as_view()
Models.py
class Project(models.Model):
project_name = models.CharField(max_length=255, blank=False)
project_website = models.URLField(max_length=255, blank=False)
project_comment = models.TextField()
def __str__(self):
return str(self.project_name)
Forms.py
class addProjectForm(forms.ModelForm):
def __init__(self, *args, **kwargs):
super(addProjectForm, self).__init__(*args, **kwargs)
class Meta:
model = Project
fields = '__all__'
form html add_project.html
{% extends 'partials/base.html' %}
{% load static %}
{% block head_title%}
<title>Add Project | Dashboard</title>
{% endblock %}
{% block content %}
<div class="main-content">
<div class="page-content">
<div class="container-fluid">
<!-- start page title -->
<div class="row">
<div class="col-12">
<div class="page-title-box d-sm-flex align-items-center justify-content-between">
<h4 class="mb-sm-0 font-size-50">Add Project</h4>
<div class="page-title-right">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item">Pages</li>
<li class="breadcrumb-item active">Project</li>
</ol>
</div>
</div>
</div>
</div>
<!-- end page title -->
</div> <!-- container-fluid -->
</div>
<div class="card-body">
<form class="needs-validation" id="add-project" novalidate method="post" enctype="multipart/form-data" onsubmit="return false;">
{% csrf_token %}
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="form-label" for="project-name-label">Project Name</label>
<input type="text" class="form-control" id="project-name" placeholder="Project Name">
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback">
Please fill project name.
</div>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="project-url-input" class="form-label">Project Website</label>
<input class="form-control" type="url" placeholder="https://example.com" id="project-website">
<div class="valid-feedback">
Looks good!
</div>
<div class="invalid-feedback">
Please provide a valid web address.
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Comments</h4>
<p class="card-title-desc">Please add any comments or notes</p>
</div>
<div class="card-body">
<textarea id="ckeditor-classic"></textarea><br>
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</div>
</div>
</form>
<!-- end col -->
</div>
<button type="button" class="btn btn-primary" id="toastMessage" hidden></button>
<div class="position-fixed top-0 end-0 p-3" style="z-index: 11">
<div class="toast align-items-right text-white bg-primary border-0" id="toast-message" role="alert"
aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Successfully added Project!
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
</div>
<!-- End Page-content -->
{% endblock %}
{% block extra_js %}
<!-- ckeditor -->
<script src="{% static 'libs/#ckeditor/ckeditor5-build-classic/build/ckeditor.js' %}"></script>
<!-- init js -->
<script src="{% static 'js/pages/form-editor.init.js' %}"></script>
<!-- pristine js -->
<script src="{% static 'libs/pristinejs/dist/pristine.min.js' %}"></script>
<!-- form validation and XHR call -->
<script src="{% static 'js/pages/project.init.js' %}"></script>
{% endblock %}
Any ideas why its not working or how I can debug this?
Thanks
Related
I want to display the data of a person that is inputted via a pop-up form. But for whatever reason, the data isn't showing up on the HTML page.
Here is the HTML code for the home page
{% block title %}Home{% endblock %}
{% block content %}
<!-- <script type="text/javascript" src="js/jquery.js"></script> -->
<!-- onclick="window.location.href='add-users'" -->
<head>
<link rel="stylesheet" href="{{ url_for('static',filename='add-users.css') }}" type="text/css"/>
<!-- <h4>Log out</h4> -->
<h1>
<div class="dropdown" style="position:absolute; top:80px; right:170px;">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ user.name }}
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<a style="text-decoration: none;"href="/logout"><button class="dropdown-item" type="button">Log Out</button></a>
<!-- <button class="dropdown-item" type="button">Switch Users</button>
<button class="dropdown-item" type="button">Something else here</button> -->
</div>
</div></h1>
<h1><button style="position:absolute; top:80px; right:100px; text-decoration: none"title="Add people" class="button" data-modal="modalOne"><span style="font-size:36px;">⊕</span></button></h1>
<div id="modalOne" class="modal">
<div class="modal-content">
<div class="contact-form">
<a class="close">⊗</a>
<form method="POST" action="/">
<h2>Add person</h2>
<br>
<!-- 2 column grid layout with text inputs for the first and last names -->
<div class="row mb-4">
<div class="col">
<div class="form-outline">
<input type="text" name="first_name" id="first_name" class="form-control" placeholder="First name"/>
</div>
</div>
<div class="col">
<div class="form-outline">
<input type="text" name="last_name" id="last_name" class="form-control" placeholder="Last name"/>
</div>
</div>
</div>
<!-- Email input -->
<div class="form-outline">
<input type="email" name="person_email" id="person_email" placeholder="Email" class="form-control" />
</div>
<!-- Address input -->
<div class="form-outline">
<input type="address" name="address" placeholder="Address" class="form-control" />
</div>
<div class="form-outline">
<input type="company" name="company" placeholder="Company" class="form-control" />
</div>
<div class="form-outline">
<input type="city" name="city" placeholder="City" class="form-control" />
</div>
<div class="form-outline">
<input type="county" name="county" placeholder="County" class="form-control" />
</div>
<!-- Submit button -->
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
</head>
<body>
<div id=container>
<ul class="list-group list-group-flush">
{% for item in user.person %}
{{ item.first_name }}
{% endfor %}
</ul>
</div>
</body>
<script type="text/javascript">
let modalBtns = [...document.querySelectorAll(".button")];
modalBtns.forEach(function (btn) {
btn.onclick = function () {
let modal = btn.getAttribute("data-modal");
document.getElementById(modal).style.display = "block";
};
});
let closeBtns = [...document.querySelectorAll(".close")];
closeBtns.forEach(function (btn) {
btn.onclick = function () {
let modal = btn.closest(".modal");
modal.style.display = "none";
};
});
window.onclick = function (event) {
if (event.target.className === "modal") {
event.target.style.display = "none";
}
};
if ( window.history.replaceState ) {
window.history.replaceState( null, null, window.location.href );
}
</script>
{% endblock %}
Here is the code for models.py
from sqlalchemy import null
from . import __innit__ # importing from the package (website) the db
from flask_login import UserMixin
db = __innit__.db
class Person(db.Model):
id = db.Column(db.Integer, primary_key=True)
first_name = db.Column(db.String(20), unique=False, nullable=False)
last_name = db.Column(db.String(), unique=False, nullable=False)
# person_email = db.Column(db.String(), unique=False, nullable=False)
company = db.Column(db.String(), unique=False)
address = db.Column(db.String(), unique=False)
county = db.Column(db.String(), unique=False)
city = db.Column(db.String(), unique=False)
#image = db.Column(db.String(), unique=True, default="default.jpg")
user_id = db.Column(db.Integer, db.ForeignKey("user.id"))
class User(db.Model, UserMixin):
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(20), unique=True)
email = db.Column(db.String(), unique=True)
password = db.Column(db.String(150), nullable=False)
person = db.relationship("Person")
Here is the code for views.py
#views.route('/', methods=["GET", "POST"])
#login_required
def home(new_person):
if request.method == "POST":
first_name = request.form.get("first_name")
last_name = request.form.get("last_name")
person_email = request.form.get("person_email")
company = request.form.get("company")
address = request.form.get("address")
city = request.form.get("city")
county = request.form.get("county")
print(f"The first name is {first_name}")
if first_name == "":
flash("First name field empty", category="error")
elif last_name == "":
flash("Last name field empty", category="error")
elif person_email == "":
flash("Email field empty", category="error")
elif company == "":
flash("Company field empty", category="error")
elif address == "":
flash("Address field empty", category="error")
elif city == "":
flash("City field empty", category="error")
elif county == "":
flash("County field empty", category="error")
else:
new_person = Person(first_name=first_name, last_name=last_name, person_email=person_email, company=company, address=address, city=city, county=county, user_id=current_user.id)
db.session.add(new_person)
db.session.commit()
print("USER ADDED")
flash("New person added", category="success")
redirect(url_for("views.home"))
return render_template("second-home.html", user=current_user, new_person=new_person)
By the way the statement print(f"THe first name is {first_name}") isn't working, meaning the form isn't being accessed however when I hit the submit button, the terminal outputs a POST request
Here is the HTML page in which the data should be shown
It might be that you need to explicitly set the id value for each of the inputs in your modal. You have name specified, but I think id is a more stable option when collecting form data.
If you're running this locally in dev mode (via terminal/cmd line) I would absolutely suggest throwing a breakpoint() in before print(f"The first name is {first_name}") and look at what values request.form actually returns.
I'm working on grading system and I'm currently working on the form that's deals with the user entering the students results now the form I have, has 2 drop-down list(classroom, students) that are dependent. The issue and where I'm stuck is
When the user select the classroom the second drop-down menu will only show the students in that class, I have already figure that out..the issue is I want the input fields for how much subject the student is doing to appear so that the user can enter the grades for each subject specific to that student in the class
Eg if I select classroom 1b and selected student Mary.. if Mary is doing 5 subjects then 5 input field should appear so that I can enter the mark for the subjects
Link with a video showing what I'm talking about video showing an examplehttps://drive.google.com/file/d/11FoCZyOBVdUhTcvCqA1Ke0fEgRmMVC-G/view?usp=drivesdk
Models.py
Class Classroom(models.Models): name = models.charfield()
Class marks (models.Models): classroom = models.foreignkey(Classroom) Grade = models.Floatfield()
Html form
<div class="container-fluid">
<form id="result-form" method="post">
{% csrf_token %}
<!-- Modal -->
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel"> {% block modal-title%} Add Result {% endblock%}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12" id="msg8" style="font-size: 2rem; color:rgb(255, 144, 47)"></div>
<div class="col-md-12 form-group p-2">
<label class="form-label">Class Name</label>
{% render_field form.room class+="form-control" %}
</div>
<div class="col-md-12 form-group p-2">
<label class="form-label">Exam Name</label>
{% render_field form.exam class+="form-control" %}
</div>
<div class="col-md-12 form-group p-2">
<label class="form-label">Student</label>
{% render_field form.student class+="form-control select2" %}
</div>
<div class="hidden" id="subject-fields"></div>
<div class="form-group mb-3 pt-2">
<button type="button" id="resBtn" class="btn btn-info" title="Add">Submit</button>
</div>
</div>
</div>
</form>
</div>
{% block script%}
{% endblock%
script
$(document).on('click', '#submit-btn', function(event){
var response_data = []
var subject_name= $('.course');
var subject_objs = $('.subject_id');
for(i=0;i<subject_name.length;i++){
var subject_id = $(subject_objs[i]).find('input').val();
var grade_input = {
"Marks": subject_id,
}
response_data.push(grade_input);
}
$.ajax({
type: "POST",
url: "{% url 'marks' %}",
data: response_data,
success: function(response){
alert("Success");
}
});
});
This is how your view should look like.
def question_choice_view(request):
if request.method == "POST":
question_choice_data = request.POST['data']
I am not a jQuery User. As far as i can see i would put a eventlistener on the student form via .addEventListener('change', (event)See here. This would fire a function every time something changes on the select option. With that you could also collect the selected option values of the classroom and student name and make a request to get the subject names for the chosen student. After successful response i would insert the subject fields via JavaScript in the DOM.
**
function createInput(item) {
// This function takes a item and creates a new input
var newLabel = ' <br><label for="$item-mark">$item:</label>'
var newInput = '<input type="text" id="$item-mark-id" name="$item-mark"><br><br>';
newLabel = newLabel.replaceAll("$item", item)
newInput = newInput.replaceAll("$item", item)
// combine into a single str
newInput = newLabel + newInput
var studInput = document.getElementById("student-id");
// insert element inputs after student
studInput.insertAdjacentHTML('afterend', newInput);
}
function cleanOldInputs(item) {
var oldELement = item + "-mark-id"
oldELement = document.getElementById(oldELement)
if (oldELement) {
// remove old label and input
oldELement.previousSibling.remove()
oldELement.remove()
} else {}
}
function getAPIcall() {
// This is what your API sends
var responsObject = ["writing", "creativity"];
// loop throug
responsObject.forEach(item => {
// if you already picked a student clean old inputs from DOM
cleanOldInputs(item)
// send to function for input creation
createInput(item)
})
}
// get the Student Input
var studentSelect = document.getElementById("student-id");
studentSelect.addEventListener("click", function() {
// Fire anything you like
getAPIcall()
});
<form action="/action_page.php">
<label for="student">Choose a student:</label>
<select name="student" id="student-id">
<option value="harry">harry</option>
<option value="ivy">ivy</option>
</select>
</form>
Quick and dirty**
I have this form that is used to enter student grades per subject now on this form I have 3 dropdown boxes that are dependent on each other, what I want to accomplish is that after the user selects the classroom that the students are in, I want the input fields for each subject to appear on the same form that is only in that class that the user selected so that the user can enter the grades of the students per subject but I am having a hard time figuring out how to implement such behavior. in short,i want to show input fields for subjects base on the classroom the user selected
form.py
<div class="container-fluid">
<form id="result-form" method="post">
{% csrf_token %}
<!-- Modal -->
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel"> {% block modal-title%} Add Result {% endblock%}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12" id="msg8" style="font-size: 2rem; color:rgb(255, 144, 47)"></div>
<div class="col-md-12 form-group p-2">
<label class="form-label">Class Name</label>
{% render_field form.room class+="form-control" %}
</div>
<div class="col-md-12 form-group p-2">
<label class="form-label">Exam Name</label>
{% render_field form.exam class+="form-control" %}
</div>
<div class="col-md-12 form-group p-2">
<label class="form-label">Student</label>
{% render_field form.student class+="form-control select2" %}
</div>
<div class="hidden" id="subject-fields"></div>
<div class="form-group mb-3 pt-2">
<button type="button" id="resBtn" class="btn btn-info" title="Add">Submit</button>
</div>
</div>
</div>
</form>
</div>
{% block script%}
<script>
$(document).ready(function () {
$('#id_room').change(function(){
var url = "{% url 'load_exams' %}"
var class_id = $(this).val();
$.ajax({
url: url,
data: {
'room':class_id
},
success: function(data){
$("#id_exam").html(data)
}
})
})
$('#id_room').change(function () {
var url = "{% url 'load_students' %}"
var class_id = $(this).val();
$.ajax({
url: url,
data: {
'room': class_id
},
success: function (data) {
$("#id_student").html(data)
}
})
})
$('.select2').select2({
placeholder: 'Please Select Here',
width: '100%',
dropdownParent: $('#addmodal')
});
$('#resBtn').click(function () {
let room = $('#id_room').val();
let exam = $('#id_exam').val();
let student = $('#id_student').val();
let csr = $('input[name="csrfmiddlewaretoken"]').val();
if (room == '' && name == '') {
$('#msg4').html('All fields are required').fadeIn('slow');
$('#msg4').delay(7000).fadeOut('slow');
} else {
mydata = {
exam: exam, csrfmiddlewaretoken: csr, room: room, student: student
};
console.log(mydata)
$.ajax({
url: "{% url 'add-result' %}",
data: mydata,
type: 'POST',
success: function (data) {
if (data.status == 'Save') {
$('#msg8').html('Result Successfully Added').fadeIn('slow');
$('#result-form')[0].reset();
$('#msg8').delay(3000).fadeOut('slow');
setTimeout(function () {
$('#addmodal').modal('hide')
}, 3000)
location.reload()
} else {
alert('Error with saving form')
}
}
})
}
});
})
</script>
{% endblock%}
forms.py
# deal with entering results
class ResultForm(forms.ModelForm):
class Meta:
model = Result
fields = ["room", "exam","student","percentage"]
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["exam"].queryset = Exam.objects.none()
if "room" in self.data:
try:
class_id = int(self.data.get("room"))
self.fields['exam'].queryset = Exam.objects.filter(room=class_id).order_by('name')
except(ValueError,TypeError):
pass
elif self.instance.pk:
self.fields['exam'].queryset = self.instance.classroom.exam_set.order_by('name')
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["student"].queryset = Exam.objects.none()
if "room" in self.data:
try:
class_id = int(self.data.get("room"))
self.fields['student'].queryset = Student.objects.filter(room=class_id).order_by('name')
except(ValueError, TypeError):
pass
elif self.instance.pk:
self.fields['student'].queryset = self.instance.classroom.exam_set.order_by('name')
# deal with entering grade per subject
class MarkForm(forms.ModelForm):
class Meta:
model = Mark
fields = ["result", "course","grade"]
I am trying to Auto-complete form fields using Ajax and Jquery.
First I used Django and the views.py function is:
def CreateWellMon(request):
if request.method == 'POST':
form = SurveillanceDesPuits_F(request.POST or None)
if form.is_valid():
form.instance.author = request.user
form.save()
return redirect('WellMonitor')
else:
try:
PUITS_id = request.GET.get('PUITS')
record = SurveillanceDesPuits.objects.filter(PUITS_id__id__exact=PUITS_id)[:1]
record2 = SurveillanceDesPuits.objects.get(id= record[0].id)
form = SurveillanceDesPuits_F(instance=record2)
return render(request, 'measure/Surveill_Wells/Add_wellMntr2.html', {'form': form})
except:
record2 = SurveillanceDesPuits.objects.all().first()
form = SurveillanceDesPuits_F(instance=record2)
return render(request, 'measure/Surveill_Wells/Add_wellMntr2.html', {'form': form})
So here I just selected the last record from the database at first. After when the user chooses a Well it reloads the last record of the element.
my HTML page code is:
{% extends 'Home/base2.html' %}
{% block content %}
{% load crispy_forms_tags %}
<div class="w3-panel w3-border w3-light-grey w3-round-large sizeA"> <h2>Well Information</h2> <h2 class="border-bottom pb-1 mb-3"><b>Add New montoring record 3</b></h2> </div>
{% if form %}
<div class="border p-3 mb-3 mt-3 w3-round-large w3-light-grey border-dark">
<form method="POST" id="SurveillanceDesPuits_F" data-record-url="{% url 'Add_wellMntr' %}">
{% csrf_token %}
<!-- form from views.py-->
<div class="border p-2 mb-3 mt-3 border-secondary">
<div class="form-row">
<div id= "PUITS" class="form-group col-md-3 mb-0">
{{form.PUITS|as_crispy_field}}
</div>
<div class="form-group col-md-3 mb-0">
{{ form.CS |as_crispy_field}}
</div>
<div class="form-group col-md-3 mb-0">
{{ form.MODE|as_crispy_field}}
</div>
<div class="form-group col-md-3 mb-0">
{{ form.SITUATION |as_crispy_field}}
</div>
</div>
<div class="form-row">
<div class="form-group col-md-3 mb-0">
{{ form.DATE_TEST|as_crispy_field }}
</div>
<div id='DUSE' class="form-group col-md-3 mb-0">
{{ form.DUSE|as_crispy_field }}
</div>
<div class="form-group col-md-3 mb-0">
{{ form.PRES_TBG|as_crispy_field }}
</div>
<div class="form-group col-md-3 mb-0">
{{ form.PRES_CSG|as_crispy_field }}
</div>
</div>
<div class="form-row">
<div class="form-group col-md-8 mb-0">
{{ form.OBSERVATION|as_crispy_field }}
</div>
</div>
</div>
<input class="btn btn-success mb-4" type="submit" value="ADD Record">
</form>
</div>
{% endif %}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript"> $(document).ready(function(){
$("#id_PUITS").change(function(){
var url = $("#SurveillanceDesPuits_F").attr("data-record-url");
var PUITSId = $(this).val();
$.ajax({
type: 'GET' ,
url: url,
data: {
'PUITS': PUITSId
},
success: function (data){
$('#SurveillanceDesPuits_F').html(data);
}
});
});
return false;
}); </script>
{% endblock content %}
The problem is that after selecting a well the AJAX duplicates some elements in the page as described in the photo.
and how I do to solve this and keep the selected well because it is a choice field?
First I made a change in models.py, I deleted to_field='WellID', so it will keep the selected well after the AJAX call.
class SurveillanceDesPuits(models.Model):
PUITS = models.ForeignKey(Surveill_Wells , on_delete=models.CASCADE)
DATE_TEST= models.DateField()
....
then I changed the views.py:
def CreateWellMon(request):
if request.method == 'POST':
form = SurveillanceDesPuits_F(request.POST or None)
if form.is_valid():
form.instance.author = request.user
form.save()
return redirect('WellMonitor')
else:
try:
PUITS_id = request.GET.get('PUITS')
record2 = SurveillanceDesPuits.objects.filter(PUITS_id__id__exact=PUITS_id)[:1]
return JsonResponse({'record2': list(record2.values())}, safe=False)
except:
form = SurveillanceDesPuits_F()
return render(request, 'measure/Surveill_Wells/Add_wellMntr2.html', {'form': form})
the last change is in the HTML page and the ajax code call will be as:
<script type="text/javascript">
$.ajax({
type: 'GET' ,
url: url,
data: {'PUITS': PUITSId },
dataType: "json",
success: function (response){
var response = JSON.parse(response);
const object = response[0]
$("#id_PUITS").val(object.fields.PUITS);
$("#id_DATE_TEST").val(object.fields.DATE_TEST);
$("#id_MODE").val(object.fields.MODE);
$("#id_CS").val(object.fields.CS);
$("#id_SITUATION").val(object.fields.SITUATION);
$("#id_DUSE").val(object.fields.DUSE);
$("#id_PRES_TBG").val(object.fields.PRES_TBG);
$("#id_PRES_CSG").val(object.fields.PRES_CSG);
$("#id_PRES_AVD").val(object.fields.PRES_AVD);
$("#id_RESEAU_GL").val(object.fields.RESEAU_GL);
$("#id_ANNULAIRE_TECH").val(object.fields.ANNULAIRE_TECH);
$("#id_OBSERVATION").val(object.fields.OBSERVATION);
$("#id_Controle_Pression_ENSP").val(object.fields.Controle_Pression_ENSP);
$("#id_Test_Puits").val(object.fields.Test_Puits);
$("#id_Controle_Pression_DP").val(object.fields.Controle_Pression_DP);
},
});
return false;
});
</script>
this will avoid the duplicated page caused by the
$("#SurveillanceDesPuits_F").html(response);
Many thanks
I have created a Ajax form to handle the errors in my login form, but instead of showing errors in the form area, it directs me to another page with the json error response
<div class="container-fluid bg-primary" id="login">
<div class="row">
<div class="col-lg-3 text-center">
</div>
<div class="col-lg-6 text-center">
<h1> </h1><h3> </h3>
<h2 class="section-heading">Login to your profile</h2>
<hr>
</div>
<div class="col-lg-3 text-center">
</div>
<h2> </h2>
<h2> </h2>
<h2> </h2>
</div>
<div class="col-md-4 col-md-offset-4 ">
<form id='loginform' action='/users/login/' method='post' accept-charset='UTF-8'>
{% csrf_token %}
<fieldset >
<div class="form-group">
<input type="text" name="mobile_number" id="mobile_number" tabindex="1" class="form-control" placeholder="Mobile Number" value="">
</div>
<div class="form-group">
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Enter Password">
</div>
</fieldset>
<button type="submit" class="btn btn-primary btn-xl btn-block">LOG IN</button><br><br>
<span class="login-error"></span>
<h1> </h1><h1> </h1>
</form>
</div>
My ajax code
$("#loginform").on('submit', function(event) {
event.preventDefault();
alert("Was preventDefault() called: " + event.isDefaultPrevented());
console.log("form submitted!");
var url = "/users/login-ajax/";
$.ajax({
type: "POST",
url:url,
data: $("#loginform").serialize(),
success: function(data)
{
console.log(data);
var result = JSON.stringify(data);
if(result.indexOf('errors')!=-1 ){
console.log(data);
if(data.errors[0] == "Mobile number and password don't match")
{
$('.login-error').text("Mobile number and password don't match");
}
else if(data.errors[0] == "Entered mobile number is not registered")
{
$('.login-error').text("Entered mobile number is not registered");
}
}
else
{
window.open("/users/profile/");
}
//var result = JSON.stringify(data);
// console.log(result);
}
})
});
My code for the action in views.py
def login(request):
if request.method == 'POST':
mobile_number = request.POST.get('mobile_number', '')
password = request.POST.get('password', '')
data = {}
user_queryset = User.objects.filter(mobile_number=mobile_number)
if len(user_queryset) == 0:
data['error'] = []
data['error'].append("Entered mobile number is not registered")
# return JsonResponse(data)
elif len(user_queryset) == 1:
email = user_queryset[0].email
user = auth.authenticate(email=email, password=password)
if user is not None:
auth.login(request, user)
else:
data['error'] = []
data['error'].append("Mobile number and password don't match")
return JsonResponse(data)