Submitting data from text box to Firebase not working

Question

I have this text box in HTML:

    <script src="../js/writeTo.js"></script>
    <form>
        <div class="post-title">
            <input type="text" placeholder="Post Title">
        </div>
        <div class="post-content">
            <textarea type="text" placeholder="Post Content"></textarea>
        </div>
        <button type="submit" class="submit">Submit</button>
    </form>

and my js file called writeTo.js contains this code:

    var url = "https://blog-posts.firebaseio.com/";

    var firebaseRef = new Firebase(url);


    function funct1()

    {
var title = $('#post-title').val();

     var post = $('#post-content').val();

     var date = Date();

     firebaseRef.set({Title: +title, Content: +post, Date: +Date()});

    }



    submit.onclick = funct1();

When I type something in my text box and click submit, I look at my Firebase and there is no new data (I'm also new to using Firebase).

It does not work, can anyone see the problem? (There are probably a few, I am new to JavaScript)

Answer 1

There are a few problems with your script. I've solved them in this jsfiddle, but will also explain below.

Getting the text content of your inputs

Your HTML for the inputs looks like this:

<div class="post-title">
    <input type="text" placeholder="Post Title">
</div>

The JavaScript you use to read the value is:

var title = $('#post-title').val();

If you read the documentation for val, you'll see that it is meant to be invoked on the input element itself. You are invoking it on the wrapping div.

The simplest change is to get the value like this:

var title = $('#post-title').text();

Associating the handler with the form

You hook up your event handler with the form like this:

submit.onclick = funct1();

Unfortunately this will not work as you expect it to.

What is does is:

1. Invoke funct1
2. Assign the return value of funct1 to onclick

What you instead want to do is:

submit.onclick = funct1;

So this will assign funct1 to onclick.

You might want to read up on more modern approaches of assigning event handlers btw.

Passing the values to Firebase

Your code for passing the values to Firebase seems a bit off. Use this instead

 firebaseRef.set({Title: title, Content: post, Date: date});

Cancel the regular browser handling of the form submit

The browser normally handles clicks on a form's submit button by posting the form's values to a URL.

But in your application you are handling this yourself, so you should tell the browser to ignore the submit.

You can do this by returning false from your function:

 return false;

Note that this will give the following warning in Chrome:

event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

So you should indeed consider using event.preventDefault() instead of returning false. See the total code below for how to do that.

Complete code

var url = "https://blog-posts.firebaseio.com/";

var firebaseRef = new Firebase(url);

function funct1(evt)
{
  var title = $('#post-title').text();

  var post = $('#post-content').text();

  var date = Date();

  firebaseRef.set({Title: title, Content: post, Date: date});
  evt.preventDefault();
}

var submit = document.getElementsByTagName('button')[0];

submit.onclick = funct1;

Adding a new post, instead of overwriting the existing one

Your code will now replace the blog post that lives at your Firebase. I imagine that you'll probably prefer to add a new post, when pressing the submit button.

To accomplish this, you'll need to call Firebase's push function. Firebase has some great documentation on managing lists.

The gist of it is this though:

var postRef = firebaseRef.push(); // create a new post
postRef.set({Title: title, Content: post, Date: date});

So you create a new post and then set your values on that, instead of on the top-level Firebase ref.