отправка формы

[Moloch]

Здравствуйте подскажите пожалуйста как настроить отправку формы через аякс? я брал материал вот отсюда http://blog.ox2.ru/php/ajax-form/
в head добавил такую функцию

<script type="text/javascript">
 
            function AjaxFormRequest(result_id,form_id,url) {
                jQuery.ajax({
                    url:    url,
                    type:     "POST", //Тип запроса
                    dataType: "html", //Тип данных
                    data: jQuery("http://c2788.paas2.ams.modxcloud.com/profil.html"+form_id).serialize(), 
                    success: function(response) { //Если все нормально
                    document.getElementById(result_id).innerHTML = response;
                },
                error: function(response) { //Если ошибка
                document.getElementById(result_id).innerHTML = "Ошибка при отправке формы";
                }
             });
        }
   </script>

на соответствующей страницы я вызываю эту функцию так:

<button  type="submit" class="btn btn-primary" onclick="AjaxFormRequest('okno1', 'profil', 'assets/templates/blog/form.php')">сохранить профиль</button>

в итоге при отправке данных формы на сервер у меня постоянно вылезает сообщение что данные не отправлены иперебрасывает на страницу profil.html. Что я сделал неправильно?
код form.php

<?php
 
if (isset($_POST["username"])) {
   
    echo "yourlogin: " . iconv("utf-8", "cp1251", $_POST["username"]) . "<br/>";
     echo "yourfullname: " . $_POST["fullname"] . "<br/>";
    echo "yourmail: " . $_POST["email"] . "<br/>";
    }
    ?>

[danik.js]

Я для универсальной "аяксификации" форм использовал такой скрипт:

$(document).submit(function(event){
        var form = event.target;
        if ($(form).data('async') == undefined) {
            return true;
        }
        event.preventDefault();
        var data = $(form).serialize();
        $(form.elements).prop('disabled', true);
        $(form).css('opacity', 0.5);
        $.post(form.action, data, function(response) {
            $(form).replaceWith($(response));
        });
    });

А формам, которые нужно зааяксить добавляешь атрибут data-async.
Форма после отправки заменяется тем, что пришлет сервер в ответ.

[Moloch]

спасибо. я сделал как написано вот тут http://dustweb.ru/2008/11/jquery-ajax-form-sending/. все работает но дело в том что сама форма вызывается тоже аяксом . вот так

<span onclick="TINY.box.show({url:'[[++site_url]][[~12]]',width:300,height:450})">Настройки</span>&nbsp;&nbsp;&nbsp;&nbsp;

После того как я вызвал фрому и отредактировал профиль пользователя я нажимаю сохранить и сначала меня перебрасывает на саму страницу с этой формой (profil.html) а уж потом на ней я могу отправить данные аяксом. логика работы сниппета содержащего эту форму такова что я не могу оставить атрибут action пустым и в нем я указываю id страницы на которой эта форма вызывается. Можно как нибудь сделать чтобы меня не перебрасывало на profil.html а данные отправлялись сразу?

[danik.js]

Все из-за отправки формы браузером. Кнопка button[type=submit] отправляет форму, так? Чтобы этого не происходило, надо остановить действие по умолчанию (отправку) через event.preventDefault(). Или вернуть return false.

[Moloch]

заинтересовал ваш вариант решения. пытаюсь разобраться. скрипт который вы написали мне ег где вызывать в head ? и вместо form мне айдишник своей формы подставить так?

[danik.js]

Мой скрипт хорош как универсальный вариант для нескольких форм.
Вот твой, чуть измененный:

<script>
function submit(form, messageTarget) {
    messageTarget = $('#' + messageTarget);
    $.ajax({
        url: form.action,
        type: form.method, //Тип запроса
        dataType: "html", //Тип данных
        data: $(form).serialize(),
        success: function(response) { //Если все нормально
            messageTarget.html(response);
        },
        error: function(response) { //Если ошибка
            messageTarget.html("Ошибка при отправке формы");
        }
    });
}
</script>
<form action="blabla.html" method="POST" onsubmit="return submit(this, 'okno1'), false">
    ...
</form>

[Moloch]

что-то я видать дичайше туплю но не работает почему-то. страница перезагружается. сделал все как вы написали.

<script type="text/javascript">
function submit(form, messageTarget) {
    messageTarget = $('#' + messageTarget);
    $.ajax({
        url: form.action,
        type: form.method, //Тип запроса
        dataType: "html", //Тип данных
        data: $(form).serialize(),
        success: function(response) { //Если все нормально
            messageTarget.html(response);
        },
        error: function(response) { //Если ошибка
            messageTarget.html("Ошибка при отправке формы");
        }
    });
}
</script>
<div id = "okno1">

</div>
<form action="[[~[[*id]]]]" method="post" class="form-horizontal" id = "profil" onsubmit="return submit(this, 'okno1'), false">

	<div class="control-group">
		<label class="control-label">[[%ha.gravatar]]</label>
		<div class="controls">
			<img src="[[+gravatar]]?s=100" alt="[[+email]]" title="[[+email]]"  style="margin-left:40px;" />
			<br/><small>[[%ha.gravatar_desc]]</small>
		</div>
	</div>

	<div class="control-group[[+error.username:notempty=` error`]]">
		<label class="control-label">[[%ha.username]]</label>
		<div class="controls">
			<input type="text" name="username" value="[[+username]]" />
			<span class="help-inline">[[+error.username]]</span>
		</div>
	</div>
	
	<div class="control-group[[+error.fullname:notempty=` error`]]">
		<label class="control-label">[[%ha.fullname]]</label>
		<div class="controls">
			<input type="text" name="fullname" value="[[+fullname]]" />
			<span class="help-inline">[[+error.fullname]]</span>
		</div>
	</div>
	
	<div class="control-group[[+error.email:notempty=` error`]]">
		<label class="control-label">[[%ha.email]]</label>
		<div class="controls">
			<input type="text" name="email" value="[[+email]]" />
			<span class="help-inline">[[+error.email]]</span>
		</div>
	</div>


	<input type="hidden" name="hauth_action" value="updateProfile" />
	<div class="form-actions">
		<button  type="submit" class="btn btn-primary">[[%ha.save_profile]]</button>

<!--<input type="button" class="btn btn-primary" value="[[%ha.save_profile]]" onclick="AjaxFormRequest('okno1', 'profil', 'assets/templates/blog/form.php')"/> -->
		&nbsp;&nbsp;
		<a href="[[++site_url]][[~[[*id]]]]" class="btn btn-danger">[[%ha.logout]]</a>
	</div>

</form>

[danik.js]

Моя вина. Переименуй submit в submitForm скажем. Проблема в конфликте между submit и this.submit формы (обработчик заворачивается в with (this) {} блок). Не проверял, но думаю дело в этом.

[Moloch]

теперь заработало но проблема осталась . для примера попробуйте вот здесь сначала авторизоваться в коментах а потом тыкнуть по кнопке настроить и нажать сохранить профиль http://c2788.paas2.ams.modxcloud.com...%BE%D0%BD.html

[danik.js]

Ну вообще-то у тебя закомментирован скрипт. И ты не переименовал саму функцию.