Bookmarklet to pass URL to form field - javascript

I want to create a bookmarklet that will allow users to submit URLS from sites on the fly as they browse.
I'm looking for three possible implementations of this bookmarklet.
Simply click the bookmarklet and be taken to the page with my form field and have the URL they just came from entered into the field.
Simply click the bookmarklet and be taken to the page with my form field and the link they had highlighted from the previous page is entered into the field.
The preferred option - Click the bookmarklet, a popup (similar to Twitter's tweet box in size and function) opens with my form field pre-populated with the URL of the page they clicked the bookmarklet on. Like Twitter's tweet box and facebook's share box.

I typically don't just give away code, but this is so simple I figure it's worth sharing and explaining.
Compressed:
javascript:(function(f,s,n,o){window.open(f+encodeURICompnent(s),n,o)}('http://example.com?url=',window.location,'yourform','width=300,height=200'));
Expanded
(function (formurl, site, name, options) {
window.open(
formurl+encodeURIComponent(site),
name,
options
);
}('http://example.com?url=', window.location, 'yourform', 'width=300,height=200'));
The way this works is it just calls an anonymous closure to pass variables to the window.open function. It passes the current page's location as the uri value in the query string.
On the page containing your form, you'll need to populate the correct field with the value from the query string.
Although this could be written without using a closure, you need to make sure that there isn't a return value from whatever's being called, as javascript:<string value> will re-write the DOM with whatever text was in <string value>.

Related

Browser back & forward and form autocomplete mess

On our webapp the page contains a filter form with some field, a SEARCH button, which calls a jQuery AJAX, loads the items according to the filter form data. From javascript we pushes the form filter values to the url to maintain the browser history.
When we press the BACK button, the page "reloads", but we see that the form values do not refresh to the current values. Examining the page source, we see that the html contains the textbox element with the proper value attribute (from the url values), but the textbox still displays the last value of the form. Sometimes. Sometimes it works.
We added the autocomplete="off" to the form values, which helps a little, "sometimes" went to "usually", the displayed values usually matches the html sources. But not always. We think that the browser cache is the bad guy - when we press the back or forward button sometimes the page does not refresh, but comes from "somewhere".
We added a web config cache setting:
<caching>
<outputCacheSettings>
<outputCacheProfiles>
<add name="CacheProfileNone" noStore="true" varyByParam="*" duration="0" />
</outputCacheProfiles>
</outputCacheSettings>
</caching>
and added the attribute to the controller action
[OutputCache(CacheProfile = "CacheProfileNone")]
public ActionResult Index(QueryViewModel model)
{...}
but it didn't help. :( Sometimes when we press the back button wrong form values are displayed, not matching with the html values. The form values are not manipulated with custom javascript functions. We added onchange event with console.log output, and sees no log messages, so we think the form element display value does not depend on our decisions or code, but (we think) it depends on the browser things.
We are open new suggestions what to do next, to get the browser to always load the page and displays the current value as it is defined in the html source.
Any suggestions are welcome! Thanks!
I'm guessing (because you provided no code), but this doesn't work the way you think:
From javascript we pushes the form filter values to the url to
maintain the browser history.
You need to investigate the History API replaceState() method.
Reference here:
https://developer.mozilla.org/en-US/docs/Web/API/History_API

How do I create a hyperlink inside an input text field in html?

I have an input text field in which the user can enter the name of a website. Is it possible for it to be hyperlinked so that once the field is saved, if the user clicks on it, it redirects to the website?
I use Django for the backend and Javascript and html for the front end.
An input field's value is stored as plain text, therefore you cannot include HTML (i.e. a link) and expect the HTML to be parsed and functioning.
You could simulate this behavior with JavaScript, however I would recommend against it. (You would add a click listener, your function would pull the value of the field, see if it is a valid URL, and then open up the location.)
I'm not going to write the code for this because it would be a terrible user experience. The standard behavior for an input field is that you click on it to edit the text. This is an assumption your users have, and they would therefore (a) not think to click on it because they don't expect it to be a link, and (b) click in it if they wanted to edit the text, only to be redirected and unable to edit the text.
Alternatively, you could add a small button next to the input, i.e. 'Open' or 'Test' or an external link icon.
Simply, if you are printing the URL for the user on their profile page, sure you can just print it as follows:
<a href='$url'>$url</a>
That's PHP but of course you can do this in any language. I'm not sure if this answers your question since you ask if it can be printed "inside" the field which isn't possible/doesn't make sense.
HOWEVER, think about security. Remember the user can enter any malicious URL into this field, so you need to be aware of who you are potentially linking this to on your website/application.
Useful resources:
URL HTML field:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url
Validate URL format with Django (does not check if malicious or not though):
How can I check if a URL exists with Django’s validators?

Storing data client-side from one page to fill out a form on the other site

I'd like to help the visitors to my site to fill out a form on the other site (beyond control) using the data, generated on my site.
It would be possible to use a bookmarklet to post the data to the form while the user is on my site, but the form is some clicks behind the authentication. Considering that a bookmarklet may read only what's been stored (cookie, session, storage) while on the current site, it is not possible to use the bookmarklet on the other site to fill out the form with data, stored while on my site.
Please, suggest any javascript, client-side solutions of this. Like a bookmarklet or something similar.
Thank you.
With a bookmarklet I'd say you're on the right track, but use a dynamic one. e.g:
function makeBookmarklet(){
var elt=document.createElement('a');
var hrefString='';
for(var k=0;k<arguments.length;k++){
hrefString+=' document.getElementById("'+arguments[k].id+'").value="'+arguments[k].value+'";';
}
elt.href=hrefString;
return elt;
}
And then you would call that function, and each argument should be an object with an id and value attribute. The id should be the id of the field to automatically fill out. value should be the value to insert into that field. It returns an element, so put it somewhere in the document and tell the user to drag it into the bookmarks bar, and click it on the other site. Just to make it clearer, you would call it like this:
aElt=makeBookmarklet({id:'username',value:document.getElementById('username').value},{id:'othercrap',value:'fixedvalue'});

How to use form input to update code?

I have a page where I need to filter certain values provided by an embedded widget based on user input in a text field.
I can do this by appending certain parameters to the widget code embedded on the page and refresh the page
How do I take the user input , replace the widget code and refresh the page?
this is the code I might need to append to the widget code that already exist on my page.
%22filter%22:%7B%22keyword%22:%22userprovidedvalue%22%7D,
I am using jsp
You should be able to handle it by putting an onchange on the input field, and sending it to a function that reads the value off of the input field. Alternately, you can have the submit button call a function, that first reads the value off the input field, then performs whatever logic you need, then submits the form.
Jquery is often useful for making things like this easier and more intuitive, though it does have a bit of a learning curve to ramp up.

Set value in textbox in external website when user clicks link on my website

I have my own website. There is a link on my website which redirect me to the externel website. I want to know how to set value in textbox in that externel website when user click link on my website
Have you tried to save opened window handler?
var openedWindow = window.open(....
Instead of using direct links.
Or maybe pass parameters through url?
you can add parameters on the URL.
just modify the link accordingly, and read the URL parameter on the other site.
(this assumes you don't care the possibility that someone fills the parameters with fake info)
Unless that site has implemented something to let you set that (e.g. if they populate the text field using data from the query string), you can't.
There is no standard mechanism for pre-populating forms via a link to the page containing the form.

Categories

Resources