Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Один скрипт для всех форм на странице (https://javascript.ru/forum/events/65555-odin-skript-dlya-vsekh-form-na-stranice.html)

smart-create 27.10.2016 15:10

Вопрос даже не в количестве форм, 20 - это я написал утрировано. Их несколько (всего 4) просто они находятся в разных местах и имею разный дизайн. Они передают имя, телефон и заголовок. Заголовок подтягивается не из инпутов, а не посредственно из верстки. Значения "name" у всех однотипных инпутов - одинаковые.
На самом деле (как по мне) эта информация уже бесполезна, потому как с предыдущей задачей Вы помогли мне успешно справиться, хотя Вам разумеется виднее.
Теперь мне просто нужно устранить возникшую ошибку с отправкой.

laimas 27.10.2016 16:07

Цитата:

Сообщение от smart-create
На самом деле (как по мне) эта информация уже бесполезна

То есть, одним сценарием вот так:

if(!$.trim(this.name.value) || !$.trim(this.phone_1.value) || !$.trim(this.email.value))

проверить любую форму с полями имеющими какие угодно имена?

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

Что метод $.ajax() jQuery, что плагин ajaxSubmit, это одно и тоже - организация асинхронного обмена данными с сервером. Что первый, что второй можно и выбросить, и написать такой обмен на том, что эти методы и используют - XMLHTTPRequest. И без проблем данные будут отправляться серверу, то есть ошибка совсем не в методе. Смотрим то, что вы считаете "бесполезной информацией":

<input type="text" name="name" placeholder="Введите ваше имя *" /><br />
<input type="text" name="phone_1" placeholder="Введите номер телефона *" /><br />

А скрипт проверяет условия:

if(!$.trim(this.name.value) || !$.trim(this.phone_1.value) || !$.trim(this.email.value))

Вопрос - если в форме отсутствует как таковое поле email будет ли выполнятся условие и в конечном итоге отправка формы серверу?

e = $(f.elements).slice(0, -1); - я пояснял почему так взяты элементы формы, и что их нужно будет проверить проходом в цикле. Как выясняется все одинаково, можно обойтись и без цикла, но

e.addClass('input-error'); - добавит указанный класс всем элементам формы содержащимся в коллекции е. Но ведь не факт, что все поля не заполнены, может не заполнено только одно, а зачем все отмечать ошибкой?

По поводу приема данных сервером. Это в общем то бардак, а не прием данных. Северу все равно проверялись ли данные на клиенте ли нет, он просто обязан проверить их - заполнены ли поля обязательные, возможно и имя, если есть на него условия, а уж номер телефона и электронного адреса (что-то его не видно не только на клиенте, но и в обработке на сервере) тем более нужно проверять. Иначе вы получите на сервере набор мусора, типа name=>" " и phone_1=>abc.

header("Cache-Control: no-store, no-cache, must-revalidate"); - это для чего? А это зачем - echo json_encode($client);? Зачем отправлять данные клиенту, которые он получил, а клиент их и так имеет, тем более, судя по коду, клиенту они и не нужны.

Вот эта функция вообще прелесть:

function new_order_1($client){
$array = array(
'name' => $client['name'],
'phone_1' => $client['phone_1']
);
$this->db->insert('client', $array);
}

То есть переменная $client уже определена массивом

array(
'name' = $_POST['name'];
'phone_1' = $_POST['phone_1'];
);

в функции order_1(), передана в функцию, а значит достаточно в ней - $this->db->insert('client', $client); и все, нет надо массив переписать заново только под другим именем, чтобы записать в базу. Это даже не глупость, это дикость. :) А если данные сервер не проверяет к тому же, представляете что может база хранить?

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

smart-create 27.10.2016 17:21

Я приношу извинения за некоторые неточности, предыдущие сообщение писал не с ПК а с телефона, по этому не много запутался что и от куда копирую.

На счет наличия пункта "email" - давайте его упустим, добавить одно поле, в процессе я смогу и сам, надеюсь справлюсь:)

