Develop Reference

how to make the field visible upon the link click

I'm new to creating webpage. I was stuck in this part, where there are three link (should be visible) and three textbox(should be invisible) as default .
When I click one link only that respective text field should visible. if I click another link previous field should hide and it's respective text field should be visible.
Example
If click student link the respective student div should visible then if I click parent then previously student div should hide and parent div must visible.
This is my sample code.
<div>
<ul class="role" id="role">
<li class="selected">
student
</li>
< li>|</li>
<li class="">
teacher
</li>
<li>|</li>
<li class="">
parent
</li>
</ul>
</div>
<div class="block" id="student">
<input type="text" name="stud" id="Stud">
</div>
<div class="block" id="teacher">
<input type="text" name="teach" id="Teach">
</div>
<div class="block" id="parent">
<input type="text" name="par" id="par">
</div>

I think this is what you want.
var student = document.getElementById("student_tab");
var teacher = document.getElementById("teacher_tab");
var parent = document.getElementById("parent_tab");
var b_Stud = document.getElementById("Stud");
var b_Teach = document.getElementById("Teach");
var b_par = document.getElementById("par");
function clear() {
b_Stud.style.display = "none";
b_Teach.style.display = "none";
b_par.style.display = "none";
}
function show(type) {
switch (type) {
case "student_tab":
b_Stud.style.display = "block";
break;
case "teacher_tab":
b_Teach.style.display = "block";
break;
case "parent_tab":
b_par.style.display = "block";
break;
default:
break;
}
}
student.addEventListener("click", function(e) {
clear();
show(e.target.id);
});
teacher.addEventListener("click", function(e) {
clear();
show(e.target.id);
});
parent.addEventListener("click", function(e) {
clear();
show(e.target.id);
});
<div>
<ul class="role" id="role">
<li class="selected">
student
</li>
<li class="">
teacher
</li>
<li class="">
parent
</li>
</ul>
</div>
<div class="block" id="student">
<input type="text" name="stud" id="Stud" placeholder="Stud" />
</div>
<div class="block" id="teacher">
<input type="text" name="teach" id="Teach" placeholder="Teach" />
</div>
<div class="block" id="parent">
<input type="text" name="par" id="par" placeholder="par" />
</div>

Check this out.
const studentInput = document.getElementById("Stud");
const teacherInput = document.getElementById("Teach");
const parentInput = document.getElementById("par");
const links = document.querySelectorAll('a');
const hideInputs = () => {
const inputs = document.querySelectorAll('input');
inputs.forEach(input => input.classList.remove("active"));
}
const showElement = (e) => {
if(e.target.textContent === "parent") {
hideInputs();
parentInput.classList.add("active");
} else if(e.target.textContent === "student") {
hideInputs();
studentInput.classList.add("active");
} else if(e.target.textContent === "teacher") {
hideInputs();
teacherInput.classList.add("active");
}
}
links.forEach(link => link.addEventListener('click', (e) => showElement(e)))
input {
display: none;
}
input.active {
display: block;
}
<div>
<ul class="role" id="role">
<li class="selected">
student
</li>
<li class="">
teacher
</li>
<li class="">
parent
</li>
</ul>
</div>
<div class="block" id="student">
<input type="text" name="stud" id="Stud" placeholder="student" class="active">
</div>
<div class="block" id="teacher">
<input type="text" name="teach" id="Teach" placeholder="teacher">
</div>
<div class="block" id="parent">
<input type="text" name="par" id="par" placeholder="parent">
</div>

How to get the text of each item in class using Jquery

I have many structures like this:
<div class="passTab" data-name="">
<div class="logoTab" title="" onclick="openWindow('')">
<img class="logoImg" src="./">
<label class="title"></label>
</div>
<ul class="noteList">
<li><label class="l_mail note">some_text1</label></li>
<li><label class="l_nick note">some_text2</label></li>
<li><label class="l_pass note">some_text3</label></li>
</ul>
</div>
And i need to get text of each item in class separately.
I used:
$('.note').text()
and
$('.note').toArray($(this).text())

What is your problem? You can simply create an array and just add everything in a loop. For example with a loop from jQuery library:
let arr = [];
$('.note').each(()=>{
arr.push(this.text());
});
Or something like that...

Just loop through the notes using .each() or .map()
https://api.jquery.com/each/
https://api.jquery.com/map/
//Loop through notes and do something
$('.note').each((index, note) => console.log($(note).text()));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="passTab" data-name="">
<div class="logoTab" title="" onclick="openWindow('')">
<img class="logoImg" src="./">
<label class="title"></label>
</div>
<ul class="noteList">
<li><label class="l_mail note">some_text1</label></li>
<li><label class="l_nick note">some_text2</label></li>
<li><label class="l_pass note">some_text3</label></li>
</ul>
</div>

