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

Question

[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;
	});

Comments

[Михаил Горячкин]

Какой адрес у вас стоит в аттребуте action у тега form?

[massef]

Сергей обновил вопрос, Михаил Горячкин стоит просто слэшь

Answer 1

[Михаил Горячкин]

Ну так если у вас в форме стоит /, то все понятно. Так как форма отправляется у вас не ajax-сом, то когда вы имитируете нажатие на кнопку, то форма отправляет вас как раз по адресу, который указан в action. Вам нужно в атрибуте action указать путь, куда должны быть отправлены данные с вашей формы для обработки, вот и все.

Comments

[massef]

Михаил Горячкин Так если я не знаю куда отправлять? Я просто верстаю страничку с формой, нужно сделать чтобы происходил сабмит после заполнения полей, но не реальная отправка данный, а как бы имитация, я не знаю как еще объяснить. Клиент просит сделать чтобы был сабмит после заполнения. Сама форма кнопку submit не имеет. Для валидации использую плагин bootstrapValidation, в нем есть Ajax отправка формы, сейчас пытаюсь разобраться в документации, но я мало того что англ. плохо знаю, так еще и в js не очень. Но даже если я разберусь как написать, опять же, куда мне данные то отправлять, это ведь локальная верстка.
Я просто не совсем хорошо понимаю принцип. Если объясните буду очень благодарен. Или почитать может что нибудь.

[Михаил Горячкин]

Ну если вы только верстаете страницу, то вас это не должно волновать, это все укажет тот кто будет натягивать ваш сайт на движок. А вы просто подключите валидацию и все. Но уж если клиенту надо показать, что форма отправляется, то и укажите там просто # и все. Вы только определитесь для начала, будут ли данные формы отправляться через ajax или с переходом на страницу.

[massef]

Нет, на другую страницу перехода не будет, должна эта обновляться, внизу формы есть таблица, в этой таблице будут обновляться данные. Я так понимаю здесь нужен ajax. Но тогда возникает вопрос, даже если я укажу # в самой форме и в ajax запросе, сработает ли сабмит?

[Михаил Горячкин]

Если предполагается ajax, то вы можете вообще не писать этот атрибут и не какой сабмит вам не надо обрабатывать, вы просто должны сверстать форму и и подготовить скрипт, который по нажатию на кнопку будет собирать все данные с формы, прогонять через валидацию и отправлять их на обработку. А потом когда вы передадите верстку бекенд-программисту, то он сам укажет в вашем скрипте, куда должны отправляться данные, или же попросит вас указать верный адрес, вот и все.

[Михаил Горячкин]

И если вы хотите, чтобы данные отправлялись именно через триггер sybmit, то вам придется добавить кнопку в форму, но при этом можете её скрыть.

[massef]

Михаил Горячкин Кнопки в форме нет, но можно как вы и сказали скрыть её, согласен. И у меня не получается написать ajax запрос после валидации. Немогу разобраться в bootstapValidation с ajax. Ладно, я вас понял, буду дальше копать. Спасибо.

[Михаил Горячкин]

Вот тут куча примеров по работе с bootstrap validation formvalidation.io/examples

Answer 2

[Шаров Дмитрий]

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

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 код который вам необходимо выполнить