jquery remove label text - javascript

I'm trying to remove the Search text from this html input element. I recognize the element is inside the label thats how it was built. Is there any way to remove the Search text but keep the input element.
Here is my HTML Code
<div id="datatable_users_filter">
<label>Search <input type="search"/></label>
</div>
Here is my JavaScript Code:
$("#datatable_users_filter label").css("display","none");
It removes the entire element not just the Search label.

In your javascript, you can set a variable equal to the input, clear the contents of the label, and then append the input to the now-empty label.
var input = $('#datatable_users_filter label input');
$("#datatable_users_filter label").html('');
$("#datatable_users_filter label").append(input);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="datatable_users_filter">
<label>Search <input type="search"/></label>
</div>
This is just one solution and may or may not work for your use case. Another option could be doing a string replace on the innerHTML of the label.
$("#datatable_users_filter label").html($("#datatable_users_filter label").html().replace('Search ', ''));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="datatable_users_filter">
<label>Search <input type="search"/></label>
</div>

sapmle for remove label text
$("#datatable_users_filter label").html($("#datatable_users_filter input"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="datatable_users_filter">
<label>Search <input type="search"/></label>
</div>
sapmle for remove label element
var elem=$("#datatable_users_filter input");
$("#datatable_users_filter").empty().html(elem);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="datatable_users_filter">
<label>Search <input type="search"/></label>
</div>

Keep Label and Input like this..
<label class="label">Search</label>
<input type="search"/>
Then hide it by jquery
$('label').hide();

Related

Get an element after $(this)

I try to change a text insert in an div box with jquery. Here is the Code:
<div onClick="$(this span).text('My new Text');" class="switch switch-success" style="float: right;">
<label>
<input type="checkbox"><span>Yes</span>
</label>
</div>
I want to change this "Yes" to "No". Thanks for help ;)
Use the .find method
See a working fiddle here
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div onClick="$(this).find('span').text('My new Text');" class="switch switch-success" style="float: right;">
<label>
<input type="checkbox"><span>Yes</span>
</label>
</div>
You have two options.
Pass this a second parameter which is context
$('span', this).text('My new Text');
Get this element and that use find to get span in it.
$(this).find('span').text('My new Text');
Please separate structure, style and function - the CSS, HTML and JS should not be in the same space - its always better to separate the code for better code quality.Also you could do a toggle for the states of the checkbox so that there is different text on the "checked" and "not checked" states.
And you can even do that with CSS
$('.switch').click(function(){
$(this).find('span').text('My new Text')
})
.switch{float: right}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="switch switch-success" >
<label>
<input type="checkbox"><span>Yes</span>
</label>
</div>

Jquery does not set text box value

I am trying to set the value of a text box when file upload is selected , how ever it does not happen but I see correct value in alert box.
<div class="row">
<div class="col-xs-2">
<div class="file-label"><i></i>#Resources.FolderPath</div>
</div>
<div class="col-xs-4">
<input class=".form-control" name="fileText" type="text" />
<div class="fileUpload btn btn-primary">
<span>Browse</span>
<input type="file" name="File" id="fileUpload" class="upload"/>
</div>
</div>
<div class="col-xs-4">
<label id="fileSizeError" style="color: red"></label>
</div>
</div>
$(document).ready(function () {
$(document)
.on("change","#fileUpload",
function (e) {
alert($("#fileUpload").val());
$("#fileText").val($("#fileUpload").val());
alert("hi");
});
});
Please help me here.I am using Asp.net MVC as platform.
Your input has a name, but #fileText is an ID selector. Either add an id to it, or use an attribute selector to find it.
So either:
<input class=".form-control" id="fileText" name="fileText" type="text" />
<!-- add id------------------^^^^^^^^^^^^^ -->
or
$("[name=fileText]").val($("#fileUpload").val());
// ^^^^^^^^^^^^^^^---- use attribute selector
Try native js:
document.getElementById("fileText").defaultValue = $("#fileUpload").val();
OR
$("#fileText").attr("value", "some value");
Also;
Check to see if your original code works with replacing .val() with .text

Put placeholder using jQuery/Javascript

I can put a placeholder through jQuery if there is a single <input> on the page:
<input type="text"/>
$(document).ready(function() {
placeholders();
function placeholders() {
$('input[type=text]').each(function() {
$(this).attr('placeholder', 'hello' );
});
}
});
However, I have multiple <input> fields in a single page as below:
<input type="text" class="first">
<input type="text" class="second">
I wish to add a placeholder only on the first <input type="text"> that has class="first".
How can I add a placeholder to the first matching text input only?
$('input[type=text].first').attr('placeholder', 'hello' );
Here input will select all the input tag, [type=text] will select input whose type is text and then .first will select a subset with class first.
If you want to select the first input with first class then do $('input[type=text].first').first()
I wish to add a placeholder only on the first that
has class="first".
How can I add a placeholder to the first matching text input only?
Try using document.querySelector() with selector "input[type=text][class=first]" , setAttribute()
function placeholders() {
document.querySelector("input[type=text][class=first]")
.setAttribute("placeholder", "hello");
}
$(document).ready(placeholders);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input type="text" class="first">
<input type="text" class="second">
$('input[type=text].first').attr('placeholder', 'hello' );
using the class selector
You can try this solution:
$('input[type=text].first').attr('placeholder', 'hello' );
if you want an element specific script, use ID instead of CLASS for better performance.
<input type="text" class="first" id="first">
$("#first").attr('placeholder', 'hello' );

How to get span element with no id which is inside a div with no id

I have 2 span elements inside 2 div elements. Both span elements have no id and both div elements also have no id.
The 1st div has the 1st input element with an id (id_name) and then have the 1st span element after it.
The 2nd div has the 2nd input element with an id (id_password) and then have the 2nd span element after it.
I have a javascript function which I call on submit of form. Inside that function I can get the 1st input element in a variable element_id_name and the 2nd input element in a variable element_id_password. Now how can I get the 1st span element which comes after 1st input element? And how can I get the 2nd span element which comes after 2nd input element? Since I dont have id for span elements, I cannot use document.getElementById(). Is there a way to get 1st span element by reference to 1st input element?
This is my code:
<html>
<head>
<meta charset="ISO-8859-1">
<title>test</title>
<style type="text/css">
.error_noshow{
display: none;
}
.error_show{
color: red;
}
</style>
<script type="text/javascript">
function validate() {
var element_id_name = document.getElementById("id_name");
var element_id_password = document.getElementById("id_password");
return false;
}
</script>
</head>
<body>
<form id="form_login" method="post" action="" onsubmit="validate();">
<div>
<label for="id_name">User Name:</label>
<input type="text" id="id_name" name="txt_user_name">
<span class="error_noshow">Required field</span>
</div>
<div>
<label for="id_password">Password:</label>
<input type="password" id="id_password" name="txt_password">
<span class="error_noshow">Required field</span>
</div>
<button type="submit">Submit</button>
</form>
</body>
</html>
Thank you for reading my question.
var spans = document.getElementsByTagName('span');
span[0] is the first span, span[1] is the second span. However it's not the preferred way to do this. Use jQuery to make it easier or add an id or classname
To access next span element you can use nextElementSibling property.
<script type="text/javascript">
function validate() {
var element_id_name = document.getElementById("id_name");
var element_id_password = document.getElementById("id_password");
var firstSpan=element_id_name.nextElementSibling;
return false;
}
</script>
But keep in mind that nextElementSibling not working in all version of browsers so you can simulate this using nextSibling http://www.w3schools.com/dom/prop_node_nextsibling.asp;
You can use querySelector to find the elements by their attributes.
function validate() {
var element_id_name = document.querySelector("[name=txt_user_name]");
var element_id_password = document.querySelector("[name=txt_password]");
console.log(element_id_name, element_id_password);
return false;
}
.error_noshow{
display: none;
}
.error_show{
color: red;
}
<form id="form_login" method="post" action="" onsubmit="validate();">
<div>
<label for="id_name">User Name:</label>
<input type="text" id="id_name" name="txt_user_name">
<span class="error_noshow">Required field</span>
</div>
<div>
<label for="id_password">Password:</label>
<input type="password" id="id_password" name="txt_password">
<span class="error_noshow">Required field</span>
</div>
<button type="submit">Submit</button>
</form>
I'm not answering the question because someone already did, but it seems like you want to check if the user typed something in both field, you could skip the javascript and use the HTML5 tag "required" like so
<input type="text" require />.
The user will have an error message if he tries to submit. But keep in mind that old version of IE will skip this check.

How to change label text using jquery

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");

Categories