massef
@massef

Отправка формы, по заполнению?

Нужно при заполнении полей автоматически сабмитить форму.
После всех проверок пишу $('#form').submit();, но ничего не происходит, хотя если прописать console.log('blabla'). то выводит.
Если добавить кнопку submit, то при нажатии кидает на пустую страницу с Cannot POST /, я так понимаю сабмит сработал. Но вот при заполнении полей эта страничка почему то не выводится.
ajax'а нет

UPD:
Небольшой кусок из формы, т.к. она большая. Селект тут не стандартный
<form id="noticeFilter" class="form" action="/" method="post">
	<div class="form__row">
		<label>Тип заявки</label>
		<div class="select">
			<a href="javascript:void(0);" class="select__trigger ico-select">Выбрать</a>
			<ul class="select__drop">
				<li><a href="#">Банковский кредит</a></li>
				<li><a href="#">Микрокредит</a></li>
				<li><a href="#">КАСКО</a></li>
				<li><a href="#">ОСАГО</a></li>
			</ul>
			<input type="hidden" id="selectType" value="Банковский кредит" />
		</div>
	</div>
	<div class="form__row">
		<div class="date " data-date="" data-date-format="dd MM yyyy" data-link-format="dd.MM.yyyy">
			<label>c</label>
			<input type="text" value="27.03.2015" class="datetimepicker form-control" readonly/>
			<span class="ico-date"></span>
		</div>
		<div class="date " data-date="" data-date-format="dd MM yyyy" data-link-format="dd.MM.yyyy">
			<label>по</label>
			<input type="text" value="27.03.2015" class="datetimepicker form-control" readonly/>
			<span class="ico-date"></span>
		</div>
	</div>
</form>


Этот кусок кода вызывает дропдаун селекта, после выбора пункта и закрытия селекта я пытаюсь отправить форму, но ничего не происходит. И так абсолютно для любых полей, пробовал на выбор даты вешать, тоже ничего.
// Select
	$('.select__trigger').click(function(){
		var dropBlock = $(this).parent().find('.select__drop');
		
		$('.select__drop').removeClass('active').slideUp(200);

		if( dropBlock.is(':hidden') ) {
			dropBlock.slideDown(200);

			$(this).addClass('active');

			$('.select__drop').find('li').click(function(){
				var selectResult = $(this).text();
				$(this).parent().parent().find('input').val(selectResult);
				$(this).parent().parent().find('.select__trigger').removeClass('active').html(selectResult);

				dropBlock.slideUp(200);
				$('#noticeFilter').submit(); // вызов сабмита формы
			});

		} else {
			$(this).removeClass('active');
			dropBlock.slideUp(200);
		}
		$(document).on('click',function(){
			$('.select__drop').removeClass('active').slideUp(200);
		});
		return false;
	});
  • Вопрос задан
  • 491 просмотр
Решения вопроса 1
Ну так если у вас в форме стоит /, то все понятно. Так как форма отправляется у вас не ajax-сом, то когда вы имитируете нажатие на кнопку, то форма отправляет вас как раз по адресу, который указан в action. Вам нужно в атрибуте action указать путь, куда должны быть отправлены данные с вашей формы для обработки, вот и все.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
на сколько я помню политика безопасности браузера вам не даст отпарвить форму таким способом, имитирую клик или же отправку.
тут вам в руки примерно такой код
getJson('/form/action/url', $('#formId').serialize());
function getJson(actionUrl, rgData){
    $.ajax({
        url: actionUrl,
        type: 'POST',
        dataType: "json",
        timeout: 60000,
        data: rgData,
        beforeSend: function(){
            $('body').append('<div class="loader"><div class="animation"></div><div class="bg"></div></div>');
            setTimeout('', 5000);
        },
        success: function(data){
            if(typeof(data.callback) != 'undefined') {
                var callback = data.callback; delete data.callback;
            }
            else
                var callback = [];

            $.each(data, function( elementId, item ){

                var selector = '#' + elementId;

                switch( item[1] == undefined ? 'rewrite' : item[1] ){
                    case 'rewrite':
                        $( selector ).html( item[0] );
                        break;

                    case 'before':
                        $( selector ).prepend( item[0] );
                        break;

                    case 'after':
                        $( selector ).append( item[0] );
                        break;

                }

            });
            $.each(callback, function(key, item){ eval(item); });
        },
        complete: function (){
            $('.loader').remove();
        },
        error: function (data){
            if(data.responseText){
                var rgData = JSON.parse(data.responseText);
                $('#ui-dialog-title-dialog-modal').text(rgData.error.type);
                $('.message_error').text(rgData.error.message);
                $('.file_error').html('<b>' + rgData.error.file + '</b> in line ' + rgData.error.line);
                $('#dialog-modal').dialog('open');
            }
        }
    });
    return false;
}

на стороне серера обрабатываете данные как они пришли к вам если бы вы отправили форму стандартным способом.
можно вернуть данные и функция их обработает.
echo json_encode([
['idContainerHtml'] => ['возвращаемый контент', 'rewrite'],
['callback'] => [
  'alert("Форма отправлена")',
  'location.href="/redirect/url"'
]
]);

указываете контейнер в который нужно вернуть данные (rewrite - перезапишет, aftere - добавить в конец, before - добавить в начало).
в массив callback запихиваем весь js код который вам необходимо выполнить
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы