javascript — Полимерная множественная подача железной формы

у меня есть страница с пользовательским элементом формы поиска, которая получает массив элементов, я сделал каждый элемент представлен бумажной карточкой, а на этих бумажных карточках есть бумажные фабрики, которые открывают пользовательский элемент диалогового окна которая имеет железную форму, также как и форму поиска, однако при отправке диалога аренды форма поиска также отправляет те же данные и принимает ответ диалога как свой собственный.

Элемент формы поиска

<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>

0

Решение

В вашем элементе верхнего уровня, вы слушаете iron-form События. Имейте в виду, что события, вызванные вашим диалогом, будут всплывать, а также будут попадать в ваши слушатели элементов верхнего уровня.

В качестве решения вы можете посмотреть, кто является инициатором события: в слушателях событий посмотрите на event.details имущество.

1

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]