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

 
0
 
JavaScript
ava
Cheizer | 18.03.2013, 19:50
Здравствуйте дорогие друзья! 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?
Подскажите пожалуйста, как сделать так, что бы формы не пересекались в работе? И каждая форма отдельно обрабатывалась скриптом!
Kommentare (6)
ava
ksnk | 18.03.2013, 21:04 #
Cheizer, Каждая форма, с точки зрения сервера - отдельный плагинчик/скрипт? Почему бы не различать эти формы адресом обработчика? В скрипте получать этот адрес - $(form).attr('action') и выкидывать отдельное поле ajax запроса.

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

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

У меня такое ощущение просто, что решение тут простое какое то...smile но я лузер в JS к сожалению
ava
ksnk | 18.03.2013, 21:34 #
Цитата (Cheizer @  18.3.2013,  21:14 findReferencedText)
а как это выкидывать отдельное поле ajax запроса? 


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

Это если считать, что находимся в обработчике click для кнопки.
ava
Cheizer | 18.03.2013, 22:38 #
Цитата (ksnk @ 18.3.2013,  21:34)
Цитата (Cheizer @  18.3.2013,  21:14 \\"findReferencedText\\")
а как это выкидывать отдельное поле ajax запроса? 




var dataString = 'name='+ name + '&email=' + email 

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



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

ну да, понимаю, а как же скрипт будет понимать что ему надо обработать только эту форму? Они же все одинаковые на странице и у всех одинаковые классы и кнопки button на которую и реагирует скрипт. 
ava
ksnk | 19.03.2013, 07:54 #
Цитата (Cheizer @  18.3.2013,  22:38 findReferencedText)
 как же скрипт будет понимать что ему надо обработать только эту форму?

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

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

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

Использовать на странице больше одного элемента с одинаковыми ID - неправильно.
ava
Nett | 19.03.2013, 23:40 (Edited 20.03.2013 01:07) #
Для данного случая надо находить текущую форму для нажатой кнопки.

Например:

<form class="msgForm" name="sendMsgForm">
<input type="text" name="clientName" value="" />
<input type="button" name="sendClientName" value="Send Data" />
</form>


Теперь jQuery:


$('input[name="sendClientName"]').click(function() {
    var actionForm = $(this).parent(); // текущая форма с которой будете работать или $(this).closest('form.msgForm') - выберет ближайший родительский элемент (главное чтоб находились на одной ветке).
    /* Если <input type="button" name="sendClientName" /> находится ещё в каком-то тэге, тогда надо будет подняться на один уровень выше при помощи того-же parent(), parent().parent() 

    Далее работая с переменной actionForm можно обращатся к элементам текущей формы*/
    $('.clientName',actionForm).val();

    /* Так же можно обращаться к элементам формы не прибегая к её присвоению.
    $(this).closest('.clientName').val() */
    
});


Пользуйтесь console.log(); для отладки.
И пример такой формы http://dorum.com.ua/ceny/, на этом сайте форму можно дублировать сколько угодно раз, и в каждой будет разный результат.
Registrieren Sie sich oder melden Sie sich an, um schreiben zu können.
Unternehmen des Tages
Вы также можете добавить свою фирму в каталог IT-фирм, и публиковать статьи, новости, вакансии и другую информацию от имени фирмы.
Подробнее
Mitwirkende
  ksnk   Nett   Cheizer
advanced
Absenden