dongma0722 2016-02-02 10:14
浏览 42
已采纳

聚合物多种铁形式提交

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>
  • 写回答

1条回答 默认 最新

  • douwen3083 2016-02-02 11:29
    关注

    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.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能
  • ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面