I have an id on my page from that I have taken all the html by using .html() function in a variable .Now, I want to use the id from the variable in which I have stored the html. How can I do this in jQuery? I am not getting any idea. Please help me in this!
var idhtml= $("#id").html();
Like this, I have the html in idhtml
<input type="text" id="id1" name="id1" value="" class ="test" />
<input type="text" id="id2" name="id1" value="" class ="test" />
<input type="text" id="id3" name="id1" value="" class ="test" />
By idhtml, I want to get the id in the variable.
You can get the IDs like this:
$("input[id^='id']").each(function () {
console.log(this.id);
// Change the id:
$(this).attr("id", "new_id");
});
Select every input with an id that starts with id and for each input returned, print its ID in the console.
You can use .each().
To set the attribute you can use
1) .attr('attribute_name','attribute_value') or
2) .data('attribute_name','attribute_value')
with appropriate selector.
$("[name='id1']").each(function () {
console.log($(this).attr(id));
//to set the attr you can use
$(this).attr('attribute_name','attribute_value');
//to set custom attribute, use .data()
$(this).data('attribute_name','attribute_value');
});
try this
$(document).ready(function(){
var formId = $('form').attr('youId');
});
Related
I want to get the id of input using it's name,and to empty the input field.But it's not working.Is it possible?
html:
<input type="text" id="1" name="Color" maxlength="2" />
jQuery:
var myId="#";
myId=myId + $('[name="Color"]').attr('id');
$($myId).var('');
You can do this:
let id = $('input[name$="Color"]').val('').attr('id');
console.log(id);
$(`#${id}`).val('');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="1" name="Color" maxlength="2" />
You can set the input value using the val() function.
<input type="text" id="1" name="Color" maxlength="2"/>
var myId='#' + $('[name="Color"]').attr('id');
$(myId).val('');
To get the input value use it like this:
$(myId).val();
Try this code.
const myId = $('input[name="Color"]').attr('id');
$("#"+myId).val(''); // you can set any value here or you can perform any other operations on this element -> $("#"+myId)
On first line of this JS code, we are getting id attribute and then on second line, we're using to manipulate element.
Now, if you want id only for performing some operations on that input element, you don't need to get id. You can also do like this.
let elem = $('input[name="Color"]');
elem.val(''); // only if same name is not used anywhere else.
I hope this helps you.
You can use attr directly to set a value. Moreover there is no need to append #.
let element = $('[name="Color"]');
console.log("before", element.attr('id'));
element.attr('id', null);
console.log("after", element.attr('id'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="1" name="Color" maxlength="2" />
In he above code, I would like to add datepicker of input field which contains id as datepicker.
For this purpose i used the following js code in document.ready() func
$("tbody#docTab").click(function() {
var row = $(this).closest('tr');
row.find('#datepicker').removeClass('hasDatepicker').datepicker();
});
But i does not appear the datepicker while onclick the input field, What i have missed on this code?
Advanced thanks.
assign unique id to each element in html, here ids are being duplicated - instead of assigning same id to multiple inputbox - I would suggest add class "datepicker" to every input to whom you want to add datepicker:
<td>
<input type="text" name="sdate[]" class="datepicker" value="0000-00-00" />
</td>
<td>
<input type="text" name="edate[]" class="datepicker" value="0000-00-00" />
</td>
and in jquery:
$("tbody#docTab").click(function({
$('.datepicker').removeClass('hasDatepicker').datepicker(); // you can directly add datepicker using its class name
});
You can NOT have 2 element with same ID.
Please try to use class for your input
<input type="text" name="sdate[]" class="datepicker" value="0000-00-00">
js update:
$("tbody#docTab").click(function() {
var row = $(this).closest('tr');
row.find('.datepicker').removeClass('hasDatepicker').datepicker();
});
I am trying to get values from text boxes that are out of a <form> tag.
The three text boxes have the same class name. I want to get their values and use them later.
I am getting error for the alert part in jQuery below.
HTML
<input type="text" class="className">
<input type="text" class="className">
<input type="text" class="className">
jQuery
var $j_object = $(".className");
$j_object.each( function(i){
alert($j_object[i].val())
});
Try to use .eq(index) at this context,
var $j_object = $(".className");
$j_object.each( function(i){
alert($j_object.eq(i).val());
});
Or you can use the this value inside of .each() to simplify the task,
var $j_object = $(".className");
$j_object.each( function(){
alert($(this).val());
});
If you use bracket notation to access the jquery element collection, then that will return plain javascript object. And that won't have jquery functions in its prototype.
You can save the textbox values to array using .map() function in jQuery.
Working Example
var array = $('.className').map(function(){
return $(this).val()
}).get();
alert(array)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="className" value="1">
<input type="text" class="className" value="2">
<input type="text" class="className" value="3">
Given the following html:
<div class="product">
<span class="name">Product name</span>
<span class="price">Product price</span>
</div>
<input type="button" class="button" value="Purchase" onclick="myfunction()" />
<input type="hidden" name="p-name" value="">
<input type="hidden" name="p-price" value="">
I am trying to build a function in javascript that takes the value from span.name (span.price) and adds it to input p-name (input p-price).
How can you do that?
Apperantly http://api.jquery.com/val/ is not working as expected.
EDIT
Thanks all for answering!
I've corrected the html error you guys pointed out in the comments.
Try this:
$('.product span').each(function () {
var selector = 'input[name=p-' + this.className + ']';
$(selector).val(this.innerHTML);
});
Fiddle
You will need a button or something to fire the copying:
<input type="button" id="copy_values" value="Copy the values" />
and your javascript
$(document).ready(function(){
$("#copy_values").click(function(){
//Change the value of the input with name "p-name" to the text of the span with class .name
$('input[name="p-name"]').val($('.name').text());
$('input[name="p-price"]').val($('.price').text());
});
});
For span we use text() function instead of val()
.val() is used when we use input and .text() is used when we use span in HTML.
Reference link : http://api.jquery.com/text/
That's going to be hard to click to a HIDDEN field.
If you change input type to text, then in onclick you can write: this.value=document.getElementById('name').innerHTML; (to use this, you have to add ID with name to your )
OR, you can create a seperate button, and onclick method can be fired.
I wanted to read the value entered in the text box in one of my HTML form, for this I tried jQuery val() method, but it is not working, any idea why?
HTML:
<form method="POST" id="payment-form">
<p>
<label class="card-number" for="txt_cardno"><span>Card Number:</span></label>
<input type="text" size="20" autocomplete="off" class="card-number" id="txt_cardno" name="cardno" />
</p>
<p class="submit submit-button"><a class="btn" href="#">Charge Card</a><br><a class="btn" href="#" onClick="return false">Go Back</a></p>
<div class="clear"></div>
</form>
Javascript:
$(document).ready(function() {
$(".submit").live("click", function(e) {
e.preventDefault();
var card_num = $('.card-number').val();
alert(card_num);
});
});
the jsfiddle is http://jsfiddle.net/74neK/1/
Use the id to access it (faster):
var card_num = $('#txt_cardno').val();
You've given both the <label> and the <input> the "card-number" class.
Specify the input in the selector. Otherwise .val() gives you the value of the first element found (the label).
var card_num = $('input.card-number').val();
http://jsfiddle.net/74neK/3/
If you're really concerned with micro-optimization, you should use native methods:
var card_num = (document.getElementById('txt_cardno')||{}).value;
http://jsfiddle.net/74neK/5/
Your <label>'s class is the same as your <input>'s, so jQuery is trying and failing to retrieve the value of your <label>. Instead, refer to your <input> by name or id:
$('#txt_cardno').val()
I would recommend ID regardless, because jQuery optimizes it to document.getElementById, which is much faster.
Try to use the ID to access the element:
var card_num = $('#txt_cardno').val();
http://jsfiddle.net/74neK/4/ <- Example
Select the id of your input element, as opposed to the class: http://jsfiddle.net/btgxu/