Jump to content
  • 0

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


35th
 Share

Question

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

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

На странице есть форма обратной связи методом 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 by 35th
Link to comment
Share on other sites

15 answers to this question

Recommended Posts

  • 0

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

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

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

Edited by 35th
Link to comment
Share on other sites

  • 0

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

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

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

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

data: $form.serialize(),

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

  • Like 1
Link to comment
Share on other sites

  • 0

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

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

$(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 by 35th
Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

  • 0

 

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

Потому что у тебя скопировано для 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();
Link to comment
Share on other sites

  • 0

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

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

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

 <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 by aldemko
Link to comment
Share on other sites

  • 0

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy