I'm trying to make dynamic validation on my polymer app
I want to make #login-buttonbutton attribute disabled when inputs are empty and remove this attribute when imputs are filled with id and password.
I tried do make html5 required attribute but this solution doesn't work.
Now I created button-click function to hit my Api and i want to add validate function.
<form id="form_login">
<paper-input aria-required="true" name="name" floatingLabel label="Id*"
value="{{name}}"></paper-input>
<br>
<paper-input-decorator floatingLabel label="password">
<input aria-required="true" id="password" is="core-input" name="password" type="password"
value="{{password}}"/>
</paper-input-decorator>
<br>
<div class="page-holder" horizontal layout center center-justified>
</div>
<div class="page-holder" horizontal layout center center-justified>
<paper-button id="login-button" on-click="{{buttonClick}}">Zaloguj Się</paper-button>
</div>
</form>
My Script:
Polymer('login-page',{
buttonClick: function () {
this.$.ajaxSubmit.go();
},
responseChanged: function (oldValue) {
console.log(this.response);
document.querySelector('app-router').go('/profile?hash=dfsasdsf');
}
});
</script>
disabled?={{!name || !password}} of paper-button may check for empty values in this case. So here is how I would do it:
<link rel="import" href="http://www.polymer-project.org/0.5/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/0.5/components/paper-elements/paper-elements.html">
<link rel="import" href="http://www.polymer-project.org/0.5/components/core-elements/core-elements.html">
<body fullbleed layout vertical>
<form-elem></form-elem>
</body>
<polymer-element name="form-elem" noscript>
<template>
<paper-input aria-required="true" floatingLabel label="Id*" value="{{name}}"></paper-input>
<br>
<paper-input-decorator floatingLabel label="password">
<input aria-required="true" id="password" is="core-input" type="password" value="{{password}}" />
</paper-input-decorator>
<br>
<div class="page-holder" horizontal layout center center-justified></div>
<div class="page-holder" horizontal layout center center-justified>
<paper-button disabled?="{{!name || !password}}" id="login-button" on-click="{{buttonClick}}">Zaloguj Się</paper-button>
</div>
</template>
</polymer-element>
Here is a jsfiddle version if needed: jsfiddle
Related
I want to display the value in the input text field using ng-bind directive.Can someone help me with this?
<div class="col-md-3">
<input class="form-control" disabled="disabled" value="ng-bind="type"">
</div>
Controller:
$scope.type = $scope.name[0].type_of_request;
I am trying to print this type in html page.I am not able to achieve that.Would someone help
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope, $timeout) {
$scope.type = "test";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<html ng-app="myApp">
<div ng-controller="MyCtrl">
<input class="form-control" disabled="disabled" ng-model="type">
</div>
</html>
ng-model works to be fine here, use it:
<html ng-app="myApp">
<div ng-controller="MyCtrl">
<input class="form-control" disabled="disabled" ng-model="type">
</div>
</html>
Or Use ng-value="type"
Check the below example:
<div ng-app="">
<p>Enter your Name: <input type="text" ng-model="name"></p>
<p>Hello <span ng-bind="name"></span>!</p>
<p>Hi <input type="text" value="{{name}}" /></p>
<p>Ahoy <input type="text" ng-value="name" /></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
Use ng-model instead
If you need one way binding then
<input class="form-control" disabled="disabled" ng-model="::type">
else if you need two way binding
<input class="form-control" disabled="disabled" ng-model="type">
I am trying to use forcedNarrow=true with paper-drawer-panel. But my page is not responding. Here is my code. Apparently none of the other API are also working. Is there any solution to this problem? I have tried restructuring my web page. But the feature it seems cannot be accessed.
<paper-drawer-panel forcedNarrow='true'>
<paper-header-panel main navigation flex>
<paper-toolbar id='mytoolbar'>
<div id='company_name'>KURIER </div>
</paper-toolbar>
<paper-toolbar id='secondary'>
<paper-icon-button icon="menu" paper-drawer-toggle on-tap="menuAction" ></paper-icon-button>
<paper-button raised>Login</paper-button>"
<paper-button raised>Sign Up</paper-button>
</paper-toolbar>
<div id='signup'>
<form method="get" action="{% url 'transport:index' %}">
<label for="i-want">I Want</label>
<input type="text" name="item-url" id="i-want">
<input type="submit" value="I want">
</form>
<form is="iron-form" id="form" method="post" action="{% url 'transport:signup' %}">
{% csrf_token %}
Sign Up
<paper-input label="Username" name="username-signup" id="username-signup"></paper-input>
<paper-input label="Password" type="password" name="password-signup" id="password-signup"></paper-input>
<paper-input label="Verify Password" type="password" name="password-verify" id="password-verify"></paper-input>
<paper-input label="Email" type="email" name="email-signup" id="email-signup"></paper-input>
<paper-input label="First Name" name="first_name-signup" id="firstname-signup"></paper-input>
<paper-input label="Last Name" name="last_name-signup" id="lastname-signup"></paper-input>
<paper-input label="Address 1" name="address_st_1" id="address1"></paper-input>
<paper-input label="Address 2/District" name="address_st_2" id="address2"></paper-input>
<paper-input label="Phone Number" name="phone_number" id="phone_number"></paper-input>
<paper-input label="City" name="city" id="city"></paper-input>
<paper-input label="State" name="state" id="state"></paper-input>
<paper-input label="Zip Code" name="zip_code" id="zip_code"></paper-input>
<paper-input label="Country" name="country" id="country"></paper-input>
<paper-button raised onclick="submitForm()">Sign Up</paper-button>
</form>
</div>
</paper-header-panel>
<div drawer>
<paper-button>Login</paper-button>
</div>
</paper-drawer-panel>
It's forceNarrow, not forcedNarrow. See docs.
Camelcase attributes are written as hyphen separated attributes when composing an element, <paper-drawer-panel force-narrow>
Apparently the answer is <paper-drawer-panel force-Narrow>
When I submit this Polymer form with document.getElementById("form").submit(); firstName and lastName are included in the POST-data, but the title-value from the paper-dropdown-menu not. What is missing ?
<form is="iron-form" id="form" method="post" action="/edit">
<paper-dropdown-menu name="title" label="Title">
<paper-menu class="dropdown-content">
<template is="dom-repeat" items="{{titles}}" as="title">
<paper-item value="{{item.id}}">{{title.name}}</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
<paper-input name="firstName" label="First name"></paper-input>
<paper-input name="lastName" label="Last name"></paper-input>
<paper-button raised onclick="submitForm()">Save</paper-button>
</form>
Edit:
Here my complete working example, thanks a lot to #Brandon for his answer:
<form is="iron-form" id="form" method="post" action="/api/edit">
<paper-dropdown-menu label="Title" selected-item="{{selectedItem}}" selected-item-label="{{selected}}">
<paper-menu class="dropdown-content">
<template is="dom-repeat" items="{{titles}}" as="title">
<paper-item value="[[title.id]]">[[title.name]]</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
<input is="iron-input" name="title" type="hidden" value$="[[selectedItem.value]]">
<paper-input name="firstName" label="First name"></paper-input>
<paper-input name="lastName" label="Last name"></paper-input>
<paper-button raised onclick="document.getElementById('form').submit()">Save</paper-button>
</form>
This may solve your problem. Create a hidden input element and assign the selected item to the hidden element's value. This gives you the added benefit of the iron-input validators for multi-select for future forms.
<form is="iron-form" id="form" method="post" action="/edit">
<paper-dropdown-menu label="Title" selected-item-label="{{selected}}">
<paper-menu class="dropdown-content">
<template is="dom-repeat" items="{{titles}}" as="title">
<paper-item>{{title.name}}</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
<input is="iron-input" name="title" type="hidden" value$="[[selected]]">
<paper-input name="firstName" label="First name"></paper-input>
<paper-input name="lastName" label="Last name"></paper-input>
<paper-button raised onclick="submitForm()">Save</paper-button>
</form>
I have a DIV that contains many input text.
I need a way in jQuery 1.3.2 to clear all the values inside the inputs onclick.
So when I click on a specific link all the values of the inputs inside that DIV will be cleared.
I do not have any sample code, I just need to know if there is a way to clear all the values of inputs that are inside a specific DIV (not in a FORM, but in a DIV).
yes there is
html like this
<div id="div_id">
<input type="text" value="foo" />
<input type="text" value="foo" />
<input type="text" value="foo" />
<input type="text" value="foo" />
</div>
then jQuery
$('#div_id input[type="text"]').val('');
working demo
What are those inputs? Textboxes? May be this
$("#DivID input:text").val("");
Demo
To clear form element values inside the div use below
function clear_form_elements(id_name) {
jQuery("#"+id_name).find(':input').each(function() {
switch(this.type) {
case 'password':
case 'text':
case 'textarea':
case 'file':
case 'select-one':
jQuery(this).val('');
break;
case 'checkbox':
case 'radio':
this.checked = false;
}
});
}
Try using val proerpty of the input text elements to blank.
Something like:
$("input[type='text']", "#<YOUR_DIV_ID>").val("");
e.g:
<div id="textDiv">
<input type="text" Value="1"/> <br/>
<input type="text" Value="2"/> <br/>
<input type="text" Value="3"/> <br/>
<input type="text" Value="4"/> <br/>
<input type="text" Value="5"/> <br/>
<input type="text" Value="6"/> <br/>
<a name="clickMe" href="javascript:void(0)">Empty Boxes</a>
</div>
<script type="text/javascript">
$(function(){
$("a[name='clickMe']").click(function(){
$("input[type='text']", "#textDiv").val("");
});
});
</script>
Check live example #: http://jsfiddle.net/DKwy8/
$('linkselector').onClick(function() {
$('#DivId input').val('');
});
try
HTML
<div id="myDiv">
<input type="text" value="One">
<input type="text" value="Two">
<input type="text" value="Three">
</div>
Clear
jQuery
$('a#clearDiv').bind('click', function() {
var $div = $('div#myDiv');
$('input[type="text"]', $div).each(function() {
$(this).val('');
});
});
working DEMO
dear i have 2 text and 2 checkbox:
<input type="checkbox" id="class1">
<input type="checkbox" id="class2">
<div id="hidden">
<input type="text" id="valclass1">
<input type="text" id="valclass2">
</div>
i want if i checked at "class1" then click show button "valclass1" can show. but if not checked, it hidden.how do i do that?
I would do it like this:
<script type="javascript/text" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="javascript/text">
$(function()
{
$('#ShowButton').click(function()
{
if($('#class1').is(':checked')) $('#valclass1').show();
if($('#class2').is(':checked')) $('#valclass2').show();
});
});
</script>
<input type="checkbox" id="class1">
<input type="checkbox" id="class2">
<input type="button" id="ShowButton" />
<input type="text" id="valclass1" style="display: none">
<input type="text" id="valclass2" style="display: none">
It would work, but probably doesn't answer your question. You need to learn more about JavaScript to be able to roll your own solution.
Check out W3C's JavaScript tutorial