|
JavaScript - Displaying More Then One Message On An Alert Box
okay. I am in the process of learning javascript and I've been looking at this code for the longest time ever. So far I got most of it done.
but the problem is for example I leave all the required fields empty, it gives me the alert message of the first field and not the alert messages of all the others. What I want to know is how can you go through and check the whole form first before submitting and then when there is any error on any field, shows just one alert message containing all the error messages. code for the form Code: <form action="mailto:hummdedum@felloff.com" method="post" name="form" onSubmit="return isFormValid();">
* First Name: <input type="text" name="FName" id="FName" onblur="checkFName();"/><label id="labelFName"></label><br />
* Last Name: <input type="text" name="LName" id="LName"onblur="checkLName();"/><label id="labelLName"></label><br />
* Password: <input type="password" id="pw" name="Password" onblur="checkpw();" id="pw"/><label id="labelpw"></label><br />
*Re-type Password: <input type="password" name="2Password" id="pw2" onblur="checkpw2();" /><label id="labelpw2"></label><br />
I am a: <br />
<input type="radio" name="status" value="fresh" /> Freshman<br />
<input type="radio" name="status" value="soph" /> Sophomore<br />
<input type="radio" name="status" value="jr" /> Junior<br />
<input type="radio" name="status" value="sr" /> Senior<br />
I am taking classes in the: <br />
<input type="checkbox" name="semester" value="fall" /> fall time<br />
<input type="checkbox" name="semester" value="spring" /> Spring time <br />
My favorite element is:
<select name="element" id="element">
<option value="">select one</option>
<option value="fire">Fire</option>
<option value="earth">Earth</option>
<option value="water">Water</option>
<option value="air">Air</option>
</select><br />
*Birthday: <input type="text" id="BDay" name="Birthday" onblur="checkBDay();"/><label id="labelBDay"></label><br />
*E-Mail: <input type="text" id="email" name="Email" onblur="checkEmail();"/><label id="labelEmail"></label><br />
<input type="submit" value="Submit" />
<input type="reset" value="Clear" />
</form>
code for the javascript Code: function isFormValid()
{var userF = document.getElementById('FName').value;
var userL = document.getElementById('LName').value;
var userPW = document.getElementById('pw').value;
var userPW2 = document.getElementById('pw2').value;
var userBDay = document.getElementById('BDay').value;
var userEmail = document.getElementById('email').value;
var NameFormat = /^[A-Za-z]{2,12}$/;
var PWFormat = /^[A-Za-z0-9{6,12}$]/;
if (!NameFormat.test(userF))
{
alert("First Name is required and should only have letters. 2-12 letters max");
return false;
}
if (!NameFormat.test(userL))
{
alert("Last Name is required and should only have letters. 2-12 letters max");
return false;
}
if (!PWFormat.test(userPW))
{
alert("Password is required and should only have letters and numbers. 6-12 letters max");
return false;
}
if (userPW != userPW2)
{
alert("Passwords do not match.");
return false;
}
}
function checkFName()
{
var userF = document.getElementById('FName').value;
var elementF = document.getElementById('labelFName');
var NameFormat = /^[A-Za-z]{2,12}$/;
if (!NameFormat.test(userF))
{
elementF.innerHTML = "First Name is required and should only have letters. 2-12 letters max";
elementF.style.color = "red";
}
else
{
elementF.innerHTML = "";
elementF.style.color = "green";
}
}
function checkLName()
{
var userL = document.getElementById('LName').value;
var elementL = document.getElementById('labelLName');
var NameFormat = /^[A-Za-z]{2,12}$/;
if (!NameFormat.test(userL))
{
elementL.innerHTML = "Last Name is required and should only have letters. 2-12 letters max";
elementL.style.color = "red";
}
else
{
elementL.innerHTML = "";
elementL.style.color = "green";
}
}
function checkpw()
{
var userPW = document.getElementById('pw').value;
var elementPW = document.getElementById('labelpw');
var PWFormat = /^[A-z0-9]{6,12}$/;
if (!PWFormat.test(userPW))
{
elementPW.innerHTML = "Password is required and should only have letters and numbers. 6-12 letters max";
elementPW.style.color = "red";
}
else
{
elementPW.innerHTML = "Valid Password";
elementPW.style.color = "green";
}
}
function checkpw2()
{
var userPW2 = document.getElementById('pw2').value;
var userPW = document.getElementById('pw').value;
var elementPW2 = document.getElementById('labelpw2');
if (userPW != userPW2)
{
elementPW2.innerHTML = "Passwords do not match.";
elementPW2.style.color = "red";
}
else
{
elementPW2.innerHTML = "Passwords Match";
elementPW2.style.color = "green";
}
}
I want to also validate birthday.. and I tried using regular expression with leap years but the expression is too hard for me to think of. so I am gonna try using split() but I dont noe... and for the clear button. since I blur functions, how would I just clear all the blur statements = like a restart of the form and then when the user enters the field the blur function still works? thanks -pumpkin Similar TutorialsHi there, I am trying to add something from a textbox within a prompt message into a listbox. When I press the "Add" button, a prompt message will pop up. I will check if the textbox is empty. If it is empty and I press okay, it will show an alert message stating "Empty insert. Please enter something into the textbox." And if I press cancel, it will show alert message "You have pressed cancel." If it is not empty, and I press okay, it will insert the data into the listbox successfully. If I press cancel, it will show alert message "You have pressed cancel." Below are my codes. Javascript Code: function addOption()
{
var newItem = prompt("Enter New Item");
if (!newItem == "")
{
var answer = confirm ("Are you sure you want to add? ")
if (answer)//if answer is true
{
var lstBx = document.getElementById("lstBxEmail");
// Now we need to create a new 'option' tag to add to MyListbox
var newOption = document.createElement("option");
newOption.value = newItem; // The value that this option will have
newOption.innerHTML = newItem; // The displayed text inside of the <option> tags
// Finally, add the new option to the listbox
lstBx.appendChild(newOption);
//sort items in listbox in alpha order
arrTexts = new Array();
for(i=0; i<lstBx.length; i++)
{
arrTexts[i] = lstBx.options[i].text;
}
arrTexts.sort();
for(i=0; i<lstBx.length; i++)
{
lstBx.options[i].text = arrTexts[i];
lstBx.options[i].value = arrTexts[i];
}
}
else
{
if(newItem)
{
alert("Key something to textbox please.");
}
else
alert("Cancel choice.");
}
}
}
HTML Code: <center><input id="Submit18" type="submit" value="Add Address" onclick="addOption()"/>
<div>Address:</div>
<center>
<select id="lstBxEmail" name="listBoxEmail" multiple="multiple" style="width: 580px;">
<option>Java</option>
<option>PHP</option>
<option>Perl</option>
<option>Javascript</option>
<option>C#</option>
<option>Powershell</option>
</select>
</center>
Hell All Can some1 give me a function for Alert Visitor before the page Load if he /she Sure wants to See the Page . I have function Onclick alert message but i want the function is when click and go to the page and before the page load to ask 'if want realy to see the page' if yes return true if cancel or no to go back to where he come from. Thank you and hope such function exist. hey i have combo box it has names name -1 name-2 name-3 name-4 when select a name-1 just display a alert message of age plz help me to do this plz any sample coding for this Firebug is giving me no error messages, but alert() message is never triggered. I want the alert() message defined below to alert what the value of the variable result is (e.g. {filter: Germany}). And it doesn't. I think the javascript breaks down right when a new Form instance is instantiated because I tried putting an alert in the Form variable and it was never triggered. Note that everything that pertains to this issue occurs when form.calculation() is called: markup: Code:
<fieldset>
<select name="filter" alter-data="dropFilter">
<option>Germany</option>
<option>Ukraine</option>
<option>Estonia</option>
</select>
<input type="text" alter-data="searchFilter" />
</fieldset>
javascript (below the body tag) Code: <script>
(function($){
var listview = $('#listview');
var lists = (function(){
var criteria = {
dropFilter: {
insert: function(value){
if(value)
return handleFilter("filter", value);
},
msg: "Filtering..."
},
searchFilter: {
insert: function(value){
if(value)
return handleFilter("search", value);
},
msg: "Searching..."
}
}
var handleFilter = function(key,value){
return {key: value};
}
return {
create: function(component){
var component = component.href.substring(component.href.lastIndexOf('#') + 1);
return component;
},
setDefaults: function(component){
var parameter = {};
switch(component){
case "sites":
parameter = {
'order': 'site_num',
'per_page': '20',
'url': 'sites'
}
}
return parameter;
},
getCriteria: function(criterion){
return criteria[criterion];
},
addCriteria: function(criterion, method){
criteria[criterion] = method;
}
}
})();
var Form = function(form){
var fields = [];
$(form[0].elements).each(function(){
var field = $(this);
if(typeof field.attr('alter-data') !== 'undefined') fields.push(new Field(field));
})
}
Form.prototype = {
initiate: function(){
for(field in this.fields){
this.fields[field].calculate();
}
},
isCalculable: function(){
for(field in this.fields){
if(!this.fields[field].alterData){
return false;
}
}
return true;
}
}
var Field = function(field){
this.field = field;
this.alterData = false;
this.attach("change");
this.attach("keyup");
}
Field.prototype = {
attach: function(event){
var obj = this;
if(event == "change"){
obj.field.bind("change", function(){
return obj.calculate();
})
}
if(event == "keyup"){
obj.field.bind("keyup", function(e){
return obj.calculate();
})
}
},
calculate: function(){
var obj = this,
field = obj.field,
msgClass = "msgClass",
msgList = $(document.createElement("ul")).addClass("msgClass"),
types = field.attr("alter-data").split(" "),
container = field.parent(),
messages = [];
field.next(".msgClass").remove();
for(var type in types){
var criterion = lists.getCriteria(types[type]);
if(field.val()){
var result = criterion.insert(field.val());
container.addClass("waitingMsg");
messages.push(criterion.msg);
obj.alterData = true;
alert(result);
initializeTable(result);
}
else {
return false;
obj.alterData = false;
}
}
if(messages.length){
for(msg in messages){
msgList.append("<li>" + messages[msg] + "</li");
}
}
else{
msgList.remove();
}
}
}
$('#dashboard a').click(function(){
var currentComponent = lists.create(this);
var custom = lists.setDefaults(currentComponent);
initializeTable(custom);
});
var initializeTable = function(custom){
var defaults = {};
var custom = custom || {};
var query_string = $.extend(defaults, custom);
var params = [];
$.each(query_string, function(key,value){
params += key + ': ' + value;
})
var url = custom['url'];
$.ajax({
type: 'GET',
url: '/' + url,
data: params,
dataType: 'html',
error: function(){},
beforeSend: function(){},
complete: function() {},
success: function(response) {
listview.html(response);
}
})
}
$.extend($.fn, {
calculation: function(){
var formReady = new Form($(this));
if(formReady.isCalculable) {
formReady.initiate();
}
}
})
var form = $('fieldset');
form.calculation();
})(jQuery)
Thanks for response. Hi all, new here. Hope this makes sense. In Salesforce, I am adding what they call an "S-Control" via HTML/JavaScript that will display an alert if certain field criteria are met. The alert would be a reminder to hit the "Submit for Approval" button if the Quote Estimate is equal to or greater than $50,000. For testing purposes I added another criteria, that the Opportunity name must = Test and Stage must = Proposal/Price Quote. Here's what I've come up with so far, taking from other examples, but I receive no alert, so I'm wondering where it went wrong. Code: <html>
<head>
<script type="text/javascript" language="javascript" src="/js/functions.js"></script>
<script type="text/javascript" src="/soap/ajax/10.0/connection.js"></script>
<script type="text/javascript">
function throwalert()
{
// Begin by creating 3 variables for the criteria to be met.
var oppname = "{!Opportunity.Name}";
var isstatus = "{!Opportunity.StageName}";
var quoteest = "{!Opportunity.Quote_Estimate__c}"
// Now create a function which will decide if the criteria is met or not and throw alert message.
//var oppname= "Test"
//var quoteest >= "50000"
//var isstatus = "Proposal/Price Quote"
var msgg = "The quote estimate for this opportunity is equal to or greater than $50,000. Remember to submit this opportunity for approval. "
if ((oppname == "Test") && (quoteest >= 50000) && (isstatus == "Proposal/Price Quote"))
{
alert(msgg);
}
else
{
window.parent.location.replace = "{URLFOR($Action.Opportunity.View, Opportunity.Id,null,true)};"
}
}
</script>
</head>
<body onload="throwalert()";>
</body>
</html>
how i can refresh my main history page without page refresh alert message? i am using the following code on the submitpage.asp <%response.write ("<script>window.location.reload(history.go(-2));</script>")%> i got the attached message when it refreshes the main page. is there is a way to refresh directly without this message? Hi there guys! My group is working on a basic document management system that includes four users. staff member, department director, division chief and clerk. The programming language that we used is PHP. when staff member logs-in on his homepage and uploads a file he must choose reviewer from a dropdown menu that consists of dep. director and div. chief. When he clicks the upload button the homepage of who he chose as reviewer should receive a prompt/alert box upon log-in saying "you have a document to review". For example: if he chose division chief as the reviewer when the person logs-in on his homepage a prompt/alert should display that he has something to review. The code for uploading file is already up and working. We are looking for advice on how to integrate javascript in this system. Especially in the prompt part. thanks for your ideas. I have an user table like this:- guid | username | password | firstname | lastname | location | emailad dress | userrole -----------------------------------+----------+----------------------------------+-----------+-----------+----------+-------- ------+--------------- 8024259764dc3e8ee0fb6f5.84107784 | james | 827ccb0eea8a706c4c34a16891f84e7b | james | bond | NY | ny@live .com | administrator 18689183644dc3e91571a364.71859328 | saty | 250cf8b51c773f3f8dc8b4be867a9a02 | saty | john | NY | hk@fd.c om | administrator 2644885344cecd6f2973b35.63257615 | admin | 21232f297a57a5a743894a0e4a801fc3 | System | Generated | | | administrator (3 rows) now my postgre query for delete the row .... $query = "delete from users where username!= 'admin' and guid='".$guid."'"; $result = pg_query($conn, $query); ?> <script type="text/javascript"> alert("Cannot delete this .\n It is system generated(s)."); </script> <?php (1)when I delete the user name one by one then delete occurs in my page userlist.php, I donot want to delete admin so i use username!= 'admin' in where condition as shown above. (2)now when I del any username(3 rows) from user table then alert occurs & it delete from userlist.php after that my page userlist.php is blank. Finaly when i refresh the page then my admin username seen.. when i use return true; function then only alert generate .. delete doesnot occurs ... Actauly i want:- (1)if user is not admin then it delete from userlist.php ... nd also i m continue on this page ... like when james and saty want to delte their acount ..as given in table. (2)if user is admin then alert generate nd i m continue on this page. i m tired now plz help me .... so can anyone put the best condition in my coding. Ahoy, Lemme try to explain this as best as I can. Bullet points might help: When someone clicks on an image here (http://gta.kwivia.co.uk/gta-iv/), the rest of the images collapse and become invisible Below the image, some links appear Also, there will be a "show other images" button which will then show the rest of the images http://gta.kwivia.co.uk/gta-iv/ I will appreciate all solutions to this problem. If you need to know anything, simply ask me. Hi, I have this code: var finalsort="("+getvalue+","numvalue")\n" alert(finalsort) however, it is then alerted three seperate times (as it is in a for loop) but i would like this to be displayed in an alert: (david,5) (james,3) (tom,1) How would I do this, am I doing something wrong with the \n? thanks All, I have the following code: Code: <script type="text/javascript">
alert("This picture has received more then 10 down votes so it is now being deleted. You will be redirected back to the pictures page!");
</script>
<?
echo "<meta http-equiv=\"refresh\" content=\"2;url=http://website.com/pictures.php\">";
?>
This is just in the code. I thought it would just execute this but it doesn't. I can't have it appear on a button event or an onload since this snipped gets executed with AJAX. How can I make it appear? Thanks in advance! I am validating the value in a text area onBlur. If the value is not good the alert box comes up twice. Is there a way to correct this? Code: <html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<script type="text/javascript">
function verify_score(val1)
{
var temp = document.getElementById(val1)
if(temp.value == "AF"|| temp.value == "HF" || (temp.value >=0 && temp.value <=17)) {return}
else{
alert("Value entered is not OK. Accetable values a 0 to 17, AF or HF")
temp.focus()
temp.select()
}
}
</script>
</head>
<body>
<div id="PageDiv" style="position:relative; min-height:100%; margin:auto; width:200px">
<form name="scoresheetform" action="">
<div id="Submitbutton" style="position:absolute; left:52px; top:87px; width:110px; height:33px; z-index:1">
<input type=submit name="Submitbutton" value="Submit Form"></div>
<div style="position:absolute; left:9.822px; top:37px; width:45px; height:29px; z-index:2">
<input id="HomePlayer1Rnd6Pnts" name="HomePlayer1Rnd6Pnts" onBlur="verify_score('HomePlayer1Rnd6Pnts')" size=3></div>
<div style="position:absolute; left:79.822px; top:37px; width:45px; height:29px; z-index:3">
<input id="HomePlayer1Rnd7Pnts" name="HomePlayer1Rnd7Pnts" onBlur="verify_score('HomePlayer1Rnd7Pnts')" size=3></div>
<div id="HomePlayer1TotalPnts" style="position:absolute; left:146px; top:37px; width:45px; height:29px; z-index:4">
<input name="HP1 Total Points" size=3></div>
</form>
</div>
</body>
</html>
This is all php except for the java code I am struggling with. Please advise. I have tried this 2 ways and have spent hours on something that should be simple. I have a string that I am trying to display in an alert box with an onclick method 1: $mystring = "<a href=\"mysite.com\">Click</a>"; this does not work echo "<input type='button' value='Grab Code' onClick=alert('$mystring')>"; nor does this echo "<input type='button' value='Grab Code' onClick=alert('".$mystring."')>"; nor does anything I try. All I want to do is display the value of mystring in an alert box. However, this does work .. echo "<script type='text/javascript'> alert('".$mystring."');</script>"; But I cannot call this from an onclick. Any help is appreciated. Thanks JT When you do an alert confirm you can make if statements to say if they click ok do this and if they click cancel stop the program. Well I am trying to make a prompt that first asks the user to enter in a url and after they do and click enter they url is wraped with img tags. I would like to make it so that if the user clicks cancel the program ends b/c right now if the user click okay with no value the result is [img][/img] and if the user clicks cancel the result is [img]null[/img]. Any step in the right direction would be greatly appreciated! PHP Code: <script language="javascript"> function imgGenerator(){ var question=confirm("Would you like to share an image?"); if (question==true){ var obj=document.getElementById("mngl-board-post-input"); var imgurl = prompt("To Share an image paste the image url here"); var txt=document.createTextNode("[img]"+imgurl+"[/img]"); obj.appendChild(txt); } else {} } </script> Hi, How can i call a javascript alert function from an if condition in PHP? For instance: if (A == B) { CALL alert(); } thanks <html> <head> Filename: oae.htm Supporting files: figa.jpg, figb.jpg, figc.jpg, figd.jpg, figures.jpg, functions.js, oae.jpg, quiz.css --> <title>Online Aptitude Quiz: Page</title> <link href="quiz.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="functions.js"></script> <script type="text/javascript"> var seconds = 0; var clockId; var quizclock; function runClock() { seconds++; quizclock = seconds; document.quiz.quizclock.value = seconds; } function startClock() {showQuiz(); clockId = setInterval("runClock()",1000); } var timer; function stopClock() { clearInterval(runClock); var correctAns = gradeQuiz(); alert("You have Code: correctAns correct of 5 in Code: timer seconds."); } </script> </head> <body> <form id="quiz" name="quiz" action=""> <div id="header"> <p><img src="oae.jpg" alt="Online Aptitude Exam" /> <span>Grunwald Testing, Inc.</span><br /> 1101 Science Drive<br /> Oakdale, CA 88191 </p> </div> <div id="intro"> <p>This is a timed quiz of intelligence and perception. Your final score will be based on the number of correct answers and the time required to submit those answers.</p> <p>To start the quiz click the <b>Start Quiz</b> button below, which will reveal the first page of quiz questions and start the timer. When you have completed the questions, click the <b>Submit Answers</b> button on the quiz form.</p> <p id="buttons"> <input type="button" value="Start Quiz" onClick="startClock()" /> <br /> <input name="quizclock" id="quizclock" value="0" /> </p> </div> <div id="questions"> <h1>Page 1: Pattern Recognition</h1> <table id="quiztable"> <tr> <th rowspan="3">1.</th> <td colspan="2">Enter the next number in this sequence: 1, 3, 4, 7, 11, 18, ...</td> </tr> <tr> <td><input type="radio" name="q1" />a) 22</td> <td><input type="radio" name="q1" />c) 28</td> </tr> <tr> <td id="cor1"><input type="radio" name="q1" />b) 29</td> <td><input type="radio" name="q1" />d) 32</td> </tr> <tr> <th rowspan="3">2.</th> <td colspan="2">Enter the final three numbers in this sequence: 8, 5, 4, 9, 1, 7, 6, ...</td> </tr> <tr> <td id="cor2"><input type="radio" name="q2" />a) 10, 3, 2</td> <td><input type="radio" name="q2" />c) 2, 3, 10</td> </tr> <tr> <td><input type="radio" name="q2" />b) 2, 10, 3</td> <td><input type="radio" name="q2" />d) 10, 2, 3</td> </tr> <tr> <th rowspan="3">3.</th> <td colspan="2">Enter the next letter in this sequence: j, f, m, a, m, j, j, ...</td> </tr> <tr> <td><input type="radio" name="q3" />a) j</td> <td><input type="radio" name="q3" />c) f</td> </tr> <tr> <td><input type="radio" name="q3" />b) m</td> <td id="cor3"><input type="radio" name="q3" />d) a</td> </tr> <tr> <th rowspan="3">4.</th> <td colspan="2">What letter in this set does not belong?: A, B, D, G, J, S, O</td> </tr> <tr> <td id="cor4"><input type="radio" name="q4" />a) A</td> <td><input type="radio" name="q4" />c) J</td> </tr> <tr> <td><input type="radio" name="q4" />b) B</td> <td><input type="radio" name="q4" />d) O</td> </tr> <tr> <th rowspan="3">5.</th> <td colspan="2">What is the next figure in the following sequence?:<br /> <img src="figures.jpg" alt="" /> </td> </tr> <tr> <td><input type="radio" name="q5" />a) <img src="figa.jpg" alt="" /></td> <td><input type="radio" name="q5" />c) <img src="figc.jpg" alt="" /></td> </tr> <tr> <td><input type="radio" name="q5" />b) <img src="figb.jpg" alt="" /></td> <td id="cor5"><input type="radio" name="q5" />d) <img src="figd.jpg" alt="" /></td> </tr> <tr> <td colspan="3" style="text-align: center"> <hr /> <input type="button" value="Submit Answers" onClick="stopClock()"/> </td> </tr> </table> </div> </form> </body> </html> Ok, this HAS to be some stupid typo I can't find somewhere or something but I don't see where. Basically the alertbox works just fine when only the show_alert() function and the button calling it are in the code. But neither work if only the alert() function and the button calling that are in the code, nor does it work by itself. However I see no differences in how they are coded unless I am missing something very very simple. Code: <html>
<head>
<script type="text/javascript">
function show_alert()
{
alert("I am an alert box!");
}
function alert()
{
alert("again");
}
</script>
</head>
<body>
<input type="button" onClick="show_alert()" value="Show alert box" />
<input type="button" onClick="alert()" value="CLICK me" />
</body>
</html>
Hey! First off you guys rock! Second im a massive noob - like beyond noob. Ok so heres the deal guys and gals: I use Kampyle (a feedback form thing) and when my viewers click my feedback button a new window pops up and is the form. Like this (plus thats my site if you want to try it): However! theres this site (yes my arch enemy, well were actually two different things and hey i dont even speak their language) and they use the same feedback thing by Kampyle too. But the catch is theirs is inbuilt. something like Lightbox Javascript but for forms/windows. or Facebook's popup notices? so theirs looks like this: This make me ANGRY!!! cause i want that and ive had to ask stupid people cause you guys and gals are way too advance for me... well i am only 17... anywho... WHO CAN HELP ME??? if you want to test the difference between the two forms, my site: that creative corner and click the feedback button. their site:Lyoness and click the feedback button in the bottom right corner. THANK YOU SO MUCH!!! How would you make a alert box that contains a tabel instead of writting?
|
|||||||