We Keep Coding

Javascript function to toggle 2 divs and change button text - tageting different ID

I have multiple groups of DIV´s with each their button, in these groups I have 2 DIVS that should toggle between them on click on that button, and also switch the content on the buttons, but each group and button have their own unique ID.
The button ID´s are defined with EditButton<%=DataCon("ID")%> (Which gives EditButton1, EditButton2, EditButton3 .. etc) and the 2 DIVS in each group is called EditData<%=DataCon("ID")%> and TextData<%=DataCon("ID")%> (I.e EditData1 and TextData)
The button serverside:
<button id="EditButton<%=DataCon("ID")%>" class="btn btn-success" data-text-swap="<< Luk Redigering">Åben Redigering >></button>
Which result in:
<button id="EditButton1" class="btn btn-success" data-text-swap="<< Luk Redigering">Åben Redigering >></button>
The Severside JavaScript (ASP) I have:
$(function(){
$('div.EditData<%=DataCon("ID")%>').hide();// hide it initially
$('button').on('click', function(){
$('div.EditData<%=DataCon("ID")%>, div.TextData<%=DataCon("ID")%>').toggle();
});
});
$("button.EditButton<%=DataCon("ID")%>").on("click", function() {
var el = $(this);
if (el.text() == el.data("text-swap")) {
el.text(el.data("text-original"));
} else {
el.data("text-original", el.text());
el.text(el.data("text-swap"));
}
});
Which results in :
$(function(){
$('div.EditData1').hide();// hide it initially
$('button').on('click', function(){
$('div.EditData1, div.TextData1').toggle();
});
});
$("button.EditButton1").on("click", function() {
var el = $(this);
if (el.text() == el.data("text-swap")) {
el.text(el.data("text-original"));
} else {
el.data("text-original", el.text());
el.text(el.data("text-swap"));
}
});
The Severside DIVS in HTML :
<div class="EditData<%=DataCon("ID")%>" style="display:none">
<div class="input-group">
<input type="text" class="form-control" placeholder="<%=DataCon("FullName")%>" aria-label="Recipient's username" aria-describedby="basic-addon2" style="width: 100px;">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button"><i class="far fa-save"></i></button>
</div>
</div>
</div>
<div class="TextData<%=DataCon("ID")%>">
<%=DataCon("FullName")%>
</div>
Which results in:
<div class="EditData1" style="display:none">
<div class="input-group">
<input type="text" class="form-control" placeholder="Some Name" aria-label="Recipient's username" aria-describedby="basic-addon2" style="width: 100px;">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button"><i class="far fa-save"></i></button>
</div>
</div>
</div>
<div class="TextData1">
Some Name
</div>
The above script is obviously not working because I am not calling the DIVS and Buttons correctly, but how do I fix this?
Best Regards
Stig :-)

I think #Rory McCrossan's idea to use closest() would work, the only issue is that if you have display none on the container with the button in it, then the button won't be visible to begin with.
You could adjust your markup a bit so that the Edit button and the form are both siblings of a common parent. That would allow you to use nextSibling() in vanilla JS, or next() in jQuery
$('.toggle').on('click', function(event) {
$(this).next('.EditData').toggleClass('invisible');
let text = $(this).parent().find('.TextData').toggleClass('invisible');
let newText = $(this).text() === 'Åben Redigering >>' ? '<< Luk Redigering' : 'Åben Redigering >>';
$(this).text(newText);
})
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button id="EditButton1" class="toggle btn btn-success" data-text-swap="<< Luk Redigering">Åben Redigering >></button>
<div class="EditData invisible">
<div class="input-group">
<input type="text" class="form-control" placeholder="Some Name" aria-label="Recipient's username" aria-describedby="basic-addon2" style="width: 100px;">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button"><i class="far fa-save"></i></button>
</div>
</div>
</div>
<div class="TextData">
Some more info should appear here below
</div>
</div>
If you do it this way, you're relying on the structure of your template. You don't need to use a dynamic id to do a query each time as long as you put your button that triggers the toggle in the same position relative to one another with the same class names, this should work. Let me know if I misunderstood what you were trying to do there and I can edit my answer :)

