Develop Reference

How can I reset the input field and trigger the delete key press on click UL anchor tag?

I have an input box. Where I run commands to filter contents. When a user inputs in the box then the table of contents anchor is not working. So, I want to reset input and trigger the delete keypress one time on click UL anchor tag, when a user clicks on the UL anchor.
$(document).on("click", "ul a", function () {
$("#myInput").val("");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inarea">
<input id="myInput" type="text" value="12345678">
</div>
<ul>
<li>ABC</li>
<li>DEF</li>
<li>XYZ</li>
</ul>

Is this what you are looking for?
So what I did is I simply set the value of the input to "" which means none.
Please tell me if this is helpful so that I can change my answer, Thank You.
const buttons = document.querySelectorAll("a");
for (const button of buttons) {
button.addEventListener('click', function(event) {
document.getElementById('myInput').value = "";
})
}
.button {
color: #fff;
padding: 11px;
margin: 15px;
display: block;
text-transform: uppercase;
background: #0d496f;
font-size: 13px;
border-radius: 0;
float: left;
font-weight: 700;
cursor: pointer;
width: 15%;
text-align: center
}
<div class="inarea">
<form id="form">
<input id="myInput" type="text" value="12345678">
</form>w
</div>
<ul>
<li>ABC</li>
<li>DEF</li>
<li>XYZ</li>
</ul>
</div>

you can use the document.execCommand("delete"); function to emit the delete key press.
$(document).on("click", "ul a", function () {
$("#myInput").val("");
document.execCommand("delete");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inarea">
<input id="myInput" type="text" value="12345678">
</div>
<ul>
<li>ABC</li>
<li>DEF</li>
<li>XYZ</li>
</ul>
but this would make no use. you can use the selectionStart and selectionEnd properties of the input element to select a part or whole of the input text, and then use the document.execCommand("delete"); to delete the text

Toggle dropdown and hide on outside click

I got this dropdown menu which works, but I would also like it to close when I click outside it… I've tried some answered solutions but something's wrong and I can't figure it out..Could someone point what am I missing out here? Thanks a lot
$("#toggle").on('click', function() {
$(".dropdown").toggleClass("dropdown--visible");
});
$(document).click(function(){
$(".dropdown").hide();
});
$(".dropdown").click(function(e){
e.stopPropagation();
});
.dropdown {
background: red;
display: none;
}
.dropdown--visible {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="toggle">Toggle dropdown</button>
<div class="dropdown">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>

$("#toggle").on('blur click', function() {
$(".dropdown").toggleClass("dropdown--visible");
});
$(document).click(function(){
});
.dropdown {
background: red;
display: none;
}
.dropdown--visible {
display: block!important;
}
.dropdown--invisible {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="toggle">Toggle dropdown</button>
<div class="dropdown">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>

You have setup a click event listener for document and it will execute all the time when you click anywhere.
You can use a common class to filter out the dropdown events.
<button id="toggle" class="dd">Toggle dropdown</button>
<div class="dropdown dd">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>
$(document).click(function(e){
if (!$(e.target).hasClass('dd')) {
$(".dropdown").removeClass("dropdown--visible");
}
});
Also better use removeClass() without using hide() since hide() adds a display:none; directly to the element and will be hard to control.

This vanilla-flavored solution uses a handleDropdown function that checks two conditions:
- Was the toggle button clicked?
- Is the dropdown currently hidden?
If both are true, it shows the dropdown. Otherwise, it hides the dropdown.
const dropdown = document.getElementsByClassName("dropdown")[0],
toggle = document.getElementById("toggle");
document.addEventListener("click", handleDropdown);
function handleDropdown(event){
if(event.target == toggle && dropdown.style.display != "block"){
dropdown.style.display = "block";
}
else{
dropdown.style.display = "none";
}
}
.dropdown {
background: red;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="toggle">Toggle dropdown</button>
<div class="dropdown">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>

How do I make an editable UL LI list using jQuery?

I need your help with something. I am attempting to try and add the ability for the user to be able to real time edit a UL LI list by being able to click on the LI element. Then, upon clicking on the LI element, the element is changed to that of input box with the LI's current text value.
Then, when the user clicks off of the LI element the input box goes away and the LI element is returned to its normal state with the newly updated value.
I am trying to accomplish the above, however, with the current state of my code, it just adds another box, and does not actually allow me to click inside of it to add a new value. And also, when I click onto a new LI element, it just keeps adding another box and so on and so on.
Here's a fiddle:
https://jsfiddle.net/0o0n8rea/
Here's the code in question:
window.onload = function() {
$("#refdocs_list li").click(function(){
$(this).html('<input type="text" value='+ $(this).text() +'>').focus()
});
$("#refdocs_list li").focusout(function(){
});
}
Here is the HTML markup:
<div class="field_outline" style="background: #FFF; min-height: 75px; max-height: 300px; overflow-y: auto;">
<ul id="refdocs_list" style="list-style-type: none; margin: 0; padding: 3px 0px 3px 3px;">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>

You could wrap a span around your text and then replace that element with the input and vice versa using jQuery's replaceWidth() and a common attribute as a selector, such as data-id="editable-list-item" or other.
Similar to this:
$("#refdocs_list li").on('click', 'span[data-id="editable-list-item"]', function() {
var $input = $('<input type="text" data-id="editable-list-item">');
$input.val($(this).html());
$(this).replaceWith($input);
$input.focus();
});
$("#refdocs_list li").on('focusout', 'input[data-id="editable-list-item"]', function() {
var $span = $('<span data-id="editable-list-item">');
$span.html($(this).val());
$(this).replaceWith($span);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="refdocs_list" style="list-style-type: none; margin: 0; padding: 3px 0px 3px 3px;">
<li><span data-id="editable-list-item">test1</span></li>
<li><span data-id="editable-list-item">test2</span></li>
<li><span data-id="editable-list-item">test3</span></li>
</ul>

Keep things simple, add the contenteditable property to the element.
JSFiddle
Fiddle

Can something like this work for you ?
<ol contenteditable="true">
<li>
Line 1
</li>
<li>
Line 2
</li>
</ol>

Here is a simple, working solution. It is not ideal, but should be a good starting point.
$('li').on('click',function() {
$(this).children('.value').addClass('hidden');
$(this).children('.edit').removeClass('hidden');
});
$('.edit').on('change',function() {
$(this).siblings('.value').html($(this).val());
$('.edit').addClass('hidden');
$('.value').removeClass('hidden');
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<span class="value">Value 1</span>
<input class="edit hidden" type="text" value="Value 1" />
</li>
<li>
<span class="value">Value 2</span>
<input class="edit hidden" type="text" value="Value 2" />
</li>
<li>
<span class="value">Value 3</span>
<input class="edit hidden" type="text" value="Value 3" />
</li>
</ul>

See Below Example :
$("li").click(function(){
$(this).html('<li><input type="text" value="'+ $(this).text() +'"></li>').focus()
});
$("#refdocs_list li").focusout(function(){
});
input[type='text']{
width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field_outline" style="background: #FFF; min-height: 75px; max-height: 300px; overflow-y: auto;">
<ul id="refdocs_list" style="list-style-type: none; margin: 0; padding: 3px 0px 3px 3px;">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>

Checkboxes/radiobuttons unresponsive in expandable list form

Edit to answer: OK, so it seems this problem has come up before. The key seems to be in the return false; statement in the js prepareList function. I commented it out and now the code works fine. For more information and a more complete answer, here is the previous version of the question.
EDIT: Here's a jsfiddle that reproduces the error.
I'm trying to make a form using the expandable list code found here, and my checkboxes and radio buttons are either unresponsive or glitchy. They both know they're being pressed, they change to the depressed image when I click on them, but they don't update their value. For radio buttons, I can click one and it works, but then the others in that group become unresponsive. I have a dummy php page to just print out the results of the form, but it doesn't appear to be receiving any data. NOTE: This is my first website project, there may be something completely obvious that I'm just missing.
Here's a sample of the HTML:
<div id="listContainer">
<div class="listControl">
<a id="expandList">Expand All</a>
<a id="collapseList">Collapse All</a>
</div>
<form id="ColForm" action="Table.php" method="post"> <!--Organized list of collumns and filter options-->
<ul id="expList">
<li>Section heading
<ul>
<li><input type="checkbox" name="ColSelect" value="Name" form="ColForm"> <!--If checked, collumn will be included in final table--> Name
<ul>
<li>
<input type="text" name="Name" form="ColForm"><br> <!--filter parameter input-->
</li>
</ul>
</li>
<li><input type="checkbox" name="ColSelect" value="RA,Dec" form="ColForm">Another collumn
<ul>
<li>
<input type="radio" name="PoSearch" value="Range" form="ColForm">Radio button to select form type for this section<br>
<i>I have an option here
<input type="radio" name="Degs" value="Dec" form="ColForm">Option 1
<input type="radio" name="Degs" value="Hex" form="ColForm">Option 2</i><br>
Text input 1<br>
<input type="text" name="RA" form="ColForm">deg<br>
Text input 2<br>
<input type="text" name="Dec" form="ColForm">deg<br>
<input type="radio" name="PoSearch" value="Area" form="ColForm">Second form option<br>
<i>Text input A</i><br>
<input type="text" name="Area" form="ColForm"><br>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<input type="submit" value="submit" form="ColForm">
</form>
</div>
And here's the javascript for the list function:
/**************************************************************/
/* Prepares the cv to be dynamically expandable/collapsible */
/**************************************************************/
function prepareList() {
$('#expList').find('li:has(ul)')
.click( function(event) {
if (this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ul').toggle('medium');
}
return false;
})
.addClass('collapsed')
.children('ul').hide();
//Create the button functionality
$('#expandList')
.unbind('click')
.click( function() {
$('.collapsed').addClass('expanded');
$('.collapsed').children().show('medium');
})
$('#collapseList')
.unbind('click')
.click( function() {
$('.collapsed').removeClass('expanded');
$('.collapsed').children().hide('medium');
})
};
$(document).ready( function() {
prepareList()
});
And the relevant CSS:
#listContainer{
margin-top:15px;
}
#expList ul, li {
list-style: none;
margin:0;
padding:0;
cursor: pointer;
}
#expList p {
margin:0;
display:block;
}
#expList p:hover {
background-color:#121212;
}
#expList li {
line-height:140%;
text-indent:0px;
background-position: 1px 8px;
padding-left: 20px;
background-repeat: no-repeat;
}
/* Collapsed state for list element */
#expList .collapsed {
background-image: url(../img/collapsed.png);
}
/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */
#expList .expanded {
background-image: url(../img/expanded.png);
}
#expList {
clear: both;
}

The issue here is with event.preventDefault() in your code. It's keeping the checkboxes / radio buttons from performing their default behavior. Removing that entry will allow the input tags to function normally. But they will no longer trigger the expand and collapse functionality you're looking for.
You'll need to modify your JS to also listen for the click on the checkboxes. Here are some similar situations that may help you:
making on-click events work with checkboxes
clicking on a div to check / uncheck a checkbox

Form li background change

I'm trying to achieve the effect of the li tag changing background colors when the user focuses on the input (effect can be seen at the bottom of the page here. From seeing similar questions it seems like it can't be done in pure CSS, so I was wondering how to do it in jquery (I have no knowledge). Here is my HTML:
<form class="contact-form" action="" method="post" name="contact-form">
<ul>
<li>
<input type="text" name="name" placeholder="NAME" class="test"/>
</li>
<li>
<input type="email" name="email" placeholder="EMAIL" />
</li>
<li>
<textarea name="message" name="message" placeholder="MESSAGE"></textarea>
</li>
<li>
<button class="submit" type="submit">Send</button>
</li>
</ul>
</form>

Here's how to do it. It will add a background color to the parent LI of the form field that has focus, and after exiting the field the background color will be removed.
Working example on jsFiddle.
CSS:
.selected {
background: lightYellow;
}
jQuery:
$(function () {
var $form = $(".contact-form"),
selectedClass = "selected";
$form.on("focus", "input, textarea", function () {
$(this).closest("li")
.addClass(selectedClass);
});
$form.on("blur", "input, textarea", function () {
$(this).closest("li")
.removeClass(selectedClass);
});
});

Heres a basic jquery version which activates on focus like example
$('.contact-form').on('focus','input,textarea',function() {
$('.contact-form li').animate({'backgroundColor':'#00FF00'});
$(this).parent().animate({'backgroundColor':'#FF0000'});
});
fiddle

You can use the :hover selector in your CSS statement; no need for JS at all..
.contact-form ul li { background-color:#000000; }
.contact-form ul li:hover { background-color: #C0C0C0; }