polymer form using paper-input and core-ajax - polymer

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.
can this even work? i am trying to use a method which seems exactly the opposite of the direct data binding method when collecting data from a server. can this be used for sending to the server.
in the core-ajax element i am using the auto="false" attribute. how would i go about calling the go() command when a use clicks the paper-button?
if this method for sending can work how do i catch the body="{}" line in php when submitted? i know it isn't sent as a $_GET. is it sent as $_POST or do i need to use another method to catch it?
my element template currently looks like
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">
<polymer-element name="add-node" attributes="url">
<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="{{name}}"></paper-input>
<br>
<paper-input floatingLabel label="Street Address:" value="{{address}}"></paper-input>
<br>
<paper-input floatingLabel label="City" value="{{city}}"></paper-input>
<br>
<paper-input floatingLabel label="State" value="{{state}}"></paper-input>
<br>
<paper-input floatingLabel label="Zip" value="{{zip}}"></paper-input>
<br>
<paper-input floatingLabel label="Phone:" value="{{phone}}"></paper-input>
<br>
<paper-input floatingLabel label="Description:" value="{{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" auto="false" method="POST" contentType="application/json" url="{{url}}"
body='{"name":"{{name}}", "address":"{{address}}", "city":"{{city}}", "state":"{{state}}", "zip":"{{zip}}", "phone":"{{phone}}", "description":"{{description}}", "longitude":"{{lng}}", "latitude":"{{lat}}"}' response="{{response}}">
</core-ajax>
<template repeat="{{response}}">{{data}}</template>
</template>
<script>
Polymer('add-node', {
doSend: function(event, detail, sender){
this.$.ajax.go();
}
});
</script>
</polymer-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:
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.
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>