Polymer 1.0
I have a form which the user fills out text fields, radio buttons, etc. They also upload photos.
Since iron-form does not support mutlipart/form-data, I am using the iron-form presubmit event feature/workaround described here
this.formData.addEventListener('iron-form-presubmit', ()=> {
var bar = new FormData();
bar.append('listingImage', this.binaryImages[0]);
this.formData.request.body = bar;
this.formData.request.contentType = undefined;
});
This works and I am able to successfully upload images to my server using form data. However, I loose all the other form data that would normally be in the body...the text fields, radio button selections, etc.
Is it possible with iron-form to retain existing form data and attach the images in this workaround?
You are creating a new FormData in which you add the image to and then you overwrite the original request body (formData). You should just be appending the image to the existing request body instead of creating a new one.
this.formData.addEventListener('iron-form-presubmit', ()=> {
this.formData.request.body.append('listingImage', this.binaryImages[0]);
});
Related
yes, it does.
Is this any where documented?
Background: with my RoR Helper I made an error and created Links with data-method='GET'. Everthing still worked, only that I got a "Resend Data Warning" when refreshing the page ...
Now I found this strange behavior: data-method='GET'
Works with FF, IE, Chrome
Is this a standard? if yes it makes the Rails button_to (with all the form around) obsolette ...
edit: I forgott to say: _method is made out of data-method and this is as data posted, if i change the 'GET' to a - lets say 'PUT' I get RoR routing errors
an other edit: OK, I try too explain with a better example:
the following line
"<a data-method='PUT' href='?'>post</a>"
creates a POST request with _method='PUT' as data
no it is not a standard, as long as you say that RAILS Jquery_ujs.js is not a standard.
Rails/Jquery is doing this Magic:
if you take a look here all the magic is gone ...:
$.rails = rails = {
// Link elements bound by jquery-ujs
linkClickSelector: 'a[data-confirm], a[data-method], a[data-remote], a[data-disable-with], a[data-disable]',
// Button elements bound by jquery-ujs
buttonClickSelector: 'button[data-remote], button[data-confirm]',
// Select elements bound by jquery-ujs
inputChangeSelector: 'select[data-remote], input[data-remote], textarea[data-remote]',
// Form elements bound by jquery-ujs
formSubmitSelector: 'form',
// Form input elements bound by jquery-ujs
formInputClickSelector: 'form input[type=submit], form input[type=image], form button[type=submit], form button:not([type])',
// Form input elements disabled during form submission
disableSelector: 'input[data-disable-with]:enabled, button[data-disable-with]:enabled, textarea[data-disable-with]:enabled, input[data-disable]:enabled, button[data-disable]:enabled, textarea[data-disable]:enabled',
// Form input elements re-enabled after form submission
enableSelector: 'input[data-disable-with]:disabled, button[data-disable-with]:disabled, textarea[data-disable-with]:disabled, input[data-disable]:disabled, button[data-disable]:disabled, textarea[data-disable]:disabled',
// Form required input elements
requiredInputSelector: 'input[name][required]:not([disabled]),textarea[name][required]:not([disabled])',
// Form file input elements
fileInputSelector: 'input[type=file]',
// Link onClick disable selector with possible reenable after remote submission
linkDisableSelector: 'a[data-disable-with], a[data-disable]',
// Button onClick disable selector with possible reenable after remote submission
buttonDisableSelector: 'button[data-remote][data-disable-with], button[data-remote][data-disable]',
i have an auto refreshed page with one text input. If i write text on that text input and when the page refreshed, the text still there and the cursor still the end of that text. but if i add autocomplete = off in textbox style it won't work. i test this using mozilla 31.
But when i test open using chrome 36, the text i write before is disappeared after the page refreshed (with or without autocomplete = off)
here is my code
<script type="text/javascript">
$(function () {
var SearchInput = $('#text');
var strLength = SearchInput.val().length;
SearchInput.focus();
SearchInput[0].setSelectionRange(strLength, strLength);
});
#Html.TextBox("text", null, new { style = "width: 800px"})
This is default behavior by the browser from my experience only with FireFox.
If you want to make sure the data is always in the textbox on refresh, then you will need to do something like create a javascript cookie with the textbox data inside onChange of the textbox or so, and then append that cookie data inside the textbox in the page onLoad event. You can also add a querystring to the page upon refresh, or use HTML5 storage, if you do not want to write a cookie.
I have the following table where a user can choose some quanitity for a corresponding item.
What is the simplest way to send this data to the server without using JavaScript?
Right now I am creating a data-name with item's name on each quantity input field. Then grabbing all those input fields, followed by the $.post request (not shown here).
var items = [];
var $quantities = $('.quantity');
$.each($quantities, function(index, input) {
items.push({
name: $(input).data('name'),
quantity: $(input).val()
});
});
I am curious to know if there is a more elegant approach to do this with just using the HTML form element.
Edit: I am free to choose whatever model I see fit. No constraints there since this is a fresh from the start personal project.
You could create a traditional HTML form.
<form method="post" action="/url/to/submit/to.php" id="orderform">
<table>
... all your order table code ...
<input type="text" name="cucumber" value="0">
... and all your input code ....
... etc ...
</table>
</form>
Then have the action URL be a server-side script that processes the form data and returns an appropriate webpage. Note: this will require the webpage to reload.
The nice thing about JavaScript is you can submit the form data and not have to reload the webpage.
Also note, you can get your HTML form data using jQuery very easily. In my above example:
var formData = $('#orderform').serializeArray();
Now use can use formData in your $.post() script.
If you put the item names into hidden input fields in the form, you can use:
$('#formID').serialize()
to get all the inputs in one step, and pass this as the data argument to $.post().
In this way you can send form data using ajax
$.ajax({
url:'TarfetPage.jsp',
type:'POST',
datatype:'text',
data:$('#formID').serialize(),
success:function(data)
{
$("#divId").html($.trim(data));
}
});
I have an HTML form where I have two fields: username and password.
Now, I want that "Username" and "Password" appear inside the fields to indicate the users what to put in. Currently I'm assigning these using the value= option, however if I submit the form, "Username" and "Password" get submitted too.
Is there a clean way how to make the text appear without including it in the submit if the submit is clicked.
Thanks!
Krt_Malta
Ok, this is basically how I do it. I place the labels inside the fields, then when the page loads, I store the labels in a hidden manner using .data(). When the form gets submitted, if it contains the same thing as in .data(), then I clear it (or you could disallow submission if you want the field to be filled)
$(document).ready(function(){
// this will make sure we always remember what the values were:
$("form.myform input[type='text']").each(function(){
// I like to add a class as well, so I can make the label text in a lighter color
if ($(this).val().length > 0) {
$(this).data('label', $(this).val()).addClass('label');
}
});
// this will clear the text when the input receives focus:
$("form.myform input[type='text']").focus(function(){
if ($(this).data('label') == $(this).val()) {
$(this).val('').removeClass('label');
}
});
// this will make sure the fields don't get submitted like that, but won't stop
// the form from being submitted....
$("form.myform").submit(function(){
$(this).find("input[type='text']").each(function(){
if ($(this).val() == $(this).data('label')) {
$(this).val('');
}
});
});
I haven't run this or tested in a browser, but in theory this should work (I've done this before)
Also, we're not filling the box with the label text again, once it's lost focus if the user didn't edit the text....
In HTML5, this feature is provided and is called a placeholder. Otherwise you typically use a Javascript library.
Just don't include it in your php/asp script with which you submit the form.
--edit--
Just re-read your question. I think you mean that people are just coming onto the page and clicking submit while the default values are in there, yeah?
If you use validation (javascript or php/asp) to disallow submission of 'username' and 'password' for these fields they won't be allowed to submit the form without changing the values within.
Is that the kind of thing you meant?
How to make tabs on the web page so that when click is performed on the tab, the tab gets css changed, but on the click page is also reloaded and the css is back to original.
dont use the jquery :D
all of what you needs a container, a contained data in a varable and the tabs
the container is the victim of the css changes.
the tabs will trigger the changing process.
if you have a static content, you can write this into a string, and simply load it from thiss.
if you have a dinamically generated content, you need to create ajax request to get the fresh content, and then store it in the same string waiting for load.
with the tabs you sould create a general functionusable for content loading.
function load(data) {
document.getElementById("victim").innerHTML = data;
}
function changeCss(element) {
//redoing all changes
document.getElementById("tab1").style.background="#fff";
document.getElementById("tab2").style.background="#fff";
element.style.background = "#f0f";
}
with static content the triggers:
document.getElementById("tab1").onclick = function() {load("static data 1");changeCss(document.getElementById("tab1"))};
document.getElementById("tab2").onclick = function() {load("static data 2");changeCss(document.getElementById("tab2"))};
if you want to change the css, you need another function which do the changes.
i tell you dont use the jquery because you will not know what are you doing.
but thiss whole code can be replaced by jquery like this:
$("tab1").click(function(e) {
$("#tab1 | #tab2").each(function() {
$(this).css("background","#fff"); });
$(this).css("background","#00f");
$("#victim").append("static content 1");
});
$("tab12click(function(e) {
$("#tab1 | #tab2").each(function() {
$(this).css("background","#fff"); });
$(this).css("background","#00f");
$("#victim").append("static content 2");
});
if you know how javascript works then there is noting wrong with the jquery, but i see there is more and more people who just want to do their website very fast and simple, but not knowing what are they doing and running into the same problem again and again.
Jquery UI Tabs:
http://jqueryui.com/demos/tabs/
Have a <A href tag around the "tab" and use onClick to fire some Javascript that changes the CSS.
If you do not want use Jquery for creating of UI tabs, please see my cross-browser JavaScript code: GitHub.
You can use different ways to create tabs and tab content.
Tab content can added only when tab gets focus.
You can remember selected tab. Selected tab opens immediatelly after opening of the page.
You can create tabs inside tab.
Custom background of the tab is available.
Example: Tabs