This is div tag
<div>
<label>some text 1</label>
<label>another text 1</label>
</div>
<button>button</button>
Whenever I click on the button, I will add the div tag. when the next div tag is added, it should change the digit in the label text.
For example: In the first div, it should be 1 and in the next div it should be 2.
I am getting the label text using
var labelValue = $('div').find('label').map(function() {
return $(this).text().replace(/\d/,2);
}).get();
What I want is to change digit in the label text to 2.
I am getting the value but the label value is not getting changed in the html.
How to get the updated label value?
Sorry if there are any mistakes
You can try this:
$('button').on('click', function(e) {
$('div:eq(0)').clone().insertAfter('div:last').find('label').filter(function(e) {
$(this).text($(this).text().replace(/\d/, $("div").length));
});
})
Fiddle Link
maybe that one you want DEMO
<div id="show_divz">
<div id="div_1">
<label>some text 1</label>
<label>another text 1</label>
</div>
</div>
<button>button</button>
in js
$(document).on('click','button',function(){
var getId = $(this).prev().find('div').last().attr('id');
getId = getId.split('_');
$("#show_divz").append('<div id="div_'+(parseInt(getId[1])+1)+'"><label>some text '+(parseInt(getId[1])+1)+'</label><label>another text '+(parseInt(getId[1])+1)+'</label> </div>');
});
Something like this:
$('div').find('label').each(function(){
$(this).text($(this).text().replace(/\d/,2));
});
make id for button and trigger the click event to achive it..
try this..
<div>
<label>some text 1</label>
<label>another text 1</label>
</div>
<button id="btn">button</button>
<script>
$('#btn').click(function(){
$('div').find('label').each(function(){
$(this).text($(this).text().replace(/\d/,2));
}); }); </script>
here is the fiddle.. http://jsfiddle.net/Sarathv15/0jbq7em3/
Hope this will be a help,
var count = 0;
$("#btn").click(function() {
count++;
$("#lbl").html(count);
}
</script>
<div><label id="lbl">1</label></div>
<button id="btn" type="button">Button</button>
Since you want to replace the HTML here use
$(this).html("new value");
Related
<div id="embeddedExample">
<div id="embeddedCalendar">
</div>
<br/>
<div id="embeddedDateField" class="dateField">
Select a date from the calendar above.
</div>
<br/>
</div>
I want to retrieve the current text from the div with id "embeddedDateField" and then put it into the following form:
<input id="dateInput" type="text" th:field="*{selectedDate}" style=""/>
I'm using this JS right now:
<script>
// Access the input inside the div with this selector:
$(function () {
var myDate = $("#embeddedDateField").val();
$("#dateInput").val(myDate);
Console.log(myDate);
});
</script>
The text is not appearing. What's wrong?
Uset .text() to retrieve text content of a div and not .val(). .val() is used for input elements..
$(function () {
var myDate = $("#embeddedDateField").text();
$("#dateInput").val(myDate);
});
I need to change the label text on a radio button when it is selected from "Set default" to "default" - How can this be done with jQuery? I presume that you would use the class radio-defaultas the selector but I don't know much about jQuery.
<div class="radio-default">
<input type="radio" id="line-radio-1" name="line-radio">
<label for="line-radio-1">Set default</label>
</div>
<div class="radio-default">
<input type="radio" id="line-radio-2" name="line-radio">
<label for="line-radio-2">Set default</label>
</div>
<div class="radio-default">
<input type="radio" id="line-radio-3" name="line-radio">
<label for="line-radio-3">Set default</label>
</div>
Try
$("input[name='line-radio']").click(function() {
$('.radio-default label').text('Set default');
if(this.checked){
$(this).next().text('default');
}
});
Fiddle
Use below script
$( "input:radio" ).click(function() {
$(':radio').each(function() {
$("#"+this.id).next().text( "Set default" );
});
$("#"+this.id).next().text( "Default" );
});
Do this:-
var $radioButtons = $('.radio-default input:radio[name="line-radio"]');
$radioButtons.change(function(){
if($(this).val() == 'on'){
$radioButtons.siblings('label').text('Set default');
$(this).siblings('label').text('default')
}
});
Working JsFiddle here
You can add an on click hadler on the radio button
<input type="radio" id="line-radio-1" name="line-radio" onClick="yourFunc">
yourFunc: function(e){
$(e).next('label').text('your text');
}
you may want to reset the text on the previoused button clicked, but this can help you:
$('.radio-default').on('click',function(){
$(this).find('label').text("set");
})
Try this
$('input:radio').click(function() {
$('label').text('Set default');
$(this).next('label').html('Default');
});
http://jsfiddle.net/ph2gvjcc/
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('');
});
I am having a text area and a button.Like this :
<textarea id="txtarea"></textarea>
<input type="button" value="add text" id="add" />
Now,what i want to do is that on click of the button that text to be displayed on the same page above this text area just like we do comment or answer a question on stackoverflow.
How this can be done ?Please help.
you can do this using javascript
add any tag before (generally div or span tag is used) textarea tag
<div id="adduserdata"></div>
<textarea id="txtarea"></textarea>
<input type="button" value="add text" id="add" onclick="showtext()" />
Javascript code would be
function showtext(){
var text = document.getElementById("txtarea");
var showarea = document.getElementById("adduserdata");
showarea.innerHTML=text.value;
}
here is working example
As what you want, thus appending to the <div> division element, I assume that you will accept this answer (as a summary to all the comments and answers above) :
<!-- This is the HTML Part -->
<div id="text"></div>
<textarea id="new"></textarea>
<input type="button" onclick="appendTextToDiv();" />
<script>
function appendTextToDiv(){document.getElementById("text").innerHTML = document.getElmentById("text").innerHTML + document.getElementById("new").value;}
</script>
This can let you simply append it to the text. Fiddle
This will do if using Jquery (and previously text will stay) :
$('.button').click(function(){
var text = $('textarea').val();
if(text!=''){
$('p').text(text);
}
});
or like this:
$('.button').click(function(){
var text = $('textarea').val();
if(text!=''){
$('<p></p>').text(text).insertBefore('textarea');
}
});
Fiddle
Greetings,
Assume that I have such hidden div:
<div id="option-dialog" style="display:none;">
First
Second
</div>
And I have a text input field:
<input type="text" id="myinput" />
When myinput field is clicked by mouse, I want the hidden div to appear close to the selected input field and once user selects a link from this div, div dissapears and the value selected is becomes the value of the text input field. How to achieve this?
I use jquery and jquery ui
Regards
You can use Cluetip to do this.
have you considered using JQueryUI: Autocomplete ?
This does exactly what you are looking for
$("#myinput").live("focus", function() {
$("#option-dialog").toggle();
});
$(".option").live("click", function() {
var opt_val = $(this).attr("value");
$("#myinput").val(opt_val);
$("#option-dialog").toggle();
});
add class="option" to your list items
Hi may be this what to you need?
$(function() {
$("#myinput").click(function(){
$(this).hide('slow');
$('#option-dialog').show('slow');
});
$('#option-dialog a').click(function(){
var a = $(this).text();
$(this).parent().hide('slow');
$("#myinput").val(a).show('slow');
});
});
<div id="option-dialog" style="display:none;">
First
Second
</div>
<input type="text" id="myinput" />