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
Related
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/
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 am trying to make a very simple coding example work, but for an unknown reason, it is not responding.
The example I am trying to replicate is found here: http://jsfiddle.net/karim79/2hw89/1/
It is an answer to the following SO question: Toggle visibility of text box based on status of check box -jQuery
Here is my code. I have embedded another checkbox, to test if I could call a basic onclick-listener-function. It works. The other checkbox is however not reacting when clicked, even though the exact same code works in the example. Do you know why?
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
$(document).ready(function() {
$('#other').change(function() {
alert("Hello World!");
$('#otherrace').toggle(this.checked).focus();
});
});
</script>
<script>
function test(){
alert("Test is working!");
}
</script>
</head>
<body>
<input type="checkbox" name="race" value="other" id="other">Other,
Specify
<br />
<input style="display: none;" type="text" size="25" maxlength="25"
id="otherrace" />
<br />
<input type="checkbox" onclick="test()" name="test" value="test"
id="test">testing
<br />
</body>
</html>
script element cannot have both src and body
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!--or use the address as http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js-->
<script>
$(document).ready(function() {
$('#other').change(function() {
alert("Hello World!");
$('#otherrace').toggle(this.checked).focus();
});
});
</script>
Script.src
This attribute specifies the URI of an external script; this can be
used as an alternative to embedding a script directly within a
document. script elements with an src attribute specified should not
have a script embedded within its tags.
Also, if you are loading the page from a local files system, using a protocol like file://.... then you need to specify the http protocol in the jQuery url like <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Use
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
I create this tiny JS so i can control the form submit with jQuery
$('#submit').click(function() {
$('#addForm').submit();
});
Can I use a simple href link for it?
Something like
link
I tried
link
but it didn't work (it by pass the other jQuery in the page)
If you want the JS that you created to control the submit, don't have a href value in your link:
<a id="submit">link</a>
You cannot submit your form that way with a link and some javaScript, even jQuery. You have to use an XHR call to submit your query AND not refresh the page. (you can submit your form with a link as presented by Dan, but I understand that you want to do more than just that from your questions)
The reason being that the "return false" statement will impact the link action, and not the form submission itself.
In any case, I would advise you to not use a link to submit your form at all.
You can easily submit a form with the normal submit button and a bit of jQuery. That way, you provide a nice fallback to your users that have not enabled javaScript.
You can even submit the form with some client side validation, using the following HTML / javaScript:
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#addForm').submit(function(){
validate();
ajax_submit_function_taking_form_data_as_argument($(this).serialize());
return false;
});
});
function validate(){
//Do some client side validation if required
}
function ajax_submit_function_taking_form_data_as_argument(theData){
$.ajax({
type: 'GET',
url: "http://search.google.com/",
data: theData,
error: function(e){
alert('error...');
},
success: function(data){
alert('success!');
}
});
}
</script>
<style type="text/css"></style>
</head>
<body>
<form id="addForm">
<input type="text" name="field1" value="" />
<input type="submit" value="submit" />
</form>
</body>
</html>
A last solution, albeit maybe too heavy weight for your use, would be to use the excellent jQuery form plugin from http://jquery.malsup.com/form/
I hope that helps!
You can attach to the click event with jquery. It's also cleaner not to put any javascript in your html.
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#aSubmit').click(function(){
$('#form1').submit();
return false;
});
});
</script>
<style type="text/css"></style>
</head>
<body>
<form id="form1" action="http://www.google.com/search" name=f>
<input name="q" />
</form>
submit
</body>
</html>
Never ever put JavaScript in the href attribute. If you must put in the HTML, use the onclick attribute, and remember to add return false. Also, never ever prefix script with javascript:.
Your first script block should do the job just as fine as well, though.
(And what does "it by pass the other jQuery in the page" mean?)
I've got this code:
<html>
<head>
<link type="text/css" href="css/blitzer/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$('.hasDatepicker').datepicker();
});
</script>
</head>
<body>
<p>date: <input type="text" name="data" class="hasDatepicker" /></p>
<input type="submit" value="send" />
</div>
</body>
</html>
When I click the input field, nothing happens. The datepicker is initialized though, when I inspect the DOM in Firebug, I get the id="dp1260260566059" added to my <input> element.
After changing the html and js to use id attribute instead of class, so having this in my code:
$(function() {
$('#hasDatepicker').datepicker();
});
and
<p>date: <input type="text" name="data" id="hasDatepicker" /></p>
Everything works OK.
Can't datepicker from JQuery UI work for all elements of some class?
Please check if the datepicker works if you change the class name of the input fields from 'hasDatePicker' to something else. The reason is, when add the datepicker to the input field using the below code:
$(function() {
$('#date').datepicker();
});
it adds the class name "hasDatePicker" to the input field. (which is the one u r using)
Don't use hasDatepicker as your date picker's class name. Use a different name, like date_picker.
JQuery adds the class hasDatepicker to the element that datepicker() is called on. If the element already has the class hasDatepicker, then the datepicker() function does nothing. So, just use a different class name.