Как правильно прописать стиль для js элемента?

Question

[Alex_87]

Здравствуйте! Прошу помочь в следующем...

Comments

[gleendo]

Когда же научатся люди нормально вопросы оформлять и формулировать...
Люди по картинке ванговать должны?

[Илья Серов]

для первых двух вариантов:
а) гдето упал скрипт и всё сломалось
b) нет таких айдишников
Для третьего
document.getElementById('form').style.display = 'none';

[Alex_87]

Илья, любой свой id подставьте и покажите как поставить пустым полям border...
Что касается пункта A, то мне хотелось бы установить серверную проверку при помощи php. Она даже есть, но почему то, она перестала работать...

//if(isset($_POST['submit'])){
                     $to = '[e-mail]';
                     $tema = 'Новое сообщение';
                     $name = strip_tags(trim($_POST['name']));
                     $email = strip_tags(trim($_POST['email']));
                     $skype = strip_tags(trim($_POST['skype']));
                     $sms = strip_tags(trim($_POST['sms']));
                     $message = "Имя пользователя: ".$name."\r\n";
                     $message .= "Почта: ".$email."\r\n";
                     $message .= "Skype: ".$skype."\r\n";
                     $message .= "Сообщение: ".$sms."\r\n";
                     $error = false;
                     $err = array('email' => '', 'name' => '', 'sms' => '');

                     if (empty($email) || !filter_var($email, FILTER_VALIDATE_EMAIL)){
		          $err['email'] = 'Вы ввели не корректный email';
			  $error = true;
		     }
                     if (empty($name)){
		          $err['name'] = 'Вы не ввели имя';
			  $error = true;
		     }


                    // if(!$error){
                        $tema = "=?utf-8?B?".base64_encode($subject)."?=";
                        $headers = "From: $from\r\nReply-to: $from\r\nContent-type:text/plain; charset=utf-8\r\n";
                        mail($to, $tema, $message, $headers);
                       // if(mail($to, $subject, $sms, $headers)){
                           //  header('Location: /otzivi.php');
                       // }
                    // }
                // }

[Alex_87]

iamevg_, Так подскажите как правильно формулировать свой вопрос, я что против?)) Я что касается оформления, то не судите строго. Каждый из вас просит меня оформлять по разному. Кто картинкой, а кто кодом!

[ThunderCat]

Первый раз вижу пример нарисованного ТЗ...

[twobomb]

Вопрос. Зачем делать в window.onload и в него еще вставлять $(document).ready? может лучше что то одно сделать?

[gleendo]

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

[Илья Серов]

Alex_87, я имел ввиду что всё прописано вроде как нормально, но по вышеперечисленным причинам может не отображаться

[Alex_87]

iamevg_, я уже объяснял что вкоде есть внешние скрипты. Я не знаю как их в песочницы подключать!

Answer 1

[twobomb]

Убрите window.onload = function ... и оставьте только $(document).ready

Comments

[Alex_87]

Подскажите пожалуйста, как это написать?
Мне нужно:
if(если поле name со значением email == ""){
назначить этому полю border(а лучше outline) в 1px solid #ff0000;
}

[twobomb]

Alex_87,

if(document.getElementById("email").value == "")
   document.getElementById("email").style.outline = "1px solid red";

Answer 2

[ThunderCat]

у вас же вроде jq подключен, нафига эти конструкции???

if($('#mail').css( "outline" )=='red'){
    return false;
}

и так далее... откройте гугл и вбейте 5 слов, неужто так лениво?
PS: Вообще создается впечатление что вы там что-то абсолютно дикое фигачите, типа проверки правильности поля по окраске элементов...

Comments

[Alex_87]

Я не разбираюсь в этом так, как вы! Я не ленив, я просто не знаю что вбивать! Думайте мне хочется часто обращаться на форум? Всегда найдётся какой - нибудь умник, который захочет съязвить. И это пол-беды! Хуже, когда просто съязвит и не оставит никакого ответа! Но вернусь к вопросу.... Вы меня не поняли, постараюсь объяснить по другому!
Мне нужно:
if(если поле name со значением email == ""){
назначить этому полю border(а лучше outline) в 1px solid #ff0000;
}

<div class="contact">
            <div class="wrapper">
                 <div class="contact-title" id="about">Оставьте заявку сейчас и получите бесплатную консультацию!</div>
                 <form id="former" method="post" >
                     <input type="text" placeholder="Ваше имя" id="name" name="name" value="<?=$_POST['name']?>"  />
                        <p class="err n" style="color:red"><?=$err['name']?></p>
                     <input type="e-mail" placeholder="Ваша почта" id="email" name="email" value="<?=$_POST['email']?>" />
                        <p class="err e" style="color:red"><?=$err['email']?></p>
                     <input type="text" placeholder="Ваш Skype"  name="skype" value="<?=$_POST['skype']?>" />
                     <textarea name="sms" cols="30" rows="10" placeholder="Ваше сообщение" value="<?=$_POST['sms']?>"></textarea>

                     <div>
                        <button>Оставить заявку</button>
                     </div>
                 </form>
              </div>
         </div>

