Put placeholder using jQuery/Javascript - javascript

I can put a placeholder through jQuery if there is a single <input> on the page:
<input type="text"/>
$(document).ready(function() {
placeholders();
function placeholders() {
$('input[type=text]').each(function() {
$(this).attr('placeholder', 'hello' );
});
}
});
However, I have multiple <input> fields in a single page as below:
<input type="text" class="first">
<input type="text" class="second">
I wish to add a placeholder only on the first <input type="text"> that has class="first".
How can I add a placeholder to the first matching text input only?

$('input[type=text].first').attr('placeholder', 'hello' );
Here input will select all the input tag, [type=text] will select input whose type is text and then .first will select a subset with class first.
If you want to select the first input with first class then do $('input[type=text].first').first()

I wish to add a placeholder only on the first that
has class="first".
How can I add a placeholder to the first matching text input only?
Try using document.querySelector() with selector "input[type=text][class=first]" , setAttribute()
function placeholders() {
document.querySelector("input[type=text][class=first]")
.setAttribute("placeholder", "hello");
}
$(document).ready(placeholders);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input type="text" class="first">
<input type="text" class="second">

$('input[type=text].first').attr('placeholder', 'hello' );
using the class selector

You can try this solution:
$('input[type=text].first').attr('placeholder', 'hello' );

if you want an element specific script, use ID instead of CLASS for better performance.
<input type="text" class="first" id="first">
$("#first").attr('placeholder', 'hello' );

Related

jquery remove label text

