how to send text value to server without the form submitting using ajax

Good Morning!

I think there are several things to say about your code. First of all your submit function:

$('form').submit(function(event) { ... }

Here you want to catch the submit-event when the user hits the button. Everything good, but since your button is of type=submit the browser will also react on the click and handle the submit-process by itself. Your function won't get called properly. To prevent this you have to escape the default behaviour of your form on submitting:

$('form').submit(function(event) {
  event.preventDefault();

  $.ajax({ ... });
}

This will do the trick to let the browser do what you want instead of handling the submit by itself.

So now your browser can run your ajax call.

Next thing: The ajax-call.

You did many things right, but some important things wrong. Look at the following structure:

$.ajax({
     url:      'your_url_to_send_data_to',
     type:     'post', //the method to use. GET or POST
     dataType: 'json',
     data:     data, //your data: {key1:value1, key2:value2}
     success: function(data) { //handle a successfull response (200 OK)
        alert(data);
        //here you can do with your data whatever you want
     },
     error: function(jqXHR, textStauts, errorThrown){ //handle every error. e.g. 500
       alert(textStatus + ': '+errorThrown);
     } 
}}); 

This will handle the sending and the recieving of your request. The success function will get called if the server returns an 200 OK. Otherwise the error function gets called. Now you just have to handle the request on server side properly.

Third thing: What's about the real submit after the name-check?

Since you preventDefault() the default browsers action, sou have to do it manually. You could think of triggering the submit again, but you would ran another time in your own function you've written so far. Therefore you have to do it by your own. But wait! You can combine the two things in one call!

Think about this:

1. let the user fill your form
2. let him hit the submit button
3. preventDefault behaviour of your browser and build a FormData and put all your values in it
4. prepare your ajax call
5. send the FormData with your ajax call to your server
6. Handle name-check and all other things on server-side
7. answer the request
8. evalutate the answer in your success function

Note: On server side you have to print the application/json header to let the browser and finally your ajax call handle your answer properly.

Since you want a dynamic check of the user name availability, I suggest you react to the keyup event (note: I also added support for other possible change-incurring events in my demo below) and schedule a check run after a fixed delay. Once the delay transpires, if the user hasn't typed anything in the interim, you can run the AJAX check and update the page; if the user did type something in the interim, you can simply not run the check (yet). This means a check will automatically be run after every flurry of typing, as long as the user ceased typing for at least the hard-coded delay.

With regard to submitting, I would just allow the user to submit the form in the normal way without any last-second AJAX check of user name availability. You're still going to have to perform a server-side check for availability, in case the user disabled JavaScript or somehow constructed their own submit HTTP query, so you may as well depend on that server-side check upon form submission. The dynamic AJAX check is really only beneficial as a quick notification to the user, and so should only be provided if the user edits the user name, and then does not submit the form immediately. Most of the time the user will not submit the form immediately after editing a field, and most users can be relied upon to not submit the form if it is clearly indicated on the page that there is a validation failure.

var USERNAME_CHECK_DELAY = 800;

var userInputValCount = 0;
var userInputVal = '';

window.handlePossibleUserInputChange = function() {
  let $userInput = $('#userInput');
  let $checkDiv = $('#userCheckLine');
  // if this event doesn't reflect a value change, ignore it
  if ($userInput.val() === userInputVal) return;
  userInputVal = $userInput.val();
  // update the value count
  let userInputValCountCapture = ++userInputValCount; // closure var
  // schedule a potential check run
  setTimeout(function() {
    // only check the current name if the user hasn't typed since the provoking event
    if (userInputValCountCapture !== userInputValCount) return;
    checkUsername();
  },USERNAME_CHECK_DELAY);
  // update the status message
  if ($userInput.val().trim() === '') {
    $checkDiv.text('');
  } else {
    $checkDiv.attr({'class':'checking'});
    $checkDiv.text('checking...');
  } // end if
};

$('#userInput')
  // listen to all events that could cause a change in the input value
  .on('keyup change',handlePossibleUserInputChange)
  // drop is special; the drop event unfortunately fires before the text is changed
  // so we must defer the call until after the text is changed
  // same with mouseup; occurs when clicking the input box X button in IE
  // same with paste via context menu, rather than shortcut (which would trigger keyup)
  .on('drop mouseup paste',function() { setTimeout(handlePossibleUserInputChange); })
;

var lastTaken = true;

window.checkUsername = function() {
  let $checkDiv = $('#userCheckLine');
  let $userInput = $('#userInput');
  // just reset the check line if the input value is empty
  if ($userInput.val().trim() === '') {
    $checkDiv.text('');
    return;
  } // end if
  // ... send ajax call, get result ...
  // (for demo purposes, just invert the previous result)
  let taken = lastTaken = !lastTaken;
  if (taken) {
    $checkDiv.attr({'class':'taken'});
    $checkDiv.text('user name is taken.');
  } else {
    $checkDiv.attr({'class':'notTaken'});
    $checkDiv.text('user name is available.');
  } // end if
};

.taken { color:red; }
.notTaken { color:green; }
.checking { color:grey; font-style:italic; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
  <div>
    <input id="userInput" type="text" placeholder="username"/>
    <span id="userCheckLine"></span>
  </div>
  <input type="submit" value="Submit"/>
</form>

I think you should use the "remote" of jquery validation (https://jqueryvalidation.org/remote-method/) this check the validation of the field in the server. You need jquery.

$("#Registration_Form").validate({
  rules: {
    Registeration_Username_box: {
      required: true,
      remote: {
        url: "check-email.php",
        type: "post"
      }
    }
  }
});