Text in textarea dissapear when auto populated with add-on Autofill - javascript

A page I am testing is built with react. On the page I have checkboxes and text areas. Now I am trying to use the Chrome plugin Autofill in order to populate the fields. The check box selection remains after I click on NEXT button (to go to next page) but the numbers that are written to the text areas disappear!
Anyone that has any ideas on what this could be?
I use simple javascript code that populates the text field and that works fine, I see the text but it seems like the page does not recognize it is populated when I click on Next button:
document.getElementsByName("price")[0].value=123456
I have also tried with
document.getElementsByName("price")[0].value="2500123"
Both lines populate the text area correctly but it disappears.
It is the same behaviour even if I use that javascript in F12. Still the text will dissapear when I have click on Next button. But not the check box selection!
When I enter 123456 manually I can continue with Next button.
All input is appreciated.

Related

Javascript DOM modification from Chrome extension disappearing

I've written a Chrome extension that fetches my shopping list from a recipe manager app's cloud service, and adds each ingredient to a supermarket's online shopping search page.
The website is Tesco Groceries, and I am using the "search with a list of items" page.
Thus far, I have managed to create the extension and write all the code. I have a popup with a button, which when pressed calls a content script. The content script makes a call to a background script which does the actual HTTP fetching via a jQuery ajax call, and passes the result back to the content script.
The content script then finally iterates through the result.
The shopping list page is structured as a form, with each element appearing as
<input class="multi-search-form__item-field" data-auto="multisearch-list-item" type="text" id="listItem3" name="listItems" placeholder="" maxlength="99" value="">
So I do
for (index in json.result){
selector = "#listItem" + index;
$(selector).focus()
.val(json.result[index].name)
.attr("value", json.result[index].name)
.change();
}
This actually appears to work, and all the correct text elements appear in the webpage. However, the submit button does not become active.
If I manually change (keyboard and mouse) any of the listItem text fields, all other text field inputs disappear, but the one I've edited remains. The submit button then becomes active.
I've noted that inspecting the HTML of the document shows that the value property of the automatically completed elements remains blank, but the manually changed one has the correct value.
I have tried using all sorts of combinations of setting .val, .attr("val", ), and using focus(), change(), and even trying to emulate a keypress of spacebar after the value has been input. Nothing works.
For example:
I have 3 items in my shopping list: milk, eggs and beans.
I open the webpage, click the button in my extension, and the webpage shows updated text fields with milk, eggs and beans each on its own line.
I then click in the text box with "eggs" in it, and press space. Now, the 2nd list box says "eggs ", but the other 2 boxes go blank.
Edit: As an additional note, if I just submit the form, that actually works, and the online shopping page appears with a result for my list. HOWEVER, The initial list only presents 10 text fields, and seems to dynamically add more once you begin typing in box 9. However, programatically filling that box doesn't cause it to make further text boxes, se my list caps out at 9 items.

Adding text into a PDF button with 1 click using Javascript

I'm creating a staff document which requires only 2 things to be unlocked.
1. A placeholder for an image, I've implemented that just fine by creating a button with "Icon only" and using a javascript code as follows:
// Mouse Up script to import a button icon
event.target.buttonImportIcon();
It works perfectly!
However I also need a text field which can be clicked once, and have text filled in and saved, because quite frankly the people that will be using the document, couldn't edit a PDF if the human race depended on it haha
Any help would be appreciated greatly!!! Thanks!
Create a text field (which I'm assuming you will want to start off as empty) and then add the following command to activate on Mouse Down:
(this.getField("TextFieldName")).value = "The text that you want to add...";
Where TextFieldName is the reference to the text field that you want to auto fill.
This will make the text appear when the text field is clicked. You could add a clear button using similar code so that erroneous clicks can be undone. Also, you could set the field to be read only to prevent unwanted changes to the auto filled text.

Text box with a clear button inside in asp.net

I have a lot on my site text boxes whose content is a date
So I will not have to check correctness did it read-only
Until now next to each text box was two buttons, one to add date opened popup calendar, second to delete the date (values ​​not required)
Now I wanted to go to ajax calendarextender that the buttons were just ugly
My problem is that this control is not have delete button, and I do want to allow the user to deleted but not cancel the properties read-only to text box And I do not want to leave the ugly button.
My question:
If calendarextender ajax or something similar with a delete button from the popup
Alternatively if you have the option text box with a delete button inside( as text boxes IE10)
With the help of css and java-script you can easily do it.
Here is an example How do I put a clear button inside my HTML text input box like the iPhone does?
Instead of all that work to make it read-only and avoid validation, why not combine a FilteredTextBoxExtender with the CalendarExtender. Use the filter to block all non-numeric characters. I still think it's better to do the validation. It's as simple as DateTime.TryParse(), or you could do it client-side with the built-in FieldValidators.

interesting select box case?

Ok i am trying to make a select box like this used in following website
http://www.buildasign.com/PowerDesign.aspx?T=72486B387A61516563704442304E344F3068766947673D3D
When you will open the website link you will see a default word "Go" as selected. On left
side of drawing window there is size option which is of 91 value. But there are some fix values in select which never change like 8,10,12. How he is keeping one field which doesn't show in select(This value 91 doesnot show in dropdown) but still appears in it. Any help will be appreciated?
In a browser such as chrome, inspect the element and you'll see the text "91" is in a textbox, overlaid over the dropdown list. This simulates a combobox. There are various combobox jQuery plugins: http://plugins.jquery.com/plugin-tags/combobox
It's not a standard select box. But a textbox with some predefined text that is shown as an AJAX select box (a .NET control renderes data as a select box but it's not HTML select form element! just looks like it).
Spolto is pretty dead on with this one. The author of the site just set the text that way.
If you notice, the "drop-down" is still text typable, so despite the options you can type any set of digits there!

How do I put a box with jquery inside a javascript function?

I am very new to javascript and trying to make a drop down box that selects the number of items you want to list. This works and when you choose the number of items you "want" it shows the right number of text boxes underneath. I want to be able to have a tag for every item, this would work fine however I want to be able to auto suggest tags. This is the code I used to do it. I can't get it to work inside the function that shows the number of text boxes based on the drop down menu.
Here is my source code and this is the link to my site.
I have tried using firebug and it says there are no errors with the javascript, the tag suggestion text box just doesn't do anything.
Thanks,
Cameron

Categories