Clicking input field triggers jQuery function - javascript

I'm trying to create a selectable list that when you click on an item, it displays an input field that you can use to edit the description but until the item is clicked on, the input field is hidden.
However, when I select an item and then click on the input field, it unselects the item and the input field is hidden again.
I've recreated the issue here with just one list item. How can I allow for the user to click in the input field without triggering the jQuery function?
Also, the user will be able to click multiple items in the list so I've updated the jsbin with a second item.

If you don't want to change the html arrangement of the input , you can prevent the event propagation on click of the input element to its parent which in turn will avoid any class toggle.
The only addition you need is this.
$('.fund input').click(function(e) {
e.stopPropagation();
});
Here is the working sample
$('.fund').click(function() {
$(this).toggleClass('selected');
});
$('.fund input').click(function(e) {
e.stopPropagation();
});
* {
font-family: 'Lato', sans-serif;
}
.fund {
background-color: #fff;
width: 500px;
border: 1px solid #444;
height: 50px;
padding: 0 10px;
border-radius: 3px;
}
.fund:hover {
background-color: #efefef;
cursor: pointer;
}
.fund .description,
.fund .alt-description {
width: 50%;
float: left;
}
.fund .description {
line-height: 50px;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 700;
color: #555;
}
.fund .alt-description {
visibility: hidden;
line-height: 50px;
font-size: 14px;
}
.fund .alt-description input {
height: 30px;
font-size: 12px;
}
.fund.selected {
border: 1px solid #00cc00;
}
.fund.selected .description {
color: #00cc00;
}
.fund.selected .alt-description {
visibility: visible;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[be able to click in input but don't toggle div]">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,700' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<title>JS Bin</title>
</head>
<body>
<div class='fund'>
<div class='description'>
Fund Name
</div>
<div class='alt-description'>
Description:
<input type='text' value='Fund Name'>
</div>
</div>
</body>
</html>

This will do the trick:
$('.fund').click(function() {
$('.fund').removeClass('selected');
$(this).addClass('selected');
});

The issue is that you have alt-description within fund, so anytime you click on "fund" it will toggle the show hide of your alt-description input. Move the alt-description out of the fund class. Otherwise make the trigger description instead of fund.
<div class='fund'>
<div class='description1'>
Fund Name
</div>
</div>
<div class='alt-description1'>
Description: <input type='text' value='Fund Name'>
</div>

Here I change the javascript a little.
$('.fund').click(function() {
if(!$(this).hasClass('selected')){
$(this).toggleClass('selected');
}
});
So when ever the div with the .fund class has a class selected don't toggle the class.

Related

Click Listener Event isn't working on Chrome extension

I'm trying to make a Chrome extension, but click listeners aren't working. Yes it's being injected, but it's still not working.
// define all other functions...
var start = document.getElementById("startTask")
start.addEventListener("click", function() {
addTask()
console.log("add")
})
var cancel = document.getElementById("deleteTask")
cancel.addEventListener("click", function() {
hideAddTaskForm()
})
var showForm = document.getElementById("showForm");
showForm.addEventListener("click", function() {
showAddTaskForm()
console.log("add progrees")
})
HTML for refrence:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<style>
/* Add some styling for the task cards and the "add task" button */
.task-card {
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
background-color: #f1f1f1;
box-shadow: 2px 2px 5px #ccc;
}
.task-name {
font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
}
.task-time {
font-size: 14px;
color: #666;
margin-bottom: 5px;
}
.task-url {
font-size: 14px;
color: #666;
text-decoration: underline;
cursor: pointer;
}
.task-buttons {
float: right;
}
.add-task-button {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
margin-top: 10px;
}
/* Hide the "add task" form by default */
#add-task-form {
display: none;
}
</style>
</head>
<body>
<h2>Task List</h2>
<div id="task-list">
<!-- Task cards will be added here dynamically -->
</div>
<button class="add-task-button" id="showForm">Add Task</button>
<form id="add-task-form">
<input type="text" id="task-name" placeholder="Task Name">
<input type="text" id="task-time" placeholder="Task Time (HH:MM)">
<input type="text" id="task-url" placeholder="Task URL">
<button id="startTask" type="submit">Save</button>
<button id="deleteTask" type="button">Cancel</button>
</form>
</body>
</html>
It was supposed to show a form for the task for the user to fill in, but it's not showing, and it is being clicked.
Not sure if the code is running on the webpage instead of the popup page, any other things I should do? I am not using jQuery, by the way.
Things I did
I made it execute when the DOM loads, shown above. I haven't seen any difference when I click it.

Separating text on the screen entered by the user

I have an HTML page, and I have a <textarea> element in it. Let's also say I have a send button that displays the message on the screen. When multiple messages are sent, their position will move to below the previous message sent. New messages will be in separate containers (I made borders). I've used this code that worked. Actually, it didn't completely work. When you enter multiple messages, instead of creating a new message border with the message inside it, it puts all your text in the same element.
const button = document.getElementById("sendButton");
button.addEventListener("click", displayText);
function displayText() {
const display = document.getElementById("msg");
const textArea = document.getElementById("enterMsg");
display.append(
textArea.value,
document.createElement("br")
);
textArea.value = "";
}
body {
background-color: skyblue;
font-weight: bolder;
}
#enterMsg {
margin-top: 34%;
height: 130px;
width: 100%;
font-family: Arial, sans-serif;
font-size: 15px;
color: darkorange;
background-color: #d796ff;
font-weight: bolder;
}
.enterText {
font-family: Arial, sans-serif;
font-size: 15px;
color: darkorange;
background-color: #d796ff;
font-weight: bolder;
}
#sendButton {
margin-left: 96%;
}
#msg {
margin-left: 80%;
border: solid;
border-color: #b19cd9;
background-color: #b4ff94;
border-radius: 50px;
color: darkorange;
}
.extraSpace {
padding: 5px;
}
textarea::placeholder {
color: darkorange;
}
div.centered {
text-align: center;
border: solid;
border-color: blue;
margin-top: 10%;
margin-bottom: 10%;
}
.confirmButton {
text-align: center;
margin-bottom: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Main Page</title>
<link rel="stylesheet" href="style.css">
<script src="tools.js"></script>
</head>
<body>
<p id="msg" class="extraSpace"></p>
<textarea id="enterMsg" placeholder="Enter your message here..."></textarea>
<button id="sendButton" onclick="displayText('msg', 'enterMsg')">Send</button>
</body>
</html>
As I said, this code works but it puts all messages in a single element. Is there any way to make it so that a new border appears with the entered text inside it instead of putting every message into a single element?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Main Page</title>
<link rel="stylesheet" href="style.css">
<script src="tools.js"></script>
</head>
<body>
<div id="messages"></div>
<textarea id="enterMsg" placeholder="Enter your message here..."></textarea>
<button id="sendButton" onclick="displayText('msg', 'enterMsg')">Send</button>
</body>
</html>
const button = document.getElementById("sendButton");
button.addEventListener("click", displayText);
const textArea = document.getElementById("enterMsg");
const container = document.getElementById("messages");
function displayText() {
// Create a new element with the message as it's inner text.
const message = document.createElement("p");
message.innerText = textArea.value;
message.setAttribute("class", "msg");
// Add that to the document
container.appendChild(message);
textArea.value = "";
}
You'll also have to change your stylesheet because msg is a class now rather than an ID (since there will be more than one of them

iFrame won't become visible when button is clicked

I have an iFrame in HTML code, and I created a script tag that I set on a submit button. I want the iFrame to be visible when I click on the submit button, but that is not working. Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
body {
font-family: Arial;
}
* {
box-sizing: border-box;
}
form.example input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
}
form.example button {
float: left;
width: 20%;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}
form.example button:hover {
background: #0b7dda;
}
form.example::after {
content: "";
clear: both;
display: table;
}
#outerdiv
{
border:none;
width:100%;
height:500px;
overflow:hidden;
}
#innerIframe
{
border: none;
position:relative;
top:-190px;
width:100%;
height:900px;
}
</style>
</head>
<body>
<h2>Web Service</h2>
<script type="text/javascript">
function showIFrame() {
var iframe = document.getElementById("innerIframe");
iframe.style.visibility="visible";
}
</script>
<form class="example" method="post" style="margin:auto;max-width:500px">
<input type="text" placeholder="Search query" name="search2">
<button type="submit" name="submit" onclick="showIFrame()"><i class="fa fa-search"></i></button>
</form>
<br>
<div id="outerdiv" >
<iframe src={{results}} id="innerIframe" style="visibility: hidden;" scrolling="yes"></iframe>
</div>
</body>
</html>
{{results}} is the URL that is passed by the user in python Flask. So in the form the user types in a word, which then joins it to a URL and performs a search. The search works perfectly, but when the page is loaded on startup, it shows Not Found, the requested URL has not been found... and I understand why that happens as the URL hasn't been loaded yet. So I want to make the iFrame invisible, and once the submit button is pressed, the frame can be visible.
I have tried with jQuery as well, but it did not work.
All help and advice will be highly appreciated.
First pass "event" when you call the onClick function in your HTML code like this *onclick="showIFrame(event)
Then in your function, you accept the "event" as a parameter like this *function showIFrame(event) {
A click button most times trigers your page to refresh, so you have to stop that by preventing the default action. Add "event.preventDefault()" to your function like this *event.preventDefault()

copying localStorage using javascript

Good Evening Stackoverflow!
So I am running into an issue in which I am trying to create a notes app using javascript and I wanted to play around with localStorage. I have tried a couple of options but I can't seem to select all and then copy to the clipboard the localStorage, has anyone else ran accross this before?
<!DOCTYPE html>
<html>
<head>
<title>NotePad</title>
<style>
body {
font-family: Tahoma;
line-height: 1.6em;
background: #f4f4f4;
}
header, footer {
text-align: center;
}
#container {
width: 400px;
margin: 50px auto;
background: #FFFFa5;
overflow:hidden;
padding: 30px;
}
.clear {
text-decoration: none;
background: #333;
color: #fff;
padding: 10px;
}
.copy {
text-decoration: none;
background: #333;
color: #fff;
padding: 10px;
}
</style>
<script>
function getNote(){
if(localStorage.getItem('note')){
var note = localStorage.getItem('note');
} else {
var note = 'Go ahead and edit this note to save in local storage';
}
document.getElementById('note').innerHTML = note;
}
function saveNote(id){
var note = document.getElementById('note').innerHTML;
localStorage.setItem('note', note);
}
function clearNote(){
clear: localStorage.clear();
return false;
}
function copyNote(){
$("#note").select();
document.execCommand("copy");
return false;
}
</script>
</head>
<body>
<header>
<h1>My Notes!</h1>
</header>
<section id="container">
<div id="note" contenteditable="true" onkeyup='saveNote(this.id)'></div>
</section>
<footer>
<div>
Clear Note
</div>
<br>
<div>
Copy
</div>
<p>MyNote © 2017</p>
</footer>
<script>
getNote();
</script>
</body>
</html>
The select method does not select text. It fires the select event on that element (pretends the user selected that element themself), and since you have no event handlers for the select element, nothing happens. This question should help you create a function that selects your text.

