Message box based on value in textbox

[koffer08]

Hey, I was wondering if someone could help me out with this one, I’m currently working on a project to help staff remember what a specific error code is. Basically I was to have a textbox in a IE window and when I would write ex: 356 a message box would popup saying 356: internal error ____________. So the message box would be different depending on what was written in the textbox. So all JavaScript if possible. Thanks in advance.

[thescientist]

sounds easy enough. Probably a function that gets the users input, and compares it against a switch statement of error message codes and some text about what they mean, which would use document.getElementById() and innerHTML to write that somewhere on the page. What have you got so far?

[koffer08]

sounds easy enough. Probably a function that gets the users input, and compares it against a switch statement of error message codes and some text about what they mean, which would use document.getElementById() and innerHTML to write that somewhere on the page. What have you got so far?

hey,this is what i have for now doesn't seem to work. maybe you could help me out.

<script type="text/javascript">function notEmpty(){	var myTextField = document.getElementById('myText');		if(myTextField.value != "0")	    alert(myTextField.value + ": THIS IS NUMBER 0 ")	      else	if(myTextField.value != "1")                    alert(myTextField.value + ": THIS IS NUMBER 1 ")	      else	if(myTextField.value != "2")		    alert(myTextField.value + ": THIS IS NUMBER 2 ")	      else                                  alert("Please input value.")	}</script><input type='text' size="5" id='myText' /><input type='button' size="5" onclick='notEmpty()' value='Sub' />

[thescientist]

I don't get why you are using !=. You are asking someone to submit an error code, and then give them a specific message, right? So you should be checking for equality (if using an if/else statement) or you could use a switch statement. Either way, you want something to happen when the condition matches the input, not when it doesn't match the input, right?

[koffer08]

I don't get why you are using !=. You are asking someone to submit an error code, and then give them a specific message, right? So you should be checking for equality (if using an if/else statement) or you could use a switch statement. Either way, you want something to happen when the condition matches the input, not when it doesn't match the input, right?

yes I'm looking for something for when it matches the input.

[thescientist]

yes I'm looking for something for when it matches the input.

ok. so have you tried to correct your code? The more code you produce, the quicker we can help you solve any issues you are having. Are you familiar with the basics of javascript?http://www.w3schools.com/js/default.aspspecifically:http://www.w3schools.com/js/js_comparisons.asphttp://www.w3schools.com/js/js_if_else.asp orhttp://www.w3schools.com/js/js_switch.asp

[ShadowMage]

You could also store the error messages in an array using the code as the index:var errMsgs = new Array();errMsgs[0] = "Error code 0 message";errMsgs[1] = "Error code 1 message";...Then all you'd have to do is get the number from the text box and use it to access the array.

[koffer08]

ok. so have you tried to correct your code? The more code you produce, the quicker we can help you solve any issues you are having. Are you familiar with the basics of javascript?http://www.w3schools.com/js/default.aspspecifically:http://www.w3schools.com/js/js_comparisons.asphttp://www.w3schools.com/js/js_if_else.asp orhttp://www.w3schools.com/js/js_switch.asp

Hey, yes I'm familiar with javascript I've been working with it for sometime just not enought to know everything. So I figured out how to get it working but now I was wondering if you could help me with this one. When I write “hi” instead of having an alert box come up I was hoping for a confirm box, so when they click ok it would bring them to lets say www.google.com and if they click cancel the confirm box would just close.

function HELLO(){var myTextField = document.getElementById('myText');if           (myTextField.value == "hi")alert(myTextField.value + ": hello ");else if	  (myTextField.value == "bye")alert(myTextField.value + ": goodbye");else if	  (myTextField.value == "good")alert(myTextField.value + ": bad");elsealert("Invalid value");}</script><input type='text' size="3" maxlength='3' id='myText'/><input type='button' size="1" onclick='HELLO()' value='?' />

[Synook]

Comment, you may find associative arrays - one-to-one mappings between indexed keys and values - very useful in the original situation. This way you can just have:

function error(n) {	var errors = {"0" : "an internal error", "365" : "a days-in-year error"};	alert(n + " is " + errors[n]);}

For your second query, confirm() returns either true or false. So you can have:

//...if confirm(myTextField.value + ": bad") {	window.location = "http://www.google.com/";	return; // don't run rest of code}//user didn't press ok.

[koffer08]

