Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.10.2016, 18:49
Профессор
Отправить личное сообщение для smart-create Посмотреть профиль Найти все сообщения от smart-create
 
Регистрация: 25.10.2016
Сообщений: 157

Один скрипт для всех форм на странице
Доброго времени суток! Прошу профессиональной помощи у всех сведущих в js людей. Я только недавно стал изучать js программирование и недавно столкнулся с весьма неприятной задачей. Неделя активного гуглежа и раздумий не к чему меня не привели, по этому искренне надеюсь найти помощь здесь.

Дело вот в чем, у меня есть контактная форма на сайте, для нее я написал скрипт валидации и отправки через ajax, вот собственно разметка формы и сам скрипт:
<form method="post" action="main_c/order" id="contact-form">
	<input type="text" name="name" placeholder="Имя *" />
	<input type="text" name="phone" placeholder="Телефона *" />
	<button type="submit" name="btn_order_1" id="btn_1">Жду звонка!</button>
</form>
<div id="thank-you" class="display">
	<p>Спасибо за заявку! <small>Наш дежурный инженер свяжется с Вами в ближайшее время</small></p>
</div>

<script>
$(function(){
	var contact_form = $("#contact-form");
	var input = $("#contact-form input");
	var name = $("#contact-form input[name='name']");
	var phone = $("#contact-form input[name='phone']");
		
	contact_form.find("[name=btn_order_1]").click(function(event){
		event.preventDefault();
		event.stopPropagation();
		if(name.val() == "", phone.val() == ""){
		//error
			console.log('false');
			input.addClass('input-error');
			return false;
		}else{
		//true
			console.log('true');
			input.removeClass('input-error');
			input.addClass('input-success');
			contact_form.ajaxSubmit({
				url: contact_form.attr('action'),
				type: contact_form.attr('method') || 'POST',
				data: {
					btn_order_1: 1,
				},
				dataType: 'json',
				success: function(data) {
					contact_form.find('[type=reset]').click();
				},
			});
			setTimeout(function(){
				$('#thank-you').fadeIn(300);
				$('#contact-form').fadeOut(300);
			},300);
		}
		return false;
	});
});
</script>

И все бы хорошо, все работает так как я и хочу, НО как быть если форм у меня несколько, скажем штук 20. Выходит что мне нужно этот скрипт копировать 20 раз и проставлять в нем и в самих формах новые уникальные id - это как то жутко неудобно а самое главное не правильно.
Подскажите пожалуйста что именно мне нужно изменить/дописать в алгоритм этого скрипта что бы он работал как и работает но сразу для всех форм на сайте (само собой имеется в виду только активная форма, с которой в данный момент контактирует пользователь).
Ответить с цитированием
  #2 (permalink)  
Старый 25.10.2016, 19:01
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от smart-create
var contact_form = $("#contact-form");
var input = $("#contact-form input");
var name = $("#contact-form input[name='name']");
var phone = $("#contact-form input[name='phone']");

