Две формы на одной странице

[35th]

Здравствуйте.

Помогите с советом, сам не знаю как сделать.

На странице есть форма обратной связи методом post.

Код формы:

<form name="sentMessage" id="contactForm" novalidate>    <div class="row">        <div class="col-md-6">            <div class="form-group">                <input type="text" class="form-control" placeholder="Представьтесь..." id="name" required data-validation-required-message="Пожалуйста напишете своё имя.">                <p class="help-block text-danger"></p>            </div>            <div class="form-group">                <input type="email" class="form-control" placeholder="Ваш Email..." id="email" required data-validation-required-message="Пожалуйста напишете свой email адрес.">                <p class="help-block text-danger"></p>            </div>            <div class="form-group">                <input type="tel" class="form-control" placeholder="Телефон для связи..." id="phone" required data-validation-required-message="Пожалуйста укажите свой номер телефона.">                <p class="help-block text-danger"></p>            </div>        </div>        <div class="col-md-6">            <div class="form-group">                <textarea class="form-control" placeholder="Вопросы..." id="message" required data-validation-required-message="Пожалуйста напишете текст сообщения."></textarea>                <p class="help-block text-danger"></p>            </div>        </div>        <div class="clearfix"></div>        <div class="col-lg-12 text-center">            <div id="success"></div>            <button type="submit" class="btn btn-default btn-lg"><i class="fa fa-paper-plane-o fa-fw"></i> <span class="network-name">Отправить</span></button>        </div>    </div></form>

Обрабатывается эта форма как я понимаю скриптами:

   <!-- jQuery --><script src="js/jquery.js"></script>		   <!-- Contact Form JavaScript --><script src="js/jqBootstrapValidation.js"></script><script src="js/contact_me.js"></script>	

По моей логике сигнал о том что кнопку нажали ловит jQuery и jqBootstrapValidation, проверяют заполнены ли строки формы и выводят сообщения о том что нужно заполнить на <p class="help-block text-danger"></p>. Так же jqBootstrapValidation проверяет правильно ли введен email адрес, и если что говорит о том что не правильно.

Затем если всё введено правильно сигнал уходит в contact_me.js:

