у меня есть страница с пользовательским элементом формы поиска, которая получает массив элементов, я сделал каждый элемент представлен бумажной карточкой, а на этих бумажных карточках есть бумажные фабрики, которые открывают пользовательский элемент диалогового окна которая имеет железную форму, также как и форму поиска, однако при отправке диалога аренды форма поиска также отправляет те же данные и принимает ответ диалога как свой собственный.
Элемент формы поиска
<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>
'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>
элемент диалога аренды
<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>
(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>
В вашем элементе верхнего уровня, вы слушаете iron-form
События. Имейте в виду, что события, вызванные вашим диалогом, будут всплывать, а также будут попадать в ваши слушатели элементов верхнего уровня.
В качестве решения вы можете посмотреть, кто является инициатором события: в слушателях событий посмотрите на event.details
имущество.
Других решений пока нет …