We Keep Coding

How can I get my AJAX response to go through on click event?

I have a ajax call I want to use on a form so the user doesn't have to reload the page but it just keeps loading. I have tried to change the post route but I haven't had any success. Can someone point me in the right direction. Here is my code:
HTML
const http = new XMLHttpRequest();
const submit = document.querySelector('.submit');
http.onload = () => {
submit.addEventListener('click', () =>{
const alertMessage = document.querySelector('.alert');
const email = document.querySelector('#email').value;
const name = document.querySelector('.name').value;
if (name === '' || email === '') {
alertMessage.innerHTML = 'Name And Email Required';
console.log(name)
} else {
alertMessage.innerHTML = 'Success! Someone will be in touch with you soon!'
// email.value = '';
// form.reset();
}
});
}
http.open('POST', '/index.html', true);
http.send();
FORM
<div class="contactform">
<div class="alert"></div>
<form action="/index.html" method="POST" class="form">
<input type="text" name='name' id='name' placeholder="Name">
<input type="email" name='email' id='email' placeholder="Email">
<textarea class="messages" name="messages" placeholder="Message...."></textarea>
<button class="submit" type="submit" value="submit">Send</button>
</form>
</div>

You need to override form's onsubmit event to prevent submitting:
$("formSelector").bind('submit', function (e) {
var isValid = someYourFunctionToCheckIfFormIsValid();
if (!isValid) {
e.preventDefault();
return false;
} else {
jQuery.ajax({
type: "POST",
url: "my_custom/url",
dataType: "html",
data: { "text": jQuery("#edit-body").html()
},
success: function (result) {
console.log(result);
}
});
e.preventDefault();
return false;
}
});
By calling
e.preventDefault();
return false;
You prevent synchronous postback from occurring.
UPDATE:
If you don't want to override form submit, maybe you could place your button outside of form tag (you can adjust position with css if necessary)?

form validation through javascript - error alert coming but saving the data

here I am comparing the location name whether its already entered or not, In my code I am getting alert when I click submit button but also data submitted. onchange function not working as I expected, can anyone help me how stop the data not submitting when I get alert?
When submitting time validation should be done, why because in our test server we are getting some delay after click button, so only data submitting after alert also. do you have any idea on this? Thanks in advance
<form class="form-inline" id="desgForm" accept-charset="UTF-8" method="post" action="../locationSubmit.htm" enctype="multipart/form-data">
<input type="text" id="locationName" autocomplete="off" name="locationName" class="form-control validate[required]" onchange="desgCheck();" onkeyup="firstToUpperCase1();" value="">
<button type="submit" class="btn btn-primary" >Save</button>
</form>
Javascript:
<script>
function desgCheck()
{
var locationName = document.getElementById('locationName').value;
$.ajax({
type: "POST",
url: "../designation/locationName.htm",
data: {
locationName: locationName
},
dataType: "text",
success: function (data)
{
if ($.trim(data) !== 'Data available')
{
alert("This Location already exist!!");
document.getElementById("locationName").value = "";
return false;
}
},
error: function (error) {
document.getElementById("locationName").value = "";
}
});
}
function firstToUpperCase1() {
var str = document.getElementById("locationName").value;
var a = str.toUpperCase();
$("#locationName").val(a);
}
jQuery("#desgForm").validationEngine();
</script>

How to save textarea data when click outside the textarea using ajax

I am using froala editor and i want text in text area of editor saved when user clicks outside that textarea using Ajax i am new in ajax id of content editor is #id_content
This is my form part in django
<form method="POST" id="froala_form" class="PageForm _inputHolder">
{% csrf_token %}
<div class="_alignRight posR _saveBTNOut">
<button type="submit" class="_btn btnPrimery">Save as Draft</button>
</div>
</form>
This is what i have tried but not getting any proper logic
function loadDoc(){
var xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function{
if(this.readyState==4 && this.status==200){
var x = document.getElementById("id_content");
x.addEventListener("click", ajaxsavefunc);
}
};
xhttp.open("GET",'url', true);
xhttp.send();
}
function ajaxsavefunc(xhttp) {
document.getElementById("froala_form").innerHTML = editor.html.get()
}