I'm trying to remove the Search text from this html input element. I recognize the element is inside the label thats how it was built. Is there any way to remove the Search text but keep the input element.
Here is my HTML Code
<div id="datatable_users_filter">
<label>Search <input type="search"/></label>
</div>
Here is my JavaScript Code:
$("#datatable_users_filter label").css("display","none");
It removes the entire element not just the Search label.
In your javascript, you can set a variable equal to the input, clear the contents of the label, and then append the input to the now-empty label.
var input = $('#datatable_users_filter label input');
$("#datatable_users_filter label").html('');
$("#datatable_users_filter label").append(input);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="datatable_users_filter">
<label>Search <input type="search"/></label>
</div>
This is just one solution and may or may not work for your use case. Another option could be doing a string replace on the innerHTML of the label.
$("#datatable_users_filter label").html($("#datatable_users_filter label").html().replace('Search ', ''));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="datatable_users_filter">
<label>Search <input type="search"/></label>
</div>
sapmle for remove label text
$("#datatable_users_filter label").html($("#datatable_users_filter input"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="datatable_users_filter">
<label>Search <input type="search"/></label>
</div>
sapmle for remove label element
var elem=$("#datatable_users_filter input");
$("#datatable_users_filter").empty().html(elem);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="datatable_users_filter">
<label>Search <input type="search"/></label>
</div>
Keep Label and Input like this..
<label class="label">Search</label>
<input type="search"/>
Then hide it by jquery
$('label').hide();

Adding Placeholder To Input Field By Name

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">

JQuery detects focusOut even if I still focus on input inside the same div. How to change it?

This is my code:
Javascript:
$(".test").on("focusout", function (e) {
$("#output").append("Lost focus<br>");
});
HTML:
Inputs inside div:
<div class="test">
<input type="text" />
<input type="text" />
</div><br>
Inputs outside div:<br>
<input type="text" />
<div id="output">
</div>
I want to detect if user leaves "div.test". Unfortunately, "focusout" works also when I move focus to other object inside this div.
Look at this fiddle: http://jsfiddle.net/Piotrek1/wfukje3g/6/
Click on first input and use Tab to switch through textboxes. "
Lost focus" should appear only if user move out from the div, but it happens always. Why is that and how to change it?
The $ operator returns a collection. You have two inputs inside the <div class="test">. So it matches all elements and children with the .test class.
I think what you want two divs with separate input elements and two different classes OR, use an ID on the actual input element so the $ operator only matches the input id you want this event to fire on. http://jsfiddle.net/wfukje3g/7/
$("#test").on("focusout", function (e) {
$("#output").append("Lost focus<br>");
});
<div class="sometest">
<input id="test" type="text" />
<input type="text" />
</div><br>
Inputs outside div:<br>
<input type="text" />
<div id="output">
</div>
I have implemented piece of code to handle div focus out
$(document).ready(function () {
var count = 1;
$("#name").focusout(function (e) {
if($(this).has(e.relatedTarget).length === 0) {
$("#output").append("<label style='width:100%;'>"+ count++ +" Name div focus out </label>");
}
});
});
Inputs inside div:
<div id="name" class="test">
<input type="text" id="firstname"/>
<input type="text" id="lastname"/>
</div>
Inputs outside div:<br>
<input type="text" id="dob"/>
<div id="output" style="width:100%"></div>
In this piece of code I have used relatedTarget.
relatedTarget will provide the next focused element If next element is not the child of this div then it is div focus out.
Try this in your code.
I hope this will be helpful.
Thanks
JSFIDDLE LINK - Sample code

Get Value from Element Javascript/Jquery

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.

Adding "i" to input field, but should be hidden

I want to add "i" to a input field when the red div is clicked, but the "i" that is added to the input field should not be viewable. If the green button is clicked the hidden "i" should be removed.
Here is my HTML live: http://jsfiddle.net/mtYtW/60/
My HTML:
<div class="input string optional">
<label for="company_navn" class="string optional">Name</label>
<input type="text" size="50" name="company[navn]" maxlength="255" id="webhost_navn" class="string optional">
</div>
<div style="width:30px;height:30px;margin-top:10px;display:block;background:green;">
</div>
<div style="width:30px;height:30px;margin-top:10px;display:block;background:red;">
</div>
How to create this functionality?
If you would like to associate data with a specific element, I suggest the .data() method of jQuery. Take a look at the jQuery docs. It's a much cleaner way of accomplishing your goal.
Here's a working Fiddle to get you started.
EDIT
Per the new requirement spelled out in the comments to your question, you can attach to the form submit event like this:
$('#yourForm').submit(function() {
if($('#webhost_navn').data('myData') == 'i')
{
var val = $('#webhost_navn').val();
$('#webhost_navn').val('i' + val);
}
});
NOTE: This code relys on the orginal code in my Fiddle.
It sounds like you want to associate some data with the input field, but not alter the input field's value. For that, you can use the data method:
$(document).ready(function() {
$('#redDiv').click(function() {
$('#webhost_navn').data('myData', 'i');
});
$('#greenDiv').click(function() {
$('#webhost_navn').data('myData', null);
});
});
You'll need to add id's to the red and green divs for the above example to work as is, respectively, redDiv and greenDiv. To retrieve the data you associate with the input, do this:
var myData = $('#webhost_navn').data('myData'); // Will equal 'i' or null
API Ref: http://api.jquery.com/data
EDIT: To append the "i" value to the input's value:
var myData = $('#webhost_navn').data('myData'),
val = $('#webhost_navn').val();
if (myData) {
$('#webhost_navn').val(myData + val);
}
Working example: http://jsfiddle.net/FishBasketGordo/e3yKu/
My update to your code here: http://jsfiddle.net/mtYtW/61/
Basically I gave your red/green button's id's and created a click event to add/remove the content. I also created a css definition for the color of the input box to be white so you don't see the text.
<div class="input string optional"><label for="company_navn" class="string optional"> Name</label><input type="text" size="50" name="company[navn]" maxlength="255" id="webhost_navn" class="string optional"></div>
<div id='green' style="width:30px;height:30px;margin-top:10px;display:block;background:green;"></div>
<div id='red' style="width:30px;height:30px;margin-top:10px;display:block;background:red;"></div>
css:
label {display:block;}
#webhost_navn{color:white};
js:
$("#red").live("click",function()
{
$("#webhost_navn").val("i");
});
$("#green").live("click",function()
{
$("#webhost_navn").val("");
});
Note if the goal is to post an "i" and have nothing else as a value (ie no user input) use <input type='hidden' id=webhost_navn > and use the same jquery code as above without the need for the css.

Categories