How to see selected options combined with another ones in console log?

I need to see two values together in console like
2 times Kişi ekleme,
3 times Proje Açma, etc.
There are multiple rows in page with same classes.
So i need to combine two values which are in same row.
But need to get each of them.
Quantities comes from numeric input boxes and second one comes from dropdown select.
How can i combine them in console.log(); ?
By the way i am adding the selectbox via append.
And there are no value attrs for select options.
This code shows .ex's and .span2's but not together.
$('.ex').find(':selected').each(function () {
console.log($(this).text())
})
$(".span2").each(function () {
console.log($(this).val());
});
return;
I am trying to print them as an array and trying to control if there is a selected option which is selected more than once on other dropdowns.
Here is the html. Adding rows to repeatable part by clicking.
<div class="row" style="background-color: #ecf0f5; padding: 15px 35px;">
<div class="col-xs-12">
<div class="repeatable"></div>
<form class="form-horizontal" style="margin-left: 0x!important;">
<fieldset class="todos_labels">
<div class="form-group" style="text-align:left;">
<br><input type="button" value="Add" class="btn btn-success add" align="center"><br>
</div>
</fieldset>
<input type="button" id="btnSavePackagetab2" class="form-control btn btn-success" style="width: 14%;float: right;"value="Kaydet">
</form>
</div>
</div>
</div>
And this is the append part.
$(".repeatable").append('<div class="field-group row"><br><div class="col-lg-6"><label for="" style="text-align:left">Package</label><select class="form-control ex" id="selectiontab2"><option>Seçiniz</option><option>Cv Görüntüleme</option><option>Proje Açma</option><option>Kişi Ekleme</option><option>CV İletişim Bilgileri Görüntüleme</option></select></div><div class="col-lg-4"><label for="">Quantity</label><input type="number" class="span2 form-control" min="0" id=""></div><div class="col-lg-2"><label for=""></label><br><br></div></div>');

You can select the parent element that contains both types of elements (i.e. .row), and then use the same selectors you had (but within the this scope) inside the each callback:
$('.row').each(function () {
console.log( $('.ex > :selected', this).text(), $('.span2', this).val() );
});