Comment, you may find associative arrays - one-to-one mappings between indexed keys and values - very useful in the original situation. This way you can just have:

function error(n) {	var errors = {"0" : "an internal error", "365" : "a days-in-year error"};	alert(n + " is " + errors[n]);}

For your second query, confirm() returns either true or false. So you can have:

//...if confirm(myTextField.value + ": bad") {	window.location = "http://www.google.com/";	return; // don't run rest of code}//user didn't press ok.

Hey,So I look into the whole arrays thing and I don’t think it would work for me cause because what I’m trying to do basically is what ever is in the textbox like “hi” the confirm box will say “hi: hello” Then there will be ok or cancel. If the person click’s ok it will bring him to www.google.com but if the person wrote “bye” in the textbox the confirm box will say by “bye: goodbye” and if the person clicks ok it will bring him to www.bing.com so there’s different website for what ever the person wrote in the textbox. I’ve tried all I know about JavaScript I’ve been reading a whole bunch of stuff and I still can’t figure it out.

[Synook]

Well, then you can have a multidimensional array , where you can associate both the message and the destination URL with the, uh, error code.

function error(n) {	var errors = {		"hi" : {			"msg" : "hello",			"url" : "http://www.google.com"		},		"bye" : {			"msg" : "goodbye",			"url" : "http://www.bing.com"		}	};	if (confirm(n + ": " + errors[n]["msg"])) window.location = errors[n]["url"];}

[koffer08]

Well, then you can have a multidimensional array , where you can associate both the message and the destination URL with the, uh, error code.

function error(n) {	var errors = {		"hi" : {			"msg" : "hello",			"url" : "http://www.google.com"		},		"bye" : {			"msg" : "goodbye",			"url" : "http://www.bing.com"		}	};	if (confirm(n + ": " + errors[n]["msg"])) window.location = errors[n]["url"];}

ok that looks alot more complicated then i though, how would i get this working with a textbox and a submit button.

[Synook]

It's not as complicated as it looks, I just (iso-syntactically) expanded the array so it would be easy to scan. You may want to read about JSON if you don't understand it fully.With a textbox and submit, you can just set the function to be called when the button is pressed.

