Getting value from input jquery

Question

I am trying to get the value from an input and pass it through a script to sign up a user but not having any luck storing it. The alert I have set up to test displays no value. Here is what I had to get value for the user name and pass it in the script:

                    <form id ="form-signin" class="form-signin" action="" method="">
                      <input type="text" id="username" class="form-control" placeholder="Username" required autofocus>
                      <input type="email" class="form-control" placeholder="Email" required autofocus>
                      <input type="password" class="form-control" placeholder="Password" required>
                      <input type="submit" id="createUser" class="btn btn-lg btn-default btn-block" value="Sign Up" />
                    </form>



<script type="text/javascript">

    Parse.initialize("u3BTp3Efoko8hbNhl5MCeli8Kd2iiEk8mE4vYgn4", "tQEGymAWeB8Tr2LA3YDGoq2Lt2xpGMW9ikeFSTtD");

    //get the input data
    var username = $('#username').val();

    //set the user
    var user = new Parse.User();

    $( "form" ).submit(function( event ) {

      alert( "Error: " + username + " " );

        user.set("username", " " + username + " ");
        user.set("password", "my pass");
        user.set("email", "email@example.com");

        // other fields can be set just like with Parse.Object
        user.set("phone", "415-392-0202");

        user.signUp(null, {
          success: function(user) {
            // Hooray! Let them use the app now.
          },
          error: function(user, error) {
            // Show the error message somewhere and let the user try again.
            alert("Error: " + error.code + " " + error.message);
          }
        });

    });

</script>

Answer 1

You need to read the value of username in the submit handler.

You are reading the value of of the field #username when the page is loaded which is blank, once you read the value and assign it to a variable, the variable value will not get updated as you update the input value.

//dom ready handler
jQuery(function ($) {
    Parse.initialize("u3BTp3Efoko8hbNhl5MCeli8Kd2iiEk8mE4vYgn4", "tQEGymAWeB8Tr2LA3YDGoq2Lt2xpGMW9ikeFSTtD");

    //set the user
    var user = new Parse.User();

    $("form").submit(function (event) {
        //get the input data
        var username = $('#username').val();//read the user value in s

        alert("Error: " + username + " ");

        user.set("username", " " + username + " ");
        user.set("password", "my pass");
        user.set("email", "email@example.com");

        // other fields can be set just like with Parse.Object
        user.set("phone", "415-392-0202");

        user.signUp(null, {
            success: function (user) {
                // Hooray! Let them use the app now.
            },
            error: function (user, error) {
                // Show the error message somewhere and let the user try again.
                alert("Error: " + error.code + " " + error.message);
            }
        });

    });
})