contact_form.find("[name=btn_order_1]").click(function(event){
$("form").submit(function(event){
    //значения полей формы для проверки
    this.name.value
    this.phone.value
    //и т.д.


"form" может быть селектором по имени класса, который объявляется проверяемым формам.
Ответить с цитированием
  #3 (permalink)  
Старый 25.10.2016, 19:15
Профессор
Отправить личное сообщение для smart-create Посмотреть профиль Найти все сообщения от smart-create
 
Регистрация: 25.10.2016
Сообщений: 157

Уважаемый laimas. Благодарю за корректировки относительно моих переменных. И прошу прощения за некую не компетентность, как я и писал выше, я только начинаю изучать js и не совсем понимаю Ваш ответ, не могли бы Вы объяснить немного подробнее?
Ответить с цитированием
  #4 (permalink)  
Старый 26.10.2016, 01:54
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от smart-create
не могли бы Вы объяснить немного подробнее?
В данный момент я не обладаю достаточным временем, чтобы все пояснять. А суть проста:

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

2) Обрабатывайте событие onsubmit форм (в jQuery события указываются без предшествующего on). this в этом обработчике ссылается на DOM элемент источник события, в данном случае форма, которая отправляется. Если на странице только формы, которые нужно обработать этим единым сценарием, то в качестве селектора можно прописать и $('form'), в противном случае можно задать этим формам одно имя класса, например ".callform" и установить на них обработчик $('.callform'). Значение любого поля формы, это ссылка на текущую форму -> имя поля формы -> его значение, то есть this.phone.value.

3) Трудно представить 20 идентичных форм на странице, но уж если надо, и их обрабатывает один скрипт, а серверу нужно знать с какой части страницы отправка, то этим идентификатором для сервера может служить кнопка отправки формы, если ее оформить так:

<button type="submit" name="btn_order" value="1">Жду звонка!</button>

и значение value="1" у каждой формы свое, то по этому значению ключа btn_order сервер может определять место отправки.

4) Если 20 форм, а данные ими передаваемые различны, то таким образом не получится проверка данных, нужно описывать правила проверки, чтобы одним сценарием их проверять.

JQuery по русски, почитайте.
Ответить с цитированием
  #5 (permalink)  
Старый 26.10.2016, 18:22
Профессор
Отправить личное сообщение для smart-create Посмотреть профиль Найти все сообщения от smart-create
 
Регистрация: 25.10.2016
Сообщений: 157

Добрый вечер! Я внес в скрипт все Ваши рекомендации, вот что у меня получилось:

<form method="post" action="main_c/order_1">
	<input type="text" name="name" placeholder="Введите ваше имя *" /><br />
	<input type="text" name="phone" placeholder="Введите номер телефона *" /><br />
	<button type="submit" name="btn_order">Жду звонка!</button>
</form>

<script>
$(document).ready(function () {
	$("form").submit(function(event){
		event.preventDefault();
		event.stopPropagation();
		
		if(this.name.value() == "", this.phone.value() == ""){
		//error
			console.log('false');
			return false;
		}else{
		//true
			console.log('true');
			$("form").ajaxSubmit({
				url: $("form").attr('action'),
				type: $("form").attr('method') || 'POST',
				data: {
					btn_order: 1,
				},
				dataType: 'json',
				success: function(data) {
					$("form").find('[type=reset]').click();
				},
			});
		}
		return false;
	});
})
<script>


Но скрипт не работает, происходит ошибка Uncaught TypeError: this.name.value is not a function, я как только не колдовал сегодня с этим this.name.value, ошибка постоянно одна и та же. Подскажите пожалуйста что моя неопытная голова делает не так?
Ответить с цитированием
  #6 (permalink)  
Старый 26.10.2016, 18:54
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

event.stopPropagation(); - этого не требуется.

if(this.name.value == "" || this.phone.value == ""){

value - это свойство, а не функция. Но в данном случае такая проверка некорректна так как значение " " пройдет такую проверку, а не является верным.

Лучше так, используя тот же JQ

if(!$.trim(this.name.value) || !$.trim(this.phone.value)) {
Ответить с цитированием
  #7 (permalink)  
Старый 26.10.2016, 20:05
Профессор
Отправить личное сообщение для smart-create Посмотреть профиль Найти все сообщения от smart-create
 
Регистрация: 25.10.2016
Сообщений: 157

Уважаемый laimas, снова Вас благодарю за помощь, сейчас все заработало! Но снова приношу извинения за свою непроглядную тупость)

Скрипт сейчас имеет вид:
$(document).ready(function () {
	$("form").submit(function(event){
		event.preventDefault();
		if(!$.trim(this.name.value) || !$.trim(this.phone_1.value)){
		//error
			console.log('false');
			$("input").addClass('input-error');
			return false;
		}else{
		//true
			console.log('true');
			$("input").removeClass('input-error');
			$("input").addClass('input-success');
			$("form").ajaxSubmit({
				url: $("form").attr('action'),
				type: $("form").attr('method') || 'POST',
				dataType: 'json',
				success: function(data) {
					$("form").find('[type=reset]').click();
				},
			});
		}
		return false;
	});
})


Но все равно продолжает воздействовать на все формы на странице...
Что со мной все таки не так?)
Ответить с цитированием
  #8 (permalink)  
Старый 27.10.2016, 03:32
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

event.preventDefault(); - отменяет действие формы по умолчанию, то есть ее отправление, а значит

$("input").addClass('input-error');
return false; - это уже в общем то пустой звук, как и в конце обработчика return false; ни к чему.

Если .ajaxSubmit(), значит у вас CMS MODX, так? Или подключили этот плагин? Вкупе с jQuery каша полнейшая.

console.log(вывод) - это для отладки, проверили, выбросили.

$("input").removeClass('input-error'); и $("input").addClass('input-success'); - это кому, если форм на странице 20 штук, а обработчик отправки формы работает с текущей? И если их 20, то это что:$("form").attr('action'), $("form").find('[type=reset]').click(), а обработчик отправки формы работает с текущей?

Либо вы не просто копируете то, что вам пишут, но еще и читаете и вникаете что к чему, либо вы напишите монстра, который естественно работать не будет.

Словами это так:

$("form").submit(function(event) { - всем формам на странице установить ЭТОТ обработчик события отправления формы

event.preventDefault(); - отменить отправку формы по умолчанию

а далее в обработчике this - это ссылка на текущую форму (но не как объект jQuery, а как DOM элемент страницы), и достаточно использовать ее а не ковыряться опять в структуре DOM. Но в дальнейшем, по ходу сценария this может быть и переопределен, а также посредством JQ изменяются классы элементов, тогда можно поступить так, с учетом того, что в jQuery своих ajax-методов как грязи и .ajaxSubmit() совсем не нужен:

$.valHooks.input = { //тут мы будем обрезать крайние пробелы у полей формы, перед использованием их значений посредством jQuery 
    get: function(e) {
        return $.trim(e.value)
    }
};

$(function() { //тоже самое что и $(document).ready(function ()...
    $('form').submit(function(e) {
        e.preventDefault();
        var f = this, //текущая! форма как DOM, а не объект jQuery
            e = $(f.elements).slice(0, -2), //а это элементы формы без кнопки submit/reset, если они последние форме!, как объекты jQuery
            //и если 20 форм имеют разнличные поля, и какждая из них может иметь разное их количество, 
            //то все проверки нужно делать проходом в цикле по этим полям, проверяя значения каждого 
            err = 0; //признак ошибки проверки полей формы - если 0, то нет, 1 - есть незаполненные поля
        e.each(function() {
            //проверяем значение поля, и если не заполнено,
            //то err = 1 и добавляем класс input-error элементу
        })
        //проверяем, если нет ошибок отправляем форму
        if(!err) {
            $.ajax({ //отправка формы ajax-методом
                url: f.action,
                type: 'POST',
                dataType: 'json',
                success: function(data) {
                    f.reset(); //сбрасываем текущую форму!
                },
            })    
        }         
    });
});


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

Последний раз редактировалось laimas, 27.10.2016 в 10:31.
Ответить с цитированием
  #9 (permalink)  
Старый 27.10.2016, 14:27
Профессор
Отправить личное сообщение для smart-create Посмотреть профиль Найти все сообщения от smart-create
 
Регистрация: 25.10.2016
Сообщений: 157

Добрый день, laimas! Я понимаю что уже порядком надоел Вам свой некомпетентностью, но увы, не знаю как по другому научиться делать правильно, и очень благодарен Вам за то что Вы уже очень помогли!
Сегодня новый день и возникли новые вопросы. Я переделал свой скрипт, учитывая все Ваши правки (некоторые моменты написал по другому, в силу того что не совсем понял что вы имели в виду в предыдущем ответе). Самое главное что теперь скрипт заработал так как нужно, каждая форма обрабатывается им отдельно, и я необычайно этому рад)
Но появилась другая проблема которая поставила меня в тупик окончательно, перестала работать отправка формы. То есть сам скрипт отлично отрабатывает все условия и генерирует отправку. НО сама отправка не происходит - данные в БД не заносятся, и на e-mail соответственно не отправляются.
Могли бы Вы еще разок взглянуть на все мое "творение" в комплексе?

<!-- Форма -->
<form method="post" action="main_c/order_1">
	<input type="text" name="name" placeholder="Введите ваше имя *" /><br />
	<input type="text" name="phone_1" placeholder="Введите номер телефона *" /><br />
	<button type="submit" name="btn_order_1">Жду звонка!</button>
</form>
<!-- EXIT Форма -->


<!-- Скрипт -->
$(function() {
	$.valHooks.input = {
		get: function(e) {
			return $.trim(e.value)
		}
	};
	$("form").submit(function(e){
		e.preventDefault();
		var f = this, 
			e = $(f.elements).slice(0, -1);
		
		if(!$.trim(this.name.value) || !$.trim(this.phone_1.value) || !$.trim(this.email.value)){
			e.addClass('input-error');
		}else{
			e.removeClass('input-error');
			e.addClass('input-success');
			$.ajax({
				url: f.action,
                                type: 'POST',
                                dataType: 'json',
                                success: function(data) {
                                      f.reset();
                                },
			});
		}
	});
})
<!-- EXIT Скрипт -->

<!-- Контролер который обрабатывает форму и генерирует отправку на email -->
function order_1() {
	if (isset($_POST['btn_order_1'])) {
		header("Cache-Control: no-store, no-cache, must-revalidate");
		$client['name']  = $_POST['name'];
		$client['phone_1']  = $_POST['phone_1'];
		$this->main_model->new_order_1($client);
		
		$this->email->from('ru.marketroll@gmail.com', 'ЗАГОЛОВОК');
		$this->email->to('velichko.my.site@gmail.com'); 
		$this->email->subject('ТЕМА');
		$this->email->message('Имя: '.$client['name']."\r\n".'Номер телефона: '.$client['phone_1']);	
		$this->email->send();
			
		echo json_encode($client);
	}
}
<!-- EXIT Контролер  -->


<!-- Модель которая принимает данные от контролера и вносит их в БД -->
function new_order_1($client){
	$array = array(
		'name' => $client['name'],
		'phone_1' => $client['phone_1']
	);
	$this->db->insert('client', $array); 
}
<!-- EXIT Модель  -->


Самое главное что вся эта система работала с тем изначальным (пусть и очень корявым/страшным) скриптом, а сейчас нет, и консоль не дает не каких ошибок, просто нечего не происходит. Я понимаю что причина этого кроется где-то здесь, в алгоритме отправки через AJAX:
$.ajax({
	url: f.action,
        type: 'POST',
        dataType: 'json',
        success: function(data) {
             f.reset();
        },
});


Но в чем именно причина, до меня не как не доходит, перепробовал все что мог и все что знал...
Ответить с цитированием
  #10 (permalink)  
Старый 27.10.2016, 14:44
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Я задаю вопросы, на которые нет ответа, и что ответить?

Что за куча форм, они все на 100% идентичные как приведенная, то есть имеют одинаковое количество полей и самое главное одни и те же имена их?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
поиск классов внутри тега yozuul jQuery 24 14.06.2013 22:00
скрипт для выбора серий и сезонов vk Evkliptik Общие вопросы Javascript 0 23.09.2012 16:10
Загрузить title для ссылок на странице MarikVal jQuery 0 27.07.2009 20:38
Пошаговый вывод скрипта для IE всех версий. Zidky Элементы интерфейса 10 17.06.2009 18:27
Как изменить скрипт, что бы им его можно было использовать для нужной страницы Nick50_70 Общие вопросы Javascript 0 28.04.2009 23:30