polymer form using paper-input and core-ajax

Question

i am working on a custom element that will serve as a form for sending map node data to a database using a restful service.

i have 3 questions about this element.

Answer 1

It should work just OK. To invoke the go() give your ajax element an id so it is easy to access, ie

<core-ajax id="foobar" auto="false" ...></core-ajax>

attach an eventhandler to the button

<paper-button ... on-tap="{{doSend}}"></paper-button>

and implement the doSend() handler in your elements script section (do not forget to get rid of the noscript in the elements declaration)

<script>
Polymer('add-node', {
  doSend: function(event, detail, sender){
     this.$.foobar.go();
  }
});
</script>

As of proccessing the data at server side - yes, you should look for the data in the $_POST.

Answer 2

A couple of notes:

1. Instead of assembling data at send time, it's probably convenient to treat the data as an object in the first place. I called it item (it could be record or node or whatever) and I made it bindable so you could pass in a record for editing.
2. body is generally for sending data that you format yourself. In this, case since you have normal name='value' pairs that you want to access as such in PHP, use params instead. At that point either GET or POST will work (POST is usually better).

Updated example:

<polymer-element name="add-node" attributes="url item">
  <template>
    <style>
      paper-input {
        color:#000000;
        text-align:left;
      }
      paper-button.colored {
        background:#000000;
        color:#ffffff;
      }
      .centered {
        display:block;
        text-align:center;
        width:100%;
      }
    </style>
    <geo-location latitude="{{lat}}" longitude="{{lng}}"></geo-location>
    <form id="form_1">
      <paper-input floatingLabel label="Name:" value="{{item.name}}"></paper-input>
      <br>
      <paper-input floatingLabel label="Street Address:" value="{{item.address}}"></paper-input>
      <br>
      <paper-input floatingLabel label="City" value="{{item.city}}"></paper-input>
      <br>    
      <paper-input floatingLabel label="State" value="{{item.state}}"></paper-input>
      <br>
      <paper-input floatingLabel label="Zip" value="{{item.zip}}"></paper-input>
      <br>
      <paper-input floatingLabel label="Phone:" value="{{item.phone}}"></paper-input>
      <br>
      <paper-input floatingLabel label="Description:" value="{{item.description}}"></paper-input>
      <br>
      <div class="centered">
        <paper-button on-tap="{{doSend}}" raisedButton class="colored" label="Save"></paper-button>
      </div>
    </form>
    <core-ajax id="ajax" method="POST" url="{{url}}" params="{{item}}" response="{{response}}"></core-ajax>
    <template repeat="{{response}}">{{data}}</template>
  </template>
  <script>
    Polymer('add-node', {
      created: function() {
        this.item = {};
      },
      doSend: function() {
        this.$.ajax.go();
      }
    });
  </script>
</polymer-element>