i have this mini flask application i am building and i have nested a form in another and i wish to submit the nested form using just javascript after i finish filling it.
i am trying to do this with javascript but currently what my script deos is it submits the nested form emidiately the page loads and when i fill the inputs it deosnt submit again.
bellow are my code for my html form, flask route to collect the form and the javascript
HTml
<form method="POST" action="/skills" enctype="multipart/form-data">
<h3>Skills</h3>
<form method="POST" action="/skills" enctype="multipart/form-data" id="myForm">
<div class="form-group">
<label for="skills">Skills (comma-separated)</label>
<input type="text" class="form-control" id="skills" name="skills" required>
</div>
<h3>Work Experience</h3>
<div id="work-experience">
<div class="form-group">
<label for="work-title-1">Title</label>
<input type="text" class="form-control" id="work-title-1" name="work_title_1" required>
</div>
<div class="form-group">
<label for="work-company-1">Company</label>
<input type="text" class="form-control" id="work-company-1" name="work_company_1" required>
</div>
</div>
<!-- Add a hidden submit button -->
<input type="submit" style="display: none;">
</form>
<div class="form-group">
<label for="work-start-date-1">Start Date</label>
<input type="text" class="form-control" id="work-start-date-1" name="work_start_date_1" required>
</div>
<div class="form-group">
<label for="work-end-date-1">End Date</label>
<input type="text" class="form-control" id="work-end-date-1" name="work_end_date_1" required>
</div>
{% if ex_summary %}
<div class="form-group">
<label for="work-end-date-1">description</label>
<textarea class="form-control" id="sumary" name="ex_summary" rows="8">{{ ex_summary }}</textarea>
</div>
{% endif %}
</div>
<button type="button" class="btn btn-primary" id="add-work-experience">Add Work Experience</button>
<h3>Certifications</h3>
<div id="certifications">
<div class="form-group">
<label for="certification-title-1">Title</label>
<input type="text" class="form-control" id="certification-title-1" name="certification_title_1" required>
</div>
<div class="form-group">
<label for="certification-start-date-1">Start Date</label>
<input type="text" class="form-control" id="certification-start-date-1" name="certification_start_date_1" required>
</div>
<div class="form-group">
<label for="certification-end-date-1">End Date</label>
<input type="text" class="form-control" id="certification-end-date-1" name="certification_end_date_1" required>
</div>
<div class="form-group">
<label for="certification-description-1">Description</label>
<textarea class="form-control" id="certification-description-1" name="certification_description_1" rows="4" required></textarea>
</div>
</div>
<button type="button" class="btn btn-primary" id="add-certification">Add Certification</button>
<h3>Projects</h3>
<div id="projects">
<div class="form-group">
<label for="project-title-1">Title</label>
<input type="text" class="form-control" id="project-title-1" name="project_title_1" required>
</div>
<div class="form-group">
<label for="project-description-1">Description</label>
<textarea class="form-control" id="project-description-1" name="project_description_1" rows="4" required></textarea>
</div>
</div>
<button type="button" class="btn btn-primary" id="add-project">Add Project</button>
</div>
</div>
<button type="submit" class="btn btn-primary mt-4">Generate Resume</button>
</form>javascript
< script >
$(document).ready(function() {
// Add event listener to the last input field
var lastField = document.getElementById('message');
lastField.addEventListener('blur', function() {
submitForm();
});
// Submit the form when the last field is filled and the cursor is no longer in the field
function submitForm() {
var form = document.getElementById('myForm');
var messageField = document.getElementById('message');
// Check if the message field is filled
if (messageField.value.trim() !== '') {
form.submit();
}
}
}); <
/script>route to handle the form in the main.py
@app.route('/skills', methods=['GET', 'POST'])
def work_ex():
skills = request.form.get('skills')
print(skills)
title = request.form.get(f'work_title_1')
print(title)
company = request.form.get('work_company_1')
print(company)
if title and company and skills:
ex_summary = experienc_sumary(title, company, skills)
print(ex_summary)
return render_template('skills_experience.html', ex_summary=ex_summary)
return render_template('skills_experience.html')
if you notice i am trying to send the form to the main.py to use in a function then return the results back to the html form on the same page before the user finishes filling the information
2
Answers
Having nested forms like this isn’t real a good automation. What about you having a single form for submitting all your inputs, since you are making a post request to one endpoint from your html.
From your BE remove the last return statement you just need only this line:
I hope this works out for you.
You can change the default behaviour of your app from submitting immediately in your js.