JavaScript - How To Return True From -- Xmlhttp.onreadystatechange=function()
I am trying to figure out that if the function "xmlhttp.onreadystatechange=function()" returns true the whole function "function checkUser(str)" should return true as well....so not sure how to do it. i have banged my head since long so please advise!
Here is the code below: -------------------------------------------------------- function checkUser(str) { var sp = document.getElementById("msgs"); if (str=="") { document.getElementById("msgs").innerHTML="Username cannot be empty."; return false; } if (str.length <= 6) { document.getElementById("msgs").innerHTML="Username cannot be less than 6 characters and must not start with a number or a special value"; return false; } if (window.XMLHttpRequest) { //code for IE7+, firefox, chrome, opera, safari xmlhttp=new XMLHttpRequest(); } else { //code for old IE xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { if (xmlhttp.responseText === 'FOUND') { sp.style.color = "red"; sp.innerHTML = "[ERROR]: The username \"" + str + "\" already exist. Please try a different name."; return false; } else if (xmlhttp.responseText === 'NOT FOUND') { sp.style.color = "blue"; sp.innerHTML = "Username: VALID"; return true; } } } xmlhttp.open("GET", "checkUser.php?q="+str,true); xmlhttp.send(); } Similar TutorialsHi All, This is in ASP.Net Im creating a task loggin system and this allows the user to raise tasks and update them, im using javascript for validation and if the fields are empty it then changes the fields back ground to Red which is fine but then it goes on to update the data in SQL which i dont want, any suggestions or how i can achieve no post back is the result from the function is False (for fields in error) Html Code where im calling the function Code: <asp:button runat="server" id="btnChangeCommentsAuth" CSSclass="RaiseButton" OnClientClick="CommentsCheck('MainDisplayContentChange_txtAuthCommentsArea');" PostBackUrl="~/RaiseTaskChange.aspx" Text="Auth" /> Javascript function Code: function CommentsCheck(comments) { var com; var result = new boolean(); com = document.getElementById(comments); if (document.getElementById(comments).value == '') { com.style.backgroundColor = "#B20635"; result = 0; } else { result = 1 } } Thanks in Advance look forward to your reply. I don't understand the logic of Break, Return False, Return True. It was never really covered in our college class, and I see everyone using it. I got an A in the class, if that 'proves' that I really tried to apply myself. NOTE: I understand what the function is doing. I just don't understand WHEN to use break, return false or return true if the the translator can determine the conditional statements. PHP Code: function submitForm(){ var ageSelected = false; for (var i=0; i<5; ++1){ if (document.forms[0].ageGroup[i].checked == true) { ageSelected = true; break; } } if (ageSelected == false){ window.alert("You must select your age group"); return false; } else return false; } if the the translator can determine the conditional statements, why not write it like this: PHP Code: function submitForm(){ var ageSelected = false; for (var i=0; i<5; ++1){ if (document.forms[0].ageGroup[i].checked == true) { ageSelected = true; break; // what's the point for the 'break'? Won't the rest of the code be ignored since it passed the first condition? } } if (ageSelected == false){ window.alert("You must select your age group"); return false; } // why not leave the last else out? is it just a 'safety' catch, in case something other than true or false is inputted? else return false; // what's the point? } Questions: Why use return true, if the translator knows it's ture? Why use "return false" if the translator knows it's false and the alert window has already gone up? why not use "break" to stop the code? Why use the "return false" at the end "else" statement? Hi room, Hey, I opened up the source code for this page in google chrome and since i'm learning javascript, i wanted see if i could "read" it and figure out what was going on. I'm am having the hardest time understanding "return false" and "return true". Could someone step me through this via interpreting this code (in bold typeface): Code: var DefaultValue = 'Search'; function clearSearch() { if (document.searchForm.q.value == DefaultValue) { document.searchForm.q.value = ''; } } function validateSearchHeader() { if ( document.searchForm.q.value == '' || document.searchForm.q.value.toLocaleLowerCase() == DefaultValue.toLocaleLowerCase() ) { alert('Please enter at least one keyword in the Search box.'); document.searchForm.q.focus(); return false; } return true; } Thanks! Got a timing issue with sending a URI string out to a server side script right before a client side form validation process returns true.. The problem is that the return true gets called to quickly for the submission of the URI string to be completed. So my question is, might there be a way to mix a return and a setTimeout? If so, could some one give a an example? Thanks! hi peeps, this one might be confusing, if so i apologise! below is a cut down version of the script calling a function: Code: function updateStockRequest(thestatus,theform,thedate) { if(thestatus == 'locked') { if(checkStockRequested()) { if(confirm('Are you sure you want to send for processing?\nYou will not be able to add any more stock!')) { document.getElementById('status').value = 'locked'; document.forms[0].submit(); } } else { alert('You must request some stock first!'); } } } the following is the function being called: Code: function checkStockRequested() { //check to see if stockrequest has items added!!! xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser does not support HTTP Request"); return; } var params = "?theuid=" + escape(document.getElementById('uid').value); var url="_check_stockrequest.php" url=url+params; ajaxedInner = ""; xmlHttp.open("GET",url,true); xmlHttp.setRequestHeader("If-Modified-Since", "Fri, 31 Dec 1999 23:59:59 GMT"); xmlHttp.onreadystatechange=stateChanged; xmlHttp.send(null); xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4){ if (xmlHttp.status == 200) { responsestring = xmlHttp.responseText.replace(/^\s+|\s+$/g, ''); alert(responsestring); if(responsestring == 'true') { return true; } else { return false; } } } } } in the testing the function is alerting 'true' but the calling function still fails and says you need to add stock. i must admit ive rarely used the return syntax so maybe im doing it wrong?!? ive tried many variants such as creating a variable and assigning it the string 'true' etc and then using if(checkStockRequested == 'true') but it still fails. help!!!!!!!!! hi guys, maybe im being stupid but any ideas why this doesnt seem to work: Code: function checkSCItems() { //check sccost not blank due to ajax need to do lookup xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser does not support HTTP Request"); return; } var params = "?scnumber=" + escape(document.getElementById('scnumber').value); var url="_check_scitems.php"; url=url+params; ajaxedInner = ""; xmlHttp.open("GET",url,true); xmlHttp.setRequestHeader("If-Modified-Since", "Fri, 31 Dec 1999 23:59:59 GMT"); xmlHttp.onreadystatechange=stateChanged; xmlHttp.send(null); xmlHttp.onreadystatechange = function() { if (xmlHttp.readyState == 4){ if (xmlHttp.status == 200) { var checkSCItemsResponse = xmlHttp.responseText; if(checkSCItemsResponse == 'found') { return true; } else { window.location.hash = 'scpricebuildup2'; alert('You must first create some cost items'); return false; } } else { alert('There was a problem, please try again, or contact the Administrator'); return false; } } } } im calling this and if it returns true another function is called but for some reason the 2nd function never seems to happen. (that function works fine so it cant be that - if i just set this function to return true everything works fine too) its being called like so: Code: <a href='javascript:;' onclick="if(checkSCItems() && validateText(document.subcontract_order,['scdate','scworks','scpayment','scfirstpayment','scpaymentinterim','scbalance','scretentionat','sccommence','sccompletion','sclabour','scplant','scmaterials']) && validateDate(document.subcontract_order, ['scdate','scfirstpayment','scbalance','sccommence','sccompletion']) && validateSelectNoBlank(document.subcontract_order, ['trading_name'])){window.open('subcontract_order_print.php?id=<?php echo writeIfSet($id) ?>')}"> is there some issue with ajax and return true? do i need to tell it to call another function that calls return true etc? I'm trying to "progressively enhance" one of my surveys using javascript. Basically, I have rating scales that make use of radio buttons as each point on the scale. Each radio button occupies its own cell in a table. I wrote some functions that will highlight cells on mouseover in a color corresponding to its position on the scale (e.g. the lowest point is red, the midpoint is yellow, the highest point is green). When a radio button is clicked, the background of the button's cell and preceding cells in the same row will be colored accordingly. The functions are working well in FireFox and Chrome (I just have to add a few lines using the addEvent function to make it compatible with IE). The effect looks a lot nicer when I add a function that makes the visibility of the radio buttons hidden. However, I want to make sure that there is a fallback option in case the functions that color the cells don't work for whatever reason. I would not want the radio buttons hidden in this case. Is there a method whereby I can call the "hideRadiobuttons" function only if the other functions are successfully executed? hi,i don't understand about the jquery basic example the code is below PHP Code: <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $('p').addClass(function(n){ return 'par_' + n; }); }); }); </script> <style type="text/css"> .par_0 { color:blue; } .par_1 { color:red; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Add classes to p elements</button> </body> </html> i want to understand about the how is work function(n){ in the function a and how work return function return 'par_' + n; thanks mate Please help, I have been looking at this all day and I know there must be a simple fix! How do I pass results back to textService so that I can make a call such as textResult = textService(text to pass in); I don't want to use a global variable if I can avoid it. This is the code Code: function textService(text){ req.open("GET", "http://....?text="+text, true); req.onload = showResults; req.send(null); } function showResults() { results = req.responseXML.getElementsByTagName("Result"); } Thank you in advance My function the_magnitude() takes in values from 4 different asp:textboxes. The textboxes "easting" and "northing" contain numbers that don't change, but the textboxes "east" and "north" contain numbers inputed by the user, and the function returns "error" as a value to be put into another textbox that we'll call "error box". So what it's suppose to do is when I update the information in either "east" or"north" it will update, on change, the number in the "error box". It kinda works. My problem is that if the number is a value that changes the style to red, #ff0000, in the function it wont update the "error box" and it just leaves a red zero that is a default number in the box. The only way I can get the number to change is if I end up with a number less than 200, which would make the text green. I'm pretty sure it's a problem with my javascript. here is my function Code: <script type="text/javascript"> function the_magnitude(easting, east, northing, north, error) { var a = easting.value; var b = east.value; var c = northing.value; var d = north.value; var total = Math.sqrt(((a - b) * (a - b)) + ((c - d) * (c - d))); if (total > 200) { document.getElementById('TextBox155').style.color = "#ff0000"; document.getElementById('TextBox155').style.fontWeight = "bold"; } else { document.getElementById('TextBox155').style.color = "#008000"; document.getElementById('TextBox155').style.fontWeight = "bold"; error.value = roundNumber(total); } } </script> and here are the two buttons that I input numbers into for east and north Code: <html> <body> <asp:TextBox ID="TextBox153" runat="server" Height="0.25in" Style="font-family: Arial, Helvetica, sans-serif; font-size: small; text-align: center" Width="0.75in" onchange="the_magnitude(document.getElementById('TextBox153'), document.getElementById('TextBox212'), document.getElementById('TextBox154'), document.getElementById('TextBox213'), document.getElementById('TextBox155'))" ></asp:TextBox> </body> </html> Code: <html> <body> <asp:TextBox ID="TextBox153" runat="server" Height="0.25in" Style="font-family: Arial, Helvetica, sans-serif; font-size: small; text-align: center" Width="0.75in" onchange="the_magnitude(document.getElementById('TextBox153'), document.getElementById('TextBox212'), document.getElementById('TextBox154'), document.getElementById('TextBox213'), document.getElementById('TextBox155'))" ></asp:TextBox> </body> </html> and here is the textbox that I want the return of the function to go into. Code: <html> <body> <asp:TextBox ID="TextBox155" runat="server" Height="0.25in" Style="font-family: Arial, Helvetica, sans-serif; font-size: small; text-align: center" Width="0.5in">0</asp:TextBox> </body> </html> I'm looking for some assistance. I'm trying to write a javascript to validate a form for a class. When I try to submit the form with none of the fields filled in , it goes to the intercept page without showing any errors. In addition to this, I have an error message. Return is outside of function. I have NO clue what they mean here, or what I've done wrong. Could someone take a look and give me an opinion? Enclosed is the entire javascript and the top portion of the related form. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> <!-- Hides script from older browsers --> "function validate()" { if(document.form2.size.value=="Please Choose") { alert("Did you forget to select a size?"); return false; } if(document.form2.quantity.value=="Please Choose") { alert("How many did you want??"); return false; } if(document.form2.email.value=="") { alert("Please enter your Email Address.."); return false; } if(document.form2.verify.value=="") { alert("Could you enter it again please.."); return false; } if(document.form2.verify.value!=document.form2.email.value) { alert("The Email Addresses do not match"); return false; } if(document.form2.email.value.match((/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/)) { alert("Email address was not valid please RETRY"); return false; } else return true; } //--> </script> <form id="form2" name="form2" method="post" onSubmit="return validate(this)" action="2intercept.asp"> <table width="150" border="0" cellpadding="0"> <tr> <td><div align="right"> <label for="size">Size Desired:</label> </div></td> <td><div align="left"> <select name="size" id="size"> <option selected="selected">Please Choose</option> <option value="4x6">4x6</option> <option value="5x7">5x7</option> <option value="8x10">8x10</option> </select> </div></td> </tr> <tr> <td><div align="right"></div> <label for="quantity">Quantity Desired</label></td> <td><div align="left"> <select name="quantity" id="quantity"> <option>Please Choose</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5+">5+</option> </select> </div></td> ANY advice, corrections or suggestions would be GREATLY appreciated.. I'm at my wits end with this stuff. This is my class doucmnet :: PHP Code: XMLXHttpRequest = function(name){ this._handle = new XMLHttpRequest(); this._method = ''; this._url = ''; this.readyState = 0; this.responseBody = ''; this.responseText = ''; this.responseXML = ''; this.status = 0; this.statusText = ''; this.className = name; this.onreadystatechange = function(){} this.ontimeout = function(){} this.abort = function(){ this._handle.abort(); } this.getAllResponceHeaders = function(){ return this._handle.getAllResponceHaders; } this.getResponceHeader = function(bstrHeader){ return this._handle.getResponceHeader(bstrHeader); } this._readyStateUpdate = function(){ if(typeof(name) !== "undefined"){ name = this.className; } eval(""+name+".onreadystatechange();"); eval(""+name+".readyState = "+name+"._handle.readyState;"); eval(""+name+".status = "+name+"._handle.status;"); eval(""+name+".statusText = "+name+"._handle.statusText;"); eval(""+name+".responseText = "+name+"._handle.responseText;"); eval(""+name+".responseBody = "+name+"._handle.responseBody;"); eval(""+name+".responseXML = "+name+"._handle.responseXML;"); } this.open = function(sMethod, sUrl){ this._readyStateUpdate(); this._handle.onreadystatechange = this._readyStateUpdate; this._handle.ontimeout = this.ontimeout(); this._url = sUrl; this._method = sMethod; } this.send = function(data){ this._handle.open("GET", "xml.php?url="+ this._url + "&method=" + this._method + "&data=" + urlencode(data)); this._handle.send(null); } this.setRequstHeader = function(sName, sValue){ return this._handle.setRequestHeader(sName, sValue); } } What this is supposed to do :: This is a class that is supposed to allow CrossDomain AJAX(XMLXHttpRequest) in the exact same way the XMLHttpRequest dose all the same handlers other then it uses a php file to get all the data now the PHP File works perfectly post and GET - Without cURL. Now most of the class works it can send the data("POST" or "GET") cross domain the only problem seems to be firing the onreadystatechange PHP Code: this.open = function(sMethod, sUrl){ this._readyStateUpdate(); this._handle.onreadystatechange = this._readyStateUpdate; this._handle.ontimeout = this.ontimeout(); this._url = sUrl; this._method = sMethod; } As you can see i have its set to fire the _readyStateUpdate on the onreadystatechange so why is it not fireing, This is tested in FireFox 3.5, ComitBird(Firefox 3.2 Core), Google Chrome and IE and it dose not work in all of them as i know there is a bug with FireFox 3.5 and Firebug wich im a developer i have got it but thats why im testing in GG and IE Any help would be greatly appreciated Yesterday I started looking into clientside database handling with html5 and localstorage. I've been trying for hours to make a function like the one below, but I can't figure out how to return the name variable. Any ideas? Code: function hent_kontakt_navn(var1, var2) { var db = MYDB; db.transaction(function (tx) { tx.executeSql('SELECT * FROM db_kontakter WHERE field1=\'' + var1 + '\' AND field2=\'' + var2 + '\' LIMIT 1', [], function (tx, results) { var len = results.rows.length, i; for (i = 0; i < len; i++){ var fornavn = results.rows.item(i).fornavn; var etternavn = results.rows.item(i).etternavn; var navn = fornavn + ' ' + etternavn; alert(navn); //This works and alerts the correct value } }, null); }); return navn; //But this one returns undefined. I know variables don't pass like this between functions, but how can I make it work so that the function returns this var? } I'm trying to diagnose the javascript part of an ajax script: Code: <form> <ul id='May120128AM' name='apt_time' value='May120128AM'> <input type="hidden" id='May120128AMhidden' name="user_id" value='May120128AM'> </form> <script type="text/javascript"> <!-- var request; request = new XMLHttpRequest(); function checkData() { alert(request.readyState); } var apt_time = encodeURIComponent(document.getElementById(May120128AM').value); var userid = encodeURIComponent(document.getElementById(May120128AMhidden').value); var parameters = "apt_time"+apt_time //+"&"+"user_id"+userid; request.open("POST", "/cgi-bin/my_script.php", true); request.onreadystatechange = checkData; request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); request.send(parameters); //--> </script> The checkData script puts each readyState in an alert box, so I know the javascript is firing. If I change the red line of code to this, the alert boxes no longer pop up, so I assume the javascript is not firing: Code: var parameters = "apt_time"+apt_time+"&"+"user_id"+userid; I thought name/value pairs were written like this: Code: name1=value1&name2=value2 I though that was exactly what the red line of code was doing. Does anyone know why it isn't firing? UPDATE: This works: Code: var parameters = "apt_time=+apt_time+&user_id=+userid"; I don't know why the above works and the other doesn't. They both look like they do the same thing - this: Code: apt_time=value1&user_id=value2 Hey all, This is a problem that I've tried various ways round - consider the following code: Code: if (window.XMLHttpRequest) { this.xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { this.xhr = new ActiveXObject("Microsoft.XMLHTTP"); } this.xhr.onreadystatechange = function () { if(this.readyState == 4) { if(this.status == 200) { editor.loadObject.doLoad(); } else window.console.log("Loader: Loader Error code " + xhr.status); } } the code is called from my "loader" object which in turn is loaded from another object in this case "editor" (editor initiates the loader object by this.loadObject = new loader(this.ident + "loader");). In the example above I have had to hard-code the variable "editor" (i.e. the original object) because when I define this.xhr.onreadystatechange as a function, anything outside the function is outside of it's scope, so I can't for example define this.callerObject and put it in place of editor. This is a nuisance as you can imagine - Any ideas how to do this? Many thanks Edd I am trying to use xml http and xml dom with javascript. I currently have this function to load the xml document: Code: function loadXmlDoc(dname) { var xmlDoc; if (window.XMLHttpRequest) { xmlDoc = new window.XMLHttpRequest(); xmlDoc.open("GET",dname,false); xmlDoc.send(""); return xmlDoc.responseXML; } // IE 5 and IE 6 else if (window.ActiveXObject) { xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = false; xmlDoc.load(dname); return xmlDoc; } alert("I'm sorry, your browser doesn't support the necessary tools to load this page. Please upgrade your browser or try a different one."); return null; } However, it's not working in any version of IE. I've also tried using Microsoft.XMLHTTP instead of Microsoft.XMLDOM but it's still not working. I'm on a mac and don't have IE so i've been using browsershots.org for testing. Ok, guys. I'm new to JavaScript, so go easy. I'll be asking bunches of "dumb" questions for a while. 1st question, and the only one for now ... Say I have the following function: Code: function SwapValues(SwapVal1,SwapVal2) { TempSwapVal=SwapVal1; SwapVal1=SwapVal2; SwapVal2=TempSwapVal; } I don't care about the return value of the function itself, but I do need the new values of SwapVal1 and SwapVal2. In ASP when I do this, the values get returned. How do I get this to work in JS? The line "xmlHttp.onreadystatechange = function()" Does the following error, i dont know whats wrong. The code: Code: function MakeRequest() { var xmlHttp = getXMLHttp(); var page = document.getElementById("page").value; var content = document.getElementById("code").value; xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState == 4 && xmlHttp.status==200) { HandleResponse(xmlHttp.responseText); } } xmlHttp.open("POST", "edit.save.php", true); xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlHttp.send("page="+page+"&content="+content+""); } function getXMLHttp() { var xmlHttp try { //Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch(e) { //Internet Explorer try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { alert("Your browser does not support AJAX!") return false; } } } } function HandleResponse(response) { document.getElementById('SavedFile').innerHTML = response; } |