We Keep Coding

How to add active element id to url

I was trying to add the id value of active element into a url. Then using a button to redirect to the url.
HTML
<div class="icon" tabindex="0" id="company">
<img src="company.png">
</div>
<button type="submit" onclick="myFunction()">jump</button>
Javascript
function myFunction(){
var x = document.activeElement.id;
location.href = "apps-online.html?page=" + x;
}
My expectations was: when I click the button, it will redirect to page
"apps-online.html?page=company"
However, the url of the new page is
"apps-online.html?page="
I was wondering why the value of x hasn't been added to the url.
Hi, everyone. For now I have understood why this problem happened. Because every time when I click the button, the button became the last active element.
So is there any way to achieve my goal?

Do check the value of x whether it is empty or not if it is empty the value of x will be passed as empty so there is no value in the url .try debugging the code or use console.log
function myFunction(){
var x = document.activeElement.id;
console.log(x);
location.href = "apps-online.html?page=" + x;
}
this gives the value of x in the console check this.

Your button does not have an id.
Give id="company" to button element.
<div class="icon" tabindex="0">
<img src="company.png">
</div>
<button id="company" type="submit" onclick="myFunction()">jump</button>

When you click on the button, the active element is button itself. I am assuming you have several divs and you need to pass the id of the highlighted element. You need to send the id to the function in some way.
Take a look below. This can be one of the many possible solutions.
HTML
<div class="icon" tabindex="0" id="company">
<img src="company.png">
</div>
<div class="icon" tabindex="1" id="something">
<img src="something.png">
</div>
<button type="submit" onclick="myFunction()">jump</button>
JS
let tabID = null;
let icons = document.getElementsByClassName('icon');
for (icon of icons)
{
icon.onclick = function()
{
tabID = document.activeElement.id;
}
}
function myFunction()
{
window.open("apps-online.html?page=" + tabID);
}

Using js onclick on one button to inject link into another

I have two buttons, both without links, and want to add a link to one when the other is clicked. How can I make one button with an onclick give a link attribute to something else on the page? If not a button, maybe a div?
The following is my current code:
<div class="container">
<div class="jumbotron" style="background-color:#000000 !important;">
<img id="myImage" src="images/closed.png" style="width:100%">
<p id="texthere"></p>
<div class="container">
<div class="row">
<div class="col">
<button onclick="document.getElementById('myImage').src='images/open.png'" class="btn btn-primary active btn-block">Open Eyes</button>
</div>
<div class="col">
<button onclick="document.getElementById('myImage').src='images/closed.png'"class="btn btn-primary active btn-block">Close eyes</button>
</div>
</div>
</div>
Thank you in advance for your help.
*Edited to clarify and pose as a question.

I think you may be confused about how HTML links work. HTML has the a tag for elements that a user can click to go to a different URL. The (worse) alternative is to use an onclick handler to redirect the user by setting the value of window.location.
To make a button that creates a link on the page, put a script tag at the bottom of the body that attaches a listener to a button that, when called, places a link on the page.
<script type="text/javascript">
var button = document.getElementById('my-button'); // This button has to exist.
button.addEventListener('click', function() {
var link = document.createElement('a');
link.href = 'google.com'; // Or wherever you want the link to point.
document.body.appendChild(link);
});
</script>

While there are many ways to do what you want, without knowing what programming skills you have and what you want to see on the screen, perhaps this sort of structure would help you. Replace your current onclick handlers on the BUTTONs:
<button id="open" class="btn btn-primary active btn-block">Open Eyes</button>
<button id="close" class="btn btn-primary active btn-block">Close eyes</button>
<script>
document.getElementById("open").addEventListener("click", function() {
changeState('open');
});
document.getElementById("close").addEventListener("click", function() {
changeState('closed')
});
function changeState(state) {
document.getElementById("myImage").src = 'images/' + state + '.png';
var new_para = document.createElement("p");
var new_link = document.createElement("a");
new_link.setAttribute("href", "https://www.google.com/search?" + state);
var new_link_text = document.createTextNode("Search for '" + state + "'");
new_link.appendChild(new_link_text);
new_para.appendChild(new_link);
document.body.appendChild(new_para);
}
</script>

Append new text field while clicking a button and remove by clicking button in Laravel 4

