i'm trying to create some kind of Desktop Keyboard (using/writing kyrillic letters in my text field). I came across the Problem that i can only write the first letter because of the assignment of the variable.
can someone tell me an easy way to get around that?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script language="javascript" type="text/javascript">
function rukeyboard() {
var newtext = document.Keyboard.A.value; // <-- Problem is that newtext is only pointed to Keyboard.A but should be usable for 33 letters
document.Keyboard.outputtext.value += newtext;
}
</script>
</head>
<body>
<form name="Keyboard">
<input type="button" name="A" value="A" onClick="rukeyboard();">
<input type="button" name="B" value="B" onClick="rukeyboard();">
<input name="outputtext">
</form>
</body>
</html>
This should solve your purpose :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script language="javascript" type="text/javascript">
function rukeyboard(button) {
var newtext = button.value; // <-- Problem is that newtext is only pointed to Keyboard.A but should be usable for 33 letters
document.Keyboard.outputtext.value += newtext;
}
</script>
</head>
<body>
<form name="Keyboard">
<input type="button" name="A" value="A" onClick="rukeyboard(this);"> <input type="button" name="B" value="B" onClick="rukeyboard(this);">
<input name="outputtext">
</form>
</body>
</html>
Here is a fiddle : https://jsfiddle.net/wet32n06/
Try this
function rukeyboard(newtext) {
document.Keyboard.outputtext.value += newtext;
}
<form name="Keyboard">
<input type="button" name="A" value="A" onClick="rukeyboard(this.value);">
<input type="button" name="B" value="B" onClick="rukeyboard(this.value);">
<input name="outputtext" value="">
</form>
You can also try this solution.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script language="javascript" type="text/javascript">
function rukeyboard() {
// var newtext = document.Keyboard.A.value; // <-- Problem is that newtext is only pointed to Keyboard.A but should be usable for 33 letters
document.Keyboard.outputtext.value += document.activeElement.value;
}
</script>
</head>
<body>
<form name="Keyboard">
<input type="button" name="A" value="A" onClick="rukeyboard();">
<input type="button" name="B" value="B" onClick="rukeyboard();">
<input name="outputtext">
</form>
</body>
</html>
But personally I will prefer using jquery to associate the functions, as there are lots of input tag and u have to manually call for each input tag.
So One good way will be using jquery.each to loop through all inputs, and bind the function using jquery on to the inputs.
Here is a solution using Jquery
HTML
<body>
<button value="A" name="A">A</button>
<button value="B" name="B">B</button>
<input id="outputtext" name="outputtext">
</body>
JQuery
<script>
$(document).on("click", "button", function() {
$("#outputtext").val($("#outputtext").val() + "" + this.value);
});
</script>
Related
I have the following HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>demo</title>
<link rel="stylesheet" href="style.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="field">
<label for="value1">Introduce value</label>
<input type="text" id="value1" name="value1" value="" />
</div>
<div class="button-block">
<input type="submit" value="Click" />
</div>
<div id="output">
<h2>Result:</h2>
<textarea name="result" id="result"></textarea>
</div>
</body>
</html>
I want to get the value that is introduced in value1 and when the submit is clicked to put that value in the output. So I wrote in script.js the following code but somehow it doesn't work.
<script>
window.onload = function(){
var val = document.getElementById('value1').innerHTML;
document.getElementById('result').innerHTML = val;
};
</script>
Any ideas?
You have to use .value property of the input field instead of innerHTML. so it would be:
var val = document.getElementById('value1').value;
and also, since you're executing it when the page loads. There will be no value assigned to the input field with id 'value1'. Therefore, you won't get any result.
You can try adding a button with onClick event to execute this function in place of using window.onload
HTML controls you are working on are textboxes, so they have a value property, not innerHTML.
Use this:
var val = document.getElementById('value1').value;
document.getElementById('result').value= val;
You can't get the value of an input element using the innerHTML attribute. Use value instead:
var val = documento.getElementById('value1').value;
Also you should keep in mind that your function is executed when the page loads, NOT when the form is submitted.
The code is not working, because you are calling this function when the window loads, not when the submit button is clicked. Since there is no form, and thus no page loading going on, I'd recommend switching the <input type="submit" value="Click" /> to a button. They are functionally similar, and visually identical. With the the button, though you could use the onclick attribute to call a function when the button is clicked. See below for an example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>demo</title>
<link rel="stylesheet" href="style.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="field">
<label for="value1">Introduce value</label>
<input type="text" id="value1" name="value1" value="" />
</div>
<div class="button-block">
<button onclick="printOutput()">Click</button>
</div>
<div id="output">
<h2>Result:</h2>
<textarea name="result" id="result"></textarea>
</div>
</body>
</html>
Then in your script.js you would have,
function printOutput(){
var val = document.getElementById('value1').value;
document.getElementById('result').innerHTML = val;
}
when the submit is clicked to put that value in the output
You have chosen wrong event window.onload, also you need .value instead of .innerHTML
Option 1: using jQuery, as you already have the import
$(function() {
$('input[type="submit"]').on('click', function(e) {
$('#result').val($('#value1').val());
});
});
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<div class="field">
<label for="value1">Introduce value</label>
<input type="text" id="value1" name="value1" value="" />
</div>
<div class="button-block">
<input type="submit" value="Click" />
</div>
<div id="output">
<h2>Result:</h2>
<textarea name="result" id="result"></textarea>
</div>
Option 2: using plain js
document.addEventListener('DOMContentLoaded', function(e) {
document.querySelector('input[type="submit"]').addEventListener('click', function(e) {
document.querySelector('#result').value = document.querySelector('#value1').value;
});
});
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<div class="field">
<label for="value1">Introduce value</label>
<input type="text" id="value1" name="value1" value="" />
</div>
<div class="button-block">
<input type="submit" value="Click" />
</div>
<div id="output">
<h2>Result:</h2>
<textarea name="result" id="result"></textarea>
</div>
<script>
$( document ).ready(function() {
setTimeout(function(){
var val = document.getElementById('value1').innerHTML;
var generateHere = document.getElementById("result");
generateHere.innerHTML = val;
}, 2000);
});
</script>
I am trying to POST text values to the different python program based on user selection (through radio button). Program works fine with single form action
<form action='/cgi-bin/prog1.py' method='POST'>
...text input1
...text input2
...submit
</form>
but when using radio button text values are not posted to the program.
Here is the code I tried
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function whichsite(form){
var sites = form.elements.site, i = sites.length;
while (--i > -1){
if(sites[i].checked){
return sites[i].value;
}
}
}
</script>
</head>
<body>
<form action="#" onsubmit="window.open(whichsite(this)); return false; method='POST' ">
<b>Program Jump</b>
<p>
Enter PDB ID:<input type="text" name="PDB_ID"><br>
Enter PDB Chain:<input type="text" name="Chain_ID"><br>
<label><input type="radio" name="site" value="/cgi-bin/prog1.py">P-P</label>
<label><input type="radio" name="site" value="/cgi-bin/prog2.py">P-L</label>
<label><input type="radio" name="site" value="/cgi-bin/prog3.py">P-C</label>
<p>
<input type="submit" value="Submit">
</form>
</body>
</html>
Help me !
I think you should change the action attribute value of the form in onsubmit method instead of window.open method, you can try something like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function whichsite(form){
var sites = form.elements.site, i = sites.length;
while (--i > -1){
if(sites[i].checked){
// here change the action value instead of return the site
form.action = sites[i].value;
}
}
}
</script>
</head>
<body>
<form action="#" onsubmit="whichsite(this); return false;" method="POST">
<b>Program Jump</b>
<p>
Enter PDB ID:<input type="text" name="PDB_ID"><br>
Enter PDB Chain:<input type="text" name="Chain_ID"><br>
<label><input type="radio" name="site" value="/cgi-bin/prog1.py">P-P</label>
<label><input type="radio" name="site" value="/cgi-bin/prog2.py">P-L</label>
<label><input type="radio" name="site" value="/cgi-bin/prog3.py">P-C</label>
<p>
<input type="submit" value="Submit">
</form>
</body>
</html>
Or, you can try change the value of action in the change event of radio, hope this can help~~~
I'm trying to calculate the gas mileage. The function works but for some reason it returns a negative number, any solutions for this?
<!DOCTYPE HTML>
<html>
<head>
<title>Gas Mileage</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function calcMPG(en,st,gal){
var total= ((parseFloat(en) - parseFloat(st)))/(parseFloat(gal));
document.milespergal.mpg.value = total;
}
</script>
</head>
<body>
<h3>Gas Mileage</h3>
<form name="milespergal">
<p>Starting Mileage:<input type="text" value="0" name="start"><br>
Ending Mileage:<input type="text" value="0" name="end"><br>
Gallons Used:<input type="text" value="0" name="gallons"><br>
<input type="button" value="submit" onclick="calcMPG(document.milespergal.start.value,document.milespergal.end.value ,document.milespergal.gallons.value)">
<br>
Miles Per Gallon:<input value="0" type="text" name="mpg"></p>
</form>
</body>
</html>
Looks like you have your parameters backwards. Try defining calcMPG as this:
//Reordered st & en
function calcMPG(st, en ,gal){
var total= ((parseFloat(en) - parseFloat(st)))/(parseFloat(gal));
document.milespergal.mpg.value = total;
}
Here's a JSFiddle
On a page with two forms I need a script that will validate only the one that is being submitted.
I have made a simple page that shows the problem
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>
function validateForm() {
var checks = document.getElementsByName("tjek");
var checksChecked = false;
var i = 0;
while (!checksChecked && i < checks.length) {
if (checks[i].checked) checksChecked = true;
i++;
}
if (!checksChecked) {
alert("Select something!")
return false;
}
}
</script>
</head>
<body>
<form onSubmit='return validateForm()' action="" method="get">
<input name="tjek" type="checkbox" value="" />
<input name="" type="submit" />
</form>
<form onSubmit='return validateForm()' action="" method="get">
<input name="tjek" type="checkbox" value="" />
<input name="" type="submit" />
</form>
</body>
</html>
http://jsbin.com/duqotobi/1/edit
But it doesn't work. Why?
Here goes: live demo: http://jsbin.com/duqotobi/2/edit?html,output.
The code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Demo</title>
<script>
function validateForm(caller) {
var checks = caller.querySelectorAll('input[type="checkbox"]');
for (var i=0; i<checks.length; i++) {
if (checks[i].checked == false) {
alert("Select something.");
return false;
}
else {
caller.submit();
}
}
}
</script>
</head>
<body>
<form name="firstForm" action="form_handler.php" method="get">
<input name="tjek" type="checkbox" value="" />
<input type="button" value="Send" onclick="validateForm(this.parentNode)" />
</form>
<form name="secondForm" action="form_handler.php" method="get">
<input name="tjek" type="checkbox" value="" />
<input type="button" value="Send" onclick="validateForm(this.parentNode)" />
</form>
</body>
</html>
If it's not fully self-explanatory, let me know. Do realize however, that it is tricky to give checkboxes the same names, even if it concerns different forms. Only radio inputs belonging to the same group should have the same name. This script is not critical in that aspect, but just so you know.
I rewrote it in my style of JS validation scripting; other styles are possible as well.
I'm having a little 'teething' problem here is my code so far
<form name="job_app">
Source?<br/>
<input type="radio" name="source" value="GAZ" id="GAZ" /> Stonoway Gazette <br/>
<input type="radio" name="source" value="JCP" id="JCP" /> Job Center <br/>
<input type="radio" name="source" value="WOM" id="WOM" /> Word of Mouth <br/><br/>
<script language="text/JavaScript">
if (document.job_app.source.GAZ.checked){
document.write='Issue <br/><input type="text" name="issue" /><br/><br/>';
}
else if (document.job_app.source.JCP.checked){
document.write='Ref <br/><input type="text" name="ref" /><br/><br/>';
}
//word of mouth has no additional input so there is no if statement for it
</script>
</form>
what i want this to do is create (or unhide) the issue or ref text box depending on which radio button is selected without creating multiple text boxes.
sorry for any inconvenience if this is a rookie mistake, i have never worked with java before nor a language like it.
This is the working code as of 07:15 26/05/2012 as thanks to Amy McCrobie.
It has undergone some edits since Amy's version (see below) i have moved all scripts above the form to make adding the next few fields easier, added a statement for word of mouth, omitted <head> as that is part of index.php and meta.php while this is for form.php, added a spacer and made the function name more specific.
index.php
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<?php
include './meta.php';
?>
</head>
<?php
/*if(isset($_POST['submit'])){
include './submit.php';
}
else{*/
include './form.php';
//}
?>
</html>
meta.php
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta http-Equiv="Cache-Control" Content="no-cache" />
<meta http-Equiv="Pragma" Content="no-cache" />
<meta http-Equiv="Expires" Content="0" />
<title>job_app</title>
<link rel="StyleSheet" type="text/css" href="./style.css"/>
form.php
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#issueEl").hide();
$("#refEl").hide();
});
function showHide_source(){
if (document.getElementById('GAZ').checked)
{
document.getElementById('issueEl').style.display = 'block';
document.getElementById('refEl').style.display = 'none';
document.getElementById('src_spEl').style.display = 'none';
}
if (document.getElementById('JCP').checked)
{
document.getElementById('issueEl').style.display = 'none';
document.getElementById('refEl').style.display = 'block';
document.getElementById('src_spEl').style.display = 'none';
}
if (document.getElementById('WOM').checked)
{
document.getElementById('issueEl').style.display = 'none';
document.getElementById('refEl').style.display = 'none';
document.getElementById('src_spEl').style.display = 'block';
}
}
</script>
<form name="job_app" action="" method="post">
Source?<br/>
<input type="radio" name="source" value="GAZ" id="GAZ" onChange="showHide_source()" /> Stonoway Gazette <br/>
<input type="radio" name="source" value="JCP" id="JCP" onChange="showHide_source()" /> Job Center <br/>
<input type="radio" name="source" value="WOM" id="WOM" onChange="showHide_source()" /> Word of Mouth <br/><br/>
<div class="hideable" id="issueEl">Issue <br/><input type="text" name="issue" /><br/><br/></div>
<div class="hideable" id="refEl">Ref <br/><input type="text" name="ref" /><br/><br/></div>
<div class="hideable" id="src_spEl"></div>
rest of form
<input...
.../>
</form>
style.css
div.hideable{
height: 62px;
}
Try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta http-Equiv="Cache-Control" Content="no-cache">
<meta http-Equiv="Pragma" Content="no-cache">
<meta http-Equiv="Expires" Content="0">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#issueEl").hide();
$("#refEl").hide();
});
</script>
<title>Test</title>
</head>
<body>
<form name="job_app" action="" method="post">
Source?<br/>
<input type="radio" name="source" value="GAZ" id="GAZ" onChange="showHide()" /> Stonoway Gazette <br/>
<input type="radio" name="source" value="JCP" id="JCP" onChange="showHide()" /> Job Center <br/>
<input type="radio" name="source" value="WOM" id="WOM" onChange="showHide()" /> Word of Mouth <br/><br/>
<div id="issueEl">Issue <br/><input type="text" name="issue" /><br/><br/></div>
<div id="refEl">Issue <br/><input type="text" name="ref" /><br/><br/></div>
</form>
<script type="text/javascript">
function showHide(){
if (document.getElementById('GAZ').checked)
{
document.getElementById('issueEl').style.display = 'block';
document.getElementById('refEl').style.display = 'none';
}
if (document.getElementById('JCP').checked)
{
document.getElementById('issueEl').style.display = 'none';
document.getElementById('refEl').style.display = 'block';
}
}
</script>
</body>
</html>
I would suggest jQuery, it's not hard to learn, in fact I find it much easier than basic javascript
also I would go the route of two textboxes that are hidden, and then showing them via jQuery
as it stands now I think if the user checks one radio button and then the other two text boxes will appear
and with jQuery added (which is as easy as including the sript at the top of your page your code would be more like this...
<form name="job_app">
Source?<br/>
<input id="GAZ" type="radio" name="source" value="GAZ" id="GAZ" /> Stonoway Gazette <br/>
<input id="JCP" type="radio" name="source" value="JCP" id="JCP" /> Job Center <br/>
<input id="WOM" type="radio" name="source" value="WOM" id="WOM" /> Word of Mouth <br/><br/>
Issue <br/><input id="issue" type="text" name="issue" /><br/><br/>
Issue <br/><input id="ref" type="text" name="ref" /><br/><br/>
<script language="text/JavaScript">
$("#issue").css("display","none");
$("#ref").css("display","none");
if ($("#GAZ").checked){
$("#issue").css("display","inline");
$("#ref").css("display","none");
}
if ($("#JCP").checked){
$("#issue").css("display","none");
$("#ref").css("display","inline");
}
//word of mouth has no additional input so there is no if statement for it
</script>
</form>