Develop Reference

Update label radio input [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
How do I update the label for a radio input element in JavaScript (or jQuery)?
For example, change the text from 'Swift' to 'Python'
<label for="language">
<input type="radio" id="language" name="language" value="main">Swift
</label>

If you re-arrange the HTML, you can target the label and change the text.
HTML
<input type="radio" id="language" name="language" value="main">
<label for="language">Swift</label>
JQuery JS
$('label[for="language"]').text('Python');
Standard JS
var find = document.querySelectorAll('label[for="language"]');
if (find.length>0) {
find[0].innerText = 'Python';
}
If you cannot or do not want to re-arrange the HTML, maybe wrap the text with a <span> element and target that.
HTML with Span
<label for="language">
<input type="radio" id="language" name="language" value="main"><span>Swift</span>
</label>
JQuery JS for HTML with Span
$('label[for="language"] span').text('Python');
Standard JS for HTML with Span
var find = document.querySelectorAll('label[for="language"] span');
if (find.length>0) {
find[0].innerText = 'Python';
}
If you cannot edit the HTML at all, then you may want to copy the radio button so it can be placed back into the element once you decide what text to display next to it.
HTML
<label for="language">
<input type="radio" id="language" name="language" value="main">Swift
</label>
JQuery JS
var find = $('label[for="language"]');
var html = find.html();
var regex = /(<([^>]+)>)/ig;
var radioButton = html.match(regex)[0];
find.html(radioButton + 'Python');
Standard JS
var find = document.querySelectorAll('label[for="language"]');
var html = find[0].innerHTML;
var regex = /(<([^>]+)>)/ig;
var radioButton = html.match(regex)[0];
find[0].innerHTML = radioButton + 'Python';

How to hide input value on focus using CSS/javascript/jquery? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
Hi i put value in input text and i want, when it get focus the value hide (like placeholder) i know we have placeholder but i have different project so i can't use placeholder
is there any way to do that with css, jquery, etc.?

$('.hide-on-focus').focus(function() {
if(!$(this).attr('data-value') || $(this).val() === $(this).attr('data-value')) {
$(this).attr('data-value', $(this).val());
$(this).val('');
}
}).blur(function() {
if($(this).val()==='') {
$(this).val($(this).attr('data-value'));
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="hide-on-focus" value="Not a placeholder" />
Hope this helps you :)

How about adding an event listener for on click?
Eg)
HTML
<input type="text" id="myInput" value="Some text" />
JS
let myInput = document.getElementById("myInput");
myInput.addEventListener("click", function() {
this.value = "";
});
JSFiddle: https://jsfiddle.net/ju7xervp/1/

You can use onfous the initialize value:onfocus="value=''"
<input value="hello" onfocus="value=''"/>

You can use data attribute to storing placeholder text and input value in it. So on focus of input, store value of input in data-val and show content of data-place in input
$("input").focus(function(){
this.value = $(this).attr("data-val");
}).blur(function(){
$(this).attr("data-val", this.value);
this.value = $(this).attr("data-palce");
}).trigger("blur");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" data-val="" data-palce="Placeholder text">

Just get the input inquestion using getElementByid or $("#id-of-related-input") and set its text to "" using text("") or val("").

Most easiest way to do that is this one
<input value="hello" onfocus="value=''" onfocusout="value='hello'" />

how work activate function event onclick(or other function) when it is activated from browser? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
Some day ago i'd write for asking what was the problem about onclick event doesn't activate when i clicked in a specific area of the browser. After check a guide i find it the problem end also the rappresentation of my simply test is trivial, i've known the mechanism for activating a particular function in browser text area.
Now that work it... i'd want add more detail of my question...what is the mechanism that activate my function from template html to tag <script></script> ?
<h3> Check is palindrome</h3>
<input type="text" id="input1" >
<input type="text" id="input2">
<br><br>
<input type="button" id="reload" onclick="myFunction()" value="ricarica">
<body >
<p onclick="check()" id="output" style="line-height: 1000px"> TEST</p>
</body>
//WHAT IS THE MECHANISM IN THIS POINT FOR ACTIVATE check()?
<script>
function check() {
var x = document.getElementById("input1").value;
var y = document.getElementById("input2").value;
if(x===y){
document.getElementById("output").innerHTML=" E' PALINDROMA "
}else document.getElementById("output").innerHTML=" NON E' PALINDROMA "";
}
function myFunction() {
location.reload(true);
}
</script>
</html>

Everything about your code is wrong. Like... literally everything. Here's a suggested alternative:
var out = document.getElementById('output');
document.getElementById('input').oninput = function() {
if( this.value.split('').reverse().join('') === this.value) {
out.innerHTML = "The input is a palindrome!";
}
else {
out.innerHTML = "The input is not a palindrome...";
}
};
<input type="text" id="input" />
<p id="output">Type something...</p>

From what I understand, move your check() function to the input field
<input type="text" id="text1" onclick="check()">
and remove from body
<body>

jQuery Get Current Index in class Selector [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I need to get the current index on this code.
$('#smProductWishlist').on('keyup blur keypress', '.smqty', function(e){
console.log( $(this).index() );
});
It doesn't work. Any idea?

An item's index depends on what selector you use. For example, an li with class list-item may be the fifth li but the first list-item. Assuming, for example, you're looking for index relative to class:
<input type="text" class="smqty" placeholder="one" />
<input type="text" id="smProductWishlist" class="smqty" placeholder="two" />
<input type="text" class="smqty" placeholder="three" />
<input type="text" class="smqty" placeholder="four" />
<input type="text" class="smqty" placeholder="five" />
<script>
$('#smProductWishlist').on('keyup blur keypress', function(e){
console.log( $('.smqty').index(this) );
});
<script>

a.index(b) returns the index of b in the list a:
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
var $elements = $("li")
$elements.on("click", function(e) {
console.log( $elements.index($(this)) )
})

how to make a multiple label to change multiple textbox after click event? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
How to make a multiple label to change multiple textbox after click event?
Problem: This output only showing last textbox value.
$(function () {
$('a.edit').on('click', function (e) {
e.preventDefault();
$('label.control-label1').each(function (key, item) {
var label = $(item);
label.hide();
label.siblings('input.edit-input1').val(label.text()).show().focus();
});
//Search for .control-label items
$('label.control-label').each(function (key, item) {
var label = $(item);
label.hide();
label.siblings('input.edit-input').val(label.text()).show().focus();
});
});
});
JSFiddle: http://jsfiddle.net/Logz/n24Ud/

Check the updated fiddle
That works. You were doing
label.siblings('input.edit-input').val(label.text()).show().focus();
which changed text of all input every time.
I just wrapped all pairs of label- textbox in a div like
<div>
<label for="name" class="control-label">
<p class="text-info">
<label style="color: #662819;" id="plz">test1</label>
<i class="icon-star"></i>
</p>
</label>
<input type="text" class="edit-input" />
</div>
Hope this helps.