How can I access <input type="hidden"> tag's value attribute using jQuery?
You can access hidden fields' values with val(), just like you can do on any other input element:
<input type="hidden" id="foo" name="zyx" value="bar" />
alert($('input#foo').val());
alert($('input[name=zyx]').val());
alert($('input[type=hidden]').val());
alert($(':hidden#foo').val());
alert($('input:hidden[name=zyx]').val());
Those all mean the same thing in this example.
The most efficient way is by ID.
$("#foo").val(); //by id
You can read more here:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS
https://developers.google.com/speed/docs/best-practices/rendering?hl=it#UseEfficientCSSSelectors
There's a jQuery selector for that:
// Get all form fields that are hidden
var hidden_fields = $( this ).find( 'input:hidden' );
// Filter those which have a specific type
hidden_fields.attr( 'text' );
Will give you all hidden input fields and filter by those with a specific type="".
To get value, use:
$.each($('input'),function(i,val){
if($(this).attr("type")=="hidden"){
var valueOfHidFiled=$(this).val();
alert(valueOfHidFiled);
}
});
or:
var valueOfHidFiled=$('input[type=hidden]').val();
alert(valueOfHidFiled);
To set value, use:
$('input[type=hidden]').attr('value',newValue);
There is nothing special about <input type="hidden">:
$('input[type="hidden"]').val()
If you want to select an individual hidden field, you can select it through the different selectors of jQuery :
<input type="hidden" id="hiddenField" name="hiddenField" class="hiddenField"/>
$("#hiddenField").val(); //by id
$("[name='hiddenField']").val(); // by name
$(".hiddenField").val(); // by class
If you have an asp.net HiddenField you need to:
To access HiddenField Value:
$('#<%=HF.ClientID%>').val() // HF = your hiddenfield ID
To set HiddenFieldValue
$('#<%=HF.ClientID%>').val('some value') // HF = your hiddenfield ID
Watch out if you want to retrieve a boolean value from a hidden field!
For example:
<input type="hidden" id="SomeBoolean" value="False"/>
(An input like this will be rendered by ASP MVC if you use #Html.HiddenFor(m => m.SomeBoolean).)
Then the following will return a string 'False', not a JS boolean!
var notABool = $('#SomeBoolean').val();
If you want to use the boolean for some logic, use the following instead:
var aBool = $('#SomeBoolean').val() === 'True';
if (aBool) { /* ...*/ }
Most universal way is to take value by name. It doesn't matter if its input or select form element type.
var value = $('[name="foo"]');
Related
I have multiple hidden field with same name on html page like below
<input type="hidden" name="customerID" value="aa190809" />
I need to update values of all hidden field with same name i.e. customerID
I know how to do it(through Jquery) if html page contains single hidden field with customerID like below but not sure if there are multiple hidden field with same name
if(updatedCsrf !== null) {
var customerIDHidden = $("input[name='customerID']");
if(customerIDHidden !== null) {
customerID.val("some_value");
}
}
You can do something like this:
$("input[name=customerID]").each(function(){
this.value ="new value"
})
this will reference each DOM element. You can parse it again to jQuery DOM element by replacing this.value to $(this).val("new value") but since you only need to change the value its better with javascript vanilla
You can do that with pure JS,
var x = document.getElementsByName("customerID");
for(var i=0; i < x.length;i++){
x[i].value='new value';
}
Use jQuery each function
$("input[name='customerID']").each(function(){
$(this).val("some-value");
});
I have a form with no id or class. I need to insert attribute values for input elements.
<form>
<tr><td><input type="text" name="x"/></td></tr>
<tr><td><input type="text" name="y"/></td></tr>
<tr><td><input type="text" name="z"/></td></tr>
</form>
Here's jquery I tried:
var x = $('form').find('input').first().val("some_value");
var y = $('form').find('input').second().val("some_value");
var z = $('form').find('input').third().val("some_value");
// Is there another possible way?
var x = $("form").find('input[name="x"]').val("some_value");
You can use Attribute Equals Selector [name=”value”] to uniquely identify the inputs
$('input[name=x]').val("some_value1");
$('input[name=y]').val("some_value2");
$('input[name=z]').val("some_value3");
Although I wont recommend the method you used to assign values to input, I would suggest you to use find() once and use the returned object collection to assign values. This will reduce the processing time and increase performance.
var all = $('form').find('input');
all.eq(0).val("some_value1");
all.eq(1).val("some_value2");
all.eq(2).val("some_value3");
You can use
$("form").find('input[type="text"]]').each(function() {
$(this).attr("your attribute", "your value");
});
try with this
var x = $('form input[name="x"]').val("some_value_x");
// So you can search across the form for all input elements and then iterate to apply the attribute.
var allInputElements = $("form input[type='text']");
$.each(allInputElements,function(index, item){
$(item).attr("disabled","true");
// You can also use item.prop("any property or attribute","value");
});
If you're giving them all the same value, as it appears in your question, you can simply select them all:
$("form input").val("some_value");
I have a javascript snippet in which I'd like to retrieve the value of a hidden input located in the first column of selected row :
var global_id = $(this).find("td:first").html();
console.log("value=" + global_id);
I get as result :
value =<input id="id" name="id" type="hidden" value="2">
When I try
var global_id = $(this).find("td:first").val();
console.log("value=" + global_id);
I get as result :
value =
So, I need to know :
Why in the second way, the variable is empty
How can I resolve my code to retrieve the first input hidden value?
You need to reference the actual input element, not the containing element. This will find the input element if it is hidden using type="hidden", using css or using jQuery's hide()
var global_id = $("td:first input:hidden:first", this).val();
console.log("value=" + global_id);
The code below is made to detect the name of the input method user focus in , the problem is it alerts the same name for all textboxes.
var huntedTextBox;
//focus in any textfield to get its name into the vairable.
$("input").focus(function() {
huntedTextBox = $("input").attr('name');
alert(huntedTextBox);
});
Here is a Fiddle for the code.
Thanks.
Just doing a search for $('input') will return all <input>s in the document. Then, doing .attr() will get the attribute for the first.
To get the attribute of the <input> that was clicked, use $(this).attr('name');
You need to use this for selecting that particular textbox that's focused on...
Here's a snippet:
var huntedTextBox;
//focus in any textfield to get its name into the vairable.
$("input").focus(function() {
huntedTextBox = $(this).attr('name');
alert(huntedTextBox);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" name="textBox" />
<input type="text" name="Bader" />
huntedTextBox = $(this).attr('name');
I have a situation in which i want to convert a <select> tag into a <input type="text"> and <input type="text"> into <select> bu using some condition.
So how can i know that this element a type text or type select using id attribute.
And also a pure javascript solution:
function toggle(a){
if(a.tagName === 'INPUT'){
a.outerHTML = '<select id="toggle"></select>';
}else{
a.outerHTML = '<input type="text" id="toggle"/>'
}
}
http://jsfiddle.net/M6qXZ/1/
2018 ES6
e => e.outerHTML = e.tagName === "INPUT" ? "<select id='toggle'></select>" : "<input id='toggle'/>"
By using
$("#inputID").attr("type");
If you alert above you will get the type of input element, then you can apply checks accordingly.
Ref here : http://api.jquery.com/attr/
UPDATE
check using
if(!$("#inputID").is("select")) {
// the input field is not a select
}
got from a link while searching not tested though.
You can use .is() to test whether the elements is of type x like
Use :text selector to test for text input element
if($("#inputID").is(":text")){
//to test for text type
}
Use element selector to test for select element
if($("#inputID").is("select")){
//to test for select
}
Get the element type using jQuery:
var elementType = $("#myid").prop('tagName');
Get the input type attribute using jQuery:
var inputType = $("#myid").attr('type');
the condicion could be for example:
if($('#whateverid').attr('type') == "text")