CODEWITHSUNDEEP
javascripthtml
user2329093
user2329093

Reputation:

Parse Data and Javascript/HTML Form

I'm using the Data module from Parse. I'm using HTML to create an email form. I use Javascript to get the form data (email), and then generate a username from the email address. This information is then saved to the Parse database.

Here's the HTML form code:

<form method="post" class="center">
    <input id="email" name="email" type="email" placeholder="Type your email to create a Mail Link" />
    <button id="submit" onclick="formSubmit();">Create</button>
</form>

Here's the Javascript:

function formSubmit() {
    var emailValue = document.getElementById("email").value;
    var userValue = emailValue.substr(0, emailValue.indexOf('@'));

    Parse.initialize("---KEY---", "---KEY---");
    var Users = Parse.Object.extend("Users");
    var users = new Users();
    users.save({username: userValue}).then(function(object) {
        alert("Saved user");
    });
    users.save({email: emailValue}).then(function(object) {
        alert("Saved email");
    });
}

The problem is that the console is showing that the values are saved, however the data isn't saved into Parse.

Any ideas would be greatly appreciated!

Upvotes: 0

Views: 8649

Answers (3)

Prince Abalogu
Prince Abalogu

Reputation: 395

You can use jquery to store the form values and create a sub class of your parse class and also a new parse object to store the values in parse.

Example:

<form id="contact-form" >
        First name:<br>
        <input type="text" name="firstname" id="firstname">
        <br>
        Last name:<br>
        <input type="text" name="lastname" id="lastname">
        email:<br>
        <input type="text" name="email" id="email">
        <a href="/access2"><input type="submit" value="Get Access" /></a>
    </form>

Javascript code: 

    Parse.initialize("--KEY--", "--KEY--");

var Subscribers = Parse.Object.extend('Subscribers'); //create local parse object from your Parse class

$('#contact-form').submit(function(e) {
//on form submit
    e.preventDefault();

    //get data from form
    var data = {
        firstname: $("#firstname").val(),
        lastname: $("#lastname").val(),
        email: $("#email").val()
    };

    //create new Parse object
    subscribers = new Subscribers();

    //match the key values from the form, to your parse class, then save it
    subscribers.save(data, {
    //if successful
        success: function(parseObj) {
                alert(subscribers.get('firstname') + " " + subscribers.get('lastname') + " " + subscribers.get('email') + " saved to Parse.")
            }
        ,
        error: function(parseObj, error) {
            console.log(parseObj);
            console.log(error);
        }   
    });
});

Upvotes: 0

user2329093
user2329093

Reputation:

Okay, I awarded Indra the bounty, but here's the full answer for more context. This is an annoying problem, but you can solve it.

First, the form should use onsubmit.

<form method="post" onsubmit="formSubmit();">

Second, your function should use Indra's method to save data. But, you need event.preventDefault(); before it.

event.preventDefault();
    userList.save({
       username: "Peter Adams"
       }, {
          success: function(userList) {
             alert('Success');
          },
          error: function(userList, error) {
             alert('Failed to create new object, with error code: ' + error.message);
          }
    });

Upvotes: 0

Indranil Mondal
Indranil Mondal

Reputation: 2857

In can make button a simple button, no need to change the button to a button as mention in the link you've mentioned, your code'll work fine.

You've written .then() method after saving the user data, but actually it's called to run the callbacks when the promise is fulfilled.

But here you're using simple Parse.Object, so either you've to use Parse.Promise, or if you want to use only simple Parse.Object when something like:-

users.save({
username: "Jake Cutter"
}, {
success: function(userObject) {
  alert('The save was successful');
},
error: function(userObject, error) {
  // The save failed.  Error is an instance of Parse.Error.
  // Do something if you want to do on error
}
});

For details you can check:- https://www.parse.com/docs/js/symbols/Parse.Object.html#save https://www.parse.com/docs/js/symbols/Parse.Promise.html#then

Upvotes: 1

Related Questions