I have an ordinary sl-input in a form on a page
<sl-input name="email" type="email" placeholder="Email address"></sl-input>
I want to change the name property of the sl-input using JavaScript.
document.querySelector('sl-input').name = "new-email"
The above code seems to change the name property of the input field in the shadow DOM, but the sl-input's name property remains unchanged. If I then submit the form, the payload data refers to email, not new-email.
How can I change the name property of an sl-input using JavaScript?
The name attribute can be updated using setAttribute.
document.querySelector("sl-input").setAttribute("name", "new-email")
Related
Here I am console.log() these values on app.js getting value from my page.ejs file, all the console.log() is working except req.body.name.
Here is the ss of page.ejs file. I am not able to get how to send back the value of <%= name %> back of my nodejs server. I have tried using the button and span tag but did not get the result.
Please insert your code. Its easier to help when you insert code instead of image links. Read how to ask a question here
You just need to add value attribute in your button and change its name.
<button name="name" value="<%= name %>"><%= name %></button>
I have 2 PnP Taxonomy picker control in SharePoint online in my page. I initialize these control as below
$('#taxPickerKeywords_' + p).taxpicker({
isMulti: false,
allowFillIn: true,
useKeywords: true,
termSetId: 'GUID'
}, context);
Now I need to set the value of second control with first control value. I can get the value from first control but unable to set second control value using .val() in jQuery.
After I initialize my taxpicker the HTML looks like below
<div class="cam-taxpicker">
<div class="cam-taxpicker-editor" contenteditable="true"></div>
<div class="cam-taxpicker-button"></div>
<input type="hidden" id="taxPickerKeywords_0">
</div>
<div class="cam-taxpicker-suggestion-container"></div>
Any idea or suggestion for setting the value for this control?
I did a workaround for this. The value was getting set using $('#tax_2').val(value); but it was not appearing in the editor. So I updated its value and then set the editor element as in the first tax picker.
//setting the value of 2nd control
$('#tax_2').val(value);
//cloning the elements of 1st control's editor
var clonedVar = $('#tax_1').parent().find('.cam-taxpicker-editor').children().clone();
//emptying the 2nd control's editor if any other value is present
$('#tax_2').parent().find('.cam-taxpicker-editor').empty();
//appending the editor element to 2nd control
$('#tax_2').parent().find('.cam-taxpicker-editor').append(clonedVar);
This worked for me as I was copying the value already present in one taxonomy picker. I am also able to read these values and save them to backend. User can even change the value after copy.
I'm using Capybara with Cucumber.
The webpage I'm testing contains many email fields throughout but the ID's and labels for the input field change depending on which page you're on.
What I'm trying to do is create an generic reference to any email field so that one fill in method will work for all pages.
When inspecting the input fields, I can see they are of type='email
The full html:
<input id="privatekeeper_email_email" name="privatekeeper_email.email" value="" data-validity-message="Must be a valid email address" no_optional_label="true" type="email" autocomplete="off" maxlength="254">
In my block below you should be able to grasp what I'm tring to do:
email_fields = all('input[type="email"]')
fill_in(email_fields[0], with: text)
fill_in(email_fields[1], with: text)
end
When I run this, I get the following error:
Capybara::ElementNotFound: Unable to find field #<Capybara::Node::Element tag="input" path="/html/body/div[3]/div/div[2]/form/div/div[2]/div[6]/div/div[2]/div/div/div/div[2]/input">
Reading the Capybara docs, I can see that fill_in responds to ID, name or Label so my reference might not work. Is there anyway I could get this block to work?
Like I said, the Id's and labels are not consistent throughout the user journey
Since you've already found the element you need to call #set on it instead of using fill_in
email_fields[0].set(text)
I have already posted one question on the same issue. But I'm not able to solve my issue and not able to move forward in my task.
I have created a editable portlet where in the configuration page I am showing he dynamic questions which are fetching form the database. So for the same reason I am iterating my array list and creating the input fields dynamically as follows,
Iterator<String> itr = al.iterator();
while(itr.hasNext())
{
String columnVal = itr.next();
columnVal = columnVal.trim().toLowerCase();
%>
<aui:input name="<%=columnVal%>" type="checkbox" />
<%
}
With the above code the fields are creating dynamically with proper labels and seems to be fine.
When I try to save these dynamic field values in the preference I changed my input statement syntax to the proper way by adding the prefix as "preferences--" and suffix as "--" as shown below,
<aui:input name="preferences--<%=columnVal%>--" type="checkbox" />
I don't know what syntax is wrong in the above statement. But I am not able to see the label names in UI. instead of showing the proper label names for all labels it is showing <%=columnVal%> on UI.
I am using default configuration action class in my liferay-portlet.xml as mentioned below,
<configuration-action-class>com.liferay.portal.kernel.portlet.DefaultConfigurationAction</configuration-action-class>
Can any one please correct my syntax and help me to save my dynamic field values in the preferences.
From reference link's comment section:
According to JSP 2.1 Specification multiple expressions and mixing of
expressions and string constants are not permitted.
So you have to use below code in your case:
<aui:input name='<%="preferences--"+columnVal+"--"%>' type="checkbox" />
How does form autofill work in modern web browsers? Which are the most common techniques used in browsers that implement automatic form filling?
-- EDIT --
The question is not about autocomplete, is about form autofilling, which cares not only about the previously inputted values but also considers the meaning and structure of the field to be completed. Google Chrome implementation, for example, tries to parse the inputted fields to guess their type and structure. Or at least is that what I understood from the code linked above.
Take a look over at this answer by kmote.
Highlight is that the browser looks at the field's name tag and makes an educated guess at what sort of data would go there (regex matching is a good naive way to do this). Chrome is working to get some sort of standardization so that this isn't quite as hit-or-miss.
Different technologies and browsers use various methods to both calculate what to display as well as how they display it, but some sources to check out are:
Google's high-level description
How to implement it with jQuery (note that there is a jQuery autocomplete plugin as well).
If you are looking into implementing it (or just using it) yourself, I would highly recommend taking a look at the plugin.
The first element of answer is simply the non standard HTML form's autocomplete attribute that was introduced with Internet Explorer a few years ago.
Ironically, you can read a good history an introduction on mozilla site here: The autocomplete attribute and web documents using XHTML
This question is pretty old but I have an updated answer for 2017!
In order to trigger autocomplete, all you have to do is name it right.
The following answer is from my original answer from here: https://stackoverflow.com/a/41965106/1696153
Here's a link to the official current WHATWG HTML Standard for enabling autocomplete.
Google wrote a pretty nice guide for developing web applications that are friendly for mobile devices. They have a section on how to name the inputs on forms to easily use auto-fill. Eventhough it's written for mobile, this applies for both desktop and mobile!
How to Enable AutoComplete on your HTML forms
Here are some key points on how to enable autocomplete:
Use a <label> for all your <input> fields
Add a autocomplete attribute to your <input> tags and fill it in using this guide.
Name your name and autocomplete attributes correctly for all <input> tags
Example:
<label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA"
placeholder="Full name" required autocomplete="name">
<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA"
placeholder="name#example.com" required autocomplete="email">
<!-- note that "emailC" will not be autocompleted -->
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
placeholder="name#example.com" required autocomplete="email">
<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
placeholder="+1-555-555-1212" required autocomplete="tel">
How to name your <input> tags
In order to trigger autocomplete, make sure you correctly name the name and autocomplete attributes in your <input> tags. This will automatically allow for autocomplete on forms. Make sure also to have a <label>! This information can also be found here.
Here's how to name your inputs:
Name
Use any of these for name: name fname mname lname
Use any of these for autocomplete:
name (for full name)
given-name (for first name)
additional-name (for middle name)
family-name (for last name)
Example: <input type="text" name="fname" autocomplete="given-name">
Email
Use any of these for name: email
Use any of these for autocomplete: email
Example: <input type="text" name="email" autocomplete="email">
Address
Use any of these for name: address city region province state zip zip2 postal country
Use any of these for autocomplete:
For one address input:
street-address
For two address inputs:
address-line1
address-line2
address-level1 (state or province)
address-level2 (city)
postal-code (zip code)
country
Phone
Use any of these for name: phone mobile country-code area-code exchange suffix ext
Use any of these for autocomplete: tel
Credit Card
Use any of these for name: ccname cardnumber cvc ccmonth ccyear exp-date card-type
Use any of these for autocomplete:
cc-name
cc-number
cc-csc
cc-exp-month
cc-exp-year
cc-exp
cc-type
Usernames
Use any of these for name: username
Use any of these for autocomplete: username
Passwords
Use any of these for name: password
Use any of these for autocomplete:
current-password (for sign-in forms)
new-password (for sign-up and password-change forms)
Resources
Current WHATWG HTML Standard for autocomplete.
"Create Amazing Forms" from Google. Seems to be updated almost daily. Excellent read.
"Help Users Checkout Faster with Autofill" from Google in 2015.