Добавить уведмление для пользователя - JavaScript, Ajax

Cone · 15.01.2012, 12:34

Добрый день я хочу сделать отправку сообщения с сайта через div, то есть до вызова самой формы в стиле прописано

Код:

display:none

после вызова параметр меняется на

Код:

 display:block;

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

Код:

 

<html>
    <head>
        <title>Форма обратной связи</title>
        <script>
            function checkForm(obj){
                var return_value = true;
                // регулярное вырожение, для проверки почтового ящика           
                var reg_mail = /[0-9a-z_]+@[0-9a-z_^.]+.[a-z]{2,3}/i;
                // регулярное вырожение, для проверки отправителя
                var reg_sender = /[a-z]+/i;
                // заносим значение поля почтовый ящик в переменную mail
                var mail = obj.mail.value;
                // заносим значение поля отправитель в переменную sender
                var sender = obj.fio.value;
                // заносим значение поля сообщение в переменную msg
                var msg = obj.msg.value;
                // объявляем переменную куда будет заносится текст сообщения
                var error_msg = "Не корректно заполнины поля: ";
               
                //проверка поля отправитель
                if(reg_sender.exec(sender) == null && sender ==""){
                    error_msg += "Отправитель ";
                    return_value = false;
                }
                //проверка поля почтовый ящик
                if(reg_mail.exec(mail) == null){
                    error_msg += "Постовый ящик ";
                    return_value = false;
                }
                //проверка поля текст сообщения
                if(msg == ""){
                    error_msg += "Текст сообщения ";
                    return_value = false;
                }
                //проверка на наличие ошибок, если возникла ошибка ввыводим текст сообщения
                if(!return_value)

                    document.getElementById('content').innerHTML = (error_msg);
                   
                return return_value;
               }
        </script>
</head>
<body>
    <form name="dg" method = “POST” action=”send.php” onsubmit="return checkForm(this);">
        <table>
            <tr>
                <td>Отправитель:</td>
                <td><input type="text" name="fio"/></td>
            </tr>
            <tr>
                <td>Сообщение:</td>
                <td><textarea name="msg"></textarea></td>
            </tr>
            <tr>
                <td>Почтовый ящик: </td>
                <td><input type="text" name="mail"/></td>
            </tr>
            <tr>
                <td colspan="2" align="right"><input type="submit" name="send" value="Отправить"></td>
            </tr>
        </table>
                  <span id="content"> </span>
    
    </form>
</body>
</html>

Что нужно сюда дописать чтобы в случае правильности заполнения всех полей в innerHTML выводилось сообщение "Ваше сообщение отправлено". И уже после этого данные передавались в php скрипт

Всем спасибо!

nerv · 15.01.2012, 15:01

Вы все про div говорите, а я в разметке его не наблюдаю. Попробуйте это

Код:

 if(!return_value)

                    document.getElementById('content').innerHTML = (error_msg);

заменить на это

Код:

document.getElementById('content').innerHTML = return_value ? "Ok" : error_msg;

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

Cone · 15.01.2012, 19:41

Цитата:

Сообщение от nerv

Вы все про div говорите, а я в разметке его не наблюдаю. Попробуйте это

Код:

 if(!return_value)

                    document.getElementById('content').innerHTML = (error_msg);

заменить на это

Код:

document.getElementById('content').innerHTML = return_value ? "Ok" : error_msg;

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

Спасибо за ответ!

Я хочу сделать форму обратной связи так чтобы запускалась она в div окне, JavaScript проверяет правильность заполнения полей, и потом при нажатии ок, юзер просто видел сообщение "Ваше сообщение отправленно " после чего div окно юзер мог закрыть,

Я так понял что Php скрипт нельзя поместить в DIV окно так как его результат отображается в новом окне а не в том же самом div окне! По этому реши что надо обойтись JavaScript

Выглядеть все будет так

Код:

<head>


<script>
            function checkForm(obj){
                var return_value = true;
                // регулярное вырожение, для проверки почтового ящика           
                var reg_mail = /[0-9a-z_]+@[0-9a-z_^.]+.[a-z]{2,3}/i;
                // регулярное вырожение, для проверки отправителя
                var reg_sender = /[a-z]+/i;
                // заносим значение поля почтовый ящик в переменную mail
                var mail = obj.mail.value;
                // заносим значение поля отправитель в переменную sender
                var sender = obj.fio.value;
                // заносим значение поля сообщение в переменную msg
                var msg = obj.msg.value;
                // объявляем переменную куда будет заносится текст сообщения
                var error_msg = "Не корректно заполнины поля: ";
               
                //проверка поля отправитель
                if(reg_sender.exec(sender) == null && sender ==""){
                    error_msg += "Отправитель ";
                    return_value = false;
                }
                //проверка поля почтовый ящик
                if(reg_mail.exec(mail) == null){
                    error_msg += "Постовый ящик ";
                    return_value = false;
                }
                //проверка поля текст сообщения
                if(msg == ""){
                    error_msg += "Текст сообщения ";
                    return_value = false;
                }
                //проверка на наличие ошибок, если возникла ошибка ввыводим текст сообщения
                if(!return_value)

                    document.getElementById('content').innerHTML = (error_msg);
                   
                return return_value;
               }
        </script>



<style>
.myform {
display:none;
width:300px;
height:250px;
text-align:center;
border:1px solid red;
position:absolute;
top:100px;
left:50%;
margin-left:-150px;
}
</style>
</head>

Код:

<body>


<h1>  Обратная связь </h1><br>
<span OnClick="document.getElementById('myform').style.display='block';">  Связаться с нами</span>

<div class="myform"> 

<form name="dg" method = “POST” action=”send.php” onsubmit="return checkForm(this);">
        <table>
            <tr>
                <td>Отправитель:</td>
                <td><input type="text" name="fio"/></td>
            </tr>
            <tr>
                <td>Сообщение:</td>
                <td><textarea name="msg"></textarea></td>
            </tr>
            <tr>
                <td>Почтовый ящик: </td>
                <td><input type="text" name="mail"/></td>
            </tr>
            <tr>
                <td colspan="2" align="right"><input type="submit" name="send" value="Отправить"></td>
            </tr>
        </table>
                  <span id="content"> </span>  <br>
       <span OnClick="document.getElementById('myform').style.display='none';">  Закрыть Х </span>

    
    </form>


</div>


</body>

15.01.2012, 15:01	#2
nerv Форумчанин Регистрация: 26.04.2010 Сообщений: 450	Вы все про div говорите, а я в разметке его не наблюдаю. Попробуйте это Код: `if(!return_value) document.getElementById('content').innerHTML = (error_msg);` заменить на это Код: `document.getElementById('content').innerHTML = return_value ? "Ok" : error_msg;` Так же в коде присутствуют некоторые, на мой взгляд странные вещи. Тишина – самый громкий звук Последний раз редактировалось nerv; 15.01.2012 в 15:03.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Создание сеанса для пользователя	Алек	ASP.NET	3	14.02.2012 15:52
Подсчет комментариев для пользователя	Poster16	Помощь студентам	0	25.07.2011 20:27
Грамотное юзабилити(интерфейс для пользователя)	Alexei91	Свободное общение	35	16.09.2010 13:46
шаблон для пользователя	ара	HTML и CSS	3	07.04.2009 12:50