I'm trying to add a placeholder to an an attribute using JavaScript.
The Input element's HTML is:
<td class="gfield_list_cell gfield_list_72_cell3" data-label="Amount Paid">
<input type="text" name="input_72[]" value="" tabindex="67">
</td>
Seems I need to target it by the class also of the parent td "gfield_list_cell gfield_list_72_cell3"
I'm trying to target this using Javascript and a $ sign as the placeholder. I'm using this, but can't get it work.
<script type="text/javascript">
var input = document.getElementsByName('input_72[]')[0];
input.setAttribute('placeholder', '$');
</script>
Any help would be appreciated. Thanks
You should use querySelector method.
document.querySelector('.gfield_list_cell.gfield_list_72_cell3 input').setAttribute('placeholder','$');
<table>
<td class="gfield_list_cell gfield_list_72_cell3" data-label="Amount Paid">
<input type="text" name="input_72[]" value="" tabindex="67">
</td>
</table>
Try this:
var input = document.getElementsByName('input_72[]')[0];
input.setAttribute('placeholder', '$');
Try this:
$(input[name="input_72[]"]).setAttr('placeholder', '$');
use jquery to add placeholder dynamically
No need to using javascript simply add placeholder in input.
<input type="text" name="input_72[]" value="" tabindex="67" placeholder="Name">
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" />
I'm using jquery placeholder text for a search placeholder. This search field doesn't have any placeholder so i added this text.
$(document).ready(function(){
$('.mfilter-search').find("input[type=text]").each(function(ev)
{
if(!$(this).val()) {
$(this).attr("placeholder", "Refine Your Search");
}
});
});
i don't know it's the best way to add a placeholder using jquery. If anyone know more simple way please add your code it will be very helpful.
You can directly set the placeholder no need to check value and use .each()
$('.mfilter-search input[type=text]').attr("placeholder", "Refine Your Search")
If you want to place on first then use
$('.mfilter-search input[type=text]:first').attr("placeholder", "Refine Your Search")
You can simply use find method using value attribute
$('.mfilter-search').find("input[type=text][!value]").attr("placeholder", "Refine Your Search");
you can add placeholder attribute directly in your html element like this
<input type="text" name="fname" placeholder="search">
or you can add a class to all your element that you need to put placeholder eg:- .placeholder and add placeholder attribute in javascript like this.
$(".placeholder").attr("placeholder", "Type here to search");
or you can use plugins like these.
http://andrewrjones.github.io/jquery-placeholder-plugin/ or
https://github.com/mathiasbynens/jquery-placeholder or refer this site for different placeholder plugins.
https://www.sitepoint.com/top-5-jquery-html5-placeholder-plugins/
and your code is also good. We can do that way too.
hope this will work.
Try this code
$(document).ready(function(){
$('.mfilter-search').find("input[type=text]").each(function(ev)
{
var txt = $(this).data('placeholder');
$(this).attr('placeholder', txt);
});
});
For place holder no need complex method function in jquery simply use like this
<input type="text" placeholder = "Zipcode" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Zipcode'" name="zipcode" class="form-control" maxlength='10'>
try this. this is how you can add place holder if you have two input fields with same class name.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
first name :<input type="text" name="firstname" class="tfield" id="field0">
last name :<input type="text" name="lastname" class="tfield" id="field1">
</body>
<script type="text/javascript">
$(document).ready(function(){
var thelength = $(".tfield").length;
for(var i=0;i<thelength;i++)
{
var theid = $("#field"+i);
var thename = theid.attr("name");
alert(thename);
if(thename == "firstname")
{
theid.attr("placeholder","name");
}
}
});
</script>
</html>
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 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');
});
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.