This should do the trick.
You loop over each select with your jQuery function. While a select is found, we can traverse up the DOM and select the input adjacent to it.
function add() {
$(".repeatable").append('<div class="field-group row"><br><div class="col-lg-6"><label for="" style="text-align:left">Package</label><select class="form-control ex" id="selectiontab2"><option>Seçiniz</option><option>Cv Görüntüleme</option><option>Proje Açma</option><option>Kişi Ekleme</option><option>CV İletişim Bilgileri Görüntüleme</option></select></div><div class="col-lg-4"><label for="">Quantity</label><input type="number" class="span2 form-control" min="0" id=""></div><div class="col-lg-2"><label for=""></label><br><br></div></div>');
};
add();
add();
$('.ex').find(':selected').each(function () {
let stringValueConsole = $(this).text();
stringValueConsole += ": " +$(this).parent("div.row").find("input.span2").val();
console.log(stringValueConsole);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row" style="background-color: #ecf0f5; padding: 15px 35px;">
<div class="col-xs-12">
<div class="repeatable"></div>
<form class="form-horizontal" style="margin-left: 0x!important;">
<fieldset class="todos_labels">
<div class="form-group" style="text-align:left;">
<br><input type="button" value="Add" class="btn btn-success add" align="center"><br>
</div>
</fieldset>
<input type="button" id="btnSavePackagetab2" class="form-control btn btn-success" style="width: 14%;float: right;" value="Kaydet">
</form>
</div>
</div>
</div>

Inputing info in forms, then recalling it via jquery

I have a page with 3 divs that show one after another.
The first div shows three pictures, you choose which you like best by clicking the link below the picture, which also takes you to div 2.
Div 2 is a bunch of input boxes and a drop down selector. Once you fill out all the forms, click the next link which takes you to div 3.
Div 3 is a review of what you selected. It should show what picture you selected in div 1, and what you put in the text boxes / selector in div 2.
I have no idea how to go about doing this, and im really struggling, any and all help is appreciated.
JSFiddle - https://jsfiddle.net/7yuuz8d4/27/
/* JS - */
$(document).ready(function () {
$('#div1').show();
$('#div2').hide();
$('#div3').hide();
$('#div1').on('click', 'a', function (e) {
$('#div1').hide();
$('#div2').show();
});
$('#div2').on('click', 'a', function (e) {
$('#div2').hide();
$('#div3').show();
});
});
/*$(document).ready(function () {
$('#div1').on('click', 'a', function (e) {
var stylechoice = $(this).attr('value');
});
$("#height").prop(function(){
var height = $('#height').prop('value);
});
});
*/
/*$(document).ready(function () {
if(document.getElement
});
*/
/*if(document.getElementById('.col-md-4').clicked) {
$("#casual").show("#style1");
} else if {
$("#street").show("#style1");
} else if {
$("#classic").show("#style1");
});*/
<!-- Html -->
<!doctype html>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<body>
<div class="container">
<div id="div1">
<h2>Pick your style</h2>
<div class="col-md-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Simple_triangle.svg/120px-Simple_triangle.svg.png">
<a class="btn btn-primary btn-lg" href="#div2" role="button" value="casual">Casual »</a>
</div><!--Closes Col-md-4-->
<div class="col-md-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Simple_triangle.svg/120px-Simple_triangle.svg.png">
<a class="btn btn-primary btn-lg" href="#div2" role="button" value="street">Street »</a>
</div><!--Closes Col-md-4-->
<div class="col-md-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Simple_triangle.svg/120px-Simple_triangle.svg.png">
<a class="btn btn-primary btn-lg" href="#div2" role="button" value="classic">Classic »</a>
</div><!--Closes Col-md-4-->
</div><!--Closes div1-->
<div id="div2">
<h3>Measurements</h3>
<h5>Measurements can be in inches or centimeters, just please notate which you use</h5>
<form>
Height:<br>
<input type="text" name="height" id="height"><br>
Neck:<br>
<input type="text" name="neck" id="neck"><br>
Arms:<br>
<input type="text" name="arms" id="arms"><br>
Waist:<br>
<input type="text" name="waist" id="waist"><br>
Legs:<br>
<input type="text" name="legs" id="legs"><br>
Shoes:<br>
<input type="text" name="shoes" id="shoes"><br>
Shirt size:<br>
<select>
<option value="small" id="small">Small</option>
<option value="medium" id="medium">Medium</option>
<option value="large" id="large">Large</option>
<option value="xlarge" id="xlarge">X-Large</option>
<option value="xxlarge" id="xxlarge">XX-Large</option>
</select>
</form>
<a class="btn btn-primary btn-lg" href="#div3" role="button">Next »</a>
</div><!--Closes div2-->
<div id="div3">
<h3>Review</h3>
<p>Here's the info you gave us, please double check it:</p>
<p>Style:</p>
<p>Height:</p>
<p>Neck:</p>
<p>Arms:</p>
<p>Waist:</p>
<p>Legs:</p>
<p>Shoes:</p>
<p>Shirt size:</p>
<p>Finally, any notes for our fashion aids?</p>
<textarea name="message" rows="10" cols="100">
Any other concerns you have we should know about? Do you have big thighs, long neck, big arms, etc. anything and anything that can help with the fitting of your clothing is extremely helpful!
</textarea>
<div id="display">
<a class="btn btn-primary btn-lg" href="success.html" role="button">Submit »</a>
</div>
</div><!--Closes div3-->
</div><!--Closes container-->
</body>
Note: I commented out what i have been trying to work on, and failing with. I have the div show/hide jquery working, im just putting it in here so that you know what i have so far, and that the solution anybody provides doesnt break that code in the meantime.

Hopefully this should get you started:
https://jsfiddle.net/xszmdx3a/
Create some empty tags in your third div to hold the content:
<p>Style:<span id="style-d3"></span></p>
<p>Height: <span id="height-d3"></span></p>
I added an extra class to your links in the first div:
<a class="btn btn-primary btn-lg picture-link" href="#div2" role="button" value="casual">Casual »</a>
And then add an event handler for the image:
$('.picture-link').click(function() {
var imgTag = $(this).parent().find('img')[0];
$(imgTag).clone().appendTo('#style-d3');
});
Similarly for the other fields:
$('#height').change(function() {
$('#height-d3').html($(this).val());
});

You can select the value of a textbox (and most other form controls) using the jQuery .val() function.
e.g. in your case:
var waistVal = $("#waist").val();
If you want to re-display the value elsewhere, then you could create an element, such as <div> or <span> to contain the value, and then inject the new value into it, e.g.:
<p>Waist:</p><span id="waistVal"></span>
So instead of the above jQuery script, you could instead write:
$("#waistVal").text($("#waist").val());
which will immediately show the value of the "waist" textbox inside the "waistVal" span. You can do the same for all the other textboxes and the dropdown.
Secondly, for the style links, it's probably more user-friendly to make the image itself clickable (and just have the words as labels only):
HTML in div1:
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Simple_triangle.svg/120px-Simple_triangle.svg.png" value="street">
Street
HTML in div3:
<p>Style:</p><span id="styleVal"></span><span id="styleImg"></span>
jQuery (inside the click event for the first set of hyperlinks):
$('#div1').on('click', 'img', function (e) {
//this will be populated, but invisible until div3 is displayed
$("#styleVal").text($(this).attr("value"));
$(this).clone().appendTo("#styleImg");
$("#div1").hide();
$"(#div2").show();
});

You can try this generic solution
$(document).ready(function () {
$('#div1').show();
$('#div2').hide();
$('#div3').hide();
var data = {
'div1': {},
'div2': {}
};
$('#div1').on('click', 'a', function (e) {
var imgTag = $(this).parent().find('img')[0];
data.div1.src = $(imgTag).attr('src');
$('#div1').hide();
$('#div2').show();
});
$('#div2').on('click', 'a', function (e) {
$(this).parent().find('form input, form select').each(function(){
data.div2[$(this).attr('name')] = $(this).val();
});
$('#div2').hide();
$('#div3').show();
setValues();
});
function setValues(){
$('#style-d3').append('<img src="' + data.div1.src + '">');
$.each(data.div2, function(key, val){
$('#' + key + '-d3').text(val);
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class="container">
<div id="div1">
<h2>Pick your style</h2>
<div class="col-md-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Simple_triangle.svg/120px-Simple_triangle.svg.png">
<a class="btn btn-primary btn-lg picture-link" href="#div2" role="button" value="casual">Casual »</a>
</div><!--Closes Col-md-4-->
<div class="col-md-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Simple_triangle.svg/120px-Simple_triangle.svg.png">
<a class="btn btn-primary btn-lg picture-link" href="#div2" role="button" value="street">Street »</a>
</div><!--Closes Col-md-4-->
<div class="col-md-4">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Simple_triangle.svg/120px-Simple_triangle.svg.png">
<a class="btn btn-primary btn-lg picture-link" href="#div2" role="button" value="classic">Classic »</a>
</div><!--Closes Col-md-4-->
</div><!--Closes div1-->
<div id="div2">
<h3>Measurements</h3>
<h5>Measurements can be in inches or centimeters, just please notate which you use</h5>
<form>
Height:<br>
<input type="text" name="height" id="height"><br>
Neck:<br>
<input type="text" name="neck" id="neck"><br>
Arms:<br>
<input type="text" name="arms" id="arms"><br>
Waist:<br>
<input type="text" name="waist" id="waist"><br>
Legs:<br>
<input type="text" name="legs" id="legs"><br>
Shoes:<br>
<input type="text" name="shoes" id="shoes"><br>
Shirt size:<br>
<select name="size">
<option value="small" id="small">Small</option>
<option value="medium" id="medium">Medium</option>
<option value="large" id="large">Large</option>
<option value="xlarge" id="xlarge">X-Large</option>
<option value="xxlarge" id="xxlarge">XX-Large</option>
</select>
</form>
<a class="btn btn-primary btn-lg" href="#div3" role="button">Next »</a>
</div><!--Closes div2-->
<div id="div3">
<h3>Review</h3>
<p>Here's the info you gave us, please double check it:</p>
<p>Style:<span id="style-d3"></span></p>
<p>Height: <span id="height-d3"></span></p>
<p>Neck: <span id="neck-d3"></span></p>
<p>Arms: <span id="arms-d3"></span></p>
<p>Waist: <span id="waist-d3"></span></p>
<p>Legs: <span id="legs-d3"></span></p>
<p>Shoes: <span id="shoes-d3"></span></p>
<p>Shirt size: <span id="size-d3"></span></p>
<p>Finally, any notes for our fashion aids?</p>
<textarea name="message" rows="10" cols="100">
Any other concerns you have we should know about? Do you have big thighs, long neck, big arms, etc. anything and anything that can help with the fitting of your clothing is extremely helpful!
</textarea>
<div id="display">
<a class="btn btn-primary btn-lg" href="success.html" role="button">Submit »</a>
</div>
</div><!--Closes div3-->
</div><!--Closes container-->
</body>

trying to make a value true on click with an if statement

I am trying to change between colors on click in jquery. According to the picture below I have the default value
and then in this image when I click on the input box and then back on a button the background color stays on the input box rather than dissappears when any other button is clicked.
i'd like the background color to disappear when any of the buttons are clicked.
here is my jquery:
$("#donation-amount").click(function() {
if ($(this).hasClass('inpt-first')) {
$(this).css("background-color", "#c97e06");
$("#default").removeClass('active');
$("#btn2").removeClass('active');
$("#btn3").removeClass('active');
}
else{
$(this).removeAttr("background-color")
$("#default").addClass('active');
}
});
and here is my html:
<div class="choose-pricing">
<div class="btn-group">
<div class="buttons">
<button type="button" id="default" class="btn btn-default selectvalue hover-color active" value="50">50</button>
<button type="button" id="btn2" class="btn btn-default selectvalue hover-color" value="100">100</button>
<button type="button" id="btn3" class="btn btn-default selectvalue hover-color" value="150">150</button>
<input type="Custom" name="donation-amount" class="inpt-first form-control" id="donation-amount" onclick="if(this.defaultValue == this.value) this.value = ''" onblur="if(this.value=='') this.value = this.defaultValue" value="Custom">
</div>
<input type="hidden" name="donation-amount-value" id="donation-amount-value">
</div>
<div class="money-donate">
<div class="display-amount" id="display-amount">
</div>
</div>
</div>
</fieldset>
</div>
any help would be appreciated!

Try
$(this).css("background-color", "")
Instead of this
$(this).removeAttr("background-color")
You cannot remove the background-color like this as it is not an attribute.

On click of button you should remove the class active from the donation-amount
what you have written will only work as toggle on the custom button only. Its not interacting with rest of the buttons.
Flow should be to remove class from custom button if any button is hit and if custom button is hit remove class from any of button.
$(".selectvalue").each(function(){
$(this).click(function(){
$("#donation-amount").removeClass('active');
})
});
$("#donation").click(function(){
$(".selectvalue").removeClass('active');
})

Is this the functionality you are looking for? Also added in fiddle
Instead of background color, just use the .active class
$('#donation-amount,#default, #btn2, #btn3').click(function(event) {
//add any other checks you want here
$("#default").removeClass('active');
$("#btn2").removeClass('active');
$("#btn3").removeClass('active');
$("#donation-amount").removeClass('active');
$(event.target).addClass('active');
});
.active{
background-color:#c97e06;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="choose-pricing">
<div class="btn-group">
<div class="buttons">
<button type="button" id="default" class="btn btn-default selectvalue hover-color active" value="50">50</button>
<button type="button" id="btn2" class="btn btn-default selectvalue hover-color" value="100">100</button>
<button type="button" id="btn3" class="btn btn-default selectvalue hover-color" value="150">150</button>
<input type="Custom" name="donation-amount" class="inpt-first form-control" id="donation-amount" value="Custom">
</div>
<input type="hidden" name="donation-amount-value" id="donation-amount-value">
</div>
<div class="money-donate">
<div class="display-amount" id="display-amount">
</div>
</div>
</div>

I thought this code satisfied your requirement.
if your problem is not solve then write comment in explain then I can do it.
Please vote for me.
$("#donation-amount").click(function() {
if ($(this).hasClass('inpt-first')) {
console.log("hello");
$(this).css("background-color", "#c97e06");
$("#default").removeClass('active');
$("#btn2").removeClass('active');
$("#btn3").removeClass('active');
}
});
$("body").on("click","#default,#btn2, #btn3",function(){
//console.log($(this));
$("#donation-amount").css("background-color","rgb(255,255,255)");
//$("#default").addClass('active');
}

This seems a bit complicated the way you have it. This is a classic "choice highlight" scenario and is easily handled with a simple $(this).addClass('active').siblings().removeClass('active'); to set and remove the active highlight.
I also took the liberty of making the assumption you want some CUSTOM amount so I added a simple input for that to use with the CUSTOM button. I also simplified the custom button by using the data attribute and removed the code from that as frankly it seemed weird to have in there.
HTML with some adjustments:
<div class="choose-pricing">
<div class="btn-group">
<div class="buttons">
<button type="button" class="btn btn-default selectvalue hover-color choice default active " value="50">50</button>
<button type="button" class="btn btn-default selectvalue hover-color choice" value="100">100</button>
<button type="button" class="btn btn-default selectvalue hover-color choice" value="150">150</button>
<button type="button" class="btn btn-default selectvalue hover-color choice" value="" id="donation-amount" data-defaultvalue="57">Custom</button>
</div>
<input type="hidden" name="donation-amount-value" id="donation-amount-value">
</div>
<div class="money-donate">
<div class="display-amount" id="display-amount">
</div>
</div>
</div>
<div class="container">Custom Amount
<input id="customamount" type="text" value="67" />
</div>
Code that sets the color using an active class and sets the custom amount in the hidden field (or default if it has none)
$(".choice").on('click', function() {
if ($(this).is("#donation-amount")) {
var mydefault = $(this).data("defaultvalue");
// use custom amount if it has one, otherwise use this custom default
this.value = $('#customamount').val() || mydefault;
}
$(this).addClass('active').siblings().removeClass('active');
$('#donation-amount-value').val(this.value);
$('#display-amount').text('$'+this.value);
});
CSS:
.active {
background-color: #c97e06;
}
You can play around with it here: https://jsfiddle.net/MarkSchultheiss/6Lj62ngs/1/

jquery changing bootstrap label text dynamically

I'm using code from this fiddle http://jsfiddle.net/kcpma/18/
what i'm trying to achieve is to make appear or unhide a bootstrap label depending the value selected from the button, the text from the label should change, but only works with html input form like text, this doesn't look bad but i want to use bootstrap label to make look like filter tags.
my script
<script>
$('#demolist li').on('click', function(){
var val=$(this).text();
$('#datebox').val($(this).text());
if(val=="A"){ // if certain filter is selected the label should appear
$('#filter').show();
$('#filter').val("AaA");
}else{ // else the tag shouldn't be visible
$('#filter').hide();
}
});
</script>
the actual html working with text input
<br /> <br />
<div class="container">
<div class="col-sm-8">
<div class="input-group">
<input type="TextBox" ID="datebox" Class="form-control" ></input>
<div class="input-group-btn">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul id="demolist" class="dropdown-menu">
<li><a>A</a></li>
<li><a>B</a></li>
<li><a>C</a></li>
</ul>
</div>
</div>
</div>
<br>
<h4 ><span class="label label-primary" >×</span></h4>
<p><input type="text" class="form-control" ID="filter" style="width:100px" disabled></p>
</div>
the html i tried but it doesn't work
1)
<h4 ><span class="label label-primary" ID="filter">some filter</span></h4>
2)
<h4 ID="filter"><span class="label label-primary">some filter</span></h4>
any hints/ideas?

$.val only works on input elements (including select). If you want to set the text, you could just do:
<h4 ><span class="label label-primary" ID="filter">some filter</span></h4>
and
$('#filter').html("AaA");
or
$('#filter').text("AaA");
http://jsfiddle.net/kcpma/261/