Javascript questions which don't deserve their own thread.

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›277 »

Jose Cuervo: Aug 25, 2004

I have a personal website that I wanted to post my travel pictures on. Instead of making a slidehow I thought it would be easier to just have all the pictures as thumbnails and then have the user click on a picture they wanted to see. The picture clicked on would then display in a larger size.

I found this website that has a zoom feature that does exactly what I want. Unfortunately I do not know how to make the javascript work. I have tried downloading the mootools file and the script file from the website, but I do not know where to put the variable declaration (var myZoomer = new ByZoomer(options)

on my page and what exactly it does since I do not see it being used anywhere.

Any help would be appreciated.

# ? Sep 6, 2009 19:02

Adbot: ADBOT LOVES YOU

# ? Apr 23, 2024 20:21

Outlaw Programmer: Jan 1, 2008; Will Code For Food

Jose Cuervo posted:

I have a personal website that I wanted to post my travel pictures on. Instead of making a slidehow I thought it would be easier to just have all the pictures as thumbnails and then have the user click on a picture they wanted to see. The picture clicked on would then display in a larger size.

I found this website that has a zoom feature that does exactly what I want. Unfortunately I do not know how to make the javascript work. I have tried downloading the mootools file and the script file from the website, but I do not know where to put the variable declaration (var myZoomer = new ByZoomer(options) on my page and what exactly it does since I do not see it being used anywhere.

Any help would be appreciated.

You can see where they initialize their object in this separate .js file.

To use it, it looks like you mark some elements in your HTML with a class name or ID. After the document is finished loading, you create their ByZoomer object and pass it this identifier. It will crawl over the document and discover the element you want and then work its magic.

# ? Sep 6, 2009 22:07

Jose Cuervo: Aug 25, 2004

Outlaw Programmer posted:

You can see where they initialize their object in this separate .js file.

To use it, it looks like you mark some elements in your HTML with a class name or ID. After the document is finished loading, you create their ByZoomer object and pass it this identifier. It will crawl over the document and discover the element you want and then work its magic.

This is what I have on the page I am trying to get this to work on:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-GB">

<head>
<link rel="stylesheet" type="text/css" media="screen, projection" href="css/style.css" />

<script type="text/javascript" src="js/mootools-core.js"></script>
<script type="text/javascript" src="js/mootools-more.js"></script>
<script type="text/javascript" src="js/byzoomer_min.js"></script>
<script type="text/javascript" src="js/byzoomer_demo.js"></script>
</head>

<body> 
<div id="container"> 
     <div id="content-container"> 
          <a href="chess.jpg" title="Optional title" class="byzoomer">
               <img src="chess-tiny.jpg" />
          </a>
     </div> 
</div> 
</body>
</html>

I downloaded the four js files and placed them in my www folder and things work just fine now. One quick question though. In the byzoomer_demo.js file it looks like all I need from there is the initialization of the object (new ByZoomer()

. Is there any way for me to make this initialization happen by writing the code in my webpage (say in the <head> section?

Thanks for the help thus far.

Jose Cuervo fucked around with this message at 03:15 on Sep 7, 2009

# ? Sep 7, 2009 01:05

Kilson: Jan 16, 2003; I EAT LITTLE CHILDREN FOR BREAKFAST !!11!!1!!!!111!

Jose Cuervo posted:

I downloaded the four js files and placed them in my www folder and things work just fine now. One quick question though. In the byzoomer_demo.js file it looks like all I need from there is the initialization of the object (new ByZoomer(). Is there any way for me to make this initialization happen by writing the code in my webpage (say in the <head> section?

You can just put something similar to this:

code:

<script type="text/javascript">
 var zoomer = new ByZoomer();
</script>

# ? Sep 7, 2009 03:48

Jose Cuervo: Aug 25, 2004

Kilson posted:

You can just put something similar to this:
code:
<script type="text/javascript">
 var zoomer = new ByZoomer();
</script>

Hmm, that does not seem to work. It does not matter too much though. My next question is as follows:

On the website he says you can define the following css rule:

div#byzoomerTitle: to style the title of large images (appear at the top of the image).

How would I use this to have a title appear at the top of my images when zoomed in?

# ? Sep 7, 2009 13:05

Other Door: Apr 17, 2005; quitters never win, winners never quit, but those who never win AND never quit are called leafs fans. GO SENS GO

I am trying to create a script that will display a random image from an array of 10, wait 30 minutes and then display another image from this array, and on until every image has been displayed.

By searching "random image slideshow" I find code that will display random images after a specified delay, but the images will always repeat.

Example: The images might show up in the order 3-7-5-1-5-9-3...

I need them not to repeat. Once image 3 has been displayed I want it to move on to the next random image and never show image 3 again. Is this possible?

Also I would like to set up this slideshow on a webpage where everyone will view the same random slideshow live. I don't want everyone seeing a different random slideshow, but rather that no matter what time you check in on the slideshow you will see the same thing another user sees.

Any help would be tremendously appreciated!

# ? Sep 7, 2009 18:53

argz: May 20, 2005; The hand says it all.

argz posted:

pop it off the array.

how? I've tried the splice command with no success.

# ? Sep 7, 2009 19:24

argz: May 20, 2005; The hand says it all.

argz posted:

randomize the order of your array, then use pop

http://www.w3schools.com/jsref/jsref_pop.asp

Thanks a lot! I'll give it a shot!

# ? Sep 7, 2009 20:26

Avenging Dentist: Oct 1, 2005; oh my god is that a circular saw that does not go in my mouth aaaaagh

G-Dub posted:

Is there an equivalent function to unescape or tostring(16) in VB? And does the ^ symbol mean to the power of, or does it have another use? Apologies for not having a clue.

1) That code is awful, and trying to replicate it in VB will make it at least as awful (probably more so).
2) The entire CharCode function is stupid and unnecessary
3) ^ means bitwise XOR, as the Encrypt function implies.
4) Do you mean VB6 or VB.NET?

EDIT: For fun, this is how I'd do that (which requires JS 1.8 but if you aren't using Firefox 3, you don't deserve encryption)

code:

function encrypt(clear)
{
   var magic = "The Magic String XOR";
   return Array.prototype.reduce.call(clear, function(prev, curr, i) {
      var c = (charCode(curr) ^ charCode(magic[i])).toString(16);
      if (c.length == 1)
         c = "0" + c;
      return prev + c;
   },"");
}

function charCode(char)
{
    if(char == undefined || char.length == 0)
        return 255;
    var code = char.charCodeAt(0);
    return (code>255) ? 255:code;
}

Avenging Dentist fucked around with this message at 21:20 on Sep 7, 2009

# ? Sep 7, 2009 20:27

G-Dub: Dec 28, 2004; The Gonz

Thanks for your reply. It's VB6. The reason I have to try and replicate that crappy code is because it is part of a login page on a 3rd party which I want to post data to. I'm scraping information out of the site once logged in, but I need to encode the password in their lovely way before posting it to the login page. I was distraught when I saw the process behind it. This is a major company with massive clients too, but yeah this is how they encrypt poo poo.

# ? Sep 7, 2009 23:11

diadem: Sep 20, 2003; eet bugz

Does anyone know what causes the white screen of annoyance with all flavors of IE7 and Updatepnaels? Once every few dozen callbacks (only from .net update panels, not when done manually), I get the dreaded white screen of annoyance.

Basically, an entire frame is white and I need to resize the page or whatever to fix the screen. If I trigger a refresh, it has to be in the appropriate div or frame or the drat thing won't away.

edit: There seems to be no pattern as to WHEN it will happen. I'm even talking about completely automated tests - there seems to be no rhyme or reasons as to where or when this may happen.

diadem fucked around with this message at 21:54 on Sep 10, 2009

# ? Sep 10, 2009 21:16

Bhaal: Jul 13, 2001; I ain't going down alone; Dr. Infant, MD

Had a fun time today trying to find the bug in my code until I finally distilled the problem down to the following abstraction:

code:

<html>
<script language="javascript">

window.onload=init;

var dependents = new Object();
dependents['apples'] = "apple";
dependents['oranges'] = "orange";

function init()
{
	for( key in dependents )
	{
		document.getElementById(key).onchange=function(){alert(dependents[key])};	
	}
		
}
</script>
<form action=GET>
<select name="apples" id="apples" title='' tabindex="0"  >
<option label="granny_smith" value="granny_smith">granny smith</option>
<option label="golden_delicious" value="golden_delicious">golden delicious</option>
</select>
<select name="oranges" id="oranges" title='' tabindex="0"  >
<option label="navel" value="navel">navel</option>
<option label="mandarin" value="B">mandarin</option>
</select>

</form>

</html>

Please excuse the crappy nature of the example, but if you run this you'll see two select boxes, one with apple types and one with orange types. When you change the value of a select it's onchange will trigger an alert. Now one might think each select box would pop up with the respective apple/orange alert. That's not what happens. What happens is each select box (or every select box, if we added more inputs in the same nature) will have it's onchange set with 'key' bound to whatever value it was on the final iteration of the loop. It looks a new onchange is applied when we leave scope (not all scopes, nesting it in an if block won't work, for instance). Now, modify the js like so:

code:

function init()
{
	for( key in dependents )
	{
	    setOnChange(document.getElementById(key), key);
	}
		
}

function setOnChange(element, key)
{
   element.onchange=function(){alert(dependents[key])};	

}

...and each pulldown will now alert the value of key at the time that element was selected in the loop.

I couldn't find this documented anywhere as intended or a bug or anything like that. Am I crazy in thinking this should be a bug/misfeature?

# ? Sep 23, 2009 01:51

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Bhaal posted:

Had a fun time today trying to find the bug in my code until I finally distilled the problem down to the following abstraction:

...

I couldn't find this documented anywhere as intended or a bug or anything like that. Am I crazy in thinking this should be a bug/misfeature?

This is a very, very very common problem. What's happening in your first example script is when you do an onchange, the current value of key is looked up. After your loop runs, the value of key will always be 'oranges'

The second example uses a closure to stop that from happening. If you use a library like jQuery, it will do all the dirty work for you.

code:

jQuery('.mySelects').change( function(){
  alert(jQuery(this).val());
});

# ? Sep 23, 2009 02:08

Slasher: Jun 5, 2006; Look! A distraction!

Is this hack for IE bad practice for any reason (assume necessary variables exist)?

try{
var form = document.createElement("<form action='upload.php' method='POST' name='fileUpload"+fileCount+"' id='fileUpload"+fileCount+"' enctype='multipart/form-data' target = 'frmUpload"+fileCount+"' >");
} catch (err) {
var form = document.createElement("form");
form.setAttribute("action", "upload.php");
form.setAttribute("method", "POST");
form.setAttribute("name", "fileUpload"+fileCount);
form.setAttribute("id", "fileUpload"+fileCount);
form.setAttribute("enctype", "multipart/form-data");
form.setAttribute("target", "frmUpload"+fileCount);
}

# ? Oct 7, 2009 00:34

Supervillin: Feb 6, 2005; Pillbug

Slasher posted:

Is this hack for IE bad practice for any reason (assume necessary variables exist)?

try{
var form = document.createElement("<form action='upload.php' method='POST' name='fileUpload"+fileCount+"' id='fileUpload"+fileCount+"' enctype='multipart/form-data' target = 'frmUpload"+fileCount+"' >");
} catch (err) {
var form = document.createElement("form");
form.setAttribute("action", "upload.php");
form.setAttribute("method", "POST");
form.setAttribute("name", "fileUpload"+fileCount);
form.setAttribute("id", "fileUpload"+fileCount);
form.setAttribute("enctype", "multipart/form-data");
form.setAttribute("target", "frmUpload"+fileCount);
}

Just readability and maintenance, I would think. If you need to change anything about the form, you would have to do it twice.

form.action = 'upload.php'; // should work in both IE and Regular Browsers

# ? Oct 7, 2009 16:03

Elected by Dogs: Apr 20, 2006

I'd like it to prompt the user (ok/cancel) when clicked, with the messagebox saying "You are leaving example.com. We are not responsible for the content of external sites:\n---\n(the href="")\n---\nPlease make sure this link does not look like phishing,etc"

All external links are class="outbound" and can be modified with onclick/etc.

Is there an easy way to do this?

# ? Oct 10, 2009 21:03

supster: Sep 26, 2003; I'M TOO FUCKING STUPID
TO READ A SIMPLE GRAPH

jQuery:

code:

$(".outbound").click(function()
{
    return confirm("You are leaving ... ");
}

It might be nicer to redirect the user to a intermediate page on your own site (example.com/outbound?url=gogole.com) where you show the message or use some sort of lightbox instead of the confirm dialog.

# ? Oct 10, 2009 21:44

Bhaal: Jul 13, 2001; I ain't going down alone; Dr. Infant, MD

Edit: forgot it's href's onclick, so just return the confirm like ^^^^^

code:

function myOnClick()
{
  var answer = confirm('We are not responsible....');

  if( answer ) // they clicked OK
  {
    window.location = myHref;
  }

}

# ? Oct 10, 2009 21:44

Sointenly: Sep 7, 2008

I'm trying to do a little work for my buddies site, and teach myself JS at the same time. Running into a snag though with one little form.

Basic set up of the form is like this:

Enter Username:_______ (which is checked by if/else if for correct length)

Enter Email: ________
Verify Email: _______

Not having any problem with the username, but rather with verifying the email addy.

I know ill have to create a function and then i'm assuming if statements where Email = verify email. But i'm not exactly sure how to start it. I've tried googleing it, but not luck.

If someone could give me a quick example of something like this i'd appreciate it.

in case this makes a diff, here is the code of the username verification

function checkInput(usernameId) {
var usernameValue = document.getElementById(usernameId).value;
alert("username is : " + usernameValue);
if (usernameValue.length < 4)
{
alert("the username is too short");
}
else if (usernameValue.length > 8)
{
alert ("the username is too long");
}
else
{
alert("the username is ok");
}

Sointenly fucked around with this message at 18:55 on Oct 11, 2009

# ? Oct 11, 2009 18:53

spiritual bypass: Feb 19, 2008; Grimey Drawer

I recommend that you not bother trying to do that yourself and instead use jQuery with the validation plugin. It's dead simple and looks impressive on the page, too.

# ? Oct 11, 2009 18:55

Sointenly: Sep 7, 2008

Word, ill deff look into that.

but i'd still like to know how to just code that out as is, it seems like it should be pretty simple... and i'd just like to know for my own knowledge.

# ? Oct 11, 2009 19:01

Just-In-Timeberlake: Aug 18, 2003

Sointenly posted:

I'm trying to do a little work for my buddies site, and teach myself JS at the same time. Running into a snag though with one little form.

Basic set up of the form is like this:

Enter Username:_______ (which is checked by if/else if for correct length)

Enter Email: ________
Verify Email: _______

Not having any problem with the username, but rather with verifying the email addy.

I know ill have to create a function and then i'm assuming if statements where Email = verify email. But i'm not exactly sure how to start it. I've tried googleing it, but not luck.

If someone could give me a quick example of something like this i'd appreciate it.

in case this makes a diff, here is the code of the username verification

function checkInput(usernameId) {
var usernameValue = document.getElementById(usernameId).value;
alert("username is : " + usernameValue);
if (usernameValue.length < 4)
{
alert("the username is too short");
}
else if (usernameValue.length > 8)
{
alert ("the username is too long");
}
else
{
alert("the username is ok");
}

I'd use a regex for the email, like so:

code:

function isEmail(s) {
     var reEmail = /^.+\@.+\..+$/;
     return reEmail.test(s);
}

if(!isEmail('abc@abc.com')) {
    alert("The email address you entered is not in the correct format!");
}

# ? Oct 11, 2009 19:16

Sointenly: Sep 7, 2008

actually, all im really concerned with right now is making sure that the two emails that are entered are the same.

after the username is entered, and the email is entered twice, the user presses a submit button which tests everything against the constraints.

i know it may sound kind of counter productive... but all i need to know how to do is once the button is clicked, to check and see if both emails match... not really worried about the format of the email addy at this time.

# ? Oct 11, 2009 21:49

Just-In-Timeberlake: Aug 18, 2003

sorry, I misunderstood:

code:


function checkEmail() {
     var email1 = document.getElementById('email1').value;
     var email2 = document.getElementById('email2').value;

     if(email1 != email2) {
          alert('The two emails do not match!');
          return false;
     }
     else {
          return true;
     }
}

Combine it with the other code to do a full verification (email addresses match and are in a valid format)

# ? Oct 11, 2009 22:00

Sointenly: Sep 7, 2008

golgo13sf posted:

Combine it with the other code to do a full verification (email addresses match and are in a valid format)

Sick, thank you!

one last thing though, this is my HTML for the button used in the form... i initially wrote it to do the username verification.

<input type="button" value ="checkIt" onclick = "checkInput('username');" />

do i need to make any changes to the html so that it will check email as well? thank you

Sointenly fucked around with this message at 22:34 on Oct 11, 2009

# ? Oct 11, 2009 22:27

Daedleh: Aug 25, 2008; What shall we do with a catnipped kitty?

golgo13sf posted:

sorry, I misunderstood:

Combine it with the other code to do a full verification (email addresses match and are in a valid format)

I actually came here to ask about this very problem as I'm having some trouble with differences between IE & Firefox. This is the code I've got:

code:

	//Check if the user has entered an email address
	var email = document.getElementById('email').value;
	if (email.length == 0 ) {
		alert('Please enter an e-mail address.');
		document.getElementById('email').focus();
		return;
	}

	//And if they've confirmed it
	var cemail = document.getElementById('con-email').value;
	if (cemail.length == 0 ) {
		alert('Please confirm the e-mail address.');
		document.getElementById('con-email').focus();
		return;
	}

	//And check that the email and confirmation match.
	if (cemail != email) {
		alert('The e-mail addresses provided do not match.');
		document.getElementById('con-email').focus();
		return;
	}

Now I can't see any differences in the relevant code between my final check and what you've put but while the code works fine in Firefox, in IE8 (windows 7 so I don't have the others to hand) it always gets a mismatch.

The page I'm trying to get it working on is here (yeah go ahead and mess about if you want. It will send out an e-mail with a random password but there's nowhere to login yet):
http://nickjwilliams.co.uk/cms/l-administrators.php

# ? Oct 11, 2009 23:13

Just-In-Timeberlake: Aug 18, 2003

Sointenly posted:

Sick, thank you!

one last thing though, this is my HTML for the button used in the form... i initially wrote it to do the username verification.

<input type="button" value ="checkIt" onclick = "checkInput('username');" />

do i need to make any changes to the html so that it will check email as well? thank you

I tend to make one function as a wrapper for all my verification functions, kind of like this:

code:

function ValidateForm() {
    if(!validateUsername()) return false;
    if(!validateEmail()) return false;
    
    return true;
}

Stick that in your submit code:

code:

<form id="myform" onsubmit="return ValidateForm();" method="POST" action="submissionpage.html">

# ? Oct 12, 2009 00:30

Just-In-Timeberlake: Aug 18, 2003

Daedleh posted:

I actually came here to ask about this very problem as I'm having some trouble with differences between IE & Firefox. This is the code I've got:
code:
	//Check if the user has entered an email address
	var email = document.getElementById('email').value;
	if (email.length == 0 ) {
		alert('Please enter an e-mail address.');
		document.getElementById('email').focus();
		return;
	}

	//And if they've confirmed it
	var cemail = document.getElementById('con-email').value;
	if (cemail.length == 0 ) {
		alert('Please confirm the e-mail address.');
		document.getElementById('con-email').focus();
		return;
	}

	//And check that the email and confirmation match.
	if (cemail != email) {
		alert('The e-mail addresses provided do not match.');
		document.getElementById('con-email').focus();
		return;
	}
Now I can't see any differences in the relevant code between my final check and what you've put but while the code works fine in Firefox, in IE8 (windows 7 so I don't have the others to hand) it always gets a mismatch.

The page I'm trying to get it working on is here (yeah go ahead and mess about if you want. It will send out an e-mail with a random password but there's nowhere to login yet):
http://nickjwilliams.co.uk/cms/l-administrators.php

Found it, change the "name" property of your username input tag, right now it's:

code:

<input id="username" name="email" type="textbox" class="inputtext">

IE doesn't like it sharing the name with the email input tag.

Just-In-Timeberlake fucked around with this message at 01:03 on Oct 12, 2009

# ? Oct 12, 2009 00:36

Daedleh: Aug 25, 2008; What shall we do with a catnipped kitty?

golgo13sf posted:

Found it, change the "name" property of your username input tag, right now it's:
code:
<input id="username" name="email" type="textbox" class="inputtext">
IE doesn't like it sharing the name with the email input tag.

Thank you

# ? Oct 12, 2009 06:55

Sointenly: Sep 7, 2008

Im sorry, i don't mean to ask you to code my entire page... im still having problems linking everything together. Let me just show you everything i'm working with and maybe you can show me how to put everything together.

Doing everything in Visual Studio, I have an HTML file and a JS file. The HTML for the structure of the input boxes and the check button is:

code:

User name: 
  <input type="text" id="username" maxlength="12"/>
  <br />
  Email: 
  <input type="text" id="email1" />
  <br />
  Verify Email: 
  <input type="text" id="emial2" />
  <br />
  <input type="button" value ="CheckIt" onclick = "checkInput('username');" />

Now for the JS, what i have so far, is the validation of the username:

code:

function checkInput(usernameId) {
    var usernameValue = document.getElementById(usernameId).value;
    alert("username is : " + usernameValue);
    if (usernameValue.length < 4) 
    {
        alert("the username is too short");
    } 
    else if (usernameValue.length > 8)
    {
        alert ("the username is too long");
    }
    else 
    {
        alert("the username is ok");
    }

so now i need to have the same button that checks the username, also check the emails as well... I understand the code that was given above, but now i'm stuck on how to link that code to the same check button as the username validation.

# ? Oct 12, 2009 07:21

Kekekela: Oct 28, 2004

Sointenly posted:

so now i need to have the same button that checks the username, also check the emails as well... I understand the code that was given above, but now i'm stuck on how to link that code to the same check button as the username validation.

If you're asking how to get both javascript functions to fire from your button input, you can:

Add another statement to your onclick like:

code:

 onclick="checkInput('username');whatevertheEmailFunctionIsCalled();"

Or wrap them in one function that calls both:

code:

onclick="wrapperfunction('username')"

code:

function wrapperfunction(usernameId){
  checkInput(usernameId);
  whatevertheEmailFunctionIsCalled();
}

Or you can change the input type to 'submit' (instead of 'button') and move the wrapper call from the input's onclick event to the form's onsubmit event like in golgo13sf's example. If you do this make sure you have it return false when a validation failure occurs, like he does in his example, to keep the page from posting. (you could also just leave the call in the onclick event, the false return will cancel the submit, but its better practice to handle it at the form level since this keeps you from having to add the same validation calls to every submit on the page if you have more than one)

Kekekela fucked around with this message at 09:12 on Oct 12, 2009

# ? Oct 12, 2009 08:38

Sointenly: Sep 7, 2008

acht! can you spot where I'm loving up here

HTML

code:

Please enter username and Email.
<br />
  User name: 
  <input type="text" id="username" maxlength="12"/><br />
  Passowrd: 
  <input type="text" id="Email1" maxlength="24"/><br />
  Verify password: 
  <input type="text" id="Email2" /><br />
  <input type="button" value ="checkIt" onclick="wrapperfunction('username')"; />
</form>
</body>
</html>

JavaScript

code:


function wrapperfunction(usernameId){
  checkInput(usernameId);
  checkemail();
    var usernameValue = document.getElementById(usernameId).value;
     var email1 = document.getElementById('email1').value;
     var email2 = document.getElementById('email2').value;

  
    if (usernameValue.length < 4) {
        alert("the username is too short");
    } else {
        alert("the username is ok");
    }

    if(email1 != email2) {
          alert('The two emails do not match!');
          return false;
     }
     else {
          return true;
     }
}

maybe best to mention this now, but when all requirements of the form are met, I need to alert a message that states something like "Username and Password accepted"

Sointenly fucked around with this message at 01:28 on Oct 13, 2009

# ? Oct 13, 2009 01:26

Kekekela: Oct 28, 2004

Sointenly posted:

acht! can you spot where I'm loving up here

HTML

code:

Please enter username and Email.
<br />
  User name: 
  <input type="text" id="username" maxlength="12"/><br />
  Passowrd: 
  <input type="text" id="Email1" maxlength="24"/><br />
  Verify password: 
  <input type="text" id="Email2" /><br />
  <input type="button" value ="checkIt" onclick="wrapperfunction('username')"; />
</form>
</body>
</html>

JavaScript

code:


function wrapperfunction(usernameId){
  checkInput(usernameId);
  checkemail();
    var usernameValue = document.getElementById(usernameId).value;
     var email1 = document.getElementById('email1').value;
     var email2 = document.getElementById('email2').value;

  
    if (usernameValue.length < 4) {
        alert("the username is too short");
    } else {
        alert("the username is ok");
    }

    if(email1 != email2) {
          alert('The two emails do not match!');
          return false;
     }
     else {
          return true;
     }
}

maybe best to mention this now, but when all requirements of the form are met, I need to alert a message that states something like "Username and Password accepted"

1. All that stuff under the "checkemail();" line should be in a function called checkemail.

2. Modify the checkInput function to return a boolean indicating success/failure.

3. Check the return values of checkInput and checkemail from within the wrapper function to determine whether or not to display the success message.

4. (optional for consistency) You don't really need to pass the name of the username textbox in as a parameter, you can just hardcode it like you're doing in the email example.

# ? Oct 13, 2009 02:19

Just-In-Timeberlake: Aug 18, 2003

Sointenly posted:

acht! can you spot where I'm loving up here

maybe best to mention this now, but when all requirements of the form are met, I need to alert a message that states something like "Username and Password accepted"

code:

<html>
	<head>
		<title>Registration Form</title>
		
		<script language="javascript" type="text/javascript">
		
			function checkEmail(s) {
			     var reEmail = /^.+\@.+\..+$/;
			     return reEmail.test(s);
			}
			
			function validateEmail() {
				var email1 = document.getElementById("Email1").value;
				var email2 = document.getElementById("Email2").value;
				
				if(email1.length == 0) {
					alert("Please enter your email");
					return false;
				}
				
				if(email2.length == 0) {
					alert("Please confirm your email");
					return false;
				}
				
				if(email1 != email2) {
					alert("The two emails do not match");
					return false;
				}
					
				if(!checkEmail(email1)) return false;
			}
			
			function validateUsername () {
				var usernameValue = document.getElementById(usernameId).value;
			     alert("username is : " + usernameValue);
			     if (usernameValue.length < 4) {
			         alert("the username is too short");
			         return false;
			     } 
			     
			     if (usernameValue.length > 8) {
			         alert ("the username is too long");
			         return false;
			     }
			     
			     return true;

			}
			
			function validateForm() {
				if (!validateEmail()) return false;
				if (!validateUsername()) return false;
				
				return true;
					
			}
			
		</script>
	</head>

	<body>
		<form id="myform" onsubmit="return validateForm();" method="POST" action="submitpage.html">
		  	User name: 
		  	<input type="text" id="username" maxlength="12"/><br />
		  	Password: 
		  	<input type="text" id="Email1" maxlength="24"/><br />
		  	Verify password: 
		  	<input type="text" id="Email2" /><br />
		  	<input type="submit" value ="Submit Form" />
		<form>
	</body>
	
</html>

I wouldn't put a confirmation on this page because it might fail for some reason on the page that processes the form submission. The confirmation should show up after the form is submitted, processed and then come back to a confirmation page.

If you're dead set on a "success" alert on this page, stick it right before the "return true;" in the "validateForm();" function.

Just-In-Timeberlake fucked around with this message at 02:25 on Oct 13, 2009

# ? Oct 13, 2009 02:20

Sointenly: Sep 7, 2008

golgo13sf posted:

If you're dead set on a "success" alert on this page, stick it right before the "return true;" in the "validateForm();" function.

he wants all of the JS done via external file, does much change if i move everything out of the HTML?

# ? Oct 13, 2009 02:38

Sointenly: Sep 7, 2008

Sointenly posted:

he wants all of the JS done in an external file and then linked, does much change if i move everything out of the HTML and into a separate .JS file?

# ? Oct 13, 2009 02:40

Adbot: ADBOT LOVES YOU

# ? Apr 23, 2024 20:21

Just-In-Timeberlake: Aug 18, 2003

Sointenly posted:

he wants all of the JS done via external file, does much change if i move everything out of the HTML?

Nope.

# ? Oct 13, 2009 02:58

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›277 »

Jose Cuervo posted:

Outlaw Programmer posted:

code:

Jose Cuervo posted:

code:

Kilson posted:

code:

Other Door posted:

argz posted:

Other Door posted:

code:

argz posted:

G-Dub posted:

code:

code:

code:

Bhaal posted:

code:

Slasher posted:

code:

code:

Sointenly posted:

code:

code:

golgo13sf posted:

golgo13sf posted:

code:

Sointenly posted:

code:

code:

Daedleh posted:

code:

code:

golgo13sf posted:

code:

code:

code:

Sointenly posted:

code:

code:

code:

code:

code:

Sointenly posted:

code:

code:

Sointenly posted:

code:

golgo13sf posted:

Sointenly posted:

Sointenly posted: