How to include Polymer paper-dropdown-menu in form submit - html

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>

Related

How to make input box big as text area in html

I have to show the a new quote in the input box. The input box is too small.
<form action="https://twitter.com/intent/tweet" method="get" id=usrform>
<div id="input">
<label for=quote>New Quote will appear</label><br>
<input name="text" id="quote" type="text" value="" multiple="multiple">
</div>
<button id=getquotebtn type=button>Get A New Quote</button>
<button id=twitterbtn type=submit>tweet</button>
</form>
<form action="https://twitter.com/intent/tweet" method="get" id=usrform>
<div id="input">
<label for=quote>New Quote will appear</label><br>
<textarea name="text" id="quote" type="text" value="" cols="5" rows="5">your quote is here</textarea>
</div>
<button id=getquotebtn type=button>Get A New Quote</button>
<button id=twitterbtn type=submit>tweet</button>
</form>
Please use textarea instead of the input type text. This is the good practice
For an input that allows a person to type multiple lines, use <textarea>. You can also define the cols and rows the textarea can have, basically creating new lines at that point
Option 1:
$("document").ready(function(){
$("#getquotebtn").click(function(){
setInput("hello world ") //
})
})
function setInput(val){
//alert()
$("#quote").val(val)
$("#quote").css("width", (val.length * 6) +"px"); //dynamically set the width length of input element
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="https://twitter.com/intent/tweet" method="get" id=usrform>
<div id="input">
<label for=quote>New Quote will appear</label><br>
<input name="text" id="quote" type="text" value="" multiple="multiple">
</div>
<button id=getquotebtn type=button>Get A New Quote</button>
<button id=twitterbtn type=submit>tweet</button>
</form>
Option 2:
$("document").ready(function(){
$("#getquotebtn").click(function(){
setInput("hello world")
})
})
function setInput(val){
$ ("#quote").val(val)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="https://twitter.com/intent/tweet" method="get" id=usrform>
<div id="input">
<label for=quote>New Quote will appear</label><br>
<textarea name="text" id="quote" type="text" value="" multiple="multiple"> </textarea>
</div>
<button id=getquotebtn type=button>Get A New Quote</button>
<button id=twitterbtn type=submit>tweet</button>
</form>

Submit 3 HTML forms with one Javascript button to store in same MySQL DB row

I have a page with 3 forms without submit button. Then I created a script to submit all at the same time to the same file however it creates 3 rows in database but I need all together in same row. Any suggestion?
Thanks!
<script language="JavaScript">
submitForms = function(){
document.getElementById("form1").submit();
document.getElementById("form2").submit();
document.getElementById("form3").submit();
}
</script>
<!-- begin snippet: js hide: false console: true babel: false -->
<button type="submit" onclick="submitForms()">Click me!</button>
<form id="form1" action="test.php" method="post">
<input type="text" name="A" value="A"/>
</form>
<form id="form2" action="test.php" method="post">
<input type="text" name="B" value="B"/>
</form>
<form id="form3" action="test.php" method="post">
<input type="text" name="C" value="C"/>
</form>
elseif(isset($_POST)) {
$A = mysqli_real_escape_string($connection,$_POST['A']);
$B = mysqli_real_escape_string($connection,$_POST['B']);
$C = mysqli_real_escape_string($connection,$_POST['C']);
mysqli_query($connection,"INSERT INTO something (A, B, C) VALUES ('$A', '$B', '$C')");
header('Location: ../Index.php');
exit();
Then put it all in one form (which is basically what in 99.999% of cases would be needed):
<button type="submit" onclick="submitForms()">Click me!</button>
<form id="form1" action="test.php" method="post">
<input type="text" name="A" value="A"/>
<input type="text" name="B" value="B"/>
<input type="text" name="C" value="C"/>
</form>
Edit:
A form can span many tags, not necessarily only <input> tags (or <select>, etc). So this is perfectly valid too:
<form id="form1" action="test.php" method="post">
<div class="class1">
<div class="class2">
<input type="text" name="A" value="A"/>
</div>
<div class="class2">
<input type="text" name="B" value="B"/>
</div>
</div>
<div class="class3">
<input type="text" name="C" value="C"/>
</div>
</form>
After a lot of tries unfortunately is extremely hard to put all together within the order that I wish. This page contains many things so if someone else is able to provide a solution that is not using the same form with different div container I appreciate. Thanks

Polymer force narrow forceNarrow is not working

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>

Polymer, use multiline attribute on paper-input in ajax-form

I tried to make a multi-line paper-input in ajax-form element
#info {
width: 90%;
height: 300px;
background-color: white;
padding: 10px;
margin: 20px auto;
}
paper-input {
width: 100%;
height: 150px;
}
<div id="info">
<form is="ajax-form" action="../../../back/saveIMG.php" class="picturePost" method="post" enctype="multipart/form-data">
<file-input camera name="pic" id="pic">
<core-icon-button
icon="image:camera-alt">
</core-icon-button>
</file-input>
<br/>
<paper-input multiline id="last" floatingLabel label="Commentaire" ></paper-input>
<!-- -->
<br/>
<input type="submit" name="submitInfo">
</form>
</div>
So I added some attribute like maxRows="5" and rows="3" but no way my paper-input are always a single line area.
Instead of using a paper-input you should consider using paper-input-decorator with paper-autogrow-textarea
<div id="info">
<form is="ajax-form" action="../../../back/saveIMG.php" class="picturePost" method="post" enctype="multipart/form-data">
<file-input camera name="pic" id="pic">
<core-icon-button icon="image:camera-alt"></core-icon-button>
</file-input>
<br/>
<paper-input-decorator id="last" label="Commentaire">
<paper-autogrow-textarea rows="3" maxRows="5">
<textarea></textarea>
</paper-autogrow-textarea>
</paper-input-decorator>
<!-- -->
<br/>
<input type="submit" name="submitInfo">
</form>
</div>
Instead of paper-input try to use iron-autogrow-textarea:
<iron-autogrow-textarea id="last" rows="3" maxRows="5" bind-value="{{xyz}}">
</iron-autogrow-textarea>
Documentation: https://elements.polymer-project.org/elements/iron-autogrow-textarea

Validate polymer input on data observation

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