Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Is there a way to add a link to an image using an input box, let say you have an image uploaded and you have an input,
Image Link: <input type="text" id="image_link"/>
in this box a user types in www.google.com
and you want the link to append to the image.
Is there a way to do this?
Did you mean something like this:
http://jsfiddle.net/2QRBm/ ?
HTML:
<input/>
<button>set link</button>
<img src="http://media.heavy.com/post_assets/2010/03/0417/1267743226_stoned-party-dog-original.jpg" width="300"/>
Javascript:
$('img').wrap($('<a/>',{href:'',target:'_blank'}));
$('button').click(function(){
var val=$('input').val();
$('img').closest('a').attr('href',val.replace(/^([^(http://)].*)/,'http://$1'));
});
Lets say your image have this id: #img
Then you can use jQuery wrap to wrap the image into a a element:
$('input').change(function(){
$('#img').wrap('')
})
DOCS: http://api.jquery.com/wrap/
Something like this: live demo
HTML:
<input type="text" id="test"/> <input type="button" id="go" value="go"/>
JavaScript:
$("#go").click(function(){
var value = $("#test").val();
window.location = "http://"+value+"";
});
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
how to get a placeholder's value in javascript
I don't want JQuery to get the value
can anyone tell how to get it
const ip = document.getElementById("ip").getAttribute('placeholder');
console.log(ip);
<input type="text" placeholder="some value" id="ip">
You can use the getAttribute() method to get the value of an attribute of a DOM element. MDN - Element.getAttribute()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function myFunction() {
var x = document.getElementById("myText").placeholder;
console.log(x);
}
</script>
<html>
<body>
First Name: <input type="text" id="myText" placeholder="Name">
<p>Click the button to view the placeholder content in console.log</p>
<button onclick="myFunction()">Click Here</button>
</body>
</html>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I have one long page of content. If I want to create a search bar so that when the user searches something that exists somewhere on the single page, it redirects them to that part of the page (like it goes to the middle or the bottom of the page). Does this require any back-end like PHP or can I do this with just HTML?
You can make use of window.find() in JavaScript
Reference: https://developer.mozilla.org/en-US/docs/Web/API/Window/find
Demo:
function search(string){
window.find(string);
}
<input placeholder="type foo or bar" type="text" id="search">
<input type="button" value="Go" onclick="search(document.getElementById('search').value)">
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<p>foo</p>
<p>bar</p>
<p>hello world</p>
Easiest thing to do would be some javascript
<input id="searchText"><button onclick="search()">Search</button>
<script>
function search() {
var searchText = $("#searchBar").val();
$(".searchText:contains('" + searchText + "')").css("background","#FF0");
}
</script>
<div class=".searchText">Some kind of text would go here</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
Thanks for those who helped! I have figured it out!
How can I create a input field like the one in the image? And I want to embed it inside $_POST. Thanks for your time :)
This is an HTML5 input of type number. You use it this way:
<form method="POST" action="yourPHPfile.php">
<input type="number" name="number_input">
<input type="submit">
</form>
When this form is submitted, it will send the selected number to yourPHPfile.php and you can retrieve the number from $_POST['number_input']
You can use input for the number selecotr and post using a form like so:
<form method="post">
<input type="number" name="intNumber"/>
<input type="submit" />
</form>
Then in PHP you can do this
<?PHP
if(isset($_POST['intNumber'])){
$myNumber = $_POST['intNumber']; // intNumber is the name of of your input
}
?>
When the submit button the PHP will be fired.
Hope this helps!
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Stuck on a tough situation!
I have a form for inputting different cities where user want to go.
I have a form box and a submit button.
Now I want my user to enter as many cities he likes, in order to do so he must click on a link Add 1 more city and one more form box should appear.
How can I perform such task in HTML
This is a nice way to do it:
<div id="inputBoxes">
<input />
</div>
<button type="button">Add more</button>
$('button').click(function() {
$('#inputBoxes').append('<input>');
});
Hope it will help,
Zorken17
$('button').click(function() {
$('#inputBoxes').append('<input>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div id="inputBoxes">
<input />
</div>
<button type="button">Add more</button>
Use jquery clone function.
$('select#options').clone().attr('id', 'newOptions').appendTo('.blah');
See this question
UPDATE
found good snippet for you. exactly what you need
put city box in a div and assign a id to that div and call a menthod of java script on the click of add 1 button then in method append other city box html in div through java script.
maybe thats a good starting point
<form id="myForm">
<div id="cities">
<input class="city" type="text" />
</div>
var $cityInputs;
function registerEvents() {
$cityInputs = $('input.city').not(':disabled');
$cityInputs.blur(function(event){
var $element = $(event.target);
if ($element.val().trim().length !== 0) {
appendNewInput.call($('#cities'));
$element.attr('disabled','disabled');
}
})
}
function appendNewInput() {
this.append('<input class="city" type="text">');
registerEvents();
}
registerEvents();
http://jsfiddle.net/9ckv5f23/3/
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
In the following example, how can I make the image source variable and related to a text input, so that after tapping the image link it appear instantly without reloading the page?
<input style="text" name="img_link" placeholder="tape your image link" />
<img src="" />
Just assign an event to your input, so that when it changes, update the src of the image.
There's a runnable snippet below. Any time you press a key in the input, or when the input loses focus, the image will automatically be updated.
$(function() {
$("input").get(0).focus();
$("input").on("blur keydown", function() {
$("img").attr("src", $(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input tyle="text" name="img_link" placeholder="tape your image link" value="http://lorempixel.com/100/100/" />
<img src="" />