If else statement for jQuery AJAX is not running

Question

When I insert the snippet and run it on Stack overflow it says '$ is missing'! However the only problem is the the if and else statement to check if the booking number is all number is not getting executed. The AJAX function runs and the flow goes to the back end and persists data as well. I'm confused is there any thing wrong in this code?

clickme = function() {
  alert("hiiiiiii")
  var selected = $('input:checked');
  var chosen_emails = [];
  selected.each(function() {
    chosen_emails.push($(this).val());
  });

  var re = /[0-9]/;
  var booking_address = document.forms["contact"]["booking_address"].value;

  var booking_number = document.forms["contact"]["booking_number"].value;
  var booking_message = document.forms["contact"]["booking_message"].value;

  var booking_date = document.forms["contact"]["booking_date"].value;
  alert("booking address is" + booking_address + "booking_number is" + booking_number + "booking message is" + booking_message + "booking date is:" + booking_date);

  array = chosen_emails + "" //converting choosen_emails to string type 

  alert("choosen techies are:" + chosen_emails);

  var currentdate = new Date();
  var request_date = currentdate.getDate() + "/" +
    (currentdate.getMonth() + 1) + "/" +
    currentdate.getFullYear() + " @ " +
    currentdate.getHours() + ":" +
    currentdate.getMinutes() + ":" +
    currentdate.getSeconds();

  var user_email = "${user_email}";

  if (booking_number.length < 8) {
    alert("must not be less than 8 numbers");
  } else if (!re.test(booking_number)) {

    alert("Error: must not contain any characters!");
  } else {
    $(function() {
      $.ajax({ // defining the below function as ajax responsive//
        url: 'service_request', // the function that process the  mapped url name and matching type is going to receive the data//
        type: 'POST',
        data: {
          chosen_emails_1: chosen_emails[2],
          chosen_emails_2: chosen_emails[3],
          chosen_emails_3: chosen_emails[4],
          booking_address: booking_address,
          booking_number: booking_number,
          booking_message: booking_message,
          booking_date: booking_date,
          request_date: request_date,
          user_email: user_email
        }, // function to get the value from jsp page and send it to mapped class function//
        success: function(response) { // if the backend process is success then the function will run by getting the response as its parameter//
          alert(response.message);
        },
        error: function(response) {
          alert("there was an error processing your request");
        }
      });
    });
  }
}

//to set limit for number of checkboxes to be selected

$(document).ready(function() { //Its crucial that we are Wrap the code in ready() callback, so that the code (on change event handler) will be executed after DOM is finished loading (response data)
  $("#table").on("click", function() {
    var limit = 3,
      checkboxes = $(this).find("input:checkbox"),
      valid = checkboxes.filter(":checked").length >= limit;
    if (valid) {
      checkboxes.not(":checked").attr("disabled", valid);
      $('.container').show();
    }
  });
});


   Enter your details to successfully complete the service request 
  
    
      
    
    
      
    
    
       select your date and time

AuxTaco · Accepted Answer

Your regex matches strings that contain at least one number:

var re = /[0-9]/;
re.test('39583902'); // true
re.test('mostly letters but also 1 number'); // true
re.test('entirely letters'); // false

Invert the logic of your regex and if condition:

var re = /[^0-9]/;
...
else if (re.test(booking_number)) {
  alert('Numbers only, please');
}

You can also drop all the validation code from your click handler and let the browser handle it:

$(document).ready(function() {
  $("#contact").on("submit", function(evt) {
    console.log("in the form's submit handler");
    evt.preventDefault();
    // Run your AJAX here
  });
});

label {
  display: block;
  margin: 0.5em 0;
}


 Enter your details to successfully complete the service request 

    
      Your Address
      
    
    
      Your number
      
    
    
      Select your date and time
      
    
    
      Message (optional)

I've added a minlength attribute to the booking number and fixed its validation regex (HTML just needs the contents of the regex, and its escape character is &; there's no need to escape \d).

The browser won't submit a form that doesn't validate, so you can put your AJAX in the form's submit handler (not the submit button's click handler) and it will only run with valid data. Make sure to call preventDefault() on the event so submitting the form doesn't reload the page.

If else statement for jQuery AJAX is not running

Answers (1)

Related Questions