i have a form with two fields such as phone, email like below image.
when i click on the plus button , i want to append one extra text field in form below the button. and i want to remove the text field when clicking the minus button.
dynamically add the fields and set name for unique for that. i need these data to insert into table.
my html code is showed in below..
<div class="RegSpLeft"><input type="text" value="Phone"></div>
<div class="RegSpRight"> <img src="images/plus.png"> <img src="images/minus.png"> </div>

This might help you.
<div class="RegSpLeft" id="phone">
<input type="text" value="Phone">
</div>
<div class="RegSpRight">
<a href="#" class="pl">+
</a>
<br/>
<a href="#" class="mi">-
</a>
</div>
<script type="text/javascript" src="dist/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('a.pl').click(function(e) {
e.preventDefault();
$('#phone').append('<input type="text" value="Phone">');
});
$('a.mi').click(function (e) {
e.preventDefault();
if ($('#phone input').length > 1) {
$('#phone').children().last().remove();
}
});
});
</script>

if jQuery element hasClass() change different element link text

I am using a jQuery function to add/remove a class to the clicked element, which works just fine. However when that element is clicked, I am trying to change the text of an HTML link and I cannot seem to get it working. The HTML link is located within the <span> element further down the page.
When <button id="people"> hasClass('user_view_active') the HTML link should display "People" when <button id="jobs"> hasClass('user_view_active') the HTML link should display "Jobs".
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function(){
$('button').each(function(){
$(this).removeClass('user_view_active');
});
$(this).addClass('user_view_active');
});
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").attr("href").text(text.replace('People'));
}else{
$('.title').find("a").attr("href").text(text.replace('Jobs'));
}
});
</script>
</head>
<body>
<div id="container">
<header>
<img src="images/header-name.png" width="200px" style="display: inline; margin-bottom: -10px;"/>
<button id="jobs" class="user_view">Jobs</button>
<button id="people" class="user_view_active user_view">People</button>
<div class="header_search_wrapper">
<form action="" method="POST">
<textarea class="header_search" name="app_search" placeholder="Search people, jobs, or companies" style="width: 430px;"></textarea>
<input type="submit" class="share_btn" value="Search">
</form>
</div>
</header>
<div id="main" role="main">
<!--! begin app content -->
<div class="right_sidebar">
<span class="right_title">Connection Suggestions</title>
</div>
<span class="title">Recent Updates >> People</span>

To replace the text within a link you can use the jQuery .text() function. This function can also get the text value and also set the text value - as is shown in the example below -
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").text('People');
}else{
$('.title').find("a").text('Jobs');
}
This code would have to be wrapped in the callback function of the click event to work -
$(document).ready(function() {
$('button').click(function(){
$('button').removeClass('user_view_active');
$(this).addClass('user_view_active');
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").text('People');
}else{
$('.title').find("a").text('Jobs');
}
});
});
Now each time the button is clicked, you can check for the existence of the user_view_active class on the #people element.

Okeydokey ?
Are you sure those are the right tags ?
<span class="right_title">Connection Suggestions</title>
Are you sure an <a> element inside a <button> element is a good idea?
<button id="jobs" class="user_view">Jobs</button>
role="main" is'nt a valid attribute, but will probably work anyway.
This just seems easier:
$(document).ready(function() {
$('button').on('click', function(){
$('button').removeClass('user_view_active');;
$(this).addClass('user_view_active');
$("a", ".title").text(this.id);
});
});
FIDDLE

Try this way:
$('#people').toggleClass('user_view_active').html($('#people').hasClass('user_view_active')?'People':'Jobs');

How to use jquery to show hidden form fields

I have three input fields for collecting telephone numbers from users. I display one field and hide the other two. I have placed a link(Add home number) below it and when you user clicks on the link it shows the hidden input field. And I have placed one more link below it when clicked displays the last input field.
<input type="text" />
<a href="#" class="show" >Add Home Number</a>
<div style="display: none">
<input type="text" />
<a href="#" class="show" >Add Office Number</a>
</div>
<div style="display: none">
<input type="text" />
</div>
And the jquery looks like this..
<script>
$(function(){
$(".show").click(function () {
$(this).next("div").show("slow");
});
});
</script>
The first link works fine, But the second one does not work.
I appreciate all help.
Thanks.

you have to use the each function:
like this:
$(".show").each($(this).click(function () {
$(this).next("div").show("slow");
})
);

.next() only selects the next sibling element. You links have no subsequent siblings, because you close the parent element (the div) immediately after. You need to select the next sibling of the div:
<script>
$(function(){
$(".show").click(function () {
$(this).parent().next("div").show("slow");
});
});
</script>