I want to use a value of a hidden input field in my javascript function. I'm kind of a javascript noob, so I don't know how to use it yet. Now I have two seperate javascript codes which I want to combine.
My HTML: <input type="hidden" id="frequentie_x" value="{$profile.x}"/>
My first JS code to get the value of the id frequentie_x:
<script>
function frequentie() {
window.frequentie =
document.getElementById("frequentie_x").value;
}
</script>
And my second JS code which I need for displaying the correct radiobutton on my page:
<script>
$(function () { $('input[value="(Here goes the value of input field hidden"]').filter(':visible:first').prop('checked', true)} );
</script>
Does anyone know how to combine these two into one script to use the value of my hidden input value in the second script? Or maybe an easier way to do this of course.
Edit:
I tested the following code and it works to show the variable input value that is loaded from a database to show in the p element with id result:
<script type="text/javascript">
function myFunction() {
var frequentie = document.getElementById("frequentie").value;
document.getElementById("result").innerHTML = frequentie;
}
$(function () { $('input[value="Dagelijks"]').filter(':visible:first').prop('checked', true)} );
</script>
<p id="result"></p>
Now all I need is to use the var frequentie in this part: $('input[value="Dagelijks"]'). Does anyone know how to use the var frequentie from funtion myFunction() here?
Related
I am trying to amateurishly create an autocomplete input field with jquery. My first step is to get some results displayed below the input field by calling a php script on keyup with the load function of jquery.
I dont know how silly this attempt is, but i think i am almost there. However, I am stuck during passing the keyup variable to the script. Actually I can passa a variable but i need to use the keyup variable to pass.
For clarity on the question please see the code;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
function getres(){
var x = document.getElementById("cit");
$('#resdiv').load('results.php?cit=x.value');
}
</script>
HTML
<input type="" name="" id="cit" onkeyup="getres()">
<div id='resdiv'></div>
PHP file being called results.php
<?php
if(isset($_GET['cit'])){echo $_GET['cit']."<br>";}
include('connnew.php');
$getprops=$clientdb->query("SELECT * FROM cities ORDER BY DATE LIMIT 6");
while($info=$getprops->fetch_assoc()){
//$results[]=$info['city'];
echo $info['city']."<br>";
}
?>
I m able to get the results in the div below with id resdiv. But the problem is, how do I ensure the value of Var X in the JavaScript function is appended to the load parameter results.php?cit= ?
I get 'x.value' being passed rather than the actual value of x. I think once I do that, eventually I can match the variable to the results array and show matching auto-complete kind of results.
You need to put x.value outside your quotes as that's a variable. You can make your code much shorter than it currently is. You should not have any issues with following way:
$("#cit").on("keyup", function(){
var x = document.getElementById("cit").value;
$('#resdiv').load('results.php?cit='+x.value);
});//
<input type="" name="" id="cit">
<div id='resdiv'></div>
regarding to your code, you have an error here:
$('#resdiv').load('results.php?cit=x.value');
change this to:
$('#resdiv').load('results.php?cit=' + x.value);
trying to set the value of a textbox when I load a page. I'm getting "Uncaught ReferenceError: test is not defined". Also tried the JQuery way that I mention in the comment and that just gets ignored. Also played around with having the value attribute in there for the input and that didn't help.
Been looking around online but not seeing anything wrong with what I'm doing. It seems like the textbox doesn't exist yet when the code runs but that shouldn't be. I can also read from the textbox with a button click fine.
HTML:
<input type="text" id="test"/>
Javascript:
<script src="/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
test.value = "5"; //also tried $( "#test").val("5");
});
</script>
You're referencing an object test which was never defined. You can fix it with:
$("#test").val("5");
You may also want to use vanilla javascript for something simple like this.
document.addEventListener("DOMContentLoaded", function() {
var el = document.getElementById("test");
el.value = "5";
});
Your second try is working fine
$("#test").val(5)
JSFIDDLE http://jsfiddle.net/vDC6X/
Do you use the right ID of the element.
You say textbox... does the textbox id render as test ?
Take a look at the page source of the rendered page.
You have not imported jquery min.js
<script src="/Scripts/jquery-1.10.2.min.js"></script>
so I have a js file, lets call it foo.js and it has a variable count; this count is what I want to display in a textbox on the html end, which is a separate file.
How can I make the textbox, reference the variable which constantly is updated per minute?
Here is what I tried so far,
<script type="text/javascript">
var elem = document.getElementById("count");
elem.value = countVal;
</script>
Where I want to show it in HTML:
Shapes:
if I set elem.value to 5, or hello world, it works, but I want to set it to the constantly updating js value in a seperate page. I also tried creating a function in my js file, where I return the variable, and then calling that function in the html tag, but that did not work either.
I am new to JS, and I would appreciate your help.
Thank you.
Edit:
THIS IS NOT for a TIME INTERVAL, I have a variable, that based on some drawings, counts the shapes drawn, and I want to bring that to front end. That count.
MORE CODE:
my function in the .js file
function getShapeNumbers(){
return shapeCount;
}
<script type="text/javascript">
var elem = document.getElementById("shapeCount");
elem.value = getShapeNumbers();
</script>
where I want it displayed
Shapes:<input type="text" size="25" style="width:50px;" id ="shapeCount" />
it returns undefined in the textbox even if I change my function to return 50, it shows undefined. And if I just elem.value to 50, then that works. I want it set to my global variable
Probably your js file is not loaded by the browser yet when you run the code elem.value = newvalue.
Run this only after all document html content be loaded:
window.onload = function(){
document.getElementById('shapeCount').value = shapeCount;
};
Also, consider updating directly input when updating variable.
jsFiddle: http://jsfiddle.net/bx4SU/
I am trying to find, if I can pass a value on the title attribute of a label element using Javascript?
I have tried the following Javascript code:
function myFunction()
{
return "Hello!";
}
And a piece of HTML code:
<label title="myFunction()">TEST</label>
But, this isn't working. It just show the 'myFunction()' as a text.
Is it possible, what I am trying to do? If yes, what is the correct syntax?
<label id='mylabel'>TEST</label>
<script>
function myFunction() {
return "Hello!";
}
document.getElementById('mylabel').setAttribute('title', myFunction());
</script>
Should do the job. It first selects the label and then sets the attribute.
You can't inline javascript like this.
What you may do is
1) give an id to your label and put this at the end of your body
<script>
document.getElementById('myId').title = myFunction();
</script>
Demonstration
2) if you really want to inline the call, write this at the point where you want your label :
<script>
document.write('<label title="'+myFunction()+'">TEST</label>');
</script>
(this is really not recommended)
Try this way:-
HTML:
<label id="lab">TEST</label>
JS:
window.onload = function() {
document.getElementById('lab').setAttribute('title','mytitle');
alert(document.getElementById('lab').title);
}
Refer LIVE DEMO
I got this! If you are using angular you can use this data Binding and call the function
<label title="{{myFunction()}}">TEST</label>
I have a form that I'm trying to get data from a form using jquery and validate it. What is the best way to take data from a form to a variable using jquery?
Here is the snippet that you can use -
$('#myForm').submit(function() {
// get all the inputs into an array.
var $inputs = $('#myForm :input');
// not sure if you wanted this, but I thought I'd add it.
// get an associative array of just the values.
var values = {};
$inputs.each(function() {
values[this.name] = $(this).val();
});
});
Got it from stackoverflow-link
Well here we go
This is the jQuery script:
function getData () {
$(document).ready(function() {
var myTextFieldValue = $('#myTextField').value;
alert('The value is: '+myTextFieldValue);
});
}
This is the HTML
<form action='#' method='whatever'>
<input type='text' id='myTextField' />
<input type='submit' onClick='getData()' />
</form>
NOTE:
In order to make your script working you must import the jQuery Libraries
Like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
I Did not try the script so there could be some errors.
Hope i was helpful to you
Bye.
(For any help pm me)
there no way to get all the data from a form in one line of code. You have to retrieve it value by value.
if you have a <input id='some-id' >
just use var someId = $('#some-id').val();. Now someId hold the value of the input
The val() function only return the value of the first matched element (if you don't know what i mean take a look at jquery selector (http://api.jquery.com/category/selectors/)
take a look at http://api.jquery.com/val/ to see the val function, it has some weird thing with the <textarea> tag
And remember to always validate server side, even if you already did it client side, js securrity is very easy to bypass
use JQuery Validation plugin. Have a look here