Short version:
Hi, I'm making a snazzy contact form for someone. It works fine without ajax. With ajax, it also works fine as long as all the form fields validate on the backend. But when I have a value that doesn't validate, even though it will return all the proper html alerting the form fields the person must fill out... All the event handlers don't work anymore, whether I made the variables global, or local scope.
Here's the steps I take, and what happens:
- Click a button
show_form_container, and show a form (works fine). - Fill out the form, click another button to hide this form, and show a captcha in it's place. This
show_captcha_buttonthen does anXMLHttpRequest()to get an image (works fine). I know I could have it loaded on the page originally, but I don't want to. - When the captcha value is correct from the user's input, enable and show the form's submit button (works fine).
- Do another
XMLHttpRequest()from the form's submit button, and load it in the proper area (works fine). - When all form values would be valid on the backend, there's no problem, it does what it's supposed to do.
- Now when a form value is invalid on the backend, I get the
XMLHttpRequest()loaded with the proper error alerts for the fields required, as it should be when I check the html (remember this is hidden, but I check the source)... Now I think this is where the issue begins... Because with thisxhr.responseText, I'm loading all the html into a container. And when I click my originalshow_form_containerbutton, it does nothing. The proper html is all loaded, but the event handler isn't working like it should on myshowForm()function after the first invalid ajax post request.
Html:
<section id="potential_customer_section">
<div id="container" class="indigo_border_with_center">
<h2 class="crimson">{{ not_valid }}</h2>
<form id="form" method="POST" action="{% url 'potential_customer_app:potential_customer' %}" novalidate>
<div id="form_hidden" class="position_off_screen">
{% csrf_token %}
{{ form.as_p }}
<input id="show_captcha_button" type='button' value='Verify as human' class="submitbox webfont">
<div id="captcha_loading_status"></div>
</div>
<div id="captcha_ajax_container" class="position_off_screen">
<h3>To prove you're human, insert the answer below as <mark>UPPERCASE ROMAN NUMERALS.</mark></h3>
<h3>Remember that...</h3>
<ul class="nolist">
<li class="tnr">I = 1</li>
<li class="tnr">III = 3</li>
<li class="tnr">IV = 4</li>
<li class="tnr">V = 5</li>
<li class="tnr">IX = 9</li>
<li class="tnr">X = 10</li>
</ul>
<div id="load_captcha_pic" class="paddingtop20px">
<h2 id="captcha_placeholder_text">Captcha placeholder text, remove() when ready.</h2>
</div>
<div id="captcha_error_check_status"><mark>***lowercase letters will not work.***</mark></div>
<input id="user_captcha_input" class="inputbox" type="text" name="user_captcha_answer">
<input id="correct_captcha_submit" type="submit" value="i can haz cheezbrgr!" class="submitbox margintop25px" disabled="disabled">
</div>
</form>
</div>
</section>
Javascript:
var potential_customer_section = document.getElementById('potential_customer_section');
var container = document.getElementById('container');
var show_form_container = document.getElementById('show_form_container');
var show_form_button = document.getElementById('show_form_button');
var form = document.getElementById('form');
var form_hidden = document.getElementById('form_hidden');
var show_captcha_button = document.getElementById('show_captcha_button');
var captcha_loading_status = document.getElementById('captcha_loading_status');
var captcha_ajax_container = document.getElementById('captcha_ajax_container');
var load_captcha_pic = document.getElementById('load_captcha_pic');
var csrf_token = document.querySelectorAll('input[name=csrfmiddlewaretoken]')[0].value;
var user_captcha_input = document.getElementById('user_captcha_input');
function showForm() {
show_form_container.className = 'disp_none';
form_hidden.className = '';
}
show_form_button.onclick = showForm;
function postPotentialCustomer(e) {
e.preventDefault();
// get all the values of the form.....
var xhr = new XMLHttpRequest();
xhr.open('POST', '{% url "potential_customer_app:potential_customer" %}', true);
xhr.onload = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.status);
console.log(xhr.responseText.split('<section id="potential_customer_section">')[1].split('</section>')[0]);
potential_customer_section.innerHTML = xhr.responseText.split('<section id="potential_customer_section">')[1].split('</section>')[0];
} else {
console.log(xhr.status);
potential_customer_section.innerHTML = '<h2>There was an error. Please refresh the page and try again.</h2>'
}
}
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(`...`); // All values are put here
captcha_ajax_container.innerHTML = '<h2 class="loading">Loading...</h2>';
}
form.onsubmit = postPotentialCustomer;
