We Keep Coding

jQuery click events not working as expected

I want the user after clicking the input field, have the anchor options. Thus, I capture the click of these anchors and add the contents of that anchor into the input which was empty, white. But, the script does not work. So, where is the error? Is the logic wrong? At where? I followed the examples from the Jquery library documentation, I do not understand the error. Can you tell me where the error is?
Translation
pt-br 'Colegios' to en-us 'schools'
pt-br 'Unidades' to en-us 'locations'
pt-br 'Inscrição' to en-us 'subscription'
Actions of my script
1. If the user clicks the input type="text", anchor will be added.
2. If it clicks on that anchor, add the value of the content inside the input.
HTML
<input id="incricao" type="text" class="inscricao"/>
<input id="colegios" type="text" class="colegios"/>
<input id="unidades" type="text" class="unidades" />
Javascript/Jquery
$().ready(function(e) {
$('#input').click(function(){
$('.inscricao').append('PresencialOnline');
})
$('#colegios').click(function(){
$('.colegios').prepend('CDF MasterMenino JesusEthos');
})
$('#unidades').click(function(){
$('.unidades').prepend('RecifeJabatão');
})
$("#presencial").click(function() {
var valorDoInput0 = $(".inscricao").text();
$("#inscricao").val(valorDoInput0);
});
$("#online").click(function() {
var valorDoInput1 = $(".inscricao").text();
$("#inscricao").val(valorDoInput1);
});
$("#cdfmaster").click(function() {
var valorDoInput2 = $(".colegios").text();
$("#colegios").val(valorDoInput2);
});
$("#meninojesus").click(function() {
var valorDoInput3 = $(".colegios").text();
$("#colegios").val(valorDoInput3);
});
$("#ethos").click(function() {
var valorDoInput4 = $(".colegios").text();
$("#colegios").val(valorDoInput4);
});
$("#recife").click(function() {
var valorDoInput5 = $(".unidades").text();
$("#unidades").val(valorDoInput5);
});
$("#jabatao").click(function() {
var valorDoInput6 = $(".unidades").text();
$("#unidades").val(valorDoInput6);
});
});

First of all, you can't append anything inside an input tag, try using after instead of append.
Also $('#input') is wrong and you don't have any input id! try changing it to $('#incricao').
And finally, why you use both class and id to select your inputs? remove those classes and just use ids and select your inputs like $('#ID')

Vue2 add class to focused input

froI have a form with many inputs and I want to add a class to focused input label tag and remove class when another input selected.
I make such code
onInputSelected: function(e) {
var label = e.target.previousElementSibling;
label.classList.add('highlight');
}
but how can I remove class from one input and add to another when I change focus?
Updated:
I found solution but looks like it's to complicated :)
data: {
allInputs: document.getElementsByTagName('input')
},
methods: {
onInputSelected: function(e) {
e.target.previousElementSibling.classList.add('highlight');
[].forEach.call(this.allInputs, function (currentValue, index) {
if(currentValue.name == this.name) {
return;
}
currentValue.previousElementSibling.classList.remove('highlight');
}, e.target);
}
}

First of all you're not being very clear what you want to do.
2nd of all you have found solution so just clean up your code.
3rd of all I'd try using el.closest.
const input = document.getElementById('yourInput');
const label = input.closest("label");
// or if you want to add ids to labels
const label2 = input.closest("#yourLabel");
Link to docs
With this solution you will be little bit more save. Couse in yours, lets just imagine that somebody change HTML structure... Then very high risk your code stops working.

Hiding Text inside of an input element

I have a text input, and I want to hide the text inside, on a given event(I disable the input, when it is not needed). I would like to display the hidden text, when the given event is reversed.
I know I can store the value and retrieve as needed. I'd like to avoid moving data, since this is a purely cosmetic operation.
Can the input text be hidden, or is manipulating the data in the input the only way? I would like the simplest solution.y?
I can use pure JS and jQuery.

I would use "value" attribute of the same input object, since the attribute is the default value. In this case you don't even need any additional variables. The idea of this approach comes from the difference between properties and attributes. It means that if you change value property of the object, the attribute value remains the same as it was before.
var input = document.querySelector('input');
function hide() {
input.value = "";
}
function show() {
input.value = input.getAttribute('value');
}
<input type="text" value="Some text">
<button onclick="hide()">Hide</button>
<button onclick="show()">Show</button>

An example on how to store the value of an input element inside the dataset of the element.
and show/hide it on hover.
var hello = document.getElementById('hello');
hello.dataset.value = hello.value;
hello.value = '';
hello.addEventListener('mouseover', function() {
hello.value = hello.dataset.value;
});
hello.addEventListener('mouseout', function() {
hello.value = '';
});
<input id="hello" value="Hello World" />

