This question already has answers here:
html "data-" attribute as javascript parameter
(6 answers)
Closed 8 years ago.
i need to send the input fields "data-validation" to javascript function.
form is
<input type="text" name="fname" id="fname" data-validation="length" onchange="validate(this);" required />
Javascript is
function validate(value)
{
var value=value.value;
var validation=value.data-validation;
alert(value +" "+ validation);
return false;
}
i can't get the value of data-validation in javascript.
please review this code
getAttribute() is used to get attribute of element
function validate(ele)
{
var value=ele.value;
var validation=ele.getAttribute("data-validation")
alert(value +" "+ validation);
return false;
}
Demo here http://jsfiddle.net/GgfM3/
Attribute of an element cannot be accessed just through the dot. You should use "getAttribute("myAttribute")" in javascript and "attr("myAttribute")" with jQuery.
How about using jQuery? The post here suggests that "onchange is only triggered when the control is blurred". The jQuery .on can monitor value changes in the input.
$("#fname").on("input", function(){
var value=$(this).val();
var validation=$(this).attr("data-validation");
alert(value +" "+ validation);
}
Check example here.
You can retrive the Attribute values using the getAttribute('value') method.
In you example you can get the value using
function validate(data)
{
var dataFromTextbox = data.getAttribute("data-validation")
alert(dataFromTextbox);
}
Related
This question already has answers here:
How can I get the data-id attribute?
(16 answers)
Closed 3 years ago.
I know to get/set values to input fields using jQuery like follow example.
//Get
var bla = $('#txt_name').val();
//Set
$('#txt_name').val(bla);
I want to get/set values using data attribute. For an example, if I have following input I want to set/get values using "data-wpt-id".
<input type="text" data-wpt-id="wpcf-latitude">
Note : Please note that this input field doesn't have id attribute.
You need to use Attribute Selector
//Get
var bla = $('input[data-wpt-id="wpcf-latitude"]').val();
//Set
$('input[data-wpt-id="wpcf-latitude"]').val(bla);
// Get
var bla = $('input[data-wpt-id="wpcf-latitude"]').val()
// Set
$('input[data-wpt-id="wpcf-latitude"]').val(bla)
You can do it like this:
$('input[data-wpt-id]').val(function() {
return $(this).data("wpt-id")
});
Demo
$('input[data-wpt-id]').val(function() {
return $(this).data("wpt-id")
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" data-wpt-id="wpcf-latitude">
Following the jQuery documentation for the data function: https://api.jquery.com/data/
Following the Vanilla documentation for the dataset attribute: https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/dataset
Example:
<input type="text" class="container" data-wpt-id="5">
// jQuery
const $inputElement = $('.container');
const wptId = $inputElement.data('wptId');
console.log(wptId); // 5
$inputElement.data('wptId', 10);
console.log($inputElement.data('wptId')); // 10
// Vanilla
const inputElement = document.querySelector('.container');
const wptId= inputElement.dataset.wptId|| 0;
console.log(wptId); // 5
inputElement.dataset.wptId= 10;
console.log(inputElement.dataset.wptId); // 10
// If the `<input>` element has no Id/Class, you can use following selector instead:
const $jquery = $('input[data-wpt-id]');
const vanilla = document.querySelector('input[data-wpt-id]');
This question already has answers here:
addEventListener calls the function without me even asking it to
(5 answers)
Closed 6 years ago.
I am trying to pass a complete JavaScript statement to a function to prevent typing the same code again. I am using a variable but this code does not seem to work. The HTML input is given below.
var e2;
e2 = document.getElementById("num2");
e2.addEventListener('blur', checko(e2));
function checko(k){
alert("Hey you have entered - "+k.value)
}
<input type="text" class="form-control" id="num2" placeholder="0">
This is just a small code of the web page I am building and to validate other inputs I would like to KEEP use a function.
Change event to change and use this.value as parameter see Snippet. The behavior of change is that it has 3 distinct characteristics:
The event.target needs to be a form input (that includes textarea as well). ✔
It needs user input. ✔
It fires when the event.target has lost focus (a.k.a. blur). ✔
SNIPPET
var e2 = document.getElementById("num2")
e2.addEventListener('change', function(e) {
checko(this.value);
}, false);
function checko(k) {
alert("Hey you have entered - " + k);
}
<input type="text" class="form-control" id="num2" placeholder="0">
I am trying to pass a complete JavaScript statement to a function
It seems you are trying to pass the value of e2 which is the id of the DOM element
Also checko(e2) will execute the function as soon as event is attached to the DOM.
Instead you need to delegate the event.
Beside you can also use Event object to find out the target on which event is executed.
This snippet may be useful
var e2;
e2 = document.getElementById("num2");
e2.addEventListener('blur', checko);
function checko(event){
alert("Hey you have entered - "+event.target.value)
}
JSFIDDLE
You can' pass arguments directly when using addEventListener you can use function() {yourfuncttion(args);}
var e2;
e2 = document.getElementById("num2");
e2.addEventListener('blur', function () {
checko(e2)
});
function checko(k) {
alert("Hey you have entered - " + k.value)
}
function checko(){
var e2 = document.getElementById("num2").value;
alert("Hey you have entered - "+e2);
}
<input type="text" class="form-control" id="num2" placeholder="0" onblur="checko()">
You can also use Onblur Event Listener on direct field.
<!DOCTYPE html>
<html>
<body>
Enter your lastname: <input type="text" id="firstname" >
Enter your fnmae : <input type="text" id="lastname">
<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>
<script>
var firstname = document.getElementById('firstname');
firstname.addEventListener('blur', function() {
myFunction(firstname)
});
var lastname = document.getElementById('lastname');
lastname.addEventListener('blur', function() {
myFunction(lastname)
});
function myFunction(k){
alert("Hey you have entered - "+k.value)
}
</script>
</body>
</html>
This question already has answers here:
checking whether textfield contains letters in javascript
(2 answers)
Closed 7 years ago.
I'm very new to JavaScript, and I am a little confused. How do I check if my input field:
<form name='formular' method='post' onsubmit='return atcheck()'>
E-mail <input type='text' name='email' id='em'>
<input type='submit' value='Submit'>
</form>
contains the symbol "#"? I'm not looking for a full good e-mail validation, I just wanna check if the field contains that symbol in particular when submitted (in the atcheck() function).
<script language="Javascript">
function atcheck(){
if(document.getElementById('em').value.indexOf('#') === -1) {
// No # in string
return false;
} else {
// # in string
return true;
}
}
</script>
Here's one way to accomplish that:
function atcheck() {
var has_at_char = document.getElementById("em").value.indexOf("#") > -1;
if (has_at_char) {
return false;
}
// your previously exisiting implementation of atcheck() could follow here
}
use indexOf() function
indexOf() documentation
to get the text on your function, you need to use document.getElementById("em").value
This question already has answers here:
What is wrong with this getElementsByClassName call in Javascript? [duplicate]
(4 answers)
Closed 9 years ago.
I am trying to show the same text value in designated elements marked by the same class. Basically, this text is a value that I am getting from a form input tag. I am trying to do this with JavaScript using a getElementById to gather the text value and then getElementsByClassName to replace the text value in specified places of a page. Please see the following code first in HTML:
collective noun: <input type="text" id="noun1" onkeypress="runGather()"><br>
something the <i class="collective_noun">collective noun</i> can make: <input type="text" id="noun2"><br>
adj describing <i class="collective_noun">collective noun</i>: <input type="text" id="adj"><br>
and then in the JS file:
function runGather() {
var noun1 = document.getElementById("noun1").value;
var collective_noun = document.getElementsByClassName("collective_noun").value;
for (var i = 0; i < noun1.length; i++) {
collective_noun[i].innerHTML = noun1;
}
}
You're setting collective_noun to just a value when you want to use the nodelist that's returned, and you're trying to loop through noun1, which is just the value of the node. Try this instead:
var i, l,
noun_1,
collective_nouns;
noun_1 = document.getElementById('noun_1').value;
collective_nouns = document.getElementsByClassName('collective_noun');
for (i = 0, l = collective_nouns.length; i < l; i += 1) {
collective_nouns[i].innerHtml = noun1;
}
Instead of using plain JavaScript, you could save yourself the headache and use jQuery. Here's a one-line example using jQuery:
$(".collective_noun").text( $("#noun1").val() );
This question already has an answer here:
how do I find elements that contain a data-* attribute matching a prefix using jquery
(1 answer)
Closed 9 years ago.
I'm trying to use jQuery to select all the inputs in my form that have a data attribute with a similar name.
This is my form:
<form id = "myForm">
<input name="name" data-valid-presence=true >
<input name="age" data-valid-biggerThan="18" >
<input name="email[0]" data-valid-email=true >
<input name="email[1]" data-valid-email=true >
</form>
and my jQuery selector is:
var inputs = jQuery("#myForm").find("input[data-valid-email],[data-valid-length],[data-valid-presence], [data-valid-biggerThan]");
I'm looking for a way to select all the inputs that have a data-valid-* in them without having to find them one by one like this.
Any ideas?
You can use jQuery.filter:
var inputs = $('form').find('input').filter(function() {
var matched = false;
$.each(this.attributes, function(attr) {
if ( matched ) return;
matched = /^data-valid/.test(this.name);
});
return matched;
});