We Keep Coding

AJAX Request Running Twice on Validation

I am doing a Validation for email input
$("#email").on("input",function()
{
email = $(this).val();
const regex_1 = /^([a-zA-Z0-9_\-\.]+)#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
const regex_2 = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,10})+$/;
var re1 = new RegExp(regex_1);
var re2 = new RegExp(regex_2);
if(re1.test(email)===true && re2.test(email)===true)
{
e.preventDefault();
$.ajax({
url:"Validate.php",
method:"POST",
data:'type=check_email&email='+email,
success:function(data)
{
if(data == 'FAIL')
{
$("#email").addClass("is-invalid");
$("#email").removeClass("is-valid");
$("#email").focus();
}
else
{
$("#email").addClass("is-valid");
$("#email").removeClass("is-invalid");
}
}
});
}
else
{
$("#email").addClass("is-invalid");
$("#email").removeClass("is-valid");
$("#email").focus();
}
$("#email").removeClass("is-invalid");
$("#email").removeClass("is-valid");
});
So my issue is that when the validation through RegEx passes , the AJAX Call is made twice whereas the result from the first success:function(data) itself returns SUCCESS.
Two successive queries for the same instance will increase load on the server unnecessarily.
I personally think my bind is wrong here or that I haven't used e.preventDefault();
But I tried using input focus change keyup (individually as well as multiple binds) but nothing worked, the query still runs twice.
The concept here is that only when the RegEx test returns true then only the ajax is required to run (just once). Why is it running twice here ?
Required : The email(string) should pass both the RegEx tests