Оставим в сценарии проверки:
Цитата:

if(!$.trim(this.name.value) || !$.trim(this.phone_1.value))
На счет приема данных на сервере, я знаю что там сплошной "быдло код", и это будет следующий пункт с которым мне необходимо разобраться, НО сейчас для меня главное что это самый "быдло код", принимает и отправляет данные, я хочу привести в порядок клиента, а потом перейти к оптимизации сервера. На счет вот этого:
Цитата:

header("Cache-Control: no-store, no-cache, must-revalidate");
, приношу извинения, это вообще не от туда..., при копировании "затесалось под шумок".

Цитата:

Заголовок подтягивается не из инпутов, а не посредственно из верстки. - этого в коде не наблюдается, а догадаться чего там у вас конкретно, как я уже говорил, я не могу. Будет конкретика, будет и конкретный код без лишнего.
- давайте обойдемся и без этого? Как и в случае поля с email, я думаю смогу разобраться как обработать и это поле, по уже готовому примеру, что бы не отнимать у Вас слишком много времени.

Если сформулировать это все конкретно и на конкретном примере:
- Я создал только что тестовую страницу, в ней есть 2 формы (абсолютно идентичны между собой):
<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>

<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>


Они должны обрабатываться вот этим скриптом:
$(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();
                },
            });
        }
    });
})


И передаваться на сервер, где полученную информацию с формы обрабатывает вот этот контролер:
function order_1() {
    if (isset($_POST['btn_order_1'])) {
        $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);
    }


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

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

laimas 27.10.2016 18:05

Цитата:

Сообщение от smart-create
Они должны обрабатываться вот этим скриптом:

Не будут они обрабатываться этим скриптом, так как нет в них поля email, которое проверяется условием.

А чтобы сервер принимал данные, их нужно отправлять (копировал код и сам проглядел):

$(function() {
    $("form").submit(function(e){
        e.preventDefault();
        var f = this,
            //получает элементы формы без кнопки submit и которые не заполнены 
            e = $(f.elements).slice(0, -1).removeClass('input-error').filter(function() {
                return !$.trim(this.value)
            });
        //если есть незаполненные поля, то пометить их    
        if(e.length) e.addClass('input-error'); 
        //иначе отправка формы
        else {
            e.addClass('input-success');
            $.ajax({
                url: f.action,
                type: 'POST',
                data: $(f).serialize(), //отправляемые данные, если надо добавить что-то производное, то $(f).serialize()+'&key_name='+значение
                dataType: 'json',
                success: function(data) {
                     //data содержит ответ сервера, и если сервер вернет ошибки заполнения формы, то сообщить
                     //и только если север подтвердит, что все ОК, только тогда сброс формы
                     f.reset();
                }
            });
        }
    });
});

smart-create 27.10.2016 19:51

Спасибо Вам огромное! Все заработало! Заработало еще лучше чем я мог ожидать. Еще раз спасибо, за помощь и потраченное время

laimas 28.10.2016 06:24

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

var f = this,
            s = $(f.elements).last(),
            e = s.end().slice(0, -1).removeClass('input-error').filter(function() {
                return !$.trim(this.value)
            });


перед строкой 13 добавить: s.prop('disabled', 1);, а в success: function(data) добавить: s.prop('disabled', 0);
Строку 13 переписать так: s.end().not(s).addClass('input-success');

warren buffet 01.11.2016 04:12

Одним словом laimas в прошлый раз не понял смысла атрибутов pattern, required и всех остальных.

laimas 01.11.2016 14:06

Цитата:

Сообщение от warren buffet
Одним словом laimas в прошлый раз не понял смысла атрибутов pattern, required и всех остальных.

Да куда нам дуракам чай пить, окромя тебя тут все кое как проггеры, куда нам с тобой, светоч ты наш, тагаться.

Бабушку свою учу, чмо.


Часовой пояс GMT +3, время: 11:47.