如何在表单提交时同时将数据传递给backbonejs和php？

Question

For example: A user enters or submits names. These names are stored locally using backbone.localStorage.js and displayed in #sidebar using backbone.js. And, by using php, the most recently added name should be displayed in #content. So, if user enters these two names, one after another- foo and bar. Then in #sidebar(here the backbone does the job)

foo
bar

should be displayed and in #content (here php does the job) bar should be displayed (as it is most recently added). when third name, boo is entered, in #sidebar it will be

foo
bar 
boo

And in #content boo will be displayed.

To achieve this I am using: backbone.js, backbone.localStorage.js, jquery. And app.js contains model, collection and view for handling and displaying data.

The js part works fine but not the php.

The index.php

<div id="myapp"> 
  <div class="enter-data"> 
   <form method="POST" action="index.php">     
    <input type="text" name="name" id="new-data" />       
    <input type="submit" value="Subscribe" name="submit" id="submit"/>
   </form>
  </div>
  <div class="sidebar-data">
    //here names are displayed which are stored locally using backbone
  </div>
</div>

<div class="content">
    <?php
       function main() {
        if(isset($_POST['name']) && !empty($_POST['name'])) {
           $data =$_POST['name'];   
           echo $data;  
          }
         }
       main();
      ?>
</div>

event in app.js (view)

    events: {
       "click #submit": "submitClick",
    },

    submitClick: function(e){    
         if (!this.input.val()) return;
         Todos.create({title: this.input.val()});
         this.input.val('');
        }

with the above code, data is passed to js, but not to php. Which means names are displayed in #sidebar as shown in above example but the php part is not working. #content is remained blank. I have also tried

  events: {
       "submit form": "submitForm",
    },

    submitForm: function(e){    
          if (!this.input.val()) return;
         Todos.create({title: this.input.val()});
         this.input.val('');
        }

but same thing happens.

So, how can I pass data to php too and display the recently added name in #content

Answer 1

this.input.val('') will clear the form before it's sent to PHP. Try this:

submitClick: function(e){    
    if (!this.input.val()) return;
    Todos.create({title: this.input.val()});
    // don't clear the form!
    // this.input.val('')
}

When the page is reloaded (after the form is submitted) the input should be cleared, so this code shouldn't be necessary anyway.