Некорректно работает ajax
 

Добрый день

Помогите, пожалуйста, разобраться.
Создаю форму для отправки данных пользователя в бд.

<div id="modal_form">
    <span id="modal_close">X</span>
    <form action="request_order.php" method="post" id="form_order">
        <input class="input" type="text" name="name" id="name" size="30" tabindex="1" placeholder="Ваше имя" required>
        <input class="input" type="text" name="surname" id="surname" size="30" tabindex="2" placeholder="Ваша фамилия" required>
        <input class="input" type="text" name="phone" id="phone" size="30" tabindex="3" placeholder="Ваш телефон" required>
        <input class="input" type="text" name="email" id="email" size="30" tabindex="4" placeholder="Ваш email" required>
        <textarea name="add_info" id="add_info" class="textarea" rows="3" cols="40" tabindex="5">дополнительная информация (особый уход, привычки, распорядок и т.д.)</textarea>
        <input type="submit" class="submit_find" name="submit" value="Отправить">
    </form>
</div>

Хочу отправить ее обработчику используя ajax:

<script type="text/javascript">
    $(document).ready(function(){
        $("#form_order").submit(function() { 
            var form_data = $(this).serialize(); 
            $.ajax({
                type: "POST", 
                url: "request_order.php", 
                data: form_data,
                success: function() { 
                    alert("Ваше сообщение отправлено!");
                }
            });
        });
    });
</script>

И получаю следующее:
если убрать action="request_order.php" в форме,
то данные в базу не добавляются,
однако сообщение alert выскакивает,

если оставить action="request_order.php" в форме,
то сначала добавляются данные,
затем alert,
а затем перенаправления на "request_order.php".

Вопрос: почему без action="request_order.php" в форме,
данные не вставляются в бд,
но я вижу alert? Как это исправить?
Еще заметила что введенные в форму данные(но не отправленные в бд), отражаются в url(после alert),
почему так? ведь я их передаю методом POST?

nina_, JS: Действия браузера по умолчанию; jQuery JS: .submit(), event.preventDefault()

После отправки данных из скрипта нужно прервать выполнения формы зашитые самим браузером ( вернуть false из обработчика submit например ) а со стороны сервера нужно принять и обработать данные которые вы отправляете с помощи аякса ...

Спасибо, прочла документацию, но видимо не до конца поняла.
Т.е. если я хочу, чтобы после того как нажму на submit отправлялись данные из формы, но при этом отменилось стандартное поведение submit (переход по action),
мне нужно, например, добавить id="submit":

<input id="submit" type="submit" class="submit_find" name="submit" value="Отправить">

и изменить js:

<script type="text/javascript">
    $(document).ready(function(){
        $("#submit").click(function(e){ 
            
            var form_data = $("#form_order").serialize(); 
            $.ajax({
                type: "POST", 
                url: "request_order.php", 
                data: form_data,
                success: function() {
                    alert("Ваше сообщение отправлено!");

                }
            });
           e.preventDefault();
        });
    });
</script>

Но при этом и передача данных "request_order.php" тоже отменяется.
Что-то видимо делаю не так?

Браузер сам умеет отправлять формы на сервер. Вы же делаете сбор данных формы и отправку самостоятельно из скрипта ... а браузер эту отправку дублирует и чтоб он это не делал ему надо об этом сообщить есть несколько вариантов сделать это но самый удобный на мой взгляд будит таким.

jQuery(function ( $ ) {
	$('#form_order').submit(function ( e ) {
		$.post( this.action, $( this ).serialize(), function ( data ) {
			alert("Ваше сообщение отправлено!");
		} );


		return false; // Отмена вшитых действий браузера.
	});
});

не совсем понял об отменился переход ... если нужен то можно назначить его через localhost.href