Jquery set value to input field based on attribute - javascript

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

Related

Is there a way to skip a specific CSS selector in HTML when using querySelector in JavaScript?

I need to skip this querySelector('input') because in certain instances the input will come second instead of first. Is there a way to label an element in HTML as 'skip this'?
You're free to utilize the full power of CSS syntax there. In your example if you only want to get input if it's the first parent's element then query like this:
querySelector('input:first-child');
Or if you want to get precise use :nth-child selector, or even better, :nth-of-type:
querySelector('input:nth-of-type(1)');
But the best solution would be to mark your input with a class or id and use it instead:
querySelector('.myInput');
You can of course combine it with negation selector:
querySelector('.myInput:not(':nth-child(2)')');
querySelector returns the first Element that matches the selector provided in the method. And why wouldn't it? That's what it's supposed to do.
A.E. the below returns the first input tag it can find on the document from the top-down.
document.querySelector("input");
It will always return the first input tag it can find. You have two options to "skip" the node. You can either write a function to recursively check if the input should be skipped( kind of superfluous and bad looking ) or you can simply be more specific with your selector.
Either way you need to give the input element you want to skip some sort of recognizable trait. That can be a name property or a dataset property or a class or an id - anything that you can programatically check for.
//functional example
function ignoreSkippable() {
let ele, eles = Array.from(document.querySelectorAll("input"));
eles.some(elem => !elem.matches('.skippable') ? ele = elem : false);
return ele;
}
console.log( ignoreSkippable() );
// <input value="second input"></input>
//specific selector example
let ele = document.querySelector("input:not(.skippable)");
console.log(ele); // <input value="second input"></input>
<input class="skippable" />
<input value="second input" />

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');

How do I change the value of an input element?

is it possible to "override/overwrite" an input element fixed value using javascript and/or jquery?
i.e. if i have an input element like this:
<div id="myDiv">
<input type="text" name="inputs" value="someValue" />
</div>
is it possible to make a jquery object of that element and then change its value to something else then rewrite the jquery object to the dom??
I'm trying but obviously I haven't got good results!
I've been trying something like this:
$('input').val("someOtherDynamicValue");
var x = $('input');
$("#myDiv").html(x);
If you just want to manipulate the value of the input element, use the first line of your code. However it will change the value of every input element on the page, so be more specific using the name or the id of the element.
$('input[name=inputs]').val("someOtherDynamicValue");
Or if the element had an id
$('#someId').val('some Value');
Check out jQuery's selectors (http://api.jquery.com/category/selectors/) to see how to get whatever element you need to manipulate with jQuery.
You can directly access the value via the $.val() method:
$("[name='inputs']").val("Foo"); // sets value to foo
Without needing to re-insert it into the DOM. Note the specificity of my selector [name='inputs'] which is necessary to modify only one input element on the page. If you use your selector input, it will modify all input elements on the page.
Online Demo: http://jsbin.com/imuzo3/edit
//Changes on the load of form
$(document).ready(function(){
$('#yourTxtBoxID').val('newvalue');
});
//Changes on clicking a button
$(document).ready(function(){
$('#somebuttonID').click(function(){
$('#yourTxtBoxID').val('newvalue');
});
});

How to select following input elements and how to get part of the ID using Jquery?

There are many input elements which IDs are
question5,question6, question7
,..., how to select these input elements using Jquery?
I do not mean $('#question5'), I mean to select the group of them.
Also How to get the the last number like 5,6,7,... using Jquery?
You can select all the input elements whose its id starts with 'question', and then you can extract the number, eg.:
$('input[id^=question]').blur(function () {
var number = +this.id.match(/\d+/)[0];
});
Just be careful because if the regular expression doesn't matchs, it will throw a TypeError, a safer version would be something like this:
$('input[id^=question]').blur(function () {
var match = this.id.match(/\d+/);
var number = match ? +match[0] : 0; // default zero
});
Try this:
$("input[id^='question']")
It will match input elements that have an id attribute that begin with question.
Once you have the elements, you can simply do a javascript substring on them to find the number:
$("input[id^='question']").each(function() {
alert(this.id.substr(8));
});
The easiest solution is probably to give the elements a common class that you can select:
<input id="question5" class="questions">
<input id="question6" class="questions">
<input id="question7" class="questions">
You cane then select all of them with $(".questions") and you can get their id:s with the jQuery .attr() function.
add a class to each input field.
<input class='questions'>
$('.questions')
using the select method on the class will do the trick
depending on what you are trying to do, using the jQuery selector for the class you can add a .each to iterate through the array, like so.
$('.questions').each(function (i){
//i = the current question number
alert('this is question '+i);
});
Also, here is further documentation on the .each method in jQuery

Categories