Resolved Javascript submit not working? [CODE]

hossaim · 12-06-2012, 05:39 PM

Code:

<html>
<head>
<title>Translator</title>
<script type="text/javascript">

function checkOranges(numOranges)
   {
      if(numOranges == "hi")
         {
            alert("hai");
         }
else if (numOranges == "lol")
{
alert("Laugh out loud");
}
  

</script>
</head>
<body>
<h3>Internet abriviation translator</h3>
<form method="POST" name="orangesform"
onSubmit="checkOranges(document.orangesform.numOranges.value); return false;">
<input type="text" name="numOranges" id=numOranges />
<input type="Submit" name="Submit" />

</form>



</body>
</html>

when i run it no alert pops up after hitting submit when you type in the command (lol), does anyone know why? I can't figure out what is the issue with it.

WolfShade · 12-06-2012, 05:43 PM

Check for messages in error console or FireBug.

hossaim · 12-06-2012, 05:45 PM

Quote:

Originally Posted by WolfShade

Check for messages in error console or FireBug.

I don't have firebug (I wrote this in notepad btw lol) and error console comes up with nothing.

felgall · 12-06-2012, 06:32 PM

Try a different browser then - all modern browsers except for Firefox have a debugger built in.

WolfShade · 12-06-2012, 07:16 PM

function checkOranges(numOranges)

<input type="text" name="numOranges" id=numOranges />

Give the argument in the function a different id from the input.

Put the id of the input in double quotes. ("")

Old Pedant · 12-06-2012, 07:39 PM

* SIGH *

This is just too simple.

One very very minor fix needed:

Code:

<form method="POST" name="orangesform"
onSubmit="checkOranges(document.orangesform.numOranges.value); return false;">

There is NOTHING ELSE wrong in the original code.

There are certainly things I would do differently. But that's a different question.

hossaim · 12-06-2012, 08:04 PM

Quote:

Originally Posted by Old Pedant

* SIGH *

This is just too simple.

One very very minor fix needed:

Code:

<form method="POST" name="orangesform"
onSubmit="checkOranges(document.orangesform.numOranges.value); return false;">

There is NOTHING ELSE wrong in the original code.

There are certainly things I would do differently. But that's a different question.

I did this, but upon hitting the submit there is still nothing happening.

Old Pedant · 12-06-2012, 08:25 PM

You removed the last } from your function!

You had that right before. Why did you change that?

HINT: The number of { and } in any program must be the same.

Ditto for [ and ].

Ditto for ( and ).

If you would indent your code sensibly you would see this.

Code:

<html>
<head>
<title>Translator</title>
<script type="text/javascript">
function checkOranges(numOranges)
{
      if(numOranges == "hi")
      {
            alert("hai");
      }
      else if (numOranges == "lol")
      {
          alert("Laugh out loud");
      }
}
</script>
</head>
<body>
<h3>Internet abriviation translator</h3>
<form method="POST" name="orangesform"
onSubmit="checkOranges(document.orangesform.numOranges.value); return false;">
<input type="text" name="numOranges" id=numOranges />
<input type="Submit" name="Submit" />

</form>
</body>
</html>

A better way to write this:

Code:

<html>
<head>
<title>Translator</title>
<script type="text/javascript">
var dictionary = {
    "hi" : "hai",
    "lol" : "Laugh Out Loud",
    "rotflmao" : "Rolling on the floor laughing my *** off",
    "fwiw" : "For what it's worth"
};

function dotranslate( btn )
{
    var word = btn.form.translateFrom.value;
    btn.form.translateTo.value = dictionary[ word.toLowerCase() ];
}
</script>
</head>
<body>
<h3>Internet abbreviation translator</h3>
<form method="get">
Abbreviation: <input type="text" name="translateFrom" /><br/>
<input type="button" value="Translate!" onclick="dotranslate(this);" /><br/>
Translation: <input type="text" name="translateTo" readonly /><br/>
</form>
</body>
</html>

hossaim · 12-06-2012, 09:21 PM

Quote:

Originally Posted by Old Pedant

You removed the last } from your function!

You had that right before. Why did you change that?

HINT: The number of { and } in any program must be the same.

Ditto for [ and ].

Ditto for ( and ).

If you would indent your code sensibly you would see this.

Code:

<html>
<head>
<title>Translator</title>
<script type="text/javascript">
function checkOranges(numOranges)
{
      if(numOranges == "hi")
      {
            alert("hai");
      }
      else if (numOranges == "lol")
      {
          alert("Laugh out loud");
      }
}
</script>
</head>
<body>
<h3>Internet abriviation translator</h3>
<form method="POST" name="orangesform"
onSubmit="checkOranges(document.orangesform.numOranges.value); return false;">
<input type="text" name="numOranges" id=numOranges />
<input type="Submit" name="Submit" />

</form>
</body>
</html>

A better way to write this:

Code:

<html>
<head>
<title>Translator</title>
<script type="text/javascript">
var dictionary = {
    "hi" : "hai",
    "lol" : "Laugh Out Loud",
    "rotflmao" : "Rolling on the floor laughing my *** off",
    "fwiw" : "For what it's worth"
};

function dotranslate( btn )
{
    var word = btn.form.translateFrom.value;
    btn.form.translateTo.value = dictionary[ word.toLowerCase() ];
}
</script>
</head>
<body>
<h3>Internet abbreviation translator</h3>
<form method="get">
Abbreviation: <input type="text" name="translateFrom" /><br/>
<input type="button" value="Translate!" onclick="dotranslate(this);" /><br/>
Translation: <input type="text" name="translateTo" readonly /><br/>
</form>
</body>
</html>

This is like 70 times more efficient. Thank you a lot for your help!