2014-10-16 3 views
0

Я пытаюсь сделать так, чтобы при отправке моей формы - если вы наберете «Мартин» во имя фамилии, «Нейхард» в фамилии и выберите «Университет Бингемтона» в раскрывающемся списке, это изменит фон зеленый и всплывает яму университета бингемтона. Он работает, если я использую || но не когда я использую & &.Ответы на изменение формы

Также я хочу сделать так, что если два электронной почты поля не совпадают, то предупреждение («ошибка»)

Я пытался в течение нескольких часов и не могу понять его. jsfiddle ниже

http://jsfiddle.net/esaunde1/ngjo8aoq/

HTML

 <div class="container" id='contact'> 
     <div class="row"> 
      <div class="col-md-8 col-md-offset-2"> 
      <div class="well well-sm"> 
       <form class="form-horizontal" action="send_form_email.php" method="post"> 
       <fieldset> 
       <legend class="text-center">Get in touch!</legend> 

       <div class="form-group"> 
        <label class="col-xs-4 control-label" for="name">First Name</label> 
        <div class="col-xs-8"> 
        <input id="name" name="name" type="text" placeholder="Your first name" data- trigger="manual" data-content="Can only contain letters!" class=" form-control" pattern="[A-Za-z]+" type="text" required> 
        </div> 
       </div> 

       <div class="form-group"> 
        <label class="col-xs-4 control-label" for="lname">Last Name</label> 
        <div class="col-xs-8"> 
        <input id="lname" name="lname" type="text" placeholder="Your last name" data-trigger="manual" data-content="Can only contain letters!" class="name form-control" type="text" required pattern="[A-Za-z]+"> 
        </div> 
       </div> 


       <div class="form-group"> 
        <label class="col-xs-4 control-label" for="email">E-mail Address</label> 
        <div class="col-xs-8"> 
        <input id="email" name="email" type="email" placeholder="What's your email?" class="email form-control" data-placement="top" data-trigger="manual" data-content="Must be a valid e-mail address" type="text" email required> 
        </div> 
       </div> 

       <div class="form-group"> 
        <label class="col-xs-4 control-label" for="emailCheck">E-mail Address</label> 
        <div class="col-xs-8"> 
        <input id="emailCheck" name="emailCheck" type="email" placeholder="What's your email?" class="email form-control" data-placement="top" data-trigger="manual" data-content="Must be a valid e-mail address" type="text" email required> 
        </div> 
       </div> 

       <div class="form-group"> 
        <label class="col-xs-4 control-label" for="email">Your Phone Number</label> 
        <div class="col-xs-8"> 
        <input id="email" name="email" placeholder="What is your phone number?" class="form-control phone" data-placement="top" data-trigger="manual" data-content="Must be a valid phone number" type="text" pattern="[0-9]+" required> 
        </div> 
       </div> 

       <div class="form-group"> 
        <label class='col-xs-4 control-label'>What school do you go to?</label> 
        <div class='col-xs-8'> 
         <select class="form-control" id='dropdown'> 
          <option>Select One</option> 
          <option>The College of NJ</option> 
          <option>Rutgers University</option> 
          <option>Columbia University</option> 
          <option value="bing">Binghamton University</option> 
         </select> 
        </div> 
       </div> 

       <div class="form-group"> 
        <div class="col-md-12"> 

        <input class="btn btn-primary" value="Check Form" onClick='return valid()'> 
        </div> 
       </div> 

       </fieldset> 
       </form> 
      </div> 
      </div> 
     </div> 
    </div> 

JAVASCRIPT

function valid(){ 

var name = document.getElementById('name'); 
var lname = document.getElementById('lame'); 
var home = document.getElementById('home'); 

    if (name.value == 'Martin' && lname.value == 'Neuhard' &&){ 
     $('#home').addClass('green'); 
     $('#contact').addClass('image'); 

     } 
    else if (document.getElementById('first').value == 'martin'){ 
     alert('thats our profs name!') 
    } 
    else return false; 

}

+0

У вас есть CSS, который вы можете добавить в скрипку? Трудно проверить, не применяются ли ни один из условных стилей :-) – Brian

+0

У вас есть typo 'document.getElementById ('lame')' должен быть 'document.getElementById ('lname')'. Это нарушит ваш оператор 'if'. –

+0

jsfiddle обновлен http://jsfiddle.net/esaunde1/ngjo8aoq/2/ и спасибо! что решает одну проблему ... – esaunde1

ответ

0

Что-то вроде этого

$(document).ready(function() { 
    $('#check-btn').click(function (e) { 
     e.preventDefault(); 
     var $form = $('form'); 
     var fName = $('#name', $form).val(); 
     var lName = $('#lname', $form).val(); 
     var school = $('#dropdown', $form).val(); 
     if(fName == 'Martin' && lName == 'Neuhard' && school == 'bing'){ 
      //do something here 
      $('#contact').addClass('green'); 
     } 
     else if(fName == 'martin'){ 
      alert('thats our profs name!') 
     } 

     //if the 2 emails are not the same 
     var email = $('#email', $form).val(); 
     var repeatEmail = $('#emailCheck', $form).val(); 
     if(email != repeatEmail){ 
      alert('Email does not match!'); 
     } 
    }); 
}); 

http://jsfiddle.net/ngjo8aoq/3/

+0

Это работает на jsfiddle, но не на моем документе – esaunde1

+0

Я добавил идентификатор кнопки проверки и удалил onclick attr. Также убедитесь, что вы включаете jquery с тегом

Смежные вопросы