Noob at polymer here, so please bear with me.
I'm trying to learn how to create a form, one that requires the user to input text into a textbox, before hitting "Submit". Should the user hit "Submit" without anything in the textbox, the textbox is highlighted red, and displays an error message, etc.
Here's my code (no validation yet) so far:
<dom-module id="accountability-ticket">
<template>
<paper-dialog with-backdrop entry-animation="scale-up-animation" exit-animation="fade-out-animation" id="diagTicket">
<h2>I Own It Ticket</h2>
<div>
<paper-input-container id="gcashDeco" required error="GCash Ref. Required">
<input id="gcashText" is="iron-input">
</paper-input-container>
<div class="ctrlButtons flex">
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button on-click="confirmClick">Submit</paper-button>
</div>
</div>
</paper-dialog>
</template>
</dom-module>
<script>
Polymer({
is: "accountability-ticket",
confirmClick: function(event){
console.log(event);
var gCashDeco = document.getElementById('gcashDeco');
var gCashText = document.getElementById('gcashText');
}
});
</script>
I've been reading the Polymer documentation, and so far came up with two things:
<paper-input> doesn't validate, per se, according to v0.5 - It must be wrapped in <paper-input-decorator> first.
Version 1.0 is even less clear than that, with <paper-input-container> instead of <paper-input-decorator>, and mixed tags in the demo pages.
Given that I want to stick with the latest version (v1.0), what do I need to add to my code to get it to check if the textbox is empty, and display an error message if it is?
Thanks.
Yep, the Polymer docu is somewhat confusing, but as a general rule of thumb: always have a look at the behaviours the element is equiped with.
So, paper-input (in 1.0) comes with PaperInputBehavior and this implies that you can simply write the following:
<paper-input label="Input label" required error-message="Field required!"></paper-input>
<paper-input label="Input label" minlength="4" maxlength="10" auto-validate></paper-input>
<paper-input label="Input label" pattern="MY_REGEX" auto-validate></paper-input>
<paper-input label="Input label" validator="myvalidator"></paper-input>
auto-validate makes the input – of course – validate as it is being typed into. myvalidator must be an element implementing the IronValidatorBehavior and inserted somewhere on the page. If you don't want the fields to be auto-validating or wanna do it yourself, call validate() on that field or set the invalid-flag and the error message will be shown. You can even adjust the message programmatically.
While the validator seems to be useful, I've found it to be simple enough to test the inputs directly. This will do what you need:
...
<div>
<paper-input-container id="gcashDeco">
<paper-input-error>Field is empty</paper-input-error>
<input id="gcashText" is="iron-input" value="{{gcashInput::input}}">
</paper-input-container>
<div class="ctrlButtons flex">
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button on-tap="confirmClick">Submit</paper-button>
</div>
</div>
...
...
Polymer({
is: "accountability-ticket",
confirmClick: function() {
if (this.gcashInput == null)
{
//show error
this.$.gcashDeco.invalid = true;
}
}
This paper-input-error element is referenced by the id of whatever paper-input-container it is inside of. Setting it's invalid property to true shows the error, and false hides it.
<paper-input-error>Field is empty</paper-input-error>
This next snippet binds the field's input value to a variable this.gcashInput which you can access inside confirmClick or any other method.
{{gcashInput::input}}
As a final note, getting id's of elements inside of your Polymer element is done like this:
this.$.gcashDeco
Not the way you would with vanilla Javascript:
document.getElementById('gcashDeco');
The latter, vanilla JS way, would search the main DOM, not the Shadow DOM where your element resides. So, use document.getElementById() if you need to search the DOM, and use this.$.elemendId if you need to search your element for an id.
Related
I am using react-final-form and TextareaAutosizein my example .I am trying to get the value of text-area but not able to do that.
I am able to get value of input field but not textarea
here is my code
https://codesandbox.io/s/react-final-form-simple-example-rd3rc
<div>
<label>Text area Name</label>
<Field
component={TextareaAutosize}
type="textarea"
name="operatingPinCode"
placeholder="Notes"
label="About"
/>
</div>
API link
https://final-form.org/docs/react-final-form/examples/simple
https://www.npmjs.com/package/react-textarea-autosize
Your final-form code is working fine. The problem I think lies with TextAreaAutosize, since it doesn't know how to pass data directly to your form. So you might need to add a handler on that field for the onChange event.
Based on the final form documentation, this code sample below seems to work just fine:sandbox-code Just checkout the second attempt section.
You can get value by this pop:
`onChange={(event) => {
console.log(event.target.value)
}}`
I have an assigment, I don't understand it as i'm beginner.
Create a javascript script which will modify the DOM of a web-page.
The script must add a form with 4 elements: name, email, message(textarea) and submit button. Each element must contain a label with its name. For example, name field is input type, you must create still from javascript a label named "Name", same for the others except submit button. Also, each laber must have a colour added from javascript(red, blue, yellow). When you click submit button, it must have an alert: "Are you sure you want to send this message?".
Thank you in advance.
I need to use only Javascript for this and I can only find answers
that use HTML
Web applications use HTML to contain, render and display elements in the viewport (browser window).
Where do you intend to render the form and capture user input?
You can build the DOM structure using JavaScript alone, however, there will still be a HTML file, which will contain the HTML elements created using javascript.
Please provide clarity as to your desired goal and what type of application this is being used for.
My gut feeling, for simplicity, is that you will require to use HTML as your template file, and JavaScript for interactivity and manipulation of the HTML file.
The script must add a form with 4 elements: name, email, message(textarea) and submit button. Each element must contain a label with its name. For example, name field is input type, you must create still from javascript a label named "Name", same for the others except submit button. Also, each laber must have a colour added from javascript(red, blue, yellow). When you click submit button, it must have an alert: "Are you sure you want to send this message?". That's it.
This is a start, just to try to help you to understand the concepts.
I do, however, implore you to go and explore with confidence - you won't break anything, just give it a try!
I recommend you try taking a look at some of these articles, have a look at my (very rudimentary) code below, and feel free to ask any questions you have!
JS:-
W3 Schools JS and HTML reference
HTML:-
W3 Schools: HTML Forms
W3 Schools: Label Tag
W3 Schools: Text Area Tag (This has been left out of the solution on purpose - give it a try!!)
(function divContent() {
//Create a 'div' as a container for our form
var div = document.createElement('div');
// Perhaps you could style it later using this class??
div.className = 'row';
// I have used backticks to contain some more normal looking HTML for you to review, it's not complete though!!
div.innerHTML = `<form action="javascript:" onsubmit="alert('Your message here, or, run a function from your JavaScript file and do more stuff!!')">
<label for="name">Name:</label>
<input type="text" name="name" id="name" value="Mickey Mouse">
<br>
<label for="email">Email:</label>
<input type="text" name="email" id="email" value="mickey#mouse.co.uk">
<br><br>
<input type="submit" value="Submit">
</form> `
// Get the body of the document, and append our div containing the form to display it on page
document.getElementsByTagName('body')[0].appendChild(div);
}());
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="CoderYen | Wrangling with 0s & 1s Since The Eighties">
</head>
<body>
</body>
</html>
I've a form with three fields, which are rendered via the jinja2 template & the fields are part of a Django ModelForm. The fields are: CharField, FileField, and Textarea.
And, I've also a textarea like <div> element which exactly works like Stackoverflow's editor, omitting some options like <code>, <image> ...
But, it's totally JavaScript based. Which when rendered on the page disabling that existing TextArea that was rendered from the ModelForm. As, I defined on the page...
<script>
$(document).ready(function () {
$('#txtArea').TxtEdtr();
});
</script>
I've mentioned both the element's IDs same, to always render the second textarea by overriding the first one. And, by hiding that element by - display: none.
And to pass the context of the 2nd created textarea to that modelform textarea, I've used:
$('.myeditor').keyup(function () {
$('#txtArea').innerHTML = $('.myeditor').html();
});
By looking at the browser console I can see that keyup is working but, the context or the 1st element isn't affected. And, as it's a required element I can't submit the form also.
For example, I want to pass that html context as a string to that ModelForm's textarea element before the form is submitted:
$('#txtEditor').innerHTML = $('.editor').html();
result to pass: "<span style=\"font-style: italic;\">hi there ...<br></span>"
which is shown to the console while I ran that code, but not able to pass.
The DOM structure:
<div class="form-group">
<!-- model form element -->
<label for="txtEditor">Body of article</label>
<textarea name="details" cols="40" rows="10"
id="txtEditor" class="form-control" required="" style="display: none;">
</textarea>
<!-- after rendering -->
<div class="row-fluid main ted">
<div id="menubar_txtEditor" class="row-fluid menu-bar">
<!-- menubuttons are displayed here -->
...
...
</div>
<div class="editor" name="details" style="overflow: auto;" contenteditable="true">
<!-- portions here dynamically added if textarea has
any content inside -->
<span style="font-style: italic;">hi there ...<br></span>
</div>
</div>
You can do something like this:
// add data to the editor
$('.editor').prepend($('#txtEditor').val());
// initialize TxtEdtr
window.quill = new Quill('.editor', {
theme: 'snow'
});
// Update the model textarea value after submit
$('form').on('submit', function() {
$('#txtEditor').val(quill.root.innerHTML);
});
Vist jsfiddle, for more.
check network on jsfiddle, it's submitting the desired data.
i need to get the value of some paper-input fields inside a paper-dialog after a press on a "ok" paper-button.
I have:
...
<paper-dialog id="notediag" heading="Add Note" transition="paper-dialog-transition-center">
<paper-input id="dialog-add-note-header" label="Header"
value="{{valHeader}}"></paper-input>
<br>
<paper-input id="dialog-add-note-text" label="Text"></paper-input>
<paper-button label="Cancel" dismissive></paper-button>
<paper-button label="Ok" affirmative default
on-click="{{addNote}}"></paper-button>
</paper-dialog>
...
<script>
Polymer('note-list',{
addNote: function(e, detail, sender)
{
var header=???
console.log("add note "+header);
}
});
</script>
I tried multiple ways to find the values of the paper-input fields but not found a propper way to do it. e.target.templateInstance does not work. A call to document.querySelector('#dialog-add-note-header') results in a null.
Any ideas?
Thanks for you help.
Stefan
{{valHeader}} creates a property inside your note-list elelemt which is bound to the input value of the paper-input.
You can access it with
var header = this.valHeader
document.querySelector('#dialog-add-note-header') doesn't work, because the paper-input element is inside the shadow DOM of the paper-dialog. But you can use Polymer's node finding utility this.$.dialogAddNoteHeader (rename your id attribute to contain no dashes) to access the input element directly.
Please check the link below:
http://jsfiddle.net/cT9kg/4/
As you can see its a search field with a button.
If you have trouble understanding what I mean below please just look at the "Title" input on the Ask a question page.
The input has autofocus on.
BUT
How can I have it so text is already in the input with autofocus on but as soon as someone types into the input the text disappears.
AND
When someone has entered text in the input but then deletes it, it goes back to the way it was at the beginning: on focus with text in it instructing the person what to type in the input.
Thanks!
James
You could define the default value.
On focus - empty value, if the value is default value.
When the element lose the focus, You could check, if it's empty, and if Yes - restore the default value.
I've tested this as working, just make sure you put the <script> part just before the </body> tag.
<input type="text" class="input1" autofocus="focus" id="search" value="Type here..." onKeyPress="checkValue()" />
----
<script type="text/javascript">
var searchEl = document.getElementById('search');
var defaultValue = searchEl.value;
function checkValue() {
if (searchEl.value == defaultValue) {
searchEl.value = "";
}
}
</script>
You could use the HTML placeholder attribute, but in the majority of browsers that won't achieve quite what you are after: as soon as the input is focused, the placeholder text disappears.
For functionality akin to iOS (found on sites such as Twitter as well), you need to use JavaScript. One example can be seen online here.
This similar question (and this one) have some useful alternatives and code examples.
You're correctly using autofocus, which is fine but has patchy browser support. You can add in a JS fallback, like this (taken from here):
<script>
window.onload = function () {
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("s").focus();
}
}
</script>
Wow. I tried digging around in the source code for the Ask a question page. Talk about convoluted.
Here is the CSS File.
While it seems the relevant bits are thus, they don't seem to DO much more than format (other than the edit-field-overlay trick.
.form-item {padding:10px 0px 15px 0px;}
.ask-title {margin-bottom:-15px;margin-top:-10px;}
.ask-title-table {width:668px;}
.ask-title-field {width:610px;}
.ask-title-cell-value {padding-left:5px;}
.edit-field-overlay {display:none;}
HTML (some TD tags removed):
<div class="form-item ask-title">
<table class="ask-title-table">
<tr>
<td class="ask-title-cell-value">
<input id="title" name="title" type="text" maxlength="300" tabindex="100" class="ask-title-field" value="">
<span class="edit-field-overlay">what's your programming question? be specific.</span>
</td>
</tr>
</table>
</div>
But I totally could NOT figure out the relevant Javascript bits. As there are NO onEvent handlers for this form that I can see, the only reference to this field (title) would be in the prepareEditor function.
Anybody care to try and explain it to a relative newbie??