I have one input field having no value field ( that will be added later using jQuery )
<input type=hidden>
Once I execute some function to add value to the input field I get
<input type=hidden value="123">
I want remove that value field from input field later. How can I do that?
Presently I am using the following jQuery function:
$('input').val('');
and using that I get
<input type=hidden value>
But I want
<input type=hidden>
How Can I achive that?
Thanks...
jQuery's removeAttr removes attributes.
Try: $("input").removeAttr( "value" );
Edit 2018-09-11:
Since jQuery isn't necessary to do this, and the title doesn't specifically ask about jQuery (although the tags do), here's the solution in plain JavaScript:
document
.querySelectorAll( "input" )
.forEach( ( input ) => {
input.value = "";
input.removeAttribute( "value" );
} );
However, as #cookie-monster originally said: you probably shouldn't be removing DOM attributes. Consider rethinking your application.
You are looking for somehing like:
$('input').removeAttr('value');
use removeAttr()
$('input').removeAttr('value');
You can use:
$('input').removeAttr('value');
You can use the .removeAttr() method. This method uses the JavaScript removeAttribute() function, but it has the advantage of being able to be called directly on a jQuery object and it accounts for different attribute naming across browsers.
$('input').removeAttr('value');
To remove 'value' attribute from all inputs you can use
$('input').removeAttr('value');
You can also use input ID.
Example:
$('#Input_Id').removeAttr('value');
Or class for remove attribue
Example:
$('.Input_Class_Name').removeAttr('value');
Related
I recently saw a code voucher that surprised me a bit and I would really like to understand. Can the document.querySelector() take a parameter, an attribute to make selections :
const tabs = document.querySelectorAll('[data-tab-value]')
<span data-tab-value="#tab_1">Tab-1</span>
I would also like to know why the attribute name is enclosed in brackets.
document.querySelector is just like CSS selectors
It can even select elements with attributes like:
document.querySelector("input[name]") // <input name>; input which has attribute name
document.querySelector("input[type=number]") // <input type='number'>; input whose attribute type's value is number
I am using the below code to change a class name of a button. However, I only want to do this for one button with the text 'Upload' and not another button that says 'Upload Database'.
Is it possible to change this from a 'Contains' to an exact match only?
<script>
$( ".sitebutton:contains('Upload')" ).addClass('siteButton2').removeClass('sitebutton');
</script>
You cannot do this with :contains as it's a 'hungry' match. An alternative is to use filter(), where you can do an exact match:
$('.sitebutton').filter(function() {
return $(this).text().trim() == 'Upload';
}).toggleClass('siteButton2 sitebutton');
If possible, a much better solution would be to just put an id or class on the required button element and select via that.
Just use a jQuery filter on the elements:
$('.sidebutton')
.filter((i, e) => $(e).text() === 'Upload')
.addClass('sideButton2')
.removeClass('sideButton');
You might need to trim the text, as there could be some extra whitespace floating around.
You can use .filter() to check the .textContent of the element, :contains() checks if the text is included within the .textContent or .innerText in any form by using .indexOf() internally
$(".sitebutton").filter(function(i, el) {
return el.textContent === "Upload"
})
.removeClass('sitebutton')
I think you're generally making it harder on yourself, but you can do something like this:
$(".sitebutton.Upload").not(".Database").addClass('siteButton2').removeClass('sitebutton');
Just put a specific id for the button and then call the needed code to change the class.
Check this Plunker
This is the code
HTML:
<input type=button id="upload" value="Upload" class="sitebutton">
<input type=button id="uploaddb" value="Upload Database" class="sitebutton">
Script
$('#upload').click(function() {
$('#upload').addClass('siteButton2').removeClass('sitebutton');
});
with native form DOM element I can access its field using the input name:
<form id="form">
<input type="text" name="input-name" />
</form>
var form = document.getElementById("form");
form["input-name"] // or form.input_name if it wasn't an hyphen.
What will be the same with jquery? by same I mean same lookup.
using form.find("[name='input-name']") is not the same in terms of performance, the form native method is simply an object lookup, jquery will use querySelectorAll.
$('#form [name="input-name"]')
You can either do this using Attribute Equals Selector [name=”value”]:-
$('#form [name="input-name"]')
// Find the elements with name attribute selector within a form with id `form`
Or using .find() like
$('#form').find('[name="input-name"]')
// Search through the descendants of `#form` in the DOM tree
Or if you can put some id to the input text, you can just do
$('#inputID')
// As id are supposed to be unique in DOM no need to Search through
// the descendants of `#form`, just call the element by ID
You can get the object by using the following selector:
$("input[type='text'][name='input-name']");
I'm trying to get value from input tag but it returns an empty string.
When I open frame source it shows something like
<input type="hidden" name="" class="code_item" value="00-00000159" />
To get value I'm trying with
$(this).children('td').children('.code_item').value
Please, help me to find the error, I'm new for this.
In jquery use .val() instead of .value
$(this).children('td').children('.code_item').val()
Because you're using jquery selectors you should use val() instead of .value :
$(this).children('td').children('.code_item').val()
Or add [0] to return javascript object then you could use .value :
$(this).children('td').children('.code_item')[0].value
It could be done also without using children() :
$('td .code_item', this).val();
Hope this helps.
I have a javascript program to filter a list of things in a HTML select control by typing a regular expression into an input (text) box. I can do the following to correctly filter a specific select control:
$(function() {
$('input[data-filterable]').keyup(
function() {
filter = new filterlist(document.myform.myselect);
filter.set(this.value);
});
});
but I have used a custom attribute (something one can now do in HTML5) called data-filterable. The attribute will store the name of the select control that is to be filtered so that JS can use the name of the control to filter the list. This would be a good idea because I will have a general function to filter any select box rather than a specific one.
Any ideas how I do this? I need something like this in the HTML:
<input data-filterable='{"to":"#selectbox1"}' size="30" type="text" />
but I'm not sure exactly what I'm doing here and what to do with the JS.
Thanks guys :).
Try this:
<input data-filterable="#selectbox1" size="30" type="text" />
$(function() {
$('input[data-filterable]').keyup(
function() {
filter = new filterlist($($(this).data('filterable'))[0]);
filter.set(this.value);
});
});
To break down the expression $($(this).data('filterable'))[0]:
$(this) wraps this in a jQuery wrapper. In our context, since it's a jQuery keyup event handler, this references the <input> DOM node.
$(this).data('filterable') retrieves the contents of the data-filterable attribute as a string. In our case, it's #selectbox1.
After that this string gets passed in to jQuery as a selector: $($(this).data('filterable')).
Finally, we take the 0'th element of the returned array which should be the DOM element of the target selectbox. Of course, if there isn't a selectbox which fits the selector this will fail rather miserably. If you suspect that this is a real scenario, check the .length of the returned array first.