[ThunderCat]

так уже гораздо лучше и понятнее, только лучше объясняйте, а то картинка и "не работает!" это не вопрос.
Примерно так должно быть:

$(document).ready(function () {
    $('#former').on('submit', function(e){
         e.preventDefault();
         var sub = true;
         if($('#name').val()==""){$('#name').css( "outline","red" ); sub=false;}
         if($('#email').val()==""){$('#email').css( "outline","red" ); sub=false;}
         if(sub)$('#former').submit();
    })
})

Думаю то что вам надо примерно

[ThunderCat]

Alex_87,

Я не ленив, я просто не знаю что вбивать!

"скрыть элемент jquery"
"задать элементу стиль jquery"
"проверить input пустой jquery"

Справочник запросов в гугл - покупайте в киосках Союзпечать!

[Alex_87]

ThunderCat, к сожалению не работает... Я пробовал два варианта!
Первый

$(document).ready(function() {
    $( document ).on('submit', 'form', function(event) {
        event.preventDefault();

         if($('#name').val()==""){$('#name').css( "outline","red" ); valid = false; return valid;}
         if($('#email').val()==""){$('#email').css( "outline","red" ); valid = false; return valid;}

        $.ajax({
            type: "POST",
            url: "form.php",
            data: $(this).serialize()
        }).done(function() { 
            alert('Спасибо');
        });
        return false;
    });
  });

Второй (ваш)

$(document).ready(function () {
    $('#former').on('submit', function(e){
         e.preventDefault();
         var sub = true;
         if($('#name').val()==""){$('#name').css( "outline","red" ); sub=false;}
         if($('#email').val()==""){$('#email').css( "outline","red" ); sub=false;}
         if(sub)$('#former').submit();
    })
})

[ThunderCat]

Alex_87, научитесь давать чуть более информативные ответы нежели "не работает". Скрипты умеют выводить в консоль ошибки(СМОТРИ КОНСОЛЬ В ПЕРВУЮ ОЧЕРЕДЬ!!!!).
Если надо что либо проверить по ходу выполнения - есть console.log(var);

[Alex_87]

ThunderCat, Никаких ошибок консоль не выдаёт!
Мой вариант: При пустых полях, нажав кнопку, выводит alert. То есть минует условие, не выдавая border

$(document).ready(function() {
    $( document ).on('submit', 'form', function(event) {
        event.preventDefault();

         if($('#name').val()==""){$('#name').css( "outline","red" ); valid = false; return valid;}
         if($('#email').val()==""){$('#email').css( "outline","red" ); valid = false; return valid;}

        $.ajax({
            type: "POST",
            url: "form.php",
            data: $(this).serialize()
        }).done(function() { 
            alert('Спасибо');
        });
        return false;
    });
  });

Ваш вариант: При нажатии кнопки, при тех же пустых полях полях, страница перезагружается! А это - ошибка! Этого не должно быть вообще!

$(document).ready(function () {
    $('#form').on('submit', function(e){
         e.preventDefault();
         var sub = true;
         if($('#name').val()==""){$('#name').css( "outline","red" ); sub=false;}
         if($('#email').val()==""){$('#email').css( "outline","red" ); sub=false;}
         if(sub)$('#form').submit();
         $.ajax({
            type: "POST",
            url: "form.php",
            data: $(this).serialize()
        }).done(function() {
            alert('Спасибо');
        });
        return false;
    });
});

[ThunderCat]

страница перезагружается! А это - ошибка! Этого не должно быть вообще!

полегче, я написал пример кода, не писал проект за вас, что там должно быть - субмит или аякс - не суть. вы пока не думаете как программист, вы пока копипастер. Меняйте взгляд на вещи, вместо "какого *!*я оно не работает" должно быть "почему не работает и где я ошибся? Сейчас проверю что пришло и как менялось и все заработает".
Я написал - есть console.log(), используйте и проверьте что и где выводится. Например так:

