I have a search box on my page. When it is submitted it will jump to the anchor id further down the page based on the id entered into the text box, without refreshing the page (this is key).
Here is my current code.
Javascript:
$(function() {
$('form#unitid_quickfind').submit(function(e) {
var anchor = $("#unitid_input").val();
var position = $("#"+anchor).offset();
window.scrollTo(position.left, position.top);
return false;
});
});
HTML:
<form id="unitid_quickfind">
<input id="unitid_input" type="text" />
<input type="submit" value="Find" />
</form>
<a id="1">Unit 1</a>
<a id="2">Unit 2</a>
<a id="3">Unit 3</a>
Alongside jumping to the anchor when the submit is clicked, I would also like the link highlighted in some way. What is the easiest way to achieve this (preferably adding to the existing Javascript function)?
TIA
You need to select that element and than you can simply apply the style you want.
Here i selected the element by var element = document.getElementById(anchor); by this.
And by using element.style.color = 'green' i changes color of selected element.
$(function() {
$('form#unitid_quickfind').submit(function(e) {
var anchor = $("#unitid_input").val();
var position = $("#"+anchor).offset();
var element = document.getElementById(anchor);
if(element)element.style.color = 'green'
if(position)window.scrollTo(position.left, position.top);
return false;
});
});
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
crossorigin="anonymous"></script>
<form id="unitid_quickfind">
<input id="unitid_input" type="text" />
<input type="submit" value="Find" />
</form>
<a id="1">Unit 1</a>
<a id="2">Unit 2</a>
<a id="3">Unit 3</a>
Related
I'm working on my real-estate project, I have a contact modal box and I want to get the title from tag a into the button value in modal box.
I'm not good at English, if I'm saying something wrong somewhere please forgive me
I have tried many ways but it still doesn't work and the result I get is the title but only works just for 1 id
function change() {
let a_id = document.getElementById('test');
let btn_id = document.getElementById("btn-test");
let btn = a_id.getAttributeNode('title').value;
// btn_id.value = btn;
btn_id.innerHTML = btn_id.value = btn;
}
<body>
<p>Click the button find out if the button has an onclick attribute specified.</p>
hello
<input type="button" onload="change()" title="hello" value="Try it" id="btn-test">
</body>
this is my code https://hastebin.com/ohasiqavun.xml?
You are supposed to use classes instead of ids here. Ids are unique and thus it only works for 1 element.
I just created the following alternative for you to get the values from every button seperate. noticed that I changed the HTML to 3 container who all include the same content. I removed the ID's and changed them for classes:
JS:
let changeallbuttons = document.querySelector('.changeallbuttons')
changeallbuttons.addEventListener('click', function() {
document.querySelectorAll('.container').forEach(item =>{
let button = item.querySelector('input')
let a = item.querySelector('.test')
button.value = a.getAttribute('title')
})
})
document.querySelectorAll('.container').forEach(item =>{
item.addEventListener('click', function() {
let button = item.querySelector('input')
let a = item.querySelector('.test')
button.value = a.getAttribute('title')
})
})
HTML:
<div class="container">
<p>Click the button find out if the button has an onclick attribute specified.</p>
<a href="#" title="bye1" class="test" >hello</a>
<input type="button" title="hello" value="Try it">
</div>
<div class="container">
<p>Click the button find out if the button has an onclick attribute specified.</p>
<a href="#" title="bye2" class="test" >hello</a>
<input type="button" title="hello" value="Try it">
</div>
<div class="container">
<p>Click the button find out if the button has an onclick attribute specified.</p>
hello
<input type="button" title="hello" value="Try it">
</div>
<input class="changeallbuttons" type="button" title="hello" value="Try it">
I'm using the below code and its working fine for me, for one anchor tag.
<h1 id="h1">heading</h1>
<a type="button" id="demo" onclick="Func()">sign-up</a>
JS
function Func() {
document.getElementById("h1").innerHTML = "sign-up";
}
How to do this for 3 or 4 anchor tags ?
What I actually want is everytime when clicked on anchor tags get its text and display it in the only one <h1></h1> tag
Any answer will be appreciated either JS or JQuery
you should try JQuery like
your h1 tag like
<h1 id="anchorText"> </h1>
and your anchor tags like
<a type="button" id="demo">sign-up</a>
<a type="button" id="demo1" >Login</a>
Now in your jquery
$("a").click(function(){
$("#anchorText").text($(this).text());
});
You can add class to all the links and based on that add a click event handler for them.
$(".buttons").click(e => $("#h1").text(e.currentTarget.textContent));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="h1">heading</h1>
<a type="button" class="buttons">sign-up</a>
<a type="button" class="buttons">sign-in</a>
You can pass this in the Func() to refer to the clicked element and then get the innerHTML (or innerText) of that element based on your convenience.
function Func(e) {
document.getElementById("h1").innerHTML = e.innerHTML;
}
<h1 id="h1">heading</h1>
<a type="button" id="demo1" onclick="Func(this)">sign-up</a>
<a type="button" id="demo2" onclick="Func(this)">sign-in</a>
i need some help with a javascript code. I have three links, each one have an diferent ID, what i want to do is, when i click in one of those links, the script gets the id, and then delete all the three link and put a text in the place, for example:
<div id="main">
<div>
<div id="links">
<a id="choice1" href="#footer" onclick="createDiv();removeLink();">choice1</a>
<a id="choice2" href="#footer" onclick="">choice2</a>
<a id="choice3" href="#footer" onclick="">choice3</a>
</div>
</div>
</div>
When I click choice1, all links have to be deleted and create a text "you clicked in choice1", if I click in choice2 the same happens, but this time shows "you clicked in choice2".
I have this javascript, with function to create a div with the text and a function to remove the links. But I don't know how to do to pick the IDs and place the correspondent text.
function createDiv()
{
var element = document.createElement("div");
var main = document.getElementById("main");
main.appendChild(element);
var text = document.createTextNode("This is the new text");
element.appendChild(text);
}
function removeLink()
{
var link = document.getElementById("links");
link.parentNode.removeChild(link);
}
I've searched a lot in the internet but I didn't find an effective way to do it. If someone can give a tip how to do that, I'll be very thankful.
You can set a click listener on the parent container, which is #links and check to see if you click on one of it's link and if you did, get the InnerHTML and replace the innerHTML of your #links div.
document.getElementById('links').addEventListener('click',function(event){
event.preventDefault();
var target = event.target;
if (target.nodeName === 'A'){
this.innerHTML = 'You clicked on ' + target.innerHTML;
}
});
<div id="links">
<a id="id-1" href="google.com">Option 1</a>
<a id="id-2" href="google.com">Option 2</a>
<a id="id-3" href="google.com">Option 3</a>
</div>
You should use event listenners like in this answer because they are a better practice in general. But, if you still want/need to use onclick, then you can use this and pass it to createDiv. so your code will look like this :
function createDiv(e)
{
var element = document.createElement("div");
var main = document.getElementById("main");
main.appendChild(element);
var text = document.createTextNode("you clicked on " + e.innerText);
element.appendChild(text);
}
function removeLink()
{
var link = document.getElementById("links");
link.parentNode.removeChild(link);
}
<div id="main">
<div>
<div id="links">
<a id="choice1" href="#footer" onclick="createDiv(this);removeLink();">choice1</a>
<a id="choice2" href="#footer" onclick="createDiv(this);removeLink();">choice2</a>
<a id="choice3" href="#footer" onclick="createDiv(this);removeLink();">choice3</a>
</div>
</div>
</div>
All the on* events pass as an argument the element to which the event occured.
I'm trying to create a To Do list, and when the user enters a new task, and clicks the button, the javascript should create a li element containing a span that holds the user's entry, then add that li element to the ol in my HTML.
My HTML looks like this:
<body>
<h1>To Do:</h1>
<section>
<input type="text" id="add_todo">
<span id="add_task_error"> </span>
<input type="button" id="add_task" value="Add task">
<div id="empty_message" class="open">
<h3>You have no tasks left to accomplish!</h3>
</div>
<div id="tasklist">
<ol class="list">
</ol>
</div>
</section>
</body>
This is the function that is not working:
var newSpan = $('<span>input</span>').addClass("task");
//wrap it in a <li> element
newSpan = (".task").wrap("<li></li>");
$(".list").append(newSpan);
I also tried it this way:
var new_task = $('<li>*</li>').addClass('task');
new_task.appendTo('ol.list');
new_task.setAttribute('id', 'new_task');
$("#new_task").text(input);
Both ways did not work- when I clicked the Add Task button (which is not the problem- I tested it), nothing happened on the screen...
What am I doing wrong???
Try this
$(document).ready(function(){
$('#add_task').click(function(){
var task = $('#add_todo').val();
var html = '<li><span>'+task+'</span></li>';
$('.list').append(html);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>To Do:</h1>
<section>
<input type="text" id="add_todo">
<span id="add_task_error"> </span>
<input type="button" id="add_task" value="Add task">
<div id="empty_message" class="open">
<h3>You have no tasks left to accomplish!</h3>
</div>
<div id="tasklist">
<ol class="list">
</ol>
</div>
</section>
Create the element, set all the attributes and when, you are done, add it to the ol.
var new_task = $('<li></li>').addClass('task');
new_task.text($("#add_todo").val()); //this is the value of the input
new_task.attr('id', 'new_task'); //use attr instead of setAttribute
new_task.appendTo('ol.list');
FIDDLE
Hope this works for you
JS code:
$("#add_task").click(function(){
var value = $("#add_todo").val();
$(".list").append("<li class='task'><span>"+ value +"</span></li>")
});
Here is the working Plnkr
This should be your code.
Call addLI() on click of your button
<input type="button" id="add_task" value="Add task" onclick="addLI()">
function addLI() {
//check for empty value
if ($('#add_todo').val() == "") {
alert("Please Add Todo.");
return;
}
//generate html for li
var html = "<li class='task' id='new_task'><span>" + $('#add_todo').val() + "</li>";
//append li to order list
$(".list").append(html);
}
Also try to hide the div on which you are showing the message before adding any new task.
<div id="empty_message" class="open">
<h3>You have no tasks left to accomplish!</h3>
</div>
$('.open').hide(); on click event of add task
I have a following set up:
<a href="#" id="A" >My Site</a>
<a href="#" id="A" >Your Site</a>
<a href="#" id="A" >Her site</a>
<a href="#" id="A" >His Site</a>
<a href="#" id="A" >Our Site</a>
And a button:
<a href="#" id="B" >Yay</a>
Then following javascript:
<script>
jQuery("#A").click(function()
{ jQuery("#B").trigger('click');
return false; });
</script>
In this setting, when "A" is clicked, then "B" is clicked as well.
It works well for the very first button ("My Site"). However other buttons are not working as if only the first id was recognized by the javascript and rest are simply ignored.
I mean, I can change the id of other buttons and repeat the javascript, however that seems like a poorly written idea.
What would be the best way of dealing in this situation? (a clean and efficient way).
Also, let say that I do have repeating javascript with different id as example below (for different buttons to trigger different buttons).
<script>
jQuery("#A").click(function()
{ jQuery("#B").trigger('click');
return false; });
jQuery("#C").click(function()
{ jQuery("#D").trigger('click');
return false; });
jQuery("#E").click(function()
{ jQuery("#F").trigger('click');
return false; });
</script>
In this case, is there a way for me to condense the repeating javascripts?
Thanks!
Your HTML is invalid. ID must be unique. JS will take first element with that ID and will ignore rest elements. Use classes for that.
$(document).ready(function() {
$('.A').click(function(e) {
e.preventDefault();
$('#B').trigger('click');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
My Site
Your Site
Her site
His Site
Our Site
<hr/>
<button onClick="alert('Clicked B')" id="B">Maybe clicked</button>
If you have to make reference what element must be clicked and your links does not have any link to other page, you can use it's href element:
$(document).ready(function() {
$('.A').click(function() {
$($(this).attr('href')).trigger('click');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
My Site
Your Site
Her site
His Site
Our Site
<hr/>
<button onClick="alert('Clicked A')" id="a">Maybe A clicked</button>
<button onClick="alert('Clicked B')" id="b">Maybe B clicked</button>
<button onClick="alert('Clicked C')" id="c">Maybe C clicked</button>
ID of an element must be unique so you can use a class to group similar elements, use a data-* attribute to specify which element's click has to be triggered.
A unique identifier for the element. There must not be multiple
elements in a document that have the same id value.
<a href="#" class="click" data-target="a" >My Site</a>
Your Site
Her site
His Site
Our Site
<a href="#" id="a" >Yay</a>
<a href="#" id="b" >Yay</a>
<a href="#" id="c" >Yay</a>
then
$('.click').click(function(){
$('#' + $(this).data('target')).click();
})
In HTML ID must be unique,You can enclose all anchors inside a block element and do like as follows
<div id="A">
My Site
Your Site
Her site
His Site
Our Site
</div>
Button
<a href="#" id="B" >Yay</a>
Script
<script>
jQuery("#A a").click(function()
{
jQuery("#B").trigger('click');
return false;
});
</script>
The id of an element has to be unique. Thus, I would suggest using a class:
<a href="#" class="A" >My Site</a>
<a href="#" class="A" >Your Site</a>
<a href="#" class="A" >Her site</a>
<a href="#" class="A" >His Site</a>
<a href="#" class="A" >Our Site</a>
Then:
elements = document.getElementsByClassName("A");
for(var i = 0; i < elements.length; i++){
var ele = elements[i];
jQuery(ele).click(function()
{ jQuery("#B").trigger('click');
return false; });
}