0
做我基本上都用它获取项目的阵列的自定义搜索表单元素的网页时，我做了每个项目由纸卡和他们的纸卡纸 - 表示晶圆厂其打开其中有一个铁的形式以及就像搜索表单自定义纸张对话元素，但是在提交租赁的对话中搜索形式也提交了相同的数据，并作为其自身的对话响应聚合物多铁表单提交
搜索表单元素
<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>