How to change a span label's class using Javascript

I have an html element like this:
<dd><span class="label label-success" id="status">Production</span></dd>
I want to change it to
<dd><span class="label label-warning" id="status">Idle</span>
based on a ws.socket message.
setTimeout(function(){
window.ws = new WebSocket('ws://localhost:8088/sock/123');
window.ws.onmessage = function (evt) {
field.value = "Idle"
};
window.ws.onclose = function (evt){
}
window.ws.onopen = function (evt){
}
}, 500);
I want to change the value from Production to Idle and the class to "label label-warning".
I know to change the value I would do this:
var field = document.getElementById("status")
but I'm not exactly sure how to change the class and would using field.value be the correct way to change a span text?

You have jQuery, use it!
$("#status").text("Idle").removeClass("label-success").addClass("label-warning");
Or just .toggleClass("label-success label-warning");

Use Jquery
Try this
$('#status').text('Your Text') //For setting text
$('#status').removeClass('label-success').addClass('label-warning')

If you are just wanting to use JavaScript and not jQuery, you can refer to this answer. You can easily set the class by just saying:
document.getElementById("whatever").className = "";

To change the class (this is much more convenient using jQuery):
document.getElementsById('status').setAttribute("class","label label-warning");
To change the value of the span text:
document.getElementsById('status').innerHTML = "Production";

jQuery in-place-editor to use jQuery autocomplete input field

Background
Creating a WYSIWYG editor that uses Dave Hauenstein's edit-in-place and jQuery's autocomplete plug-in.
Source Code
The code has the following parts: HTML, edit-in-place, and autocomplete.
HTML
The HTML element that becomes an edit-in-place text field:
<span class="edit" id="edit">Edit item</span>
Edit In Place
The JavaScript code that uses the edit-in-place plugin:
$('#edit').editInPlace({
url : window.location.pathname,
hover_class : 'inplace_hover',
params : 'command=update-edit',
element_id : 'edit-ac',
on_edit : function() {
return '';
}
});
The on_edit is custom code to call a function when the user clicks on the associated span element. The value returned is used to seed the text input field. In theory, the plugin should replace the span element in the DOM with an input element similar to:
<input type="text" id="edit-ac" />
Autocomplete
The autcomplete code:
$('#edit-ac').autocomplete({
source : URL_BASE + 'search.php',
minLength : 2,
delay : 25
});
Problem
It seems that the timing for the autocomplete code is incorrect with respect to the timing for the edit-in-place code.
I think that the edit-in-place plugin needs to call the autocomplete code snippet after the input field has been added to the DOM.
Question
How would you integrate the two plugins so that when a user clicks on the edit-in-place field that the autocomplete code provides autocomplete functionality on the DOM element added by edit-in-place?
Thank you!

Solution
Modify the jQuery in-place-editor source code by instructing the code to append an identifier onto the input field.
jQuery in-place-editor Updates
This section details the updates required.
Type Definition
Provide new attributes in the default settings:
editor_id: "inplace_id", // default ID for the editor input field
on_create: null, // function: called after the editor is created
inputNameAndClass
Change the inputNameAndClass function to use the editor_id setting:
/**
* Returns the input name, class, and ID for the editor.
*/
inputNameAndClass: function() {
var result = ' name="inplace_value" class="inplace_field" ';
// DJ: Append the ID to the editor input element.
if( this.settings.editor_id ) {
result += 'id="' + this.settings.editor_id + '" ';
}
return result;
},
replaceContentWithEditor
Change the replaceContentWithEditor function to call the create function:
replaceContentWithEditor: function() {
var buttons_html = (this.settings.show_buttons) ? this.settings.save_button + ' ' + this.settings.cancel_button : '';
var editorElement = this.createEditorElement(); // needs to happen before anything is replaced
/* insert the new in place form after the element they click, then empty out the original element */
this.dom.html('<form class="inplace_form" style="display: inline; margin: 0; padding: 0;"></form>')
.find('form')
.append(editorElement)
.append(buttons_html);
// DJ: The input editor is part of the DOM and can now be manipulated.
if( this.settings.on_create ) {
this.settings.on_create( editorElement );
}
},
Autocomplete Coupling
The autocomplete functionality can now be activated the edit-in-place is revealed.
Combined Call
The HTML snippet remains the same as before. The new call to editInPlace resembles:
$('#edit').editInPlace({
url : window.location.pathname,
hover_class : 'inplace_hover',
params : 'command=update-edit',
editor_id : 'edit-ac',
on_create : function( editor ) {
$('#edit-ac').autocomplete({
source : URL_BASE + 'search.php',
minLength : 2,
delay : 25
});
},
on_edit : function() {
return '';
}
});
This attaches the autocomplete function to the in-place-editor whenever the in-place-editor is activated.