Submit form field values to a Javascript function

Question

I am using Buddy.com's API to build a mobile app with a web Interface for Administrators and User Creation. I am still in the initial stages of this project.

The first page I am trying to build is the User Registration page for the website. This page will have a form asking the users for a username, password, email and some other fields.

I am using the javascript form the page http://buddy.com/developers/#UserAccount_Profile_Create

The function is: function createUserWithName(); And it has some inputs. The function looks like this:

function fixedEncodeURIComponent (str) {  
    return encodeURIComponent(str).replace(/[!'()*]/g, escape);  
}
function createUserWithName(aName, anEmail) 
{
    var finalURLStr = "https://webservice.buddyplatform.com/Service/v1/BuddyService.ashx";

    finalURLStr += "?UserAccount_Profile_Create";    // API Call
    finalURLStr += "&BuddyApplicationName=" + fixedEncodeURIComponent("<#Buddy App Name#>");
    finalURLStr += "&BuddyApplicationPassword=" + fixedEncodeURIComponent("<#Buddy App Password#>");
    finalURLStr += "&NewUserName=" + fixedEncodeURIComponent(aName);                    // The user name
    finalURLStr += "&UserSuppliedPassword=" + fixedEncodeURIComponent("<#password#>");  // User password
    finalURLStr += "&NewUserGender=" + "male";                                          // "male" or "female"
    finalURLStr += "&UserAge=" + 29;                                                    // user age (int)
    finalURLStr += "&NewUserEmail=" + fixedEncodeURIComponent(anEmail);                 // user email
    finalURLStr += "&StatusID=" + -1;                                                   // see status table (1-7 or -1)
    finalURLStr += "&FuzzLocationEnabled=" + 1;                                         // true / false: location isn't/is reported accurately
    finalURLStr += "&CelebModeEnabled=" + 0;                                            // true if user is hidden from non-friends
    finalURLStr += "&ApplicationTag=";                                                  // app-related info
    finalURLStr += "&RESERVED=";                                                       // leave empty

    $.ajax({ url: finalURLStr })
        .done( function(data) {
            // Result is a simple string
            alert("Result: " + data);
        })
        .fail(function() {
            alert("Error while contacting Buddy!");
       });
}

I have created a form which asks for the user to input this information.

How can I pass the field data from my form to this function?

This is the code for my form:

<form id="register">

<table width="200" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><label for="username">Username*:</label>
        <input type="text" id="username" name="username" />
    </td>
  </tr>
  <tr>
    <td><label for="password">Password*:</label>
        <input type="text" id="password" name="password" />
    </td>
  </tr>
  <tr>
    <td><label for="email">Email*:</label>
        <input type="text" id="email" name="email" />
    </td>
  </tr>
  <tr>
    <td><label for="gender">Gender*:</label>
        <select id="gender">
            <option value="null">Please Choose One...</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>
    </td>
  </tr>
</table>
<input class="button" name="submit" type="button" value="submit" onclick="createUserWithName(username.value)" />
</form>

Im sure that once someone shows me how to send the username and email to the javascript function I will be able to figure out the rest.

Thank you

Is the javascript included in the html page?

Aashray
– Aashray

2013-08-26 10:00:15 +00:00
Commented Aug 26, 2013 at 10:00 — Aashray
– Aashray, Commented Aug 26, 2013 at 10:00
Yes, i have put it as part of the HTML page.

T J
– T J

2013-08-26 11:39:29 +00:00
Commented Aug 26, 2013 at 11:39 — T J
– T J, Commented Aug 26, 2013 at 11:39
Check my answer. That should work.

Aashray
– Aashray

2013-08-26 11:54:05 +00:00
Commented Aug 26, 2013 at 11:54 — Aashray
– Aashray, Commented Aug 26, 2013 at 11:54

Floris497 · Accepted Answer · 2014-03-12 00:00:21Z

2

first create a function in which you collect all the form data

function getFormData(){ 
var name=document.getElementById('username').value;
var email=document.getElementById('email').value;
/* some other fields */
/* now call ur function by passing the above values */
createUserWithName(name, email);
}

In your form call getFormData() method

<input class="button" name="submit" type="submit" value="submit" onclick="getFormData()" />

edited Mar 12, 2014 at 0:00

Floris497

1,40612 silver badges18 bronze badges

answered Aug 26, 2013 at 10:56

Girish Thimmegowda

2,1792 gold badges14 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

T J Over a year ago

I tried this, I am getting a TypeError error, at the line: var name=document.getElementById('username').value();

Girish Thimmegowda Over a year ago

sorry, remove () for value function.. just document.getElementById("username").value;

T J Over a year ago

Is there is a better(secure) way to input password?

Girish Thimmegowda Over a year ago

I observed that you have written type="text" for password which shows the characters you enter.. change it to "password"

T J Over a year ago

i already did that. I meant, while passing the password value in the javascript function. Can this be done in a more secure way?

Aashray · Accepted Answer · 2013-08-26 10:03:18Z

2

You can just use:

document.getElementById('username').value

in your javascript function. Alert the value to check if you are getting it.

answered Aug 26, 2013 at 10:03

Aashray

2,76118 silver badges23 bronze badges

Comments

kangoroo · Accepted Answer · 2013-08-26 10:00:28Z

0

there are many ways, but you can use jquery stuff

username = $("username").val();

answered Aug 26, 2013 at 10:00

kangoroo

3572 silver badges11 bronze badges

Comments

Anup Singh · Accepted Answer · 2013-08-26 10:04:14Z

0

var username = $("#username").val();
var email= $("#email").val();
createUserWithName(username , email);

answered Aug 26, 2013 at 10:04

Anup Singh

1,5633 gold badges16 silver badges32 bronze badges

2 Comments

T J Over a year ago

OOPS! Sorry, i completely forgot to include the jquery library! So this works now :)

T J Over a year ago

It did, However Girish's answer was more holistic and detailed, which is why i chose that one. Thanks for the response :)

Collectives™ on Stack Overflow

Submit form field values to a Javascript function

4 Answers 4

5 Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related