JavaScript - Combobox Select Value Alert Message
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 Similar TutorialsHello folks, I want to have a combobox with bookmark options. After you select a value from this combobox you can bookmark it with a push button. This should popup a bookmark dialog from the browser bookmark dialog. Can anybody help me? Lets say we have 3 options in the value's. Google, Yahoo, Bing When you select Google and you push Place bookmark you should get a browser bookmark dialog with a title "Google search site". The url would be just http://www.google.com/ I also want Yahoo with the url http://www.yahoo.com/ and the bookmark title Search at Yahoo! and Bing with the url http://www.bing.com and the title Search at Bing I'm looking already for a while for this. Can anybody help me? Thanks in advance! grid 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 Hi 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. 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> <html> <script language="javascript"> function foo() { var mainDiv = document.getElementById("my"); var div = document.createElement("div"); for(j=0;j<5;j++) { var select = document.createElement("select"); for(i=0;i<5;i++) { var option = document.createElement("option"); option.text = "hmm"; select.appendChild(option); } div.appendChild(select); } mainDiv.appendChild(div); } </script> <body> <select onchange="foo()"> <option>a</option> <option>b</option> <option>c</option> <option>d</option> <option>e</option> <option selected>-----Select------</option> </select> <div id="my"></div> </body> </html> I stuck ... but I got the solution now I want to reset on every selection ? 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? 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. hey I have a page in which I already have a 3 level combox that works fine. I want to add to that page another combobox of 2 level. When I tried to do it I find out that they control of each other. I tried changing the variables names. (changing "x" into "w" in the second combobox) Well that worked. Can you please help me figure it out? here is the end of the first form: var temp1=document.isc.stage3 function redirect1(y){ for (m=temp1.options.length-1;m>0;m--) temp1.options[m]=null for (i=0;i<secondGroup[document.isc.example.options.selectedIndex][y].length;i++){ temp1.options[i]=new Option(secondGroup[document.isc.example.options.selectedIndex][y][i].text,secondGroup[document.isc.example.options.selectedIndex][y][i].value) } temp1.options[0].selected=true } function redirect2(z){ parent.mainframe.location=temp1[z].value; and here is the end of the second combobox: var temp=document.doublecombo.stage2A function redirect(w){ for (n=temp.options.length-1;n>0;n--) temp.options[n]=null for (k=0;k<groupa[w].length;k++){ temp.options[k]=new Option(groupa[w][k].text,groupa[w][k].value) } temp.options[0].selected=true } function go(){ location=temp.options[temp.selectedIndex1].value } Thanks Elad I am working on some sort of a program that will load data from a notepad or Excel file and load it into a ComboBox. The notepad file would have names and phone numbers in it. The ComboBox would only show their names in alphabetical order. There would also be a button that when you click it, it would open up Outlook (if you are signed into Outlook) and auto-fill the form with their phone number @ vtext.net (for texting verizon cell phones). The reason behind this is so the notepad or Excel file can be edited to add more users as the company expands. I'm on a time crunch and haven't really been able to figure out how to do the data on load. If anyone could help and explain their code a little bit I would be very grateful. I haven't touched JavaScript in around 5 years so I'm very rusty. Thanks. I have a WYSIWYG text area and I want to insert combo-box' value at current cursor location of the WYSIWYG text area. I have a simple textarea where the value is inserting on combo-box clicking. But when I do integrate both files, the functionality wont work. I have both scripting files..
Hi guys, Let me explain simply what I do and what I'm trying to achieve: I got a couple of comboboxes were the user selects a series of numbers. Once a selection is made, the value is appended to an input box. The idea is that the appended values form a telephone number, or at least part of one, that will then be used to search trough a database to look for a matching number. The code below is what I have done so far: Code: <script type="text/javascript"> function displayIndicatif(){ var sel = document.getElementById("indicatif"); var text = sel.options[sel.selectedIndex].value; var out = document.getElementById("blabla"); out.value += text+"\n"; } function displayBloc(){ var sel1 = document.getElementById("bloc"); var text1 = sel1.options[sel1.selectedIndex].value; var out1 = document.getElementById("blabla"); out1.value += text1+"\n"; } </script> [...] <input type="text" id="blabla"/> [..] <select id="indicatif" onChange="displayIndicatif();"> <option value="021">021</option> <option value="022">022</option> <option value="031">031</option> </select> <select id="bloc" onChange="displayBloc();"> <option value="555" class="021">555</option> <option value="666" class="021">666</option> <option value="777" class="021">777</option> </select> Basically what happens now is this: combobox indicatif: 021 | 022 | 031 combobox bloc: 555 | 666 | 777 If I select "021" from indicatif, the script will append 021 to the input "blabla". The problem is, if I now select "022", the input will show "021022" instead of replacing the 021 with 022. What I would like is that, for each combobox, the script replaces the selected value with the new one instead of simply appending it, like instead of say 021022555666 it would show 021555 or 022666 or 021666 depending on what is selected...you get the idea? Is this doable? Needless to say I'm a total noob at javascript...I adapted the code I got now from some other guy who was trying to achieve almost the same thing and adapted it to my needs, or least, tried to, but now I'm stuck. Any help is appreciated! Thanks Hi Within a classic asp webform (using vbscript) I would like part of the form (input boxes within table structure) to be specific/displayed depending on the users selection from the combo box in the row above. I think the best solution would be using Javascript can anyone suggest a solution or example code? Many thanks Sarah Hi I'm new to javascript, so this is probably very simple. I've created a form with combobox with different values (this is for my website). What I want is when the user clicks 'submit' that it goes to a different page on the website depending on the value the person has selected in the combobox. Values are numerical, for example 1000, 2000, 5000 etc. I've been trying this for a couple of days now without success! Thanks in advance I've been having problems getting my select option to change the options of another select option. I'm not much of a javacsript coder, so I'm at a lost. When I select the first option nothing appears in the second option. here's the javascript code: Code: function createOption(OptionText, OptionValue){ var temp = document.captcha_form("option"); temp.innerHTML = OptionText; temp.value = OptionValue; return temp; } function valChange(){ var firstList = document.getElementById("emailaddress"); var secondList = document.getElementById("subject"); while(secondList.hasChildNodes()) secondList.removeChild(secondList.childNodes[0]); switch(firstList.value){ case "1":{ secondList.appendChild(createOption("Report Site Browsing Issue", Report Site Browsing Issues)); secondList.appendChild(createOption("Report Page Errors", Report Page Errors)); secondList.appendChild(createOption("Other", Other)); break; } case "2":{ secondList.appendChild(createOption("Report Unauthorized Game", Report Unauthorized Game)); secondList.appendChild(createOption("Report Spam", Report Spam)); secondList.appendChild(createOption("Report Harassment", Report Harassment)); secondList.appendChild(createOption("Report Illegal Activities", Report Illegal Activities)); secondList.appendChild(createOption("Request Account Removal", Request Account Removal)); break; } // .... default:{ secondList.appendChild(createOption("Please select from the first list", "")); break; } } } window.onload = valChange; this is the form code Code: <div class="mailto_form"> <form method="POST" id="captcha_form" name="captcha_form" action="../includes/mailform.php"> <div style="padding-bottom: 1em;">Choose Recipient: <select name="emailaddress" id="emailaddress" onchange="valChange();"> <option value=""></option> <option value="1">Webmaster</option> <option value="2">Admin</option> </select> </div> <div style="padding-bottom: 1em;">Subject: <br /><select name="subject" id="subject"> </div> <div style="padding-bottom: 1em;">From: <br /><input type="text" name="email" id="email" value=""> </div> <div style="padding-bottom: 1em;">Enter the text contained in the image into the text box: <br /><img src="../includes/captcha.php" /> <br /><input type="text" name="userpass" value=""> </div> <div style="padding-bottom: 1em;">Message: <br /><textarea name="message" id="message" rows="10" cols="60"><?php echo "</tex" . "tarea>"; ?> </div> <div style="padding-bottom: 1em;"><input name="submit" type="submit" value="Submit"> </div> </form> </div> Link to the page http://www.netgamegurus.com/contact/ Hey chaps, hope someone can help with this: I have a PHP form, with a couple of dynamic Select menus, which are populated from two SQL tables: // tbl_main_colour: Code: ID, NAME 1, Red 2, Blue 3, Green // tbl_shade_colour: Code: ID, NAME, FK_MAIN_COLOUR_ID 1, Light Red, 1 2, Dark Red, 1 3, Light Blue, 2 4, Dark Blue, 2 5, Light Green, 3 6, Dark Green, 3 What I'm after is something to filter the second select option, after the first select option has been chosen // Select 1: Code: Red // Select 2: Code: Light Red Dark Red I'm pretty sure this is possible, but not sure how to go about it, any help would be most appreciated. Hey Guys When a user changes the select list called "reason_code_master" I need the uodatecodes() function to update all the other select list with the id of "reason_codes" with the same . How can I do this. <select size='1' onchange="updatecodes()" name='reason_code_master'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> Hi JS Experts, I am working on a class registration system that requires students to register for a main class (101, 102 or 103). The student is supposed to select one main course as well as provide a second choice in case the first is not available. I have two dropdown select fields to capture data 1) Choice -1: 101 / 102 / 103 ( Student needs to select one - Reading the classID from classes table) 2) Choice -2: 101 / 102 / 103 ( If student selects 101 in Choice-1 then the only classes available under Choice-2 should be 102 or 103). How can I accomplish the above? Further to this there are two fields on the form where I would like to auto populate based on what they have selected in Choice-1 and Choice-2. For Example: If a parent selects choice1: 101 the child Choice1 field should autopopulate with 100. If a parent selects Choice2: 201 the child Choice2 field should autopopulate with 200 Any help would be really appreciated. Thanks Vinny Hello, I am trying to make a simple code that has a selection list (with the choice fruit or veggie). When the user chooses fruit, the second list displays the options apple, orange, banana. When the user changes their choice to veggie, the second select list then contains carrot, corn, potatoes (and the apple, orange, banana disappear). I need some advice on how to do this Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body> <form name = "form1"> <fieldset> <legend>Fruit or Veggie</legend> <select name = "S1"> <option name = "fruit">Fruit </option> <option name = "veggie">Veggie</option> </select> <select name = "S2" </select> </fieldset> </form> <script language="JavaScript" type="text/javascript"> ??? </script> </body> </html> |