Add text to input field (and always replace current text)

I need your help.
I added a hidden list to a input search field. The list opens when you click into the input field and closes when you click anywhere on the body. I now want to add the text of the list to the input form when you click on it. That means all text that is currently in the input field will get replaced with the new text from the list. For instance if you click on "Montego Bay" it will be added to the input field and also replace the current text in that field.
The input field:
<input required id="HotelsPlacesEan" name="city" type="search" class="form input-lg RTL search-location deleteoutline" placeholder="Test" value="<?php echo $themeData->selectedCity; ?>" required />
The list:
<div class="suggest-div">
<span class="suggest-content hiddd">
<ul class="liststyle">
<li class="whylist"><b>Popular Destinations</b></li>
<li class="suggest"><a class="selectlink" href="">Montego Bay</a></li>
<li class="suggest"><a class="selectlink" href="">Negril</a></li>
<li class="suggest"><a class="selectlink" href="">Ocho Rios</a></li>
<li class="suggest"><a class="selectlink" href="">Kingston</a></li>
<li class="suggest" style="border-bottom:0px;"><a class="selectlink" href="">Port Antonio</a></li>
</ul>
</span>
</div>
My current javascript (not ideal, I know)
<script type="text/javascript">
$(".opensuggest").click(function() {
$(".suggest-content").toggleClass("hiddd");
$("body").click(function() {
$(".suggest-content").addClass("hiddd");
});
});
</script>
Current CSS:
<style>
a.selectlink {
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
display: block;
}
a.selectlink:hover {
color: #fff;
}
ul.liststyle {
margin-top: 0px;
}
li.whylist {
padding-top: 10px;
padding-bottom: 10px;
background-color: #ddd;
color: #000;
padding-left: 10px;
font-size: 15px;
font-weight: 100;
}
li.suggest {
border-bottom: 1px solid #ddd;
font-size: 15px;
font-weight: 100;
}
li.suggest:hover {
background-color: #515B62;
color: #fff;
}
.suggest-div {
position: absolute;
width: 100%;
}
span.suggest-content {
display: block;
background-color: #fff!important;
margin-top: 0px;
line-height: 1.2;
position: absolute;
width: 100%;
z-index: 999;
}
.hiddd {
display: none!important;
}
.form {font-weight: 100!important;}
</style>
I would greatly appreciate your help, I gave my best.
Use .text() to get the text of the link in the list, and use .val() to replace the value of the input field.
$(".selectlink").click(function(e) {
e.preventDefault();
$("#HotelsPlacesEan").val($(this).text());
});
$("body").click(function() {
$(".suggest-content").addClass("hiddd");
});
change this snippet from your code with
$(this).addClass('hiddd');
please
i think you only want to hide the active clicked item. otherwise your code makes an endless loop and tries to hide all the items with this class.

Categories