Search code examples
jqueryhtmlajaxpolymerajax-forms

How use ajax-forms with polymer?


I'm trying to create a simple web app using polymer.

I have an email, name and checkbox field for the user.

What I would like to do is when the user enters their information into these inputs, the data is stored and sent to me.

I understand this may be a novice question, but I am finding difficulty to get this to work with the Polymer framework.

Below is my code. HTML

<paper-input-decorator id="decorator" label="{{label}}" floatinglabel="{{floatingLabel}}" value="{{value}}" disabled?="{{disabled}}">
    <input is="core-input" value="{{value}}" committedvalue="{{committedValue}}" on-change="{{changeAction}}" method="post" disabled?="{{disabled}}">
  </paper-input-decorator>

Solution

  • HTML

    <link rel="import" href="../../bower_components/ajax-form/ajax-form.html">
    <link rel="import" href="../../bower_components/paper-button/paper-button.html">
    <link rel="import" href="../../bower_components/paper-input/paper-input.html">
    
    <form id="doSomethingForm" is="ajax-form" action="/api/doSomething" method="post">
        <paper-input label="Name" type="text" name="name"></paper-input>
        <paper-input label="Email" type="text" name="email"></paper-input>
        <paper-button id="submitButton" raised on-tap="{{submit}}">Submit</paper-button>
    </form>
    

    Javascript

    Polymer({
        submit: function() {
            this.$.doSomethingForm.submit();
        }
    });
    

    This will send a POST call to your server on endpoint /api/doSomething with parameters name and email