We Keep Coding

How to copy text from one textbox to Label

<input type="text" id="Amount" />
<lable id="copy_Amount" > </lable> $
Anything written in "Amount" input , need to written in lable

Pointing out some obvious flaws in the accepted answer. Mainly the use of onkeyup and innerHTML.
<input type="text" id="Amount" />
<!-- there is no lable tag. also label is not used as label so use span instead -->
<span id="copy_Amount"></span>
<script>
//can input text without keyup
document.getElementById("Amount").oninput = function(){
//no need for another lookup - use this
let stringValue = this.value;
//do not use innerHTML due to html injection
document.getElementById("copy_Amount").textContent = stringValue
}
</script>

use keyup event
Correct lable tag label
use text() to set label text
$('#Amount').keyup(function() {
$('#copy_Amount').text($('#Amount').val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="Amount" />
<label id="copy_Amount" > </label> $

You can do this using JQuery.
$('#Amount').change(function() {
$('#copy_Amount').text($('#Amount').val());
});

You can try this
<script>
document.getElementById("Amount").onkeyup = function () {
var stringValue = document.getElementById("Amount").value;
document.getElementById("copy_Amount").textContent = stringValue;
}
</script>

Update <input> value onchange

I have bunch of inputs like:
<input />
<input />
<input />
and a button which ads extra input
<button>Add Input</button>
The issue is that when a user put the text in the input(s) and add
additional input afterwards (i.e. press Add Input) the entered text in old inputs disappears.
JSFiddle:
<div id="inputs"></div>
<button onclick="document.getElementById('inputs').innerHTML += '<input /><br>'">Add Input</button>
So I decided to update <input> value attribute. I have tried with onchange but had no luck.
The code with errors and trials is super simple and looks like:
function change_value(el) {
document.getElementById('some-id').value = el.value
}
<input id="some-id" value="${this.value}" onchange="change_value(this)" />
Will be grateful for any suggestions about how to keep <input value up-to-date with user text.

It depends on what content you want to update. You can find a snippet below, that works oninput and updates the textContent of a span.
const input = document.getElementById('some-id')
const display = document.getElementById('updated')
input.addEventListener('input', function(e) {
display.textContent = this.value
})
<input id="some-id" value="" /><br /><br />
<div>Updated value: <span id="updated"></span></div>
EDIT
A new snippet may clear things up a bit.
const btnAdd = document.getElementById('add')
btnAdd.addEventListener('click', function(e) {
var input = document.createElement('input');
input.type = "text";
document.getElementById('inputs').appendChild(input)
})
<div id="inputs"></div>
<button id="add">Add Input</button>
Use createElement() instead of innerHTML.

Try using innerHtml like this
document.getElementById('some-id').innerHtml instead of value
https://www.w3schools.com/js/js_htmldom_html.asp

Actually, it is not possible this way, maybe with some tricks like with any change store the value and create new input with the new value or change the innerHtml, maybe it works.

Change value of an input based on the original one

How can you copy an hidden input value attribute, manipulate it and then change it with a click function? To be more precise:
This:
<input type="hidden" id="destination" value="/change1/change2/fixed-part" />
To this:
<input type="hidden" id="destination" value="/changedtext/fixed-part" />
I've made some process but couldn't get the desired result. So far I get the value, manipulate it (not sure if it works alright) but couldn't replace it with the original one.
Here is the jsfiddle:
https://jsfiddle.net/3ry4cc79/1/

Try this,
document.getElementById('destination').value = "/changedtext/fixed-part";

$("button").click(function(event){
event.preventDefault();
$('#destination').val(function() {
return this.value.replace('change1', 'changedtext')
});
alert("Changed Value:"+$('#destination').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" id="destination" name="_wp_http_referer" value="/change1/change2/fixed-part" />
Try this should work,
<input type="hidden" id="destination2" name="_wp_http_referer" value="/changedtext/fixed-part" />
<button>Click to change the value</button>

// Get the hidden element
let el = document.getElementById('destination');
// Add the new val you want to minipulate the hidden elemets value with
let newVal = 'changedtext';
// then at a later state, you click the button
this.clickToChange = function () {
// and voila, the value is replaced on the hidden element
el.value = el.value.replace('change1/change2', newVal);
}

Remove input text when click button

I'm trying to remove input's val when clicking a button that appear when focusing on input.
This is my html:
<div class="search-area">
<form action="#" id="ingredientSearchForm">
<input type="text" placeholder="Arama" id="ingredientsSearch"/>
<span class="clearable"></span>
<span></span>
<input id="ingredientSearchSubmit" type="submit" class="hidden" placeholder="Arama"/>
</form>
</div>
And this is javascript function:
var searchinput = $(".search-area").find("input");
searchinput.focus(function(){
$(this).data('placeholder',$(this).attr('placeholder'));
$(this).attr('placeholder','');
$(this).siblings(".clearable").show();
});
$(".search-area").find(".clearable").on("click", function() {
$(this).val('');
});
searchinput.blur(function(){
$(this).attr('placeholder',$(this).data('placeholder'));
$(this).siblings(".clearable").hide();
});
.clearable is a span with background. Normally it is display:none.

I think you're wanting to clear searchinput on clicking .clearable?
If so, you should instead use:
$(".search-area").find(".clearable").on("click", function() {
searchinput.val('');
});

if you want to remove value of span then:
$(".search-area").find(".clearable").on("click", function() {
$(this).text('');
});
if you are trying to remove textbox value then:
$(".search-area").on("click",".clearable", function() {
$(this).closest("#ingredientSearchForm").find('#ingredientsSearch').val('');
});

Changing password field to text with checkbox with jQuery

How can I toggle a password field to text and password with a checkbox check uncheck?

is this what you looking for ??
<html>
<head>
<script>
function changeType()
{
document.myform.txt.type=(document.myform.option.value=(document.myform.option.value==1)?'-1':'1')=='1'?'text':'password';
}
</script>
</head>
<body>
<form name="myform">
<input type="text" name="txt" />
<input type="checkbox" name="option" value='1' onchange="changeType()" />
</form>
</body>
</html>

Use the onChange event when ticking the checkbox and then toggle the input's type to text/password.
Example:
<input type="checkbox" onchange="tick(this)" />
<input type="input" type="text" id="input" />
<script>
function tick(el) {
$('#input').attr('type',el.checked ? 'text' : 'password');
}
</script>

updated: live example here
changing type with $('#blahinput').attr('type','othertype') is not possible in IE, considering IE's only-set-it-once rule for the type attribute of input elements.
you need to remove text input and add password input, vice versa.
$(function(){
$("#show").click(function(){
if( $("#show:checked").length > 0 ){
var pswd = $("#txtpassword").val();
$("#txtpassword").attr("id","txtpassword2");
$("#txtpassword2").after( $("<input id='txtpassword' type='text'>") );
$("#txtpassword2").remove();
$("#txtpassword").val( pswd );
}
else{ // vice versa
var pswd = $("#txtpassword").val();
$("#txtpassword").attr("id","txtpassword2");
$("#txtpassword2").after( $("<input id='txtpassword' type='password'>") );
$("#txtpassword2").remove();
$("#txtpassword").val( pswd );
}
});
})
live example here

You can use some thing like this
$("#showHide").click(function () {
if ($(".password").attr("type")=="password") {
$(".password").attr("type", "text");
}
else{
$(".password").attr("type", "password");
}
});
visit here for more http://voidtricks.com/password-show-hide-checkbox-click/

I believe you can call
$('#inputField').attr('type','text');
and
$('#inputField').attr('type','password');
depending on the checkbox state.

Toggle the checkbox's focus event and determain the checkbox's status and update the field as nesscarry
$box = $('input[name=checkboxName]');
$box.focus(function(){
if ($(this).is(':checked')) {
$('input[name=PasswordInput]').attr('type', 'password');
} else {
$('input[name=PasswordInput]').attr('type', 'text');
}
})

I have the following in production. It clones a new field having the toggled type.
toggle_clear_password = function( fields ) {
// handles a list of fields, or just one of course
fields.each(function(){
var orig_field = $(this);
var new_field = $(document.createElement('input')).attr({
name: orig_field.attr('name'),
id: orig_field.attr('id'),
value: orig_field.val(),
type: (orig_field.attr('type') == 'text'? 'password' : 'text')
})
new_field.copyEvents(orig_field); // jquery 'copyEvents' plugin
orig_field.removeAttr('name'); // name clashes on a form cause funky submit-behaviour
orig_field.before(new_field);
orig_field.remove();
});
}
JQuery doesn't just let you take the type attribute and change it, at least not the last time I tried.

<html>
<head>
<script>
$(function(){
$("#changePass").click(function(){
if ($("#txttext").hasClass("hide")){
$("#txttext").val( $("#txtpass").val() ).removeClass("hide");
$("#txtpass").addClass("hide");
} else if ($("#txtpass").hasClass("hide")){
$("#txtpass").val( $("#txttext").val() ).removeClass("hide");
$("#txttext").addClass("hide");
}
});
});
</script>
<style>
.hide{display:none;}
</style>
</head>
<body>
<form id="myform">
<input type="text" id="txtpass" type='password'/>
<input class="hide" type="text" id="txttext" type='text'/>
<button id="changePass">change</button>
</form>
</body>
</html>

.attr('type') was blocked by jQuery team because it won't work with some versions of IE.
Consider using this code :
$('#inputField').prop('type','text');
$('#inputField').prop('type','password');

oncheck
$('#password').get(0).type = 'text';
onuncheck
$('#password').get(0).type = 'password';

This can be implemented much simpler:
<form name="myform">
<input type="password" name="password" />
<input type="checkbox" name="showPassword" onchange="togglePasswordVisibility()" />
</form>
<script>
function togglePasswordVisibility() {
$('#password').attr('type', $('#showPassword').prop('checked') ? 'text' : 'password');
}
</script>
Works for jQuery 1.6+