<script type="text/javascript">function error(n) {	//as defined above}document.getElementById("getmessage").onclick = function() {	error(document.getElementById("code").value);	return false;}

<input type="text" id="code" name="code" /><input type="submit" id="getmessage" value="Get Message" />

[koffer08]

It's not as complicated as it looks, I just (iso-syntactically) expanded the array so it would be easy to scan. You may want to read about JSON if you don't understand it fully.With a textbox and submit, you can just set the function to be called when the button is pressed.

<script type="text/javascript">function error(n) {	//as defined above}document.getElementById("getmessage").onclick = function() {	error(document.getElementById("code").value);	return false;}

<input type="text" id="code" name="code" /><input type="submit" id="getmessage" value="Get Message" />

Hey, so I just tried that out and for some reason it doesn’t call the function it wont even give me an error when I put it in there’s nothing it doesn’t recognize my value in the textbox nether. I'm lost don't know where to go from here.PS: thanks for the link I'll read up and that as well.

[Synook]

Whoops, sorry, the event binding needs to only be initialized after the page has loaded (or at least after the submit button has loaded), or else there won't be anything for it to bind to. (There also needs to be closing script tags ).

<script type="text/javascript">	function error(n) {		//as defined above	}	window.onload = function() {		document.getElementById("getmessage").onclick = function() {			error(document.getElementById("code").value);			return false;		}	}</script>

I tested the error() function by itself, and that seemed to work.

[koffer08]

Whoops, sorry, the event binding needs to only be initialized after the page has loaded (or at least after the submit button has loaded), or else there won't be anything for it to bind to. (There also needs to be closing script tags ).

<script type="text/javascript">	function error(n) {		//as defined above	}	window.onload = function() {		document.getElementById("getmessage").onclick = function() {			error(document.getElementById("code").value);			return false;		}	}</script>

I tested the error() function by itself, and that seemed to work.

thank you so much.its working great, you were a great help. just one last thing how would i get it to give an alert if the person entered the wrong value or nothing at all ?

[Synook]

If a key does not exist in an array, then the value associated with it will be undefined (which evaluates as false), so you can check for that. Note how the test to the right of the and (&&) operator is not evaluated unless the first test is true.

function error(n) {	var errors = {		"hi" : {			"msg" : "hello",			"url" : "http://www.google.com"		},		"bye" : {			"msg" : "goodbye",			"url" : "http://www.bing.com"		}	};	if (errors[n] && confirm(n + ": " + errors[n]["msg"])) window.location = errors[n]["url"];	else alert("Please enter an existing error code.");}

[koffer08]

If a key does not exist in an array, then the value associated with it will be undefined (which evaluates as false), so you can check for that. Note how the test to the right of the and (&&) operator is not evaluated unless the first test is true.

function error(n) {	var errors = {		"hi" : {			"msg" : "hello",			"url" : "http://www.google.com"		},		"bye" : {			"msg" : "goodbye",			"url" : "http://www.bing.com"		}	};	if (errors[n] && confirm(n + ": " + errors[n]["msg"])) window.location = errors[n]["url"];	else alert("Please enter an existing error code.");}

Hey, So its working great now but for some reason even if the error code is true ill have the confirm box with my info come up but the alert box comes up as well. If its false only the alert box comes up witch is good but I don’t need it if the value is true. How would I fix that. I tried working around it but when I do it just stop’s working.

[thescientist]

Hey, So its working great now but for some reason even if the error code is true ill have the confirm box with my info come up but the alert box comes up as well. If its false only the alert box comes up witch is good but I don’t need it if the value is true. How would I fix that. I tried working around it but when I do it just stop’s working.

hmm, maybe try this:

function error(n) {	var errors = {		"hi" : {			"msg" : "hello",			"url" : "http://www.google.com"		},		"bye" : {			"msg" : "goodbye",			"url" : "http://www.bing.com"		}	};	(errors[n] && confirm(n + ": " + errors[n]["msg"])) ? window.location = errors[n]["url"] : alert("Please enter an existing error code.");}

[koffer08]

hmm, maybe try this:

function error(n) {	var errors = {		"hi" : {			"msg" : "hello",			"url" : "http://www.google.com"		},		"bye" : {			"msg" : "goodbye",			"url" : "http://www.bing.com"		}	};	(errors[n] && confirm(n + ": " + errors[n]["msg"])) ? window.location = errors[n]["url"] : alert("Please enter an existing error code.");}

Hey, So I just figured out why it still give’s me an error. If I press ok it will bring me to my (URL) but the whole idea is if the press cancel the confirm box would close but it actually turn’s the true into a false and continues on to the else alert. How would I fix it from doing that.

[justsomeguy]

With the power of parentheses:

(errors[n] ? (confirm(n + ": " + errors[n]["msg"]) ? window.location = errors[n]["url"] : return) : alert("Please enter an existing error code."));

(  errors[n] ? 	(	  confirm(n + ": " + errors[n]["msg"]) ? 		window.location = errors[n]["url"] : 		return	) : 	alert("Please enter an existing error code."));

if(errors[n]) {  if(confirm(n + ": " + errors[n]["msg"]))  {	window.location = errors[n]["url"];  }  else  {	return;  }}else{  alert("Please enter an existing error code.");}

[koffer08]

With the power of parentheses:

(errors[n] ? (confirm(n + ": " + errors[n]["msg"]) ? window.location = errors[n]["url"] : return) : alert("Please enter an existing error code."));

(  errors[n] ? 	(	  confirm(n + ": " + errors[n]["msg"]) ? 		window.location = errors[n]["url"] : 		return	) : 	alert("Please enter an existing error code."));

if(errors[n]) {  if(confirm(n + ": " + errors[n]["msg"]))  {	window.location = errors[n]["url"];  }  else  {	return;  }}else{  alert("Please enter an existing error code.");}

tried this still not working :S still does the same thing when i press cancel it will give me an error or it will go to the alert box

[justsomeguy]

I don't see how that's possible with that code, clearly with the if structure it's either going to show the confirm or the alert, but never both. If it shows the confirm and you click OK, then it changes window.location, or else it just returns and does nothing.

[koffer08]

I don't see how that's possible with that code, clearly with the if structure it's either going to show the confirm or the alert, but never both. If it shows the confirm and you click OK, then it changes window.location, or else it just returns and does nothing.

ok well you gave me 3 do i only use the 3third one ?

[ShadowMage]

ok well you gave me 3 do i only use the 3third one ?

All 3 will work, but you only need to use one of them not all of them. JSG was simply demonstrating what exactly the code is doing. Each is a little more expanded version of the previous one to help clarify the logic.