This is a example of how to use blur(when user click outside of field) in Jquery.
Basically this example will return a alert with the value of input when user click in the field and click out of the field.
<form method="post" action="" >
<input type="text" id="test" value="123">
<input type="submit">
</form>
$(function () {
$('#test').blur(function (e) {
e.preventDefault();
var x = document.getElementById("test").value;
var saveData = $.ajax({
type: 'POST',
url: "someaction.do?action=saveData",
data: {input: x},
dataType: "text",
success: function(resultData) { alert("Save Complete") }
});
});
});

Multiple AJAX forms with the same ID on the same page

I have two AJAX newsletter subscribe forms on the same page (top and bottom). Both forms have the same ID. The top form works perfectly, however I'm unable to get the alert messages to appear in the bottom form.
I found this question but wasn't sure how to implement the answer into my code.
Here's the form:
<div class="newsletter">
<form id="newsletter" class="newsletter-signup" action="" method="POST" accept-charset="UTF-8">
<input id="hero-section-newsletter-email-input" type="email" name="email">
<button class="button" type="submit">
Subscribe
</button>
<div id="newsletter-alert" style="display: none;" data-alert></div>
</form>
</div>
Here's the jQuery:
(function() {
'use strict';
var newsletterAlert = function(message) {
$('#newsletter-alert').text(message);
};
var isValidEmail = function(email) {
var pattern = new RegExp(/^[+a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i);
return pattern.test(email);
};
$('#newsletter').on('submit', function(e) {
var data,
$form = $(this),
$email = $form.find('input[type="email"]');
e.preventDefault();
$('#newsletter-alert').show();
if ( !isValidEmail( $email.val() )) {
newsletterAlert('Looks like you entered an invalid email address! Please try again.');
} else {
newsletterAlert('Subscribing you now...');
data = $form.serialize();
$.ajax({
url: 'PATH_TO_SUBSCRIBE_PHP',
type: 'post',
data: data,
success: function(msg) {
if ( msg === 'success') {
newsletterAlert('Success! Please check your email to confirm.');
$email.val('');
} else {
newsletterAlert( msg );
}
},
error: function(msg) {
newsletterAlert('Error! ' + msg.statusText);
}
});
}
});
})();
Any help would be appreciated. Thanks

Don't use the same ID for the top and bottom forms.
An id must be unique in a document -- see MDN Docs.
Instead have two separate id's and reference them both in the one jQuery call when you are binding to the submit event:
$('#newsletter_top, #newsletter_bottom').on('submit', function(e) {
// ...
});
and in your HTML:
<form id="newsletter_top" ...>
</form>
<form id="newsletter_bottom" ...>
</form>

jquery mobile button doesn't come up

I'm using jquery mobile 1.3.2, and whenever I press the button, the button shows the style of being pressed, but then it never come back up again.
HTML:
<form id="login_form">
<input type="text" name="username">
<input type="password" name="password">
<button type="submit" data-theme="b" data-role="submit">Login</button>
</form>
Javascript:
$("#login_form").submit(function()
{
$.mobile.allowCrossDomainPages = true;
var options = {
url:API_SERVER_URL+"/login",
type: "post",
success: function(data)
{
if (data.success)
{
$.mobile.changePage('success.html', {transition: "slide"});
}else
{
alert("failed:(");
}
},
error: function()
{
alert('cannot connect');
}
};
options = $.extend(DEFAULT_AJAX_OPTIONS, options);
$(this).ajaxSubmit(options);
return false;
});

Remove ui-btn-active when form is submitted.
$("#login_form").on("submit", function () {
$("[type=submit]").closest('div').removeClass("ui-btn-active");
});
Demo