VPF::Бесконечность уникальных форм

Cheizer

Дата 18.3.2013, 18:50 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 89
Регистрация: 28.1.2011

Репутация: нет
Всего: нет

Здравствуйте дорогие друзья! smile

Нужна ваша помощь и грамотный совет!

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

Есть страница на сайте где в цикле выводятся блоки div, в которых присутствует форма небольшая, у каждого блока своя.
вот она

Код


<form class="contact-form" name="contact" method="post" action="">  
      <input type="text" name="name" id="name" class="text" placeholder="Ваше Имя..." />
      <label class="error" for="name" id="name_error">Введите ваше имя.</label>
      
      <input type="text" name="email" id="email" class="text" placeholder="Ваш email..." />
      <label class="error" for="email" id="email_error">Введите ваш Email.</label>

      <input type="text" name="phone" id="phone" class="text" placeholder="Ваш телефон..." />
      <label class="error" for="phone" id="phone_error">Введите ваш телефон.</label>

      <input name="site" id="site" type="hidden" value="1234567">

      <input type="submit" name="submit" class="button" id="submit_btn" value="Заказать этот сайт" />
 </form>

Сверху страницы подключается сам js файл для обработки событий формы, вот он

<script src="form/js/tutorial.js"></script>

его содержание

Код


$(function() {
  $('.error').hide();

  $(".button").click(function() {
        // Проверка и обработка форм
        // Первая скрыть любые сообщения об ошибках
    $('.error').hide();
        
      var name = $("input#name").val();
        if (name == "") {
      $("label#name_error").show();
      $("input#name").focus();
      return false;
    }
        var email = $("input#email").val();
        if (email == "") {
      $("label#email_error").show();
      $("input#email").focus();
      return false;
    }
        var phone = $("input#phone").val();
        if (phone == "") {
      $("label#phone_error").show();
      $("input#phone").focus();
      return false;
    }
    
    var site = $("input#site").val();
        if (site == "") {
      //$("label#phone_error").show();
      //$("input#phone").focus();
      return false;
    }
        
        var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone + '&site=' + site;
        //alert (dataString);return false;
        
        $.ajax({
      type: "POST",
      url: "form/bin/process.php",
      data: dataString,
      success: function() {
        $('#contact_form').html("<div class='form_d'></div>");
        $('.form_d').html("<h2>Ваша заявка принята!</h2>")
        .append("<p>Я скоро с вами свяжусь.</p>")
        .hide()
        .fadeIn(1500, function() {
          $('.form_d').append("<img id='checkmark' src='form/images/check.png' />");
        });
      }
     });
    return false;
    });
});
runOnLoad(function(){
  $("input#name").select().focus();
});

А заморочка в следующем, как уникализровать каждую форму? Сделать ее индивидуальной. А то получается что скрипт срабатывает для всех форм на странице, так как они одинаковы, и ничего не получается, какие ID может к форме добавить каждой? Или как то менять класс у кнопки BUTTON?
Подскажите пожалуйста, как сделать так, что бы формы не пересекались в работе? И каждая форма отдельно обрабатывалась скриптом!

ksnk

Дата 18.3.2013, 21:04 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Cheizer, Каждая форма, с точки зрения сервера - отдельный плагинчик/скрипт? Почему бы не различать эти формы адресом обработчика? В скрипте получать этот адрес - $(form).attr('action') и выкидывать отдельное поле ajax запроса.

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

Это сообщение отредактировал(а) ksnk - 18.3.2013, 21:04

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Cheizer

Дата 18.3.2013, 21:14 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 89
Регистрация: 28.1.2011

Репутация: нет
Всего: нет

action добавить тоже хорошая идея, дело в том что одна форма на странице работает без проблем, а когда их много уже они все одинаковые, а скрипт заточен под одну форму просто, вот и не знаю куда копать, думаю если $(".button").click(function() изменить? Как то может передавать в скрипт всегда новое имя класа? smile

или я херню несу?

У меня такое ощущение просто, что решение тут простое какое то... smile

но я лузер в JS к сожалению

Добавлено через 14 минут и 14 секунд

Цитата(ksnk @ 18.3.2013, 21:04)

Скажите пожалуйста, а как это выкидывать отдельное поле ajax запроса?

ksnk

Дата 18.3.2013, 21:34 (ссылка)

(голосов:1)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Цитата(Cheizer @ 18.3.2013, 21:14

)

а как это выкидывать отдельное поле ajax запроса?

Код


var dataString = 'name='+ name + '&email=' + email 
          + '&phone=' + phone + '&site=' + site +'&handler='+encodeURIComponent($(this.form).attr('action'));

Это если считать, что находимся в обработчике click для кнопки.

Это сообщение отредактировал(а) ksnk - 18.3.2013, 21:34

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Cheizer

Дата 18.3.2013, 22:38 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 89
Регистрация: 28.1.2011

Репутация: нет
Всего: нет

Цитата(ksnk @ 18.3.2013, 21:34)

Цитата(Cheizer @ 18.3.2013, 21:14

)

а как это выкидывать отдельное поле ajax запроса?

Код


var dataString = 'name='+ name + '&email=' + email 
          + '&phone=' + phone + '&site=' + site +'&handler='+encodeURIComponent($(this.form).attr('action'));

Это если считать, что находимся в обработчике click для кнопки.

ну да, понимаю, а как же скрипт будет понимать что ему надо обработать только эту форму? Они же все одинаковые на странице и у всех одинаковые классы и кнопки button на которую и реагирует скрипт. Пусть даже action будет заполненно, но как это мне поможет решить задачу?

Это сообщение отредактировал(а) Cheizer - 19.3.2013, 02:07

ksnk

Дата 19.3.2013, 07:54 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Цитата(Cheizer @ 18.3.2013, 22:38

)

как же скрипт будет понимать что ему надо обработать только эту форму?

Нужно выкинуть все строчки с получением данных и вставить serialize.

Код


{
     type: "POST",
      url: $(this.form).attr('action')||window.location,
      data: $(this.form).serialize(),
      success: function() {
...
}

Вообще - неплохо бы посмотреть какие-нибудь разумные примеры использования jQuery для форм, хотя бы на его родном сайте.

Использовать на странице больше одного элемента с одинаковыми ID - неправильно.

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »