Hello, it is impossible to screw the form, the form should disappear without reloading the page and let's say show the text. Code below

(function($) { $(function() { $('.rf').each(function() { var form = $(this), btn = form.find('.btn_submit'); form.find('.rfield').addClass('empty_field'); // Функция проверки полей формы function checkInput() { form.find('.rfield').each(function() { if ($(this).val() != '') { $(this).removeClass('empty_field'); } else { $(this).addClass('empty_field'); } }); } // Функция подсветки незаполненных полей function lightEmpty() { form.find('.empty_field').css({ 'border-color': '#ff0000' }); setTimeout(function() { form.find('.empty_field').removeAttr('style'); }, 500); } setInterval(function() { checkInput(); var sizeEmpty = form.find('.empty_field').size(); if (sizeEmpty > 0) { if (btn.hasClass('disabled')) { return false } else { btn.addClass('disabled') } } else { btn.removeClass('disabled') } }, 500); btn.click(function() { if ($(this).hasClass('disabled')) { lightEmpty(); return false } else { form.submit(); } }); }); }); })(jQuery); 
 <label for="name">Name:*</label> <input type="text" class="rfield" id="name" /> <input type="submit" class="btn_submit disabled" value="Отправить данные" />
I ask for help

    1 answer 1

    Like that? http://jsfiddle.net/Haikson/js0s31fb/ The code is provided as a hint, not as a solution to your problem.

     $(document).ready(function(e) { $("form[ajax=true]").submit(function(e) { e.preventDefault(); var form = $(this); var form_data = $(this).serialize(); var form_url = $(this).attr("action"); var form_method = $(this).attr("method").toUpperCase(); $("#loadingimg").show(); $.ajax({ url: form_url, type: form_method, data: form_data, cache: false, success: function(returnhtml) { $("#result").html(returnhtml); $("#loadingimg").hide(); $(form).hide(); }, error: function(jqXHR, textStatus) { alert("Request failed: " + textStatus); $("#loadingimg").hide(); } }); }); }); 
     body { font-family: 'Open Sans', 'Helvetica Neue', 'Arial', sans-serif; font-size: 13px; } form span { display: block; margin: 10px; } label { display: inline-block; width: 100px; } input[type="text"] { border: 1px soild #ccc; width: 200px; padding: 5px; } input[type="submit"] { padding: 5px 15px; } #result { padding: 5px; background: #ff9; } img#loadingimg { display: none; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="result"><a href="http://jsfiddle.net/Haikson/js0s31fb/" target="_blank">Пример лучше запускать на JSFiddle</a> т.к. я не знаю куда отправлять запрос на StackOverflow ))</div> <form method="post" action="http://jsfiddle.net/echo/html/" ajax="true"> <span> <label>Message: </label> <input type="text" name="html" placeholder="Howdy..." /> </span> <span> <label><img id="loadingimg" src="http://dev.cloudcell.co.uk/bin/loading.gif"/> </label> <input type="submit" value="Submit" /> </span> </form>