Polymer multiple iron-form submissions

Question

do i basically have a page with a custom search-form element which gets a array of items, i have made each item be represented by paper-card and on those paper-cards they have paper-fab's which open a custom paper-dialog element which has a iron-form as well just like search-form, however on submitting the rental-dialog the search-form also submits the same data and takes the dialog response as its own

Search-form element

<form id="the-form" is="iron-form" method="POST" action="search.php">
              <paper-radio-group selected="{{brand}}">
              <paper-radio-button name="toyota">Toyota</paper-radio-button>
              <paper-radio-button name="bmw">BMW</paper-radio-button>
              <paper-radio-button name="subaru">Subaru</paper-radio-button>
              <paper-radio-button name="mitsubishi">Mitsubishi</paper-radio-button>
              <paper-radio-button name="nissan">Nissan</paper-radio-button>
              <paper-radio-button name="mazda">Mazda</paper-radio-button>
              <paper-radio-button name="chrysler">Chrysler</paper-radio-button>
            </paper-radio-group>
            <paper-button raised type="submit"  on-click="_submit">Search</paper-button>
          </form>
        </paper-card>
        </div>

        <template is="dom-repeat" id="list" items="{{carItems}}">
          <div id="cards">
          <paper-card class='fancy'>
            <div id="carPage">
      <div class="card-content">
        <div class="title">
          <div class="big">{{item.name}}</div>
          <rent-dialog first-name="{{item.name}}" first-value="{{item.price}}" firstsku="{{item.sku}}" firstavailable="{{computeBool(item.rented)}}"></rent-dialog>
        </div>
      </div>
      <img src="{{item.img}}">
      <div class="card-content">
        <div class="medium">Price:Ksh {{item.price}}</div>
        <div class="medium">{{item.disc}}</div>

      </div>
      </div>
      </paper-card>

       </div>

    </template>

script for search-form

<script>
     'use strict';
      (function() {
        Polymer({
          is: 'search-form',
          properties: {

            brand:      {
              type:       String,
              value:      'toyota'
            }
          },
          listeners:  {
            'iron-form-presubmit': '_formPresubmit',
            'iron-form-submit': '_formSubmit',
            'iron-form-response': '_formResponse',
            'iron-form-error': '_formError'
          },

          _submit: function(event) {
            this.$['the-form'].submit();

          },
          _formPresubmit: function() {
            this.$['the-form'].request.params = { brand: this.brand };
          },

          _formSubmit: function(event) {
            console.log('The form has been submited.', event);
          },
          _formResponse: function(event) {
            this.carItems = event.detail.xhr.response;
            console.log('Form responded:', event.detail.xhr.response);
          },
          computeBool: function(value) {
            return !!Number(value);

          }

        });
      })();
    </script>

rent-dialog element

<paper-fab icon="shopping-cart" title="{{firstSku}}" on-click="hire" disabled="{{firstavailable}}"></paper-fab>
        <paper-dialog  modal role="alertdialog" id="dialog"><p>[[item.name]]</p>
        <h2>Reciept</h2>
        <form id="rent" is="iron-form1" method="POST" action="rented.php">

        <span class="paper-title" name="carName">Name: [[firstName::input]] </span> <br>
        <span name="sku">SKU: [[firstSku::input]]</span> <br>
        <span name="price">Price Per Day: KSH [[firstValue]]</span> <br>
        <span>Number Of Days:</span>
        <paper-slider min="1" max="10" editable pin value="{{sliderValue}}" on-change="sliderChange" name="days"></paper-slider>
        <span>Total Price: Ksh <span id="price" name="totalPrice"></span></span>

        <paper-button dialog-dismiss>Cancel</paper-button>
        <paper-button type="submit" on-click="_rent" dialog-confirm>Rent</paper-button>

        </form>
        </paper-dialog>

script for dialog

<script>
        (function() {
          Polymer({
            is:    'rent-dialog',
            properties: {
          firstValue:Number,
          firstName:String,
          firstsku:Number,
          firstavailable:Number
        },
       listeners:  {
              'iron-form-submit': '_rentSubmit',
              'iron-form-response': '_rentResponse',
            },
        _rent: function(event1) {
              this.$.rent.submit();
            },
            _rentSubmit: function(event1) {
              console.log('The form has been submited.', event);
            },
            _rentResponse: function(event1) {
              console.log('Form responded:', event.detail.xhr.response);

            },

            hire:function(evt) {
              // Because we are in a dom module, this.$ registers tags with an ID.
              this.$.dialog.toggle();

            },
            sliderChange:function(e){
              var value = (this.sliderValue);
              var value2 = (this.firstValue);
              var total = value*value2;
               document.getElementById("price").innerHTML = total;
           },
           submit:function(r){
             console.log("clicked");
           }

          });
        })();
      </script>

Answer 1

In your top-level element, you're listening to iron-form events. Keep in mind that the events triggered by your dialog will bubble up, and will also be caught in your top-level element listeners.

As a solution, you could look up who's the originator of the event: in the event listeners, look at the event.details property.