I have 4 links. Previously implemented as A tags.
My goal is to switch the request method (GET) with POST. Everything else have to remain the same!
The problem - it must be implemented using pure HTML - to be exact - no ajax and no window.open().
My solution is half way there. Hopefully to get a creative second half from you (impossible is also an answer)
Here is the (simplified) HTML:
<form
id = "resultsForm"
target="_blank"
action="http://example.com"
method="post"
>
<input type="hidden" name="data" value="someData">
<button type="submit" value="submit">
<p class="contextual"> title </p>
<span></span>
</button>
</form>
Now, it looks and feels like the old implementation and also sends POST requests
But - contrary to a link - a button can't be middle clicked or opened in new window when right clicking on it (by default...)
Can I somehow wrap it in an A tag to achieve the explained behavior without using js events or be conflicted with form subbmission?
Your help is really appreciated
No, this is impossible.
Anchor elements cannot contain interactive elements such as button elements.
Forms should be posted to the target window, so a normal click on the submit button, by virtue of the _blank value, should open an unnamed browsing context (a new window or tab).
Users should be accustomed to not middle-clicking on buttons, although there is a habit of developers to style links to look like buttons, throwing off users' expectations (end rant:)).
I am trying to embed a form on a email with all the fields (inputs and textarea) filled. The mail seems good, but I find two problems:
1) The form submits clicking every input... Is it be embedded?
2) The main problem is that when I send the email the form tag (on hotmail) and the attribute "name" of the inputs and textarea, disappear (hotmail and ¿thunderbird?).
I am using Contact Form-7 (the wordpress plugin), and I configure it like this:
<form action="http://panel.1clicklawyers.net/userQuestions" method="POST">
De: <input value="[your-name]" name="user_name" style="border:0px; width:auto;"><input value="[your-email]" name="user_mail" style="border:0px; width:auto;">
Asunto: <input value="[your-subject]" name="subject" style="border:0px; width:auto;">
<h2>Cuerpo del mensaje:</h2>
<textarea value="[your-message]" name="question" style="border:0px">[your-message]</textarea>
<input type="submit" value="Enviar" style="background:#D8531D; color:#333; pading:15px;">
</form>
--
Este e-mail se ha enviado vía formulario de contacto desde 1clicklawyers http://www.1clicklawyers.net
On the side of the receiver everything seems good, but the names of the inputs and textarea disappear, and on the server side if I make:
var_dump($this->input->post()); //Using codeigniter.
var_dump($_POST); //I am not sure if this could work.
The result is bool(false).
MORE TESTINGS
I was making more tests, using different accounts and clients. The result is the next:
Hotmail: The form tag disappear (and too the attribute name of inputs and text area).
Hotmail on the android outlook client: When I click on the submit input, it opens a tab of the browser, but it sends me to the url base (panel.1clicklawyers.net) without the last segment (userQuestions).
ThunderBird: Using a 1clicklawyers.net account. Clicking on the submit it opens a new tab on the browser, but the var_dump shows "bool(false)". Could it be because thunderbird removes the attribute name??
Web Mailer: Using the same account of 1clicklawyers.net, but on the web (using the 1&1 webmailer). I have no problem... I click on the submit and everything works fine.
Gmail:No problem. A confirm window ask you for permissions to send info, accepting I can see how the var_dump is working fine. OK.
Is there any way to make it works on all clients??
Possible solution
One thing that maybe can solve this is use a link with the parameters, something like:
Send
But the get method has a limit of chars, and the message could be too much long for it.
Any other solution??
Thanks!!
Its not possible to make a form within an email. Email clients dont support this feature.
Most email clients takes it as phishing so they dont support it.
You can see a list here of who support it. link
Is there a way to prevent the LastPass browser extension from filling out a HTML-based form with an input field with the name "username"?
This is an hidden field, so I don't want any software to use this field for their purposes:
<input type="text" name="username" id="checkusername" maxlength="9" value="1999" class="longinput" style="display:none">
The solution should not be like "rename the input field".
Adding
data-lpignore="true"
to an input field disabled the grey LastPass [...] box for me.
Sourced from LastPass.com
Two conditions have to be met:
The form (not the element) needs to have autocomplete="off" attribute
Lastpass user needs to have this option enabled:
(old) Settings > Advanced > Allow pages to disable autofill
(new) Account Options > Extension Preferences > Advanced > Respect AutoComplete=off: allow websites to disable Autofill
So this depends on both user and the developer.
What worked for me is having word "-search-" in the id of the form, something like <form id="affiliate-search-form"> - and lastpass doesn't add its elements onto the form inputs. It works with something simpler like <form id="search"> but doesn't work with <form id="se1rch">
I know I'm late to the party here, but I found this when I was trying to stop lastpass from ruining my forms. #takeshin is correct in that autocomplete is not enough. I ended up doing the hack below just to hide the symbol. Not pretty, but I got rid of the icon.
If any lastpass developers are reading this, please give us an attribute to use, so we don't have to resort to stuff like this.
form[autocomplete="off"] input[type="text"] {
background-position: 150% 50% !important;
}
I think lastpass honors the autocomplete="off" attribute for inputs, but I'm not 100% sure.
EDIT
As others have pointed out. this only works if the user has last pass configured to honor this.
For me worked either type=search which is kinda equal to text or using role=note.
You can check the LastPass-JavaScript but it's huge, may be you can find some workaround there, from what I saw they only check 4 input types, so input type=search would be one workaround:
!c.form && ("text" == c.type || "password" == c.type || "url" == c.type || "email" == c.type) && lpIsVisible(c))
Also those are the role-keywords they seem to ignore:
var c = b.getAttribute("role");
switch (c) {
case "navigation":
case "banner":
case "contentinfo":
case "note":
case "search":
case "seealso":
case "columnheader":
case "presentation":
case "toolbar":
case "directory":`
I checked LastPass' onloadwff.js, prepare for 26.960 lines of code :)
Add "search" to input id
<input type="text" name="user" id="user-search"/>
Bit late to the party but I have just achieved this with modifying the form with:
<form autocomplete="off" name="lastpass-disable-search">
I guess this fools lastpass into thinking that it's a search form. This does not work for password fields however! Lastpass ignores the name field in this case.
The only way I've managed to do this is to add the following directly at the top of the form:
<form autocomplete="off">
<div id="lp" ><input type="text" /><input type="password" /></div><script type="text/javascript">setTimeout(function(){document.getElementById('lp').style.display = 'none'},75);</script>
</form>
It causes a nasty flicker but does remove the autofill nonsense - though it does still show the "generate password" widget. LastPass waits until domready and then checks to see if there are any visible password fields, so it's not possible to hide or shrink the mock fields above.
This ES6 style code was helpful for me as it added data-lpignore to all my input controls:
const elements = document.getElementsByTagName("INPUT");
for (let element of elements) {
element.setAttribute("data-lpignore", "true");
}
To access a specific INPUT control, one could write something like this:
document.getElementById('userInput').setAttribute("data-lpignore", "true");
Or, you can do it by class name:
const elements = document.getElementsByClassName('no-last-pass');
for (let element of elements) {
element.setAttribute("data-lpignore", "true");
}
For this latest October 2019 buggy release of Lastpass, this simple fix seems to be best.
Add
type="search"
to your input.
The lastpass routine checks the type attribute to determine what to do with its autofill, and it does nothing on this html5 type of "search." This fix is mildly hacky, but it's a one line change that can be easily removed when they fix their buggy script.
Note: After doing this, your input might appear to be styled differently by some browsers if they pick up on the type attribute. If you observe this, you can prevent it from happening by setting the browser-specific CSS properties -webkit-appearance and -moz-appearance to 'none' on your input.
None of the options here (autocomplete, data-lpignore etc.) prevented LastPass from auto-filling my form fields unfortunately. I took a more sledge-hammer approach to the problem and asynchronously set the input name attributes via JavaScript instead. The following jQuery-dependent function (invoked from the form's onsubmit event handler) did the trick:
function setInputNames() {
$('#myForm input').each(function(idx, el) {
el = $(el);
if (el.attr('tmp-name')) {
el.attr('name', el.attr('tmp-name'));
}
});
}
$('#myForm').submit(setInputNames);
In the form, I simply used tmp-name attributes in place of the equivalent name attributes. Example:
<form id="myForm" method="post" action="/someUrl">
<input name="username" type="text">
<input tmp-name="password" type="password">
</form>
Update 2019-03-20
I still ran into difficulties with the above on account of AngularJS depending upon form fields having name attributes in order for ngMessages to correctly present field validation error messages.
Ultimately, the only solution I could find to prevent LastPass filling password fields on my Password Change form was to:
Avoid using input[type=password]entirely, AND
to not have 'password' in the field name
Since I need to be able to submit the form normally in my case, I still employed my original solution to update the field names 'just in time'. To avoid using password input fields, I found this solution worked very nicely.
Here's what worked for me to prevent lastpass from filling a razor #Html.EditorFor box in Chrome:
Click the active LastPass icon in your toolbar, then go to Account Options > Extension Preferences.
On this screen check "Don't overwrite fields that are already filled" (at the bottom)
Next, click "advanced" on the left.
On this screen check "Respect AutoComplete=off: allow websites to disable Autofill".
I did not need to do anything special in my ASP cshtml form but I did have a default value in the form for the #Html.EditorFor box.
I hope this helps and works for someone. I could not find any Razor-specific help on this problem on the web so I thought I'd add this since I figured it out with the help of above link and contributions.
For someone who stumbles upon this - autocomplete="new-password" on password field prevents LastPass from filling the password, which in combination with data-lpignore="true" disables it at all
Try this one:
[data-lastpass-icon-root], [data-lastpass-root] {
display: none !important;
}
Tried the -search rename but for some reason that did not work. What worked for me is the following:
mark form to autocomplete - autocomplete="off"
change the form field input type to text
add a new class to your css to mask the input, simulates a password field
css bit: input.masker {
-webkit-text-security: disc;
}
Tried and tested in latest versions of FF and Chrome.
type="hidden" autocomplete="off"
Adding this to my input worked for me. (the input also had visibility: hidden css).
Update NOV 2021
I have noticed that all LastPass widgets are wrapped in div of class css-1obar3y.
div.css-1obar3y {
display: none!important;
}
Works perfectly for me
None of these work as of 10/11/2022.
What I did was add the following to a fake password field
<input id="disable_autofill1" name="disable_autofill1"
style="height:0; width:0; background:transparent;
border:none;padding:0.3px;margin:0;display:block;"
type="password">
This seems to be enough to minimize the size this element takes on screen (pretty much 0 for me) while still not triggering last pass's vicious algorithm. Put it before the real password field.
I'm sure a variant of this could be used to fool last pass for other fields where we don't need autofill or to suggest a new password.
Thanks for spending time to read this
I have a form where is call a JS function to copy the html content of a DIV to a hidden form field so that I can submit this with the form. It works fine on desktop webkit broswers and also on mobile safari on iPad. However when I run the application in fullscreen mode (by saving a shortcut on home screen), this does not work.
Here's my code
JS function:
function update_script_in()//copies scripts and submits the form
{
$("#script_in").html($("#scriptContent").html());
$('#ResiForm').submit();
}
form submission:
<input type=submit value="Submit" onclick="update_script_in()">
Thanks for your help
This is quite old, but after googling around to solve the same issue for me, I have not found a solution. Looks like some weird behaviour from iPad (easily reproducible, no way to fix, at least that I found): the target input field gets changed indeed, but the posted value is the original one (???)
So just in case a workaround is useful to somebody, instead of applying the changes from the contenteditable div on form submit, I apply the changes whenever the div is changed (no on change event for contenteditable divs, so really it is done on blur event):
<div id="editor_inline_core_body" class="inputbox editor-inline" contenteditable>[initial value here]</div>
<input type="hidden" id="jform_core_body" name="jform[core_body]" value="[ initial value here]" />
<script>
jQuery('#editor_inline_core_body').blur(function() {
var value = jQuery('#editor_inline_core_body').html();
jQuery('#jform_core_body').val(value);
return true;
});
</script>
Less efficient, but at least it works. If you want a bit more of efficiency, you can check old and new values using also focus event, but at least I do not think it is a big deal or worth the added complexity.
<input type=image ...> is not the way to go because it submits the x,y coordinates.
When I click on an icon, I want to submit as POST or PUT, so there should be some form, input actions.
<form action="" method="PUT" name="abc_table_form">
display icons
</form>
What is the right way to do it?
Thanks.
<table>
<row1> <form action="http://google.com/123/"> <button> icon1 </button></form> </row1>
<row2> <form action="http://google.com/456/"> <button> icon1 </button></form> </row2>
</table>
The form adds extra space to the table. It looks ugly. The action in the form is different, and I believe <button> here is based on the action of form. What is the right way to deal with this?
Forms only support POST and GET.
An image input will submit a POST form (although since they are designed to be used as a server side image map, they aren't really appropriate unless you want to submit the coordinates on the image).
<button type="submit"> <img src="..." alt="Submit"> </button> is the more semantic way to submit the form using an image (although some versions of Internet Explorer will submit an odd value in response to this).
If you want to make HTTP requests using other methods (i.e. PUT) from a browser then you need to use XMLHttpRequest and construct it using JavaScript. Browser support for this is a bit variable.
<table>
<tr><td> <form action="..." method=POST><button><img src=test.png alt=Test></button>
<input type=hidden name=foo value=bar></form>
<tr> ...
</table>
That is, wrap each image in a button and wrap the button in a form of its own. Even if the forms all have the same action attribute, you need separate forms to pass different data (different values for the parameter foo in the example) in a robust pure-HTML way. The reason is that you do this using hidden fields, and they relate to the enclosing form.
For styling, consider these:
form { display: inline; }
button { border: none; padding: 0; }
They will make the images appear as such, with no hint of their being clickable, so you should probably explain in prose on the page what they do.
You cannot make a form wrap a table row (except of course if it’s a one-row table). You would just have to include the various parameters separately inside each form (there’s no problem in having identical input type=hidden elements inside different forms). It’s dull, but you’re probably generating the page programmatically anyway, and programs love to do dull things.