One issue I am facing is that I have two types of alert boxes, one for success and the other for error. In my Zend-based application, these alert boxes show up when users fill out forms such as profile updates or new submissions. My goal is to customize the class name for each alert box so that if an error occurs, jQuery can add a class to the alert box and display it. Below are examples of the two alert boxes:
Success:
<div id="alert-container">
<div class="info-alert alert-box-success">
<p class="info-alert-text">
// message will be custom added by jquery
</p>
<div class="bottom"></div>
</div>
</div>
Error:
<div id="alert-container">
<div class="info-alert alert-box-error">
<p class="info-alert-text">
// message will be custom added by jquery
</p>
<div class="bottom"></div>
</div>
</div>
This is how I currently handle user submissions using jQuery:
$("#send2friends_submit").on("click", function(){
$('.share-event').attr('disabled',true);
$('.share-event').addClass('ybtn-disabled');
var f_mail = $.trim($('textarea#emails').val());
var f_msg = $.trim($('textarea#emails-note').val());
var f_eid = $('#eid').val();
if(f_mail == '' || !validateEmail(f_mail)){
$('.info-alert').show();
$('#send2friends_submit').attr('disabled',false);
$('#send2friends_submit').removeClass('ybtn-disabled');
return ;
}
if(f_msg == ''){
$('.info-alert').show();
$('#send2friends_submit').attr('disabled',false);
$('#send2friends_submit').removeClass('ybtn-disabled');
return ;
}
});
My question is, how can I add one generic alert box for each page so that if an error occurs alert-box-error will be displayed, and if it's a success alert-box-success will be displayed with a custom message? Currently, only error messages show up if I set info-alert to display:block. Thank you.