The event parameter e in the code is missing.
$("#email").on("input",function(e)
...
...
e.preventDefault();
Edit:
To prevent multiple event firing from the handler, you can return false; From JQuery docs:
Returning false from an event handler will automatically call
event.stopPropagation() and event.preventDefault().
In cases where the event is bound more than once, ensure only one handler is available by using off(). e.g.
$("#email").off('input').on("input",function(e) {
...

Prevent Select from changing selected option if condition is not met

I have a select box. Currently, this select box make an ajax call on change.
Now, I want to make call only when a condition is met.
So, here is my code:
$('#buildingSelect').on('change', function(){
var result = checkDirtyStatus();
//this checkDirtyStatus alert message if there is some changes on the form.
//if cancel return false, if confirm return true.
if(result === false) {
return;
}
//make ajax call
});
This prevents from making ajax call, however, this change the selected option of the select i.e, if option1 is selected at the begining and if I try to select next option then it will change the selected option to option2 then only check the status.
On searching on the internet, I got the option of focusin.
$('#buildingSelect').on('focusin', function(){
// console.log("Saving value " + $(this).val());
var result = checkDirtyStatus();
if(result === false) {
return;
}
}).on('change', function(){
g_building_id = $(this).val();
getAmenitiesDetails(g_building_id);
});
However, using this focusin options makes the alert box to appear everytime no matter either I click cancel or ok. This might be because, it call focusin again whenevr I click Ok or Cancel.
What would be the best option to check this status, and if result is false, I don't want to change the selected option as well.
Update
Answer from marked as duplicate not preventing from changing the selected option. Its making ajax call on click i.e. before checking condition.
CodePen Link
function checkDirtyStatus(){
dirtyStatus = true;
if(dirtyStatus === true){
if (confirm("Changes you made may not be saved.")) {
return true;
}else{
return false;
}
}
}

Finally, by mixing the link from Rory and idea of organizing code from some. I have find a solution for my problem. So, if anyone got stuck on the similar problem here is my solution.
$(function(){
var lastSel;
$('#buildingSelect').on('focusin', function(){
lastSel = $("#buildingSelect option:selected");
}).on('change', function(){
if(!checkDirtyStatus()) {
lastSel.prop("selected", true);
return;
}else{
//made ajax call
//$.ajax({})
}
});
});
function checkDirtyStatus(){
let dirtyStatus = getDirtyStatus();
if(dirtyStatus){
return confirm("Changes you made may not be saved.");
}
return true;
}

Let us look at your function:
function checkDirtyStatus(){
dirtyStatus = true; // I assume this is only for testing
if(dirtyStatus === true){ // This can be simplified.
if (confirm("Changes you made may not be saved.")) {
return true;
}else{
return false;
}
}
}
confirm returns a Boolean that is either true or false, so you can simplify your function like this:
function checkDirtyStatus(){
dirtyStatus = true;
if(dirtyStatus){
return confirm("Changes you made may not be saved.");
}
// Notice that you do not return anything here. That means that
// the function will return undefined.
}
Your other function can be simplified like this:
$('#buildingSelect').on('change', function(){
if(!checkDirtyStatus()){
// Here you probably want to set the value of the select-element to the
// last valid state. I don't know if you have saved it somewhere.
return;
}
//make ajax call
});

I played with your codepen and you have some errors in your selectors. As I get confused by your explanation I will try to explain what you could update and how to use it in your code and I hope this is what you need to solve your problem.
First I would change your js to this:
var lastSel = $("#buildingSelect").val();
$("#buildingSelect").on("change", function(){
if ($(this).val()==="2") {
$(this).val(lastSel);
return false;
}
});
The proper way to get the value of a select box in jquery is with the .val(). In your case you selected the entire selected option element.
I store this value in the lastSel variable. Then in the change function the new value of the select list is $(this).val(). I check against this value and if it equals 2 I revert it to the value stored in the lastSel variable with this $(this).val(lastSel).
Keep in mind that the value of a select list is always a string, if you want to check against a number you must first cast it to a numeric value e.g. by using parseInt.
If you want to use the checkDirtyStatus for the check then you should only call this function in the change and pass as parameters the lastSel and the newSel like this:
$("#buildingSelect").on("change", function(){
checkDirtyStatus(lastSel, $(this).val());
});
Then you can transfer the logic from the change function into the checkDirtyStatus function and do your checks there. In this case if you wish to revert the select value instead of $(this).val(lastSel) you will do a $("#buildingSelect").val(lastSel).
I hope this helps.

Popup - if user enters bad input, how can I get it to error on submit

I have a popup on my page that has a typeahead input on it. Right now you can type garbage and click submit and it lets you. I'm trying to write code that will throw an error on the popup if you type something that isn't included in the typeahead options and it won't let you submit it until you fix it. Here is my code, it is for making a school schedule that has classes in the typeahead dropdown.
var schedule = schedule.content.get();
var validClasses = Fp.filter(schedule.classes, function (class) { return !class.passed; }),
inputClasses = $('.optimizeViaClasses input.className').map(function () { return $(this).val(); }),
isErrorForValidClasses = Fp.all(inputClasses, function (inputClass) { return Fp.contains(validClasses, inputClass); });
if(validClasses !== inputClasses){
$errorMessage.text('Your selection does not match the class(es) in the current schedule!');
$errorMessage.show();
}
Right now if you enter garbage in the input field, this will throw an error but still let the user submit. How can I stop the user from submitting until the input is correct?
Here is my button:
$submitBtn.on('click', function(event){
if(inputParameters() !== false){
$myPopUp= $modal.find('#myData').detach()[0];
}
event.preventDefault();
});
and I checked the output of inputClasses in the Google developer console, it outputs the class and a prevObject. I just need the class...

Let javascript return either True or false and if the popup comes out return false other wise true.
For instance if it get into if return false other wise true.

since you modified your code i suppose you might want to try this instead:
http://api.jquery.com/event.stoppropagation/
also you might want to be doing something along the lines of this if stoppropagation does not result in the desired effect:
$("#formid").on("submit",function(e){
// declare isValid outside of this and set it in your validation function or call it inside this and check for that.
if(isValid) {
e.stopPropagation();
}
});
at least that's how i went about solving such issues usually. i hope it helps.

got it. the error i had was throwing an error.
var schedule = schedule.content.get(),
validClasses = Fp.filter(schedule.classes, function (class) { return !class.passed; }),
inputClasses = $('.optimizeViaClasses input.className').map(function () { return $(this).val(); }),
actualValidClasses = Fp.pluck(validClasses, 'className');
$.each(inputClasses , function(index, value){
if($.inArray(value, actualValidClasses ) === -1){
$errorMessage.text('Your selection does not match the class(es) in the current schedule!');
$errorMessage.show();
error = true;
return false;
}
});

JQuery date inputs condition

I am having the following JQuery function that is working properly:
$(function () {
$('#accmenu').change(function() {
$(".insightsgraphs div").hide();
$(".insightsoptions input").removeClass("green");
$("#newLikes").one('click', function () {
$.ajax({type:'GET', url: 'newLikes.php', data:$('#ChartsForm').serialize(), success:
function(response) {
var json = response.replace(/"/g,'');
json = "[" + json + "]";
json = json.replace(/'/g,'"');
var myData = JSON.parse(json);
var myChart = new JSChart('dailyNewLikes', 'line');
myChart.setDataArray(myData);
myChart.setAxisNameX('');
myChart.setAxisNameY('');
myChart.setAxisValuesColorX('#FFFFFF');
myChart.setSize(470, 235);
myChart.setTitle('Daily New Likes');
myChart.draw();
}});
return false;
});
$("#unlikes").one('click', function () {
$.ajax({type:'GET', url: 'unlikes.php', data:$('#ChartsForm').serialize(), success:
function(response) {
$("#dailyUnlikes").html(response);
}});
return false;
});
});
$("#newLikes").on('click', function(){
$(this).toggleClass('green');
$('#dailyNewLikes').toggle();
return false;
});
$("#unlikes").on('click', function(){
$(this).toggleClass('green');
$('#dailyUnlikes').toggle();
return false;
});
});
but I want to create a condition: if one of the following two date inputs:
var since = $('#dateoptions input[name="since_date"]').val();
var until = $('#dateoptions input[name="until_date"]').val();
is empty I want to receive an alert and the .one() function to be executed only when the conditions are met. For example when I click on one of the button without the date inputs in place I want to receive an alert like alert("One of the date or both missing") for example and after I choose the dates and press the button again to execute the .one() function like in the above example. I hope I make myself clear enough. I know that I can use something like:
if (until == "" || since == "") {
alert("One of the date or both missing")
} else {}
but my tries so far was no success. Probably I didn't place the condition where it should... Also it is possible also with an alert the inputs to be focused, highlighted or something similar?
EDIT:
Here's a fiddle with it:
http://jsfiddle.net/DanielaVaduva/ueA7R/6/
I replace the ajax call with something else without to modify the flow.

Try checking your values with:
if (until.trim().length === 0 || since.trim().length === 0) {
//TODO here
}
I suggest you that check your name attribute in your inputs and check that it's the same that you use when you are retrieving the values of the inputs.
If it still not working, try some 'debugging' like:
console.log(since);
And check if it is getting your value properly.
UPDATE
I don't know if you wanted this (demo). If your dates are empty, it will not work. AJAX call will not work on JsFiddle, because you are using a .serialize() and it sends the information via URL, as a GET type and you need to send it as POST. It doesn't matter. If you already prepared your server to recieve a GET method, it will work.
Also, I must add that if you want to change color ONLY if the AJAX was success, you must add your change color function as I used on the demo and if you want to check your date every time you want to send information to server, change .one() function into .on() function and remove the function after the AJAX success with:
$('#myimage').click(function() { return false; }); // Adds another click event
$('#myimage').off('click');
$('#myimage').on('click.mynamespace', function() { /* Do stuff */ });
$('#myimage').off('click.mynamespace');
(More info about removing a function here);
I hope this will help you atleast on the way you want to do. Leave a comment if it is not what you wanted.

I'm not sure if I understood the issue exactly but.. you can check this >>
Fiddle Demo
HTML
Add IDs to the date fields like
<input id="until" type="date" name="until_date" value="Until date">
<input id="since" type="date" name="since_date" value="Since date">
And just for highlighting the required dates >>
CSS
.req{
border:2px red solid;
}
.required{
color:red;
font-size: 0.8em;
font-style:italic;
}
jQuery
$(function () {
//removing the highlighting class on change
$('#until').change(function() {
$(this).removeClass('req').next('.required').remove();
});
$('#since').change(function() {
$(this).removeClass('req').next('.required').remove();
});
$('#accmenu').change(function() {
var dSince= $('#since').val();
var dUntil= $('#until').val();
if(dSince=='' || dUntil==''){
alert('You MUST select Both dates!');
$(this).val(0); // Set the menu to the default
//Adding the Highlight and focus
if(dSince==''){
$('#since').addClass('req').after('<span class="required">- required *</span>').focus();}
if(dUntil==''){
$('#until').addClass('req').after('<span class="required">- required *</span>').focus();}
}else{
$(".insightsgraphs div").hide();
$(".insightsoptions input").removeClass("green");
$("#newLikes").one('click', function () {
$("#dailyNewLikes").html('</p>Test daily new likes</p>');
return false;
});
$("#unlikes").one('click', function () {
$("#dailyUnlikes").html('</p>Test daily unlikes</p>');
return false;
});
} //End of the if statement
});
$("#newLikes").on('click', function(){
$(this).toggleClass('green');
$('#dailyNewLikes').toggle();
return false;
});
$("#unlikes").on('click', function(){
$(this).toggleClass('green');
$('#dailyUnlikes').toggle();
return false;
});
});
Thus whenever an option from the accmenu gets selected, it will check for the values of the two DATEs, if both or any is blank, it won't execute the function.

Determining which submit button was clicked from jQuery/JavaScript [duplicate]

This question already has answers here:
How can I get the button that caused the submit from the form submit event?
(22 answers)
Closed 9 years ago.
I'm ajaxifying some forms from a PHP application I didn't write. To do this, I came up with this clever solution:
jQuery("form").submit(function(event) {
// get some values from elements on the page:
var the_form = jQuery(this);
var data = the_form.serialize();
var url = the_form.attr( 'action' );
var button = event.originalEvent.explicitOriginalTarget;
data = data + "&" + button.name + "=" + button.value;
// Send the data using post and put the results in a div
jQuery.post( url, data, function() {
//Do something crazy
});
// stop form from submitting normally
if (event.preventDefault)
{
event.preventDefault();
}
else
{
event.returnValue = false;
}
});
Which works perfectly. I went away rejoicing. The problem is, I inadvertently used a Mozilla/Gecko only property to determine which button was clicked. (event.originalEvent.explicitOriginalTarget) Which means this only works in Firefox. :-(
All of this is necessary because the web app I'm augmenting relies on the button name/value being in the post data to process the form correctly. So, my question in simple terms would be:
What is the best, cross-browser way to determine which button was clicked in jQuery's submit event?
Edit:
And here is my solution.
jQuery("some selector that targets your form").find(":submit").click(function(event) {
// get some values from elements on the page:
var the_form = jQuery(this).parents("form");
var data = the_form.serialize();
var url = the_form.attr( 'action' );
var button = event.target;
data = data + "&" + button.name + "=" + button.value;
// Send the data using post and put the results in a div
jQuery.post( url, data, function() {
//Do something crazy
});
// stop form from submitting normally
if (event.preventDefault)
{
event.preventDefault();
}
else
{
event.returnValue = false;
}
});

See this question: Crossbrowser equivalent of explicitOriginalTarget event parameter
You're going to have to attach the event listeners to the buttons instead of the form to get a good reliable way of determining which one fired the submit.

http://api.jquery.com/event.target/
jquery.event.target should work because it is normalised for most browsers.
jquery.event.currentTarget can be used to retrieve the current item in the event bubbling chain.
Edit--
After some reflection and #greg's suggestion:
I've posted a code snippet on jsfiddle.

Using click handlers to submit the form is problematic beacuse you cannot use submit event handlers for validation (which is the way pretty much any validator plugin does it). Also, when you are not using AJAX to post, disabling submit buttons can have weird effects in some browsers if done in the click event and not the submit event.
The way jQuery.Form solves this is to set up a click handler which stores the clicked button (and then clears it with a small timeout), and use the submit handler to actually send the form contents via AJAX.

Here is a function I used to "ajaxify" my forms with jQuery.
function ajaxifyForm(form, callback)
{
var clicked
form.find("button").click(function()
{
if (clicked != null) clicked.removeAttr("data-clicked")
clicked = $(this)
$(this).attr("data-clicked", 1)
})
form.submit(function(event)
{
var data = {}
var name = ""
form.find(":input").each(function()
{
var input = $(this)
if (!(name = input.attr("name"))) return
switch (input.attr("type"))
{
case "radio":
case "checkbox":
if (input.attr("checked")) data[name] = input.val()
break
case "submit":
if (input.attr("data-clicked")) data[name] = input.val()
break
default:
data[name] = input.val()
}
})
$.ajax({
url: form.attr("action"),
success: function(data)
{
if (typeof callback == "function") callback("success")
},
error: function()
{
if (typeof callback == "function") callback("error")
},
data: data,
type: form.attr("method")
})
return false
})
return form
}