$(document).ready(function () {
console.log('Документ загрузился, делаем магию');
    $('#former').on('submit', function(e){
         e.preventDefault();
         var sub = true;
         console.log($('#name')); // смотрим есть ли такой элемент или нет вообще
         console.log($('#name').val()); // смотрим есть ли что в валуе 
                                    //элемента, возможно пробел или перенос строки
         if($('#name').val()==""){$('#name').css( "outline","red" ); sub=false;}
         if($('#email').val()==""){$('#email').css( "outline","red" ); sub=false;}
         // if(sub)$('#form').submit(); // не тупим, убираем субмит формы если не нужен
         if(sub){
            $.ajax({
            type: "POST",
            url: "form.php",
            data: $(this).serialize()
        }).done(function(data) { //в data вернется ответ сервера, например можно вывести ошибки
            console.log(data); // смотрим что прислал сервер, скорее всего бред, но проверить же надо...
            alert('Спасибо');
             $('#former').hide();
        });
      }
        return false;
    });
});

И теперь в консоли полный расклад что у вас происходит в функции.

[Alex_87]

ThunderCat, всё, что выдало...

Прошу, взгляните на код: https://yadi.sk/d/GsntnfvA3NZKDs

[ThunderCat]

https://yadi.sk/d/wI_X08Bp3NZLGm , и там же код вообще близко не лежит с тем что вы тут написали!

[Alex_87]

ThunderCat, ОГРОМНОЕ ВАМ СПАСИБО!!!! Я только понять не могу... Как это убрать? Да и зачем это вообще? Это появляется после того, как срабатывает alert('Спасибо!');
И зачем нужен ещё один файл - jquery.min,js? И как вы поняли, что он нужен?

И скажите пожалуйста, какую литературу, вы можете посоветовать? Как вы учились?
P.S. Код другой, поскольку я специально убрал всё лишнее, чтобы можно было показывать!

[ThunderCat]

И скажите пожалуйста, какую литературу, вы можете посоветовать? Как вы учились?

Доки. Практически на каждый чих сегодня есть документация, и на почти все туториалы.
Вообще то я закончил прикладную математику в гос универе, затем просто брал новый язык, разбирался в синтаксисе и писал на нем что-нибудь. Главное понимать что ты хочешь получить в итоге, и какие шаги нужно сделать, после этого можно решить задачу по шагам, если язык для тебя новый - гугл просто необходим(пипец, как я вообще без интернета раньше кодил...), да и в "родном" языке иногда нарываешся на непонятные проблемы, которые только через гугл / тостер / СО решить удается.

Как это убрать?

в индексе уберите блок

<div class="popupcontacttitle" id="about">Оставьте заявку сейчас и получите бесплатную консультацию!</div>

[Alex_87]

ThunderCat, Прикладная математика! А я надеялся, что вы обычный человек)) Ну, теперь понятно, как у вас так ловко получается) ... Остались вопросы. Последние...
Я не могу убрать блок, поскольку это часть сайта. К тому же, кроме этого блока подключается overlay(тёмный фон) А при повторном нажатии на кнопку на странице 'Отправить заявку' появляется не модальное окно с формой, а этот же эдемент

<div class="popupcontacttitle" id="about">Оставьте заявку сейчас и получите бесплатную консультацию!</div>

Я полагаю, что как решение может быть redirect на эту же страницу сразу после alert('Спасибо'); Единственное, это не должно быть типа header('Location: /otzivi.php'); а что-то вроде... header('Location: /эта же страница(без указания названия, как action="").php'); Я пробовал избавиться от них вот этими строчками

$('#about').css( "display"," none" );
$('.pop').css( "display"," none" );
$('.overlay').css( "display"," none" );

но я просто скрыл их... При повторном вызове формы с модальным окно, вообще ничего не происходит. Поэтому, мне нужен код перезагрузки браузера после alert. ... Странно, почему так происходит....
Я нашёл в сети и применил, вместо 3 строчек, следующий код:
location.reload();
после alert(); И получилось) Единственное, что хочу проверить, так это, смог ли я отправить методом POST заполненные поля. Я просто здесь этого не вижу. Не пользовался раньше так консолью, как в эти дни. Подскажите... Я увидел только это:

Второе... Я никак не могу понять, почему не работают ошибки на пустые поля, которые прописаны в form.php Я не могу проверить, работает ли вообще функция отправки почты, поскольку нахожусь на локальном...

[Stalker_RED]

Alex_87,

Поэтому, мне нужен код перезагрузки браузера после alert

Вообще это плохая идея, но если очень хочется, то вот: location.reload

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

Посмотрите что в теле запроса.

Я никак не могу понять, почему не работают ошибки на пустые поля, которые прописаны

есть такое слово "отладка". И есть такие крутые штуки как отладчики. Для браузера отладчиком вы уже начали пользоваться, с php тоже ничего особо ужасного.

работает ли вообще функция отправки почты, поскольку нахожусь на локальном...

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