jQuery working in console but not when loading website

this is the code that is perfectly working in console:
jQuery(".cf7_wrap_com li").each(function(){
jQuery(this).find(".first_univer input").click(function(){
var label1 = jQuery(this).parent().find("label").html();
if( jQuery(this).is(":checked")) {
jQuery(this).parent().find(".first_high").show();
jQuery(".cf7_wrap_com li").not( jQuery(this).parent().parent() ).each(function(){
jQuery(this).find(".first_high").hide();
});
}
else {}
});
});
and the code below is what I saved in my custom js file and not working on website load
jQuery(document).ready(function( $ ){
jQuery(window).bind("load", function() {
jQuery(".cf7_wrap_com li").each(function(){
jQuery(this).find(".first_univer input").click(function(){
var label1 = jQuery(this).parent().find("label").html();
if( jQuery(this).is(":checked")) {
jQuery(this).parent().find(".first_high").show();
jQuery(".cf7_wrap_com li").not( jQuery(this).parent().parent() ).each(function(){
jQuery(this).find(".first_high").hide();
});
}
else {}
});
});
});
});
I also want to know if it is possible to trim this code as I think I might have added something which unnecessary.
I am using it on two radio buttons(which are inactive by default) and when a user clicks on either of them a short form opens.
Here's the image:
And this is the html:
<h1>What type of student?</h1>
<ul class="cf7_wrap_com first_use">
<li>
<div class="highschoolform first_univer"><input id="#school" name="School" type="radio" value="highschool" /> <label for="highschool">High School</label>
<div class="cf7_wrap_hs first_high">[contact-form-7 id="3552" title="High school"]</div>
</div>
</li>
<li>
<div class="unversityform first_univer"><input id="#University" name="School" type="radio" value="University" /> <label for="University">University</label>
<div class="cf7_wrap_uni first_high">[contact-form-7 id="3553" title="University"]</div>
</div>
</li>
</ul>

