jquery show alert on click

Question

У меня есть простой вход в верхней части моей страницы, когда пользователь вводит свой идентификатор, который находится в моем json-файле, их имя появляется в приветственном предупреждении (приветственное оповещение доступно по готовности и имя появляется внутри, когда пользователь входит в систему). Я хочу, чтобы предупреждение было скрыто, но когда пользователи вводят свой код (нет имени пользователя только кода), это предупреждение появляется с именем.

Вот бревно в тексте и кнопки:

<div class="alert alert-info"><input type="text" id="userName" value> <button type="button" id="loginbtn" class="btn btn-primary btn-md">Login</button></div> 

Вот предупреждение:

<div class="alert alert-success" id="loginalert"<strong>Welcome</strong></div> 

и здесь является JS получать соответствующее имя появится:

$(document).ready(function() { 
$("#loginbtn").click(function(event){ 
//console.log("clicked login"); 
    $.getJSON('result.json', function(jd) { 
     var id = $('#userName').val(); 
     //console.log(id); 
     for (var i=0; i<jd.user.length; i++) { 
     if (jd.user[i].ID == id) { 
      $('#loginalert').html('<p> Welcome: ' + jd.user[i].name + '</p>'); 
     } 
     } 
    }); 
}); }); 

json-файл содержит идентификатор пользователя (который является кодом на данный момент): 001

и их название

когда код вводится в текстовое поле логина появляется их название на странице, чтобы указать, что пользователь вошел в

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

<div class="alert alert-danger"> <strong>Danger!</strong> Indicates dangerous or potentially negative action.</div> 

(также быть скрыты на page load/ready)

Может ли кто-нибудь помочь ребятам, пожалуйста?

Сердечные приветы

Answer 1

Попробуйте это: Я изменил свой сценарий.

$(document).ready(function() { 
//Hide alert when page loads 
$("#loginalert").hide();  
    $("#loginbtn").click(function(event){ 
    //console.log("clicked login"); 
     $.getJSON('result.json', function(jd) { 
      var id = $('#userName').val(); 
      //console.log(id); 
      for (var i=0; i<jd.user.length; i++) { 
      if (jd.user[i].ID == id) { 
       $('#loginalert').html('<p> Welcome: ' + jd.user[i].name + '</p>');  
       //show the alert after loading the information 
       $("#loginalert").stop().fadeIn('slow').animate({ opacity: 1.0 }, 3000).fadeOut('slow', function() { 
       $('#contact').fadeIn('slow'); 
      }); 
      } 
      } 
     }); 
    }); 
}); 

Для ошибки попробуйте сообщения:

Измените дела до этого

<div class="alert alert-danger" id="ErrorMessageAlert"> <strong>Danger!</strong> Indicates dangerous or potentially negative action.</div> 

После этого изменить сценарии снова к этому:

$(document).ready(function() { 
//Hide alert when page loads 
$("#loginalert").hide();  
$("#ErrorMessageAlert").hide(); 
    $("#loginbtn").click(function(event){ 
    //console.log("clicked login"); 
     $.getJSON('result.json', function(jd) { 
      var id = $('#userName').val(); 
      //console.log(id); 
      for (var i=0; i<jd.user.length; i++) { 
      if (jd.user[i].ID == id) { 
       $('#loginalert').html('<p> Welcome: ' + jd.user[i].name + '</p>');  
       //show the alert after loading the information 
       $("#loginalert").show(); 
      }else 
      { 
       $("#ErrorMessageAlert").show(); 
      } 

      ); 
      } 
      } 
     }); 
    }); 
}); 

Answer 2

Вы можете сделать ваши оба Уведомления формы скрыты по умолчанию, добавив hidden класс, а затем через запрос show() - http://api.jquery.com/show/ дисплей нужен один

<style> 
    .hidden{ 
     display:none; 
    } 
</style> 

<div class="alert alert-info hidden"><input type="text" id="userName" value> <button type="button" id="loginbtn" class="btn btn-primary btn-md">Login</button></div> 
<div class="alert alert-danger hidden"> <strong>Danger!</strong> Indicates dangerous or potentially negative action.</div> 

<script> 
$.getJSON('result.json', function(jd) { 

    var id = $('#userName').val(); 
    // Defined to keep if match found in loop 
    var matchFound = false; 

    for (var i=0; i<jd.user.length; i++) { 
    if (jd.user[i].ID == id) { 

     $('#loginalert').html('<p> Welcome: ' + jd.user[i].name + '</p>'); 
     // Show Welcome alert 
     $(".alert-info").show(); 
     matchFound = true; 
     break; 
    } 
    } 

    // which means no match found and matchFound is not equal to true 
    if(!matchFound){ 
     // Show Error alert 
     $(".alert-danger").show(); 
    } 
}); 
</script>