$(function() {    $("input,textarea").jqBootstrapValidation({        preventSubmit: true,        submitError: function($form, event, errors) {            // additional error messages or events        },        submitSuccess: function($form, event) {            event.preventDefault(); // prevent default submit behaviour            // get values from FORM            var name = $("input#name").val();            var email = $("input#email").val();            var phone = $("input#phone").val();            var message = $("textarea#message").val();            var firstName = name; // For Success/Failure Message            // Check for white space in name for Success/Fail message            if (firstName.indexOf(' ') >= 0) {                firstName = name.split(' ').slice(0, -1).join(' ');            }            $.ajax({                url: "././mail/contact_me.php",                type: "POST",                data: {                    name: name,                    phone: phone,                    email: email,                    message: message                },                cache: false,                success: function() {                    // Success message                    $('#success').html("<div class='alert alert-success'>");                    $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")                        .append("</button>");                    $('#success > .alert-success')                        .append("<strong>Your message has been sent. </strong>");                    $('#success > .alert-success')                        .append('</div>');                    //clear all fields                    $('#contactForm').trigger("reset");                },                error: function() {                    // Fail message                    $('#success').html("<div class='alert alert-danger'>");                    $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")                        .append("</button>");                    $('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!");                    $('#success > .alert-danger').append('</div>');                    //clear all fields                    $('#contactForm').trigger("reset");                },            })        },        filter: function() {            return $(this).is(":visible");        },    });    $("a[data-toggle=\"tab\"]").click(function(e) {        e.preventDefault();        $(this).tab("show");    });});/*When clicking on Full hide fail/success boxes */$('#name').focus(function() {    $('#success').html('');});

Который передаёт данные заполненной формы  в contact_me.php:

<?php// Check for empty fieldsif(empty($_POST['name'])  		||   empty($_POST['email']) 		||   empty($_POST['phone']) 		||   empty($_POST['message'])	||   !filter_var($_POST['email'],FILTER_VALIDATE_EMAIL))   {	echo "No arguments Provided!";	return false;   }	$name = $_POST['name'];$email_address = $_POST['email'];$phone = $_POST['phone'];$message = $_POST['message'];	// Create the email and send the message$to = 'МойАдрес@gmail.com'; // Add your email address inbetween the '' replacing yourname@yourdomain.com - This is where the form will send a message to.$email_subject = "Сообщение с PhotoRift от $name";$email_body = "У вас новый заказ.\n\n"."Подробности:\n\nИмя: $name\n\nEmail: $email_address\n\nНомер телефона: $phone\n\nТекст сообщения:\n$message";$headers = "From: $email_address\n"; // This is the email address the generated message will be from. We recommend using something like noreply@yourdomain.com.$headers .= "Reply-To: $email_address";	mail($to,$email_subject,$email_body,$headers);return true;			?>

И уже после этого в contact_me.js определяется отправилось или нет, и выдает соответствующее сообщение на <div id="success"></div> в форму.

Всё это работает без проблем.

 

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

Хочу передавать эти две строки в БД методом post.

Скопировал кусок формы, отредактировал:

<form name="followMessage" id="followForm" novalidate>    <div class="row">        <div class="col-md-6">            <div class="form-group">                <input name="name" type="text" class="form-control" placeholder="Представьтесь..." required data-validation-required-message="Пожалуйста напешите своё имя.">                <p class="help-block text-danger"></p>            </div>        </div>        <div class="col-md-6">            <div class="form-group">                <input name="email" type="email" class="form-control" placeholder="Ваш Email..." required data-validation-required-message="Пожалуйста напешите свой email адресс.">                <p class="help-block text-danger"></p>            </div>        </div>        <div class="clearfix"></div>        <div class="col-lg-12 text-center">            <div id="successfollow"></div>            <button type="submit" class="btn btn-default btn-lg"><i class="fa fa-paper-plane-o fa-fw"></i> <span class="network-name">Подписаться</span></button>        </div>    </div></form>

Как теперь сделать так что бы она обрабатывалась подобным образом, так же как форма обратной связи, проверялась на заполненность строк и правильность email адреса, но при правильном заполнении выполнялся addInformation.php:

<?php$db = mysql_connect ('хост','юзерt','пароль');mysql_select_db('u226201141_follo',$db);$name = $_POST['name'];$email = $_POST['email'];$query = "INSERT INTO followers (name, email) values ('$name', '$email')";mysql_query($query);mysql_close($db);      ?> 

Сам пробовал что то мудрить, но за незнанием не вышло.

Сделал копию скрипта contact_me.js переименовал его на follow_me.js и прикрутил к странице, подредактировал:

$(function() {    $("input").jqBootstrapValidation({        preventSubmit: true,        submitError: function($form, event, errors) {            // additional error messages or events        },        submitSuccess: function($form, event) {            event.preventDefault(); // prevent default submit behaviour            // get values from FORM            var name = $("input#name").val();            var email = $("input#email").val();            var firstName = name; // For Success/Failure Message            // Check for white space in name for Success/Fail message            if (firstName.indexOf(' ') >= 0) {                firstName = name.split(' ').slice(0, -1).join(' ');            }            $.ajax({                url: "././mail/addInformation.php",                type: "POST",                data: {                    name: name,                    email: email                },                cache: false,                success: function() {                    // Success message                    $('#successfollow').html("<div class='alert alert-success'>");                    $('#successfollow > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")                        .append("</button>");                    $('#successfollow > .alert-success')                        .append("<strong>Your message has been sent. </strong>");                    $('#successfollow > .alert-success')                        .append('</div>');                    //clear all fields                    $('#followForm').trigger("reset");                },                error: function() {                    // Fail message                    $('#successfollow').html("<div class='alert alert-danger'>");                    $('#successfollow > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")                        .append("</button>");                    $('#successfollow > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!");                    $('#successfollow > .alert-danger').append('</div>');                    //clear all fields                    $('#followForm').trigger("reset");                },            })        },        filter: function() {            return $(this).is(":visible");        },    });    $("a[data-toggle=\"tab\"]").click(function(e) {        e.preventDefault();        $(this).tab("show");    });});/*When clicking on Full hide fail/success boxes */$('#name').focus(function() {    $('#successfollow').html('');});

На деле:

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

При не настроенном mail на сервере, если заполнить верхнюю форму(подписки,новую) нажать подписаться срабатывают оба скрипта contact_me.js и follow_me.js. и выводятся сообщения об ошибке у каждой формы, из своего скрипта.

При настроенном mail на сервере, если заполнить верхнюю форму(подписки,новую) нажать подписаться срабатывают оба скрипта contact_me.js и follow_me.js. и выводится сообщения об ошибке у нижней  формы обратной связи, из его скрипта.

При не настроенном mail на сервере, если заполнить нижнею форму(обратной связи) нажать отправить срабатывает кнопка как я понимаю 2 раза и выводятся сообщение об ошибке у нижней формы, из своего скрипта, и сообщения о том что нужно заполнить обязательно строчки.

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

 

Как то так. Нужно как то разъединить эти действия. так что бы при нажатии на кнопку из формы обрабатывалась только форма к которой принадлежит эта кнопка.

Вот он пример

Edited March 19, 2015 by 35th

[Aleksandr.L]

Ни на одном форуме не ответили?

[35th]

Ни на одном форуме не ответили?

Пока что нет. 

[Q4Dizzy]

Не нужно создавать новый скрипт. Достаточно дописать условия в скрипте, который отправляет данные php-обработчику.

[35th]

Не нужно создавать новый скрипт. Достаточно дописать условия в скрипте, который отправляет данные php-обработчику.

Понятно. Буду мудрить, т.к. не знаю джаваскрипт.

Если не сложно помогите пожалуйста.

Edited March 20, 2015 by 35th

[Zverushka]

Ошибка идет вот здесь:

data: {                    name: name,                    phone: phone,                    email: email,                    message: message                },

Тут передаются данные из первой формы, потому что name равен полю из первой формы и никакой другой.

Можно просто данные переслать вот так

data: $form.serialize(),

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

[35th]

Ребята всем спасибо. Я разобрался немного.

Для того что бы скрипт запускался только на одну форму нужно подредактировать его немного, а именно:

$(function() {    $("input,textarea").jqBootstrapValidation({        preventSubmit: true,        submitError: function($form, event, errors) {            // additional error messages or events        },...... на    $('form[name="sentMessage"]').find('input,select,textarea').not('[type=submit]').jqBootstrapValidation({        preventSubmit: true,        submitError: function($form, event, errors) {            // additional error messages or events        },

Сделал пока что отдельные скрипты на каждую форму. Вот только пока что как пустые строки при отправке в базу данных, форма обратной формы работает. Тестирую дальше.

Edited March 21, 2015 by 35th

[Zverushka]

Вот только пока что как пустые строки при отправке в базу данных, форма обратной формы работает. Тестирую дальше.

 

Потому что у тебя скопировано для 2го скрипта из первого вот это:

var name = $("input#name").val();            var email = $("input#email").val();            var phone = $("input#phone").val();            var message = $("textarea#message").val();

А этим переменным присваиваются значения из первой формы

[35th]

 

Вот только пока что как пустые строки при отправке в базу данных, форма обратной формы работает. Тестирую дальше.

 

Потому что у тебя скопировано для 2го скрипта из первого вот это:

var name = $("input#name").val();            var email = $("input#email").val();            var phone = $("input#phone").val();            var message = $("textarea#message").val();

А этим переменным присваиваются значения из первой формы

 

Сделал так. Пока что работает.

 var name = $('input[name="name"]').val(); var email = $('input[name="email"]').val();

[Q4Dizzy]

Вам дали серьёзный и разумный совет выше. Используйте serialize().

[35th]

Вам дали серьёзный и разумный совет выше. Используйте serialize().

Для меня это пустое слово. Гугл помочь не смог. Знаний в этом ноль.

[antonKar]

Гугл помочь не смог

 

Да уж... 

[35th]

 

Гугл помочь не смог

 

Да уж...

 

Для меня это выглядит как куча непонятных строк. Тыкнуть и я в статью в инете могу, а применить это на своём коде нет.

[antonKar]

Тыкнуть и я в статью в инете могу, а применить это на своём коде нет.

Это уже проблема индейцев, а не шерифа.

[aldemko]

Доброго времени суток

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

Подскажите что нужно подправить что бы поле с вводом сообщения 

 <div class="form-group">                <textarea class="form-control" placeholder="Вопросы..." id="message" required data-validation-required-message="Пожалуйста напишете текст сообщения."></textarea>                <p class="help-block text-danger"></p>            </div>

было не обязательным для заполнения. и соответственно могло быть удалено

спасибо 

Edited September 25, 2015 by aldemko

[NemoNab]

Здравствуйте! Есть сайт с тем же скриптом и двумя формами на одной странице. По задумке обе формы должны отправлять одни и те же данные. Одна форма прячется в модальном окне. вот она-то и не работает, даже с использованием serialize(). Помогите, пожалуйста!

Собственно, сам сайт: tsvet-nochi.ru

Заранее спасибо!