Empty value from input tag JQUERY - javascript

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.

Related

jQuery span class selector

I have a span with a text inside it like :
<span class="characters-count">(160 Characters Left)</span>
given the span a class in this case .characters-count , when i tried class selector using jQuery to get the text inside span :
$(".characters-count")[0].text();
it returns undefined !
However this selector works well :
$("span.characters-count").text();
anyone can explain what is happening ?
$("span.characters-count").text();
In our case you work with jQuery Object that has text method
$(".characters-count")[0].text();
In this case you work with actual DOM element (like document.getElementByClassName('characters-count')[0]) that does not have text method
Use
$(".characters-count").text();
Demo
console.log($(".characters-count:first").text())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="characters-count">(160 Characters Left)</span>
try something like this:
$(".characters-count:first").text()
Check here, why it was not working for you.
//This will return dom element, so it doesn't have `text()` method, that's why it was throwing error for you.
console.log($(".characters-count:first")[0]);
// This will return object of an element, you can use jQuery selectors to get first element from collection and set text to it
console.log($("span.characters-count"));
console.log($("span.characters-count:first").text
);
you need to use innerText instead of text() when you use $(".characters-count")[0] check DEMO
$(".characters-count")[0].innerText

Change href of a link jquery

currently I have a textbox in which someone can type in a link, and then a link on the page next to the textbox should change it's href attribute to the text the user just typed in.
My javascript:
var LinkText = $("[id$=TextBox]").val();
$("[id$=DocumentLink]").href = LinkText;
My HTML:
<a id ="DocumentLink" target = "_blank" href="http://www.currentlink.com/">Link to Document</a>
<input id="TextBox" type="text" /> `
Although LinkText is picked up as the string typed in the textbox, the second line of my javascript is not working as I want. The link stays as the currentlink.
I have jQuery 1.4.2 if that helps, I could be doing something that doesn't work with that maybe.
Since you have a jQuery object you have to set the attr
$("[id$=DocumentLink]").attr("href", LinkText);
Or you can get the actual HTMLElement at the 0 index and call .href that way:
$("[id$=DocumentLink]")[0].href = LinkText;
And since your matching an exact ID, just use $("#DocumentLink")
Try it:
$("#DocumentLink").attr('href', LinkText);
Regards.
jQuery object doesn't have href property. You are defining a property for the jQuery object which doesn't affect the href property of the HTMLElement object in the jQuery collection. You could use the attr or the prop method instead.
set the attr of the link.
$("[id$=DocumentLink]").attr("href", LinkText);
i think it would be much easier to use JS and innerHTML.

Getting value of text field with array type name using jQuery

I have an input text field like below
<input type="checkbox" value="9961103777" name="mobile[]">
I just want to get the value using jquery. I tried this but not working:
jQuery('input[name=mobile[]]');
Please help me in this.
You can use val() as well as wrapping the name of your input inside double quotes " ":
jQuery('input[name="mobile[]"]').val()
Put attribute value in quotes. To fetch its value use .val()
jQuery('input[name="mobile[]"]')
DEMO
try
$("input[name='mobile[]']").val();
try this ..
Refer this post Jquery get input array field
$('input[name^="mobile"]').each(function() {
alert($(this).val());
});
JS Fiddle Example

Remove value attribute from input tag

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

Value of programmatically added checkbox

I have been searching for the solution for this for a while so I hope I can get some help now. I am attempting to figure out whether a programmatically added checkbox is checked using jquery. The HTML code of the checkbox is below:
<td>
<input type="checkbox" name='ismanual' id='ismanual' class="checkbox">
</td>
And I am doing it using the following jquery code:
var ismanual = document.getElementById("ismanual").val();
I have attempted using #ismanual as the selector, but that didn't help. Any idea where I have gone wrong?
If you're using document.getElementById("ismanual") you should use .checked instead of .val()...
var ismanual = document.getElementById("ismanual").checked;
For jQuery use...
var ismanual = $("#ismanual").is(':checked')
Where you have gone wrong: if you want to use val(), you need to use it on a jQuery object. getElementById() gives you a DOM element but not a jQuery object. To get a jQuery object you need to find the element using a jQuery selector like this:
jQuery('#ismanual')
You can then use jQuery's :checked selector and the .is() function on that object:
var isManual = jQuery('#ismanual').is(':checked');
.val() is a jQuery function. It will not work with DOM style element selection.
To get value using .getElementById(), you must use .checked like,
var ismanual = document.getElementById("ismanual").checked;
.val() will work when you are selecting the element using jQuery like,
$("#ismanual").val();

Categories

Resources