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>
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 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 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
Is there some way to make autocompleting by the first letter for select dropdown list not on jQuery but on PURE JavaScript? Something like [only example !!!]:
<input type="text" onkeyup="autoComplete();" />
<select id="mySelectDropdwonList">
<option>John</option>
<option>Michael</option>
<option>Toml</option>
</select>
<script type="text/javascript">
function autoComplete() {
// what is the code ??
}
</script>
It should work like the jQuery-solution by the link http://harvesthq.github.io/chosen/ but on pure JS
A solution just in HTML5:
<input type="text" list="mySelectDropdwonList" />
<datalist id="mySelectDropdwonList">
<option>John</option>
<option>Michael</option>
<option>Toml</option>
</datalist>
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
<div id="dynamicInput">
</div>
At run time I am generating form in this div. Once a button is pressed I want all the included content to be transfered to another HTML page div tag.
Is it possible?
you can use like this with html and javascript :
<div id="staticinput">bla bla</div>
<div id="dynamicInput">here your ramdom content</div>
<form action="./your_page_result" method="post">
<input name="content" id="content" type="hidden"/>
<input type="submit" name="submit" value="submit" onclick="document.getElementById('content').value=document.getElementById('dynamicInput').innerHTML">
</form>
so in this case :
the form will send the content to another page that you specify in action
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+"";
});