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
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 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 debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
This is what I got:
function doClickCaps(){
cs = ++cs % 2
var data = $("input.letters").val();
data.toUpperCase()
}
But It doesn't seem to work? ty
You can use val(function) which will loop over all the elements internally
function doClickCaps() {
$('input.letters').val((_, v) => v.toUpperCase());
}
doClickCaps()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input value="test1" type="text" class="letters" />
<input type="text" value="fsdf" class="letters" />
function doClickCaps() {
cs = ++cs % 2;
$('input.letters').each(function() {
$(this).val($(this).val().toUpperCase());
});
}
You can do something like this
function doClickCaps(){
$('input[class=letters]').each(function(){
var data = $(this).val();
console.log( data.toUpperCase() );
})
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input value="test1" type="text" class="letters" />
<input type="text" value="fsdf" class="letters" />
<input type="button" value="TransformCase"onclick="doClickCaps()" >
Using jquery you can do something like this
$(function(){
$( "#Upper").click(function() {
$('.texttomanu > .letters').val($('.texttomanu > .letters').val().toUpperCase());
});
$( "#Lower").click(function() {
$('.texttomanu > .letters').val($('.texttomanu > .letters').val().toLowerCase());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="texttomanu">
<input type="text" class="letters" />
<button id="Upper">Upper case</button>
<button id="Lower">Lower case</button>
</div>
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)) )
})
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.