Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <meta name="description" content="Facebook Login with Wufoo form submission." />
    <script src="//code.jquery.com/jquery.min.js"></script>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body>
​
    <div class="fb-login">
      <button class="btn btn-primary btn-lg" data-loading-text="Please wait..."><em class="fa fa-facebook-square"></em> Enter with Facebook</button>
    </div>
​
    <div id="wufoo-form">
​
      <form id="form1" name="form1" class="wufoo topLabel page" accept-charset="UTF-8" autocomplete="off" enctype="multipart/form-data" method="post" novalidate  action="https://nuetaventures.wufoo.com/forms/zmoo5p31nm1fzq/#public">
​
        <header id="header" class="info">
          <h2>Prize Draw</h2>
          <div>Enter the prize draw to win £100 of monopoly money!</div>
        </header>
​
        <ul>
​
          <li id="foli1" class="notranslate">
            <label class="desc" id="title1" for="Field1">
              Name
              <span id="req_1" class="req">*</span>
            </label>
            <span>
              <input id="Field1" name="Field1" type="text" class="field text fn" value="" size="8" tabindex="1" required />
              <label for="Field1">First</label>
            </span>
            <span>
              <input id="Field2" name="Field2" type="text" class="field text ln" value="" size="14" tabindex="2" required />
              <label for="Field2">Last</label>
            </span>
          </li>
          <li id="foli3" class="notranslate      ">
            <label class="desc" id="title3" for="Field3">
              Email
              <span id="req_3" class="req">*</span>
            </label>
            <div>
              <input id="Field3" name="Field3" type="email" spellcheck="false" class="field text medium" value="" maxlength="255" tabindex="3" required />
            </div>
          </li>
          <li id="foli105" class="notranslate      ">
            <fieldset>
              <![if !IE | (gte IE 8)]>
              <legend id="title105" class="desc">
                Gender
                <span id="req_105" class="req">*</span>
              </legend>
              <![endif]>
              <!--[if lt IE 8]>
<label id="title105" class="desc">
Gender
<span id="req_105" class="req">*</span>
</label>
<![endif]-->
              <div>
                <input id="radioDefault_105" name="Field105" type="hidden" value="" />
                <span>
                  <input id="Field105_0" name="Field105" type="radio" class="field radio" value="Rather not say" tabindex="4" checked="checked" required />
                  <label class="choice" for="Field105_0" >
                    Rather not say</label>
                </span>
                <span>
                  <input id="Field105_1" name="Field105" type="radio" class="field radio" value="Male" tabindex="5" required />
                  <label class="choice" for="Field105_1" >
                    Male</label>
                </span>
                <span>
                  <input id="Field105_2" name="Field105" type="radio" class="field radio" value="Female" tabindex="6" required />
                  <label class="choice" for="Field105_2" >
                    Female</label>
                </span>
              </div>
            </fieldset>
          </li> <li class="buttons ">
          <div>
​
            <input id="saveForm" name="saveForm" class="btTxt submit" 
                   type="submit" value="Submit"
                   /></div>
          </li>
​
          <li class="hide">
            <label for="comment">Do Not Fill This Out</label>
            <textarea name="comment" id="comment" rows="1" cols="1"></textarea>
            <input type="hidden" id="idstamp" name="idstamp" value="uYCy6dIzFJXV6WqPHkmkXuxYMI622ayfdCRNPtS93vQ=" />
          </li>
        </ul>
      </form>
    </div>
​
  </body>
</html>
 
body {
  margin: 10px;
}
​
#wufoo-form {
  display: none;
}
​
.fb-login {
  text-align: center;
}
 
// Facebook Setup
window.fbAsyncInit = function() {
  FB.init({
    appId      : '515655801779004',
    xfbml      : true,
    version    : 'v2.0'
  });
};
​
// Facebook JavaScript
(function(d, s, id){
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
​
// jQuery Functions
$(document).ready( function() {
​
  // on click function for Facebook login button
  $('.fb-login button').on( 'click', function( e ) {
​
    // remove previously checked values
    $('[name="Field105"]').removeAttr('checked');
​
    // Trigger login to Facebook, asks for 'email' permissions
    FB.login(function(){
      // on login, get the user's details
      FB.api('/me', 'get', {}, function (response ) {
        // debug
        console.log(response);
​
        // add the user's details to the form
        $('[name="Field1"]').val( response.first_name );
        $('[name="Field2"]').val( response.last_name );
        $('[name="Field3"]').val( response.email );
​
        // check the correct gender box
        if ( response.gender == 'male' ) {
          $('#Field105_1').attr('checked', 'checked').trigger('click');
        } else if ( response.gender == 'female' ) {
          $('#Field105_2').attr('checked', 'checked').trigger('click');
        } else {
          $('#Field105_0').attr('checked', 'checked').trigger('click');
        }
​
        // submit the form
        $('#form1').submit();
​
      });
    }, {scope: 'email'});
​
  });
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
nirajpro
0viewers