We Keep Coding

Jquery set value to input field based on attribute

I have input field like:
<input data-checkout="card-number" type="tel" placeholder="card number" autocomplete="off" class="input-control" value="">
How I can set a value of this field with jquery? How to get data-checkout="card-number" and set value ?

in jquery you can use any attribute as a selector using this format:
$('[your-attr="attr value"]')
Answering your question this should work:
$('[data-checkout="card-number"]').val("Your val");

It depends on what you wish to access it by. To access the element, you can use, for example:
$('.input-control') // Finds all elements with this class
or
$('.input-control[data-checkout=card-number]') // Finds all elements with this class and this data-checkout value
or some other selector, depending on your application. Then, to set the value you can do:
$(/* your selector */).val('some value'); // Sets the value to 'some value'
and to get the value fo data-checkout:
$(/* your selector */).data('checkout'); // Returns 'card-number'
It is somewhat unclear what exactly you are looking for, but hopefully some of this answers your question.

Using jquery you could use the val function:
$(".input-control").val("Some value")
Using javascript:
document.querySelector(".input-control").value="Some value"
You could get the attribute by:
$(".input-control").attr("card-number")
Then you can do
$(".input-control").val($(".input-control").attr("card-number"))
Hope this helps

You can use basic Javascript to set the value.
for(i=0; card=document.querySelectorAll("input[data-checkout=card-number]")[i]; i++){
card.value="sample value";
}

$('input[data-checkout="card-number"]').val('here') // replace word (here) with the value you want

HTML store value into div and get its value

I have a div like
<div class="firstclass" id="first" data-value="firstvalue">SomeThing</div>
Here I want to get the value in data-value like by doing document.getElementById('first').value or something like this..
How can I get this value or if there is similar approach

Use .attr() or .getAttribute(). That would work.
jQuery Solution
$(function(){
console.log($('#first').attr('data-value'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="firstclass" id="first" data-value="firstvalue">SomeThing</div>
JavaScript Solution
function Example(){
console.log(document.getElementById('first').getAttribute("data-value"));
}
Example();
<div class="firstclass" id="first" data-value="firstvalue">SomeThing</div>

jQuery has the data() method. Consider using it:
// To get/read the value
$("#first").data("value")
// To set the value
$("#first").data("value", "foo-bar")
Docs:
Return the value at the named data store for the first element in the
jQuery collection, as set by data(name, value) or by an HTML5 data-*
attribute.

You can consider it as a normal attribute and use plain javascript as follows:
document.getElementById("first").getAttribute('data-value');
Since the attribute naming follows the data- naming convention we can use the HTML5 data specification.
In plain javascript you use the dataset API:
document.getElementById("first").dataset.value;
However, jQuery provides a nice shortcut for this:
$("#first").data("value");

I have found that using .val() works nicely here
To Set:
$("#div").val(1); // Sets value of div to 1
To Retrieve:
let foo = $("#div").val(); // Retrieves "1"

Use the getAttribute() method.
In your case -
document.getElementById('first').getAttribute('data-value')
Documentation can be found here:
http://www.w3schools.com/jsref/met_element_getattribute.asp

String value in li's value attribute using jquery

I have string value in li's value attributes but it is giving me 0 when I am trying to get with jquery. Any Idea why? fiddle
$(function(){
alert($('li').attr('value'))
})
<li value="CAD"></li>

For custom properties you could use $.data() method, for sample:
alert($('li').data('value'));
and in your html use the prefix data-,
<li data-value="CAD"></li>
You also could use $.data() method to set values in a data custom property, for sample:
$('li').data('value', '123');

In html value is a predefined attribute for li which can store only number. you can find it here. As it can be used to store number of the list.
http://www.w3schools.com/tags/tag_li.asp

You can use data- prefix.
http://jsfiddle.net/37pAZ/1/
$(function(){
alert($('li').attr('data-value'))
})
<li data-value="CAD"></li>

You can try following..
Html:
<li data-value="CAD"></li>
JS:
alert($('li').data('value'));
Here is demo : http://jsfiddle.net/ed8ZL/

try this one fiddle
<li data-value="CAD"></li>
alert($('li').data('value'))

Set the value of element by classname, without having the element's ID

Assume that we have the following code:
<span class="input-text">
<input type="search">
</span>
Is there any way, we could set the value of that without having the ID of the element?

Possible solutions are many. .val('your value') is the method to set the input tag value
jQuery
With class referring to span element
$('.input-text').find('input').val('value');
$('.input-text input').val('value'); // descendent selector
$('.input-text > input').val('value'); // direct children selector
Without referring to span element
$('input[type=search]').val('value'); // attribute selector
Javascript
$('.input-text').find('input')[0].value = 'value'
Or If you want to over write the content inside the <span> tag use
$('.input-text').html('content')
$('span.input-text').html('content')

You can do like this :-
$(".input-text").children().val('set any value you want to')

Use like this:
$('input[type="search"]').val("set your value");

You can use Attribute Equals Selector [name="value"]
$('input[type="search"]').val("Your Value");
or
$('.input-text input').val("you value");
DEMO

You should refer jQuery selectors. This would be more helpful to you.

try val() or value
$('input[type="search"]').val("Your Value");
or
$('input[type="search"]').value = "Your Value"

Try this:
$(".className").val("your value");

Insert javascript (jquery) variable in html input field (textbox)

With span and div this works
jQuery
$('#exchange_rate1').html(data[0].FinalCurrencyRate);
HTML
<span id="exchange_rate1"></span>
But if the HTML is an input element such as <input type='text' name='exchange_rate1' id='exchange_rate1' value='<?php echo $post_exchange_rate; ?>> then nothing happens.
Removed php code from value the same nothing.
I also tried document.getElementById("exchange_rate1").html(data[0].FinalCurrencyRate); but I also see nothing.
Now clear, that need to use val. I just searched google for how to insert jquery variable in input field. Could not find.

Use jQueryObject.val(some_value) to set the value of an input, not html().

To be more specific:
// store the value you're looking to assign
var data = [
{ FinalCurrencyRate: <?= $post_echange_rate; ?> }
];
the jQuery way:
$('#exchange_rate1') // grab the <input>
.val(data[0].FinalCurrencyRate); // and assign it from the variable
the straight js way:
// normal JS version:
document.getElementById('exchange_rate1') // grab the <input>
.value = data[0].FinalCurrencyRate; // assign it
Any kind of form fields (<input>,<select>,<textarea>) use .val() to get/set since they don't contain child elements. .html() should be used for structural elements.

In case of text use as
$("#exchange_rate1").val('Hello');

This is because you aren't supposed to be setting the innerHTML of the input element, but the value.
In jQuery you use the .val() method:
$('#exchange_rate1').val(data[0].FinalCurrencyRate);
Or with plain JavaScript, you're changing the value property of the HTMLInputElement object:
document.getElementById('exchange_rate1').value = data[0].FinalCurrencyRate;

For textual input boxes, use .val(), for textareas, use .text(), and for non-input type elements, use .html().

All you need is
$("#exchange_rate1").val('Hello');