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)) )
})
Related
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 1 year ago.
Improve this question
We are trying to convert several JQuery commands to plain JavaScript.
Can the following be converted?
Please note that the class .options is just a div container that contains all the input elements of interest.
var inputs = $(".options :input:not(:radio):not(:checkbox):not(.nofilter):not(.tt-hint)").filter(function () { return $(this).val(); }).length;
Try this
const plainInputs = [...document.querySelectorAll(".options input, select, textarea, password")]
.filter(ele => ele.value &&
!["radio", "checkbox"].includes(ele.type) &&
!ele.classList.contains("nofilter") &&
!ele.classList.contains("tt-hint")
).length;
console.log(plainInputs)
const jQueryInputs = $(".options :input:not(:radio):not(:checkbox):not(.nofilter):not(.tt-hint)").filter(function() {
return $(this).val();
}).length;
console.log(jQueryInputs)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="options">
<input type="radio" value="1" />
<input type="checkbox" value="2" />
<textarea class="nofilter">3</textarea>
<textarea class="tt-hint">4</textarea><br/>
<input value="5"/><input value="6"/><input value="7"/>
</div>
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'" />
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>
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 7 years ago.
Improve this question
I have this button
<div class="bigbox">
<input type="text" placeholder="bigboxinput">
<div class="smallbox">
<input type="text" placeholder="smallboxinput1">
<button class="addinput">Add another input</button>
</div>
</div>
<button class="addbigbox">Add another bigbox</button>
when I click that button I want to alert something like "hello" using javascript
<script>
var n = $('.addmore').length + 1;
$('.addmore').click(function(){ //I dont know what to do here
alert('Hello');
</script>
Here's a jsfiddle:
https://jsfiddle.net/mckinleymedia/cxu429e7/8/
I assumed html like this:
<div>
<div class="bigbox">
<div class="smallbox">
<input type="text" />
<button class="addinput">Add an input</button>
</div>
</div>
<button class="addbigbox">Add a bigbox</button>
</div>
And here's the code:
$('.addbigbox').click(function() {
var target = $('<button>')
.addClass('addinput')
.html('add an input');
$(this)
.before(
$('<div>')
.addClass('bigbox')
.append(
$('<input>')
.attr('type','text')
)
.append(
target
)
)
addInput(target);
});
var addInput = function(target){
target.click( function() {
$(this)
.before(
$('<input>')
.attr('type','text')
)
});
};
addInput($('.addinput'));
$('button.addinput').on('click', function(){
var ThisIt = $(this);
var n = $('input[type=text]').length + 1;
$('<input value="input '+n+'" type="text">').insertBefore(ThisIt);
});
Note: be sure to include jquery
Working Demo
you can use the same way for .addbigbox
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.