give the radios a class
use closest and siblings
$(function() {
$(".school").on("click",function() {
$(this).closest("ul").find(".first_high").hide();
$(this).siblings(".first_high").show();
});
});
.first_high { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>What type of student?</h1>
<ul class="cf7_wrap_com first_use">
<li>
<div class="highschoolform first_univer">
<input id="#school" class="school" name="School" type="radio" value="highschool" />
<label for="highschool">High School</label>
<div class="cf7_wrap_hs first_high">[contact-form-7 id="3552" title="High school"]</div>
</div>
</li>
<li>
<div class="unversityform first_univer">
<input id="#University" class="school" name="School" type="radio" value="University" />
<label for="University">University</label>
<div class="cf7_wrap_uni first_high">[contact-form-7 id="3553" title="University"]</div>
</div>
</li>
</ul>

Input from a textbox and add into a list isn't working

I am trying to add a new item into a list from a text box using jQuery but it's not working. There are a lot of code here, I want to find the problem in my code.
HTML code
<div id="page">
<h1 id="header">LIST</h1>
<h2>Add</h2>
<ul>
<li id="one" class="hot"><em> Fresh </em>Figs </li>
<li id="two" class="hot"> Honey </li>
<li id="three" class="hot">Nuts </li>
<li id="four" class="hot">Bread </li>
</ul >
</div>
<div id="newItemButton"><button href="#" id="showForm">NEW ITEM</button>
</div>
</br>
<form id="newItemForm">
<input type="text" id="itemDescription" placeholder="Add a new item...."/>
<input type="submit" id="addButton" value="Add"/>
</form>
And the jQuery code
$(function(){
var $newItemButton=$('#newItemButton');
var $newItemForm=$('#newItemForm');
var $textInput=$('item:textbox');
$newItemButton.show();
$newItemForm.hide();
$('#showForm').on('click',function(){
$newItemButton.hide();
$newItemForm.show();
});
$newItemForm.on('submit',function(e){
var $newText=$('input:textbox').val();
$('li:last').after('<li>' + $newText + '</li>').val();
$newItemForm.hide();
$newItemButton.show();
$textInput.val(' ');
});
});

I know this has an accepted answer - and I didn't read your question fully so this may not do exactly what you want - but I wanted to present an alternate approach with less code. The following features a button that when you click it - takes the value from the textbox and appends it to the list (note that I gave the list an ID). Just so you have another option. You don't need tjhe form at all and you certainly don't need to submit it - just to get the value and append it to the list. Just saying.
$(document).ready(function(){
$('#addButton').click(function(){
var newItem = $('#itemDescription').val();
$('#myList').append('<li class="hot">' + newItem + '</li>');
$('#itemDescription').val('');
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">
<h1 id="header">LIST</h1>
<h2>Add</h2>
<ul id="myList">
<li id="one" class="hot"><em> Fresh </em>Figs </li>
<li id="two" class="hot"> Honey </li>
<li id="three" class="hot">Nuts </li>
<li id="four" class="hot">Bread </li>
</ul >
</div>
<input type="text" id="itemDescription" placeholder="Add a new item...."/>
<button type="button" id="addButton">Add</button>

check this fiddle.
you had a small error in your jQuery. Here is the working code:
$(function(){
var $newItemButton=$('#newItemButton');
var $newItemForm=$('#newItemForm');
var $textInput=$('#itemDescription');
$newItemButton.show();
$newItemForm.hide();
$('#showForm').on('click',function(){
$newItemButton.hide();
$newItemForm.show();
});
$newItemForm.on('submit',function(e){
e.preventDefault();
var $newText=$('#itemDescription').val();
$('li:last').after('<li>' + $newText + '</li>').val();
$newItemForm.hide();
$newItemButton.show();
$textInput.val(' ');
});
});
first you have to prevent the default behaviour from the form element on submit. To do this i added the e.preventDefault(); function. then I received this error:
Uncaught Error: Syntax error, unrecognized expression: unsupported
pseudo: textbox
To fix this, I changed the selector to the ID of the input field. Now it works perfectly fine.

Live text search jquery, wrong selector?

So i'm pretty new to this, please bear with me :)
And it's kinda working for me, this is what I have:
HTML:
<form id="live-search" action="" class="styled" method="post">
<fieldset>
<input type="text" class="text-input" id="filter" value="" placeholder="Søg efter skole..." />
<span id="filter-count"></span>
</fieldset>
jQuery:
$(document).ready(function(){
$("#filter").keyup(function(){
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(), count = 0;
// Loop through the comment list
$(".ss_voting_manual .ss_voting_entry_list").find("li").each(function(){
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});
// Update the count
var numberItems = count;
$("#filter-count").text("Klasser fundet = "+count);
});
});
But when I make a search it do find the li, but it lose most of the style, if you see the screenshot it will make better sense then I can do in writing.
<div id="manual_voting" class="ss_voting_manual">
<ul class="ss_voting_entry_list">
<li class="my_db_entry item_handle_22924874" id="my_db_entry_22924874" style="">
<div class="entry_title entry_details">
<h4>Koge Handelsskole - 3C</h4>
</div>
<div class="entry_photo">
<ol>
<li style="display: list-item;"><img alt="" src=
"https://d2ndy3xguswqvu.cloudfront.net/images/220405/22924874/original_89bf1593506cabda8ec9fd63ac6e35d0.png"></li>
</ol>
</div>
<div class="entry_votes entry_details">
<span class="votes">65</span> Stemmer
</div>
<div class="entry_description entry_details ss_preserve_ws"></div>
<div class="itemActions entry_actions">
<ul>
<li class="item_vote" style="display: inline;"><a class="vote_link vote"
href="#" onclick=
"SST.vote_for(widget_14972805, 22924874, this); return false;">Stem</a></li>
<li class="item_share" style="display: inline;"><a class="share_link" href=
"#" onclick="ss_share(widget_14972805, 22924874); return false;">Del med dine
venner</a></li>
</ul>
</div>
<div class="clear"></div>
</li>
<li class="my_db_entry item_handle_22924821" id="my_db_entry_22924821" style=
"display: list-item;">
<div class="entry_title entry_details">
</div>
<div class="clear"></div>
</li>
</ul>
<div class="clear"></div>
<div class="ss_voting_paging" id="paging_voting"></div>

Wrong Selector
In your target code you are searching for all the li's under .ss_voting_manual .ss_voting_entry_list including grand children.
$(".ss_voting_manual .ss_voting_entry_list").find("li")
This is causing your grandchildren li's, the one's that are wrapping the img tags, to be hidden.
Solution
Change your selector to fetch only direct descendant li's:
$(".ss_voting_manual .ss_voting_entry_list").children("li")
or
$(".ss_voting_manual .ss_voting_entry_list > li")
This will only fetch the first direct set of li's after the ul.