Been fiddling around with jQuery and HTML5, but I am stuck on a simple simple action.
JSFiddle here: http://tinyurl.com/oqmkyhr
I have a field input where I input a number, and when I press a button, the inputted number is rounded to 2 decimal places. The catch is, you cannot use or server side code AND it is all within 1 html document.
This is what I have:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Scotiabank Currency Converter</title>
<meta name="description" content="Converts currencies with Yahoo! Finance API">
<meta name="author" content="Kangze Huang">
<link rel="stylesheet" href="#">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<input type='number' id='Amount' value='Amount convert' step='0.01'>
<input type='button' id='Validate' value='Check decimals'>
<h1></h1>
<script>
jQuery(document).ready(function($) {
$('#validate').click(function(){
$('Amount').value = parseFloat(value).toFixed(2);
$('h2').text(value);
});
});
</script>
</body>
When I press the Validate button, it turns into NaN (On Chrome & other web-browsers)! On JSFiddle it does nothing.
What am I doing wrong? Perhaps syntax or something I'm missing?
It is because you have $('Amount').value. You are missing the '#' and the parenthesis and referencing the value wrong. But you have the right idea. What you can try is:
$('#validate').click(function(){
var amount = $('#Amount').value();
$('h1').text(parseFloat(value).toFixed(2));
});
});
Your selector should be $("#Amount"). You are missing the #.
Also, if you are trying to ASSIGN the value, you should be using:
$("#Amount").val( parseFloat(value).toFixed(2) );
I am not sure where you are getting your 'value' variable from, I don't see it getting assigned anywhere.
i see many syntax and other mistakes in your code, use the below code:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Scotiabank Currency Converter</title>
<meta name="description" content="Converts currencies with Yahoo! Finance API">
<meta name="author" content="Kangze Huang">
<link rel="stylesheet" href="#">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<input type='number' id='Amount' value='Amount convert' step='0.01'>
<input type='button' id='Validate' value='Check decimals'>
<h1></h1>
<script>
jQuery(document).ready(function($) {
$('#validate').click(function(){
$('#Amount').val(parseFloat(value).toFixed(2)); //you missed # in this, normally in jquery we use .val() method to set the value of the input types
$('h1').html(parseFloat(value).toFixed(2)); // in the above code you have used h1 so here also use h1
});
});
</script>
</body>
$('#validate').click(function(){
1^
$('Amount').value = parseFloat(value).toFixed(2);
2^ 3^ 4^
$('h2').text(value);
5^
validate is not Validate
Amount will match <Amount> elements which don't exist. ID selectors begin with a #
jQuery objects don't have value properties. DOM nodes (if they are form controls) do. You are probably looking for val()
value is an undefined variable. You need to define it before you use it. You probably want $('Amount').val() instead of using value at all.
You have no elements that match this selector, and heading elements should be used for headings.
So what you are probably looking for is:
$('#Validate').click(function() {
var value = $('#Amount').val();
value = parseFloat(value).toFixed(2);
console.log(value);
$('output').val(value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='number' id='Amount' value='Amount convert' step='0.01'>
<input type='button' id='Validate' value='Check decimals'>
<output></output>
If you want to select something by id in jquery, you need to use a # sign. In your case $('#Amount'); Also, there are no h2 elements on your page, so $('h2').text(value); won't do anything. Additionally, if you want to get the value of an input in jquery, you use the .val() functions, and not .value.
Fixed fiddle: http://jsfiddle.net/9kqbue5t/2/
Related
I have explicitly defined a Javascript file for my HTML document. In my HTML, I have created a text box where the user can type in their name, then click a button called "submit."
In JS, as soon as they click "submit," I want to store what they have entered as their name in a variable (I'm using eventListener to know when they click "submit"). My question is, how would I be able to do this without using onclick in my HTML doc? Here is my following code at the moment:
my_button.addEventListener('click', my_function);
function my_function(){
alert("Hello world!");
}
One way would be to use oninput event and every time the user types in something update the variable in which you want to store the input. The input tag would look like this: <input type="text" oninput="myFunction()"> and in the function that is declared as the handler you can take the input and store wherever you want.
You can have the code separate. All you'd have to do in the HTML document is to load the javascript file.
Here's a snippet. First the content of the javascript file, and below the simplified HTML document.
let myButton = document.getElementById("theButton");
myButton.addEventListener('click', my_function);
function my_function(){
alert("Hello world!");
}
<button id="theButton">Test</button>
to add a separate javascript file do this anywhere in your html
<script type='text/javascript' src = 'path/filename' > </script>
to get the value of the input yoy need to slect it first. then you get the value via the value property.
see this example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<input id="my_input" type="text">
<button id="my_btn">click</button>
</body>
</html>
then you can use the following javascript.
var my_button = document.querySelector('#my_btn');
var my_input = document.querySelector('#my_input');
var value;
my_button.addEventListener('click',function () {
value = my_input.value;
alert(value);
})
hope this helps!
I'm using the jQuery validator plugin http://jqueryvalidation.org/.
I have found that I can access elements in the form using either their ID or their name (at least with Firefox and Chrome). Is one way more correct and browser compatible than the other? Or maybe I should do something else altogether?
http://jsbin.com/daxaju/2/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#myForm").validate({
submitHandler: function(form) {
console.log('using id',form.myElementID.value);
console.log('using name',form.myElementName.value);
}
});
});
</script>
</head>
<body>
<form id="myForm">
<input type="text" name="myElementName" id="myElementID" />
<input type="submit" />
</form>
</body>
</html>
Since on an input a name is somehow required (I don't know what the documentation says about this, but if you want to retrieve it later, for example in PHP, you should put a name attribute on it), I think that referencing your element by its name it safer.
As you can see here : http://www.javascript-coder.com/javascript-form/javascript-get-all-form-objects.phtml , native API use the name to reference a form element.
The best way is to put both id and name, id for jquery and name for php.
For browser compatible, id/name all works fine.
Selecting an element by it's Id is the fastest. Id is(should be) unique on the document. It works on all the browsers.
I looking for how to access input tag in form via jquery.
I made something like below :
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test </title>
<script src="/resources/gtl_portal/js/jquery/jquery-2.1.1.min.js"></script>
<script src="/resources/gtl_portal/js/comon.js"></script>
</head>
<body>
<form id="a" action="#">
<input type="text" name="name" value=""><br/>
<input type="text" name="phone" value="numbervalidation"><br/>
<input type="hidden" name="hiddenParam" value="hidden parameters"><br/>
press<br/>
</form>
<script>
function chk(){
checkValidation('a');
}
</script>
</body>
</html>
and in common.js
function checkValidation(formName){
var form = $('#' + formName);
form.children('input').each(function(k){
var obj = $(this);
console.log(obj.val());
}
};
I can get value from input tags without hidden type. How can I get hidden type also at once. I found follow article. But if I use this, it looks have to iterate form twice which I do not want to.
Link : jQuery access input hidden value
Is there any way to access hidden and not hidden at once?
Thanks :D
P.S/ I also curious about access multiple selector. I have tried
form.children('input, textarea, select').each(function(i){//do something});
but does not work. Would you find anything wrong from here?
You can use the :input selector. It selects all <input> elements including hidden inputs
$(":input");
Simply selecting the elements by tag name like $("input"); works as well.
Getting hidden input just works, see following code below:
console.log($('input'))
function show(){
$('input').attr('type','text')
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden">
<button onclick="show()" >show hidden fields</button>
I want to fetch the radio input element object.
In this approach, if the page is huge with many radio inputs, then it will take time to iterate over them before returning the object.
Is there a faster approach to get input object other than this? The condition is that the value should start with text '9Z'.
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div>
<td>
<input type="radio" value="9Z>2">
</td>
</div>
<script>
var r = $("input:radio[value^='9Z']");
alert(r.length); //I got the object - length will be greater than 0
</script>
</body>
</html>
:radio is a jquery specific selector, therefore by using it, you're not allowing jquery to use the quicker document.querySelectorAll() method. Simply replace it with the attribute equals selector.
$("input[type=radio][value^='9Z']")
If that still isn't fast enough, we'll need to know more about the structure of your page.
You could also do this for a very small increase (no IE7 support):
$(document.querySelector("input[type=radio][value^='9Z']"))
I want to edit links when the user changes the value of a <input type="text">, but I can't get it to work. My HTML:
<head>
<link rel="stylesheet" href="styles.css" />
<script type="text/javascript">
function updateGiveLink() {
document.getElementById("givelink").innerHTML = "http://kroltan.eliti.com.br/diamonds/?give="+document.getElementsById("givetext").value;
document.getElementById("givelink").href = "http://kroltan.eliti.com.br/diamonds/?give="+document.getElementsById("givetext").value;
}
</script>
</head>
<input type="text" placeholder="Minecraft username" name="give" id="givetext" onchange="updateGiveLink()" />
<a id="givelink" href="http://kroltan.eliti.com.br/diamonds/?give=Player">http://kroltan.eliti.com.br/diamonds/?give=Player</a>
This is supposed to change the URL and display text of givelink so the ?give= part of the url has the value of the text field givetext. But it is not working as expected. Instead, it does nothing. I also tried using onkeyup and oninput (saw these in another related question), with no success.
It should be document.getElementById("givetext").value you had getElementsBy with an s
Working code using onkeyup demo
May be there is some syntax error as you have used document.getElementsById but it should be document.getElementById