Change link href attribute on the fly with text input value
Ad
I've got an input and a link. I need to change the link's href on the fly a.k.a when user types and it would be super great if there's a way to also detect if user pastes something in there.
Any idea how to achieve this via jQuery?
<input type="text" id="my-input">
<a id="my-link" target="_blank" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="www.something.com/<!--input text here-->/something/">
Click me!
</a>
What I've digged up:
//Somehow get the the input value if it has changed
//Change the href attribute
$("#my-link").attr("href", "//www.something.com/" + textFromInput +"/something/");
Ad
Answer
Ad
You should use the keyup
event to handle typing on-the-fly
$('#my-input').keyup(
function(){
var textFromInput = $("#my-input").val();
$("#my-link").attr("href", "https://www.google.com?q=" + textFromInput);
});
You can also use change
one, but it will fire when the input field's focus is lost - it will be ok too since you have to click on link to get effect (meaning you will have lost focus on input)
Ad
source: stackoverflow.com
Related Questions
Ad
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad