Manually change query in Polymer / Plunker

Question

I am still very new to coding. To practice coding I've tried to get an API (from the Rijksmuseum) to run. So far, it has worked as you can see over here:

http://plnkr.co/edit/jCYxJz?p=preview

  <p>You searched for: {{query}}</p>
  <form>
    <label id="label" for="name">Change your query:</label>
    <input type="text" id="name">
    <button on-click="{{ myFunction }}" type="submit">Commit changes</button>
  </form>
  <core-ajax 
    url="https://www.rijksmuseum.nl/api/nl/collection?maker={{query}}&ps=30&key=ssCRX6qW&format=json&imgonly=true&s=chronologic&f.dating.period={{period}}" 
    auto 
    response="{{response}}">
  </core-ajax>    

My question is:

On top of the current page, as you can see in the Plunker, the user is told "you searched for.." and the user is then offered an input field to manually change the search query. Now.. how do I get the field to actually work?

The current search-query is transmitted via the Index.html where I have to type it in as an attribute-value. This is then send to the Rijksmuseum.html file where it is picked up by the polymer-element.

Anyone had any tips on how to get this done?

Thnx in advance!

Answer 1

assign a id to the ajax element call it "ajax". remove the type="submit" from your button that will make your page refresh. change your myFunction to match the 1 below.

    myFunction: function() {
      var query = this.$.name.value;
      this.query = query;
      this.$.ajax.go();
    //alert("Thanks for committing!!");
  }

also a fork so you can see it work http://plnkr.co/edit/jGZpc6jNy6IinBKGB4ip?p=preview