www.webdeveloper.com
Results 1 to 15 of 15

Thread: Forms and Functions help

  1. #1
    Join Date
    Jan 2014
    Posts
    28

    Forms and Functions help

    Just hoping someone could guide me in the right direction and possibly help with some syntax errors. (Don't finish the script for me just help me out please!)

    Heres the form
    index.html
    HTML Code:
    <form action="writePass(randomPass)" method="post">
        Email: <input type="text" name="email" id="getEmail"/>
        <input type="submit" name="submit" value="Send" />
    </form>
    javascript.js
    Code:
    emails=[];
    emails[0]="thisemail@yahoo.com";
    emails[1]="thatemail@gmail.com";
    
    var mailPass="mailto:"+document.getElementById("getEmail").value;
    
    //Collects email value and checks to see if it matches an email in the array then returns a random number
    function getEmail(emailsArray) {
        var email = document.getElementById("getEmail").value;
        if (emailsArray.indexOf(email)>=0) {
            var randomPass=Math.floor(Math.random()*200000)+100000;
            return randomPass;
        } else {
            alert("You are not authorized.");
        }
    }
    
    
    function writePass (randomPass) {
        if (randomPass != null) {
            document.write(mailPass);
        } else {
            document.write("mailto:"+document.getElementById("getEmail").value);
        }
    }

    Thank you in advanced!

  2. #2
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    248
    Quote Originally Posted by jburridge View Post
    <form action="writePass(randomPass)"
    Action attribute is used to send form's data to a site or a file that's specified by action attribute's value. Sent data are usually handled by php or asp code... You cannot use this attribute to call your JavaScript function and I guess this was your intention.

    You can create a button which when clicked will call your writePass function. Something like this:

    Code:
    <button onclick="writePass(randomPass)">writePassword</button>
    Several other possible errors (at the first glance):

    "Email" probably should be enclosed inside quotation marks.

    Code:
    (emailsArray.indexOf(email)>=0)
    A function doesn't always return a value.

    Code:
    if (emailsArray.indexOf(email)>=0) {
            var randomPass=Math.floor(Math.random()*200000)+100000;
            return randomPass;
        } else {
            alert("You are not authorized.");
        }
    This would be always true:

    Code:
    if (randomPass != null)
    because "randomPass" probably will be undefined or some random number + 100000 but it won't be null.
    Last edited by tech_soul8; 01-31-2014 at 02:04 AM.

  3. #3
    Join Date
    Jan 2014
    Posts
    28
    So setting var randomPass=Math.floor(Math.random()*200000)+100000; as a variable only when a condition is true doesn't work?
    And if it is undefined, What's the alternative instead of using null? Could I do if (randomPass != "")?

    Also the action I'm doing calls a function that will write "mailto:"+document.getElementById("getEmail").value;
    Is their any other way to go about that?

    I'm trying to generate a random password only if the user enters an allowed email, It then sends the random password to that email and I'll have an input for them to enter the password (Assuming they don't refresh the page)

    And also, What I was trying to do with (emailsArray.indexOf(email)>=0) was set the email to document.getElementById("getEmail").value, So if I enclosed email in quotations wouldn't it try to find the string "email" instead of the variable I have set to that?

    Sorry I'm pretty new, Just took my first class on javascript and we only learned how to console.log stuff.. I'm much more interested in getting right into working code that the user can see. Thanks again!

  4. #4
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    248
    Hm...If you wrote all of this all by yourself just after one class then ok...it looks like something but...

    1. It will work but as you said only if the condition is true and what will happen if it ain't? Since you are checking randomPass parameter in your writePass function if the condition was true it won't be null but if the condition wasn't true it won't be null either. It will be undefined. All of this holds the water only if you are going to pass randomPass variable from the getMail function as an argumet to the writePass function and I guess you ment to do that. Also note that using same bames for variables in different functions is not error as far as JavaScript concerned but it is ambiguous and considered as a bad coding practice in general.

    2. I already stated in a previous post action attribute is not used to call any of you JS code. It's used to specify a web page or a file...where the data should be passed for further processing (validation).

    3. Ok, you can write some code to do that but you have to use some event handler to call your code or combination of html element and event handler defined on it. I already
    gave you an example of it with the use of a html button element and onclick event handler.

    4. Sorry for that I haven't seen that you declared and initialized email variable so I tought that you are actually trying to find email string and in that case quotation marks should be used.

    Sorry if I haven't been much of help, I'm at work and when I get home I can give you any further instructions if you'll need it or if somebody else won't do that in the meantime

  5. #5
    Join Date
    Jan 2014
    Posts
    28
    Thanks a lot, And thank you for the tips! I got everything working correctly, Now the problem is trying to get this form to do a mailto.
    index.html
    HTML Code:
    <form action="" method="post">
        <p>Email: <input type="text" name="email" id="getEmail"/> </p>
    </form>
    <button onclick="checkEmail(emails)">Click to generate password</button>
    javascript.js
    Code:
    emails=[];
    emails[0]="burridge.justin@gmail.com";
    emails[1]="thatemail@gmail.com";
    
    //Collects email value and checks to see if it matches an email in the array then returns a random number
    function checkEmail(emailsArray) {
        if (emailsArray.indexOf(document.getElementById("getEmail").value)>=0) {
            randomPass=Math.floor(Math.random()*200000)+100000;
            return randomPass;
        } else {
            randomPass="You where not authorized to receive this password.";
        }
    }
    
    
    function writePass (randomPass) {
        if (randomPass != null) {
            document.write("mailto:"+document.getElementById("getEmail").value);
        } else {
            alert("You are not authorized.");
        }
    }

    The button generates the random number only if a correct email is used. But that button has to be outside of the original form or else it refreshes page and returns undefined values and what not. So is their a way I can get another button, Under neath the random password one, But inside the form so it can do "mailto:"+document.getElementById("getEmail").value);?

    Again thanks a lot for the help, Just trying to learn!

  6. #6
    Join Date
    Jan 2014
    Posts
    28
    Wish I could edit post, I also changed null to undefined.

  7. #7
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    248
    Hm...first thing...

    This function:

    Code:
    function checkEmail(emailsArray) {
        if (emailsArray.indexOf(document.getElementById("getEmail").value)>=0) {
            randomPass=Math.floor(Math.random()*200000)+100000;
            return randomPass;
        } else {
            randomPass="You where not authorized to receive this password.";
        }
    }
    could be re-written to look something like this:

    Code:
     function checkEmail(emailsArray) {
                var randomPass;
    
                if (emailsArray.indexOf(document.getElementById("getEmail").value)>=0) {
                    randomPass=Math.floor(Math.random()*200000)+100000;
                } else {
                    randomPass="You where not authorized to receive this password.";
                }
                    return randomPass;
            }
    this way you're returning a value regardless of a specified condition being true or false and the value of a returning expression depends on the outcome of a specified condition.

    The button generates the random number only if a correct email is used. But that button has to be outside of the original form or else it refreshes page and returns undefined values and what not. So is their a way I can get another button, Under neath the random password one, But inside the form so it can do "mailto:"+document.getElementById("getEmail").value);?
    You need not to have a second button to call the writePass function. You have already called the checkEmail function to verify if a user has entered correct email address. So after you do checking you can call the writePass function from inside of the checkEmail function and pass the randomPass as an argument to the writePass function.

    Right now I'm not quite sure if you're trying to write the random password to the web page or you're trying to do "real" mailto and send the form data as an email...?

    I'm tired and a bit lost :P
    Last edited by tech_soul8; 01-31-2014 at 04:50 PM.

  8. #8
    Join Date
    Jan 2014
    Posts
    28
    Ahh okay, revised functions is understandable.

    And In the most basic terms,
    User enters email.
    User presses button to generate password if correct email.
    Pressed button emails the generates password to the entered, correct email.
    User checks email, Retrieves the password, And enters it into the input field for password, Which is not yet implemented.
    User then presses login, With the correct email and correct randomly generated password.

    I know it's not secure, Just playing with functions and forms and what not to learn a little more about them.

  9. #9
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    248
    Quote Originally Posted by jburridge View Post
    Pressed button emails the generates password...
    .
    ...I'm lost in translation .

  10. #10
    Join Date
    Jan 2014
    Posts
    28
    Eeek sorry, Pressed button emails the already generated password.

    I seen that typo but being unable to edit posts is killing me -_-

  11. #11
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    248
    I seen that typo but being unable to edit posts is killing me -_-
    After you login, just use the "Edit post".

    Aha, now I understand what you're up to but... you cannot use JavaScript to directly send an email message. That should be done on server side, however, you can use JavaScript to open user's mail client (if any is installed and set up).

    For example:

    Code:
    window.open("mailto:example@domain.com");
    likewise you can use the action attribute of a form element:

    HTML Code:
    <form action="mailto:example@domain.com"></form>
    To complete your exercise in JavaScript an alternative to sending an email message to the user's email address may be something like:

    1. User enters email.
    2. User presses button to generate password if correct email.
    3. If correct email address has been entered, alert user with the alert window containing correct password
    4. User enters it into the input field for password, Which is not yet implemented.
    5. User then presses login, With the correct email and correct randomly generated password.
    Last edited by tech_soul8; 02-01-2014 at 04:29 AM.

  12. #12
    Join Date
    Jan 2014
    Posts
    28
    Appreciate all the help!

    When I set mailto in the forms action it's hardcoded, Is their anyway I can get it to set to "mailto: usersEnteredEmailed"?

    Heres what I have in a function
    Code:
    document.write('mailto:'+document.getElementById("getEmail").value);
    But functions are not allowed inside of the action spot or something. I know you said it's only to specify a webpage or file but I feel like theirs got to be a way.

    When you say you can specify a file, Can it be a javascript file with a conditional for
    Code:
    document.write('mailto:'+document.getElementById("getEmail").value);
    ?

  13. #13
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    248
    When I set mailto in the forms action it's hardcoded, Is their anyway I can get it to set to "mailto: usersEnteredEmailed"?
    Yes, there is. You can do something like this:

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
        <title>Untitled</title>
        <script type='text/javascript'>
            function submitForm() {
                document.myForm.action = "mailto:" + document.getElementById('email').value;
                document.myForm.submit();
                return;
            }
        </script>
    </head>
    <body>
        <form name="myForm" action="" method="get">
            <input id="email" name="email" type="text" />
        </form>
        <button type="button" onclick="submitForm()">Submit</button>
    </body>
    </html>

    When you say you can specify a file, Can it be a javascript file with a conditional for
    If you don't know any server side language you can set your form's method attribute value to "get" and later then when the form gets submited you can extract with JavaScript necessary information from URL.

    Something like:

    index.html
    HTML Code:
        <form name="myForm" action="example.html" method="get">
            <input id="email" name="email" type="text" />
            <button type="submit">Submit</button>
        </form>
    example.html
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
        <title>Untitled</title>
        <script type="text/javascript">
            alert("Entered email address is: " + unescape(location.href.substr(location.href.indexOf("=") +1)));
        </script>
    </head>
    <body>
    </body>
    </html>
    You can find additional information on action and method attributes at:

    1. http://www.w3schools.com/tags/att_form_action.asp
    2. http://www.w3schools.com/tags/att_form_method.asp

  14. #14
    Join Date
    Jan 2014
    Posts
    28
    Awesome thanks a ton for all the help!

    I think getting the mailto action to work is what really hung me up!

  15. #15
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    248
    You're welcome! I'm glad if I was able to help you.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles