I have code like this, and I want the raise button to tell the user how much they are going to bet if they click the button. If the value of the input were changed to 10, then I want the raise button to say "raise 10". Something along those lines. I'd like it to essentially change in 'real time' as a user types in the input box.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>poker</title>
</head>
<body>
<div>
<form id="actionForm">
<button id="fold" class="turn" type="submit">Fold</button>
<button id="call" class="turn" type="submit">Call</button>
<button id="raise" class="turn" type="submit">Raise<br>0</button>
<br>
<input id="amount" autocomplete="off" title="amount" value="0" />
</form>
</div>
</body>
</html>
I think I worded the question poorly when I searched online so I've come here for help. I'm not sure if I need js to do this with a loop of sorts, or there is something built into HTML.
Try something like this:
<script>
function updateButton()
{
// get value from input field
var inputValue = document.getElementById("inputField").value;
// update button text
document.getElementById("raise").innerHTML = "Raise " + inputValue;
}
</script>
The HTML
<input type="text" id="inputField" oninput="updateButton()">
PS: The oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus, after the content has been changed.
You will need Javascript to create this behavior.
Steps would be :
Save "Raise" value into a variable
Set this value for your "button" label, and use it for increasing the amount
Here's what I came with :
<script>
function handleChange(){
var amount = document.getElementById('amount').value
document.getElementById('raise').innerText = `Raise ${amount}`
}
</script>
and call it as follows :
<input id="amount" autocomplete="off" onkeyup="handleChange()" />
I'm using "onkeyup" to achive the 'real-time' you mentioned.
Hope it helps!
Related
I am attempting to create a couple of web pages that will allow me to fill out a form on input.html and have the entered data appended to a different HTML file, index.html.
I have been searching for an answer for a couple of hours now and it might just drive me insane!
Here is some example code of what I'm trying to do:
HTML form input.hmtl:
<form>
<label>
Enter something:
<input type="text" id="userinput" required>
</label>
<input type="submit" id="submit" value="submitted">
</form>
Javascript to get entered data and pass to index.html:
var userInput = document.querySelector("#userinput");
var submit = document.querySelector("#submit");
function addToIndex()
{
// create new element on index.html
}
submit.addEventListener("click", addToIndex, false);
HTML output file index.html:
<div id="contentstart">
<!-- newly created element here -->
</div>
I have attempted using this solution, but Chrome's console gives me an error and tells me that newWindow is not a function. I just stumbled upon using the <iframe> element in a couple of answers but don't quite understand it yet (I'm a noob).
Thanks in advance!
The best option is to use a web server or a serverless implementation. Server code can be written in multiple languages. Some of the languages include PHP, NodeJS, and ASP.NET.
However, you can pass data using browser storage.
But, browser storage is not secure and can be wiped at any time by the user. If you are storing information such as passwords or data that should be visible to multiple users, you should use a web server and/or database.
You need to have a script on both pages. The page with the form will store/set the data. The index page will retrieve the data and use javascript to render more content.
function addToIndex()
{
localStorage.setItem('input', userInput .value)
}
The script for the index page would look something like this.
var data = localStorage.getItem('input');
if (input) {
document.querySelector('#contentstart').innerHTML = data;
}
I put together a simple demo here.
http://plnkr.co/edit/iAitGxtdsHwXowNg
For you to receive data from a form in a different file, you will need a server-side language like php.
So the form will have this structure
<form action="external_file.php" method="get">
<label>
Enter something:
<input type="text" id="userinput" name="user_input" required>
</label>
<input type="submit" id="submit" value="submitted">
</form>
Note the action="external_file.php and the name="user_input" attribute added to the input element.
Then the file: external_file.php might have the following structure to receive the content from the form
<?php
$input = $_GET["user_input"];
//do something with $input
echo 'The data you entered is: ' . $input;
?>
I showed you the way to start. The rest is up to you, you can do whatever you want to do. I hope you could help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form id ="form">
<label>
Enter something:
<input type="text" id="userinput" required>
</label>
<input type="submit" id="submit" value="submitted">
</form>
<script>
let form = document.getElementById("form");
let userInput = document.getElementById("userinput");
form.addEventListener("submit", submitForm) //this function will work when the form is submit
function submitForm (e) {
e.preventDefault() // this event will prevent page refresh when form submit
let userInputValue = userInput.value; // userinput value
console.log(userInputValue);
moveToAnotherPage(userInputValue); //we send the value we get from userinput to use in another function.
}
function moveToAnotherPage (value) {
// Select the index2 html elements and add with innerhtml or something.
//to do this, you may need to save the userinput value you received to localStorage and pull it from it. I suggest you look into localStorage .And if you know php, you can use it.
}
</script>
</body>
</html>
I have a standard input field:
<input type="file">
in my form, but I have it hidden so that I can use my own image for the button (as seen in many answers on stackoverflow)
But when using this method, there's no confirmation given to the user that their file was selected, because the standard input box is hidden and so they never see the filename.
So my question boils down to this: How can I detect that a file has been selected, and then display something on the page (not an alert box)? Ideally I just want to show a little icon or some text saying "file selected".
Jquery is fine but if there's a way to do this without it, I'd much prefer that. Thanks!
This is a pretty easy way to do it without using Jquery. You will have to change the id's to match your html of course.
Here is a link to a jsfiddle example: http://jsfiddle.net/larryjoelane/rrns0k4e/1/
HTML Part:
<input id="file-select" type="file">
<div id="file-selected"></div>
Javascript Part:
//on change event listener for #file-select
document.getElementById("file-select").onchange = function() {
//call getFileSelected method
getFileSelected();
};
function getFileSelected(){
//get the value of the input file element
var getFileSelected = document.getElementById("file-select").value;
//display the results of the input file element
//you can append something before the getFileSelected value below
//like an image tag for your icon or a string saying "file selected:"
//for example.
document.getElementById("file-selected").innerHTML = getFileSelected;
}
If you listen to the change event on the element, you'll know when a file have been selected:
$('input').change(function(){
console.log($(this).val());
});
You can use $(this).val(), if you want to show the filename. If you don't want to use jQuery, you're looking for the onchange event.
Fiddle: http://jsfiddle.net/cphutg90/
This is the Code which you are looking.
For better UI Performance, look on Internet Explorer 8+
HTML and JavaScript:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>File Picker</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
function fileValidator()
{
var fileName=document.forms["FileForm"]["fileName"].value.replace("C:\\fakepath\\", "");
var response=confirm("Are you sure to Upload '"+fileName+"'?");
console.log(response);
if(response==false)
{
document.forms["FileForm"]["fileName"].value="";
}
}
</script>
</head>
<body>
<form name="FileForm" action="" method="Post">
<table>
<tr>
<td><input type="file" name="fileName" onchange="fileValidator();"/></td>
</tr>
<tr>
<td><input type="submit" value="Upload"/></td>
</tr>
</table>
</form>
</body>
</html>
This is my HTML:
<html>
<head>
<script>
function ppid() {
var ppidtxt = document.getElementById('ppid').value;
var newppidtxt = ppidtxt.toUpperCase();
var ppide = document.getElementById('ppid');
ppide.value = newppidtxt;
}
</script>
</head>
<body>
<form>
<center><input type="text" id="ppid" class="form-control" name="ppid" placeholder="Personal Project ID" onchange="ppid();" /></center>
</form>
</body>
</html>
I've tried this is JSFiddle, on my local PC, pretty much everywhere but for some reason, whenever I type something in the form's text box with the id "ppid" it isn't capitalizing it. What have I done wrong?
Try using onkeyup instead, e.g.
<input type="text" onkeyup="this.value=this.value.toUpperCase()" />
I don't know why this happens, but when onchange is called, 'ppid' contains the HTMLInputElement (probably because of its id).
If you rename the function to something unique (like 'myFunc') it works.
#MelanciaUK brought the answer with this link: Why JS function name conflicts with element ID?
I would like be able to register the changes on the web page from the text field id=frm1 without clicking on the page or on the Check button while the cursor is still blinking on the text field. I am currently using onchange event and it apparently does not register changes until I click out of the text field. Also any advice on the quality of the code/better/other way of doing this would be appreciated. I am also wondering why the value of element[0] is undefined. I am a beginner in JavaScript.
// JavaScript source file Operator.js
function checkNumber(document) {
var formNumber = document.getElementById("problem1");
var txt = "even";
var number = formNumber.elements[1].value;
if (number % 2 == 0) {
txt = "even";
} else {
txt = "odd";
}
document.getElementById("Result").innerHTML = txt;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>HmwkOperators</title>
<script src="Operators.js" type="text/javascript"></script>
</head>
<body>
<form id="problem1" action="form_action.asp">
<fieldset>
<legend>Problem1 verify number if it is odd:</legend>
Number: <input type="text" onchange="checkNumber(document)" id="frm1" autocomplete="off"><br>
<p id="Result"></p>
<input type="button" value="Check" onclick="document.Result.reload(true)">
</fieldset>
</form>
</body>
</html>
You could use the onkeyup event instead:
"The onkeyup event handler captures the moment at which a previously
pressed key is released while focus is on the element to which the
onkeyup attribute is applied."
In this case:
<input type="text" onkeyup="checkNumber(document)" id="frm1" autocomplete="off">
jsFiddle here
Note though, that it's always better to keep your markup (HTML) and scripts (JavaScript) separate.
Instead, you could use addEventListener:
var el = document.getElementById("frm1");
el.addEventListener("keyup", checkNumber, false);
jsFiddle here
AS stated in my comments, there are several events that may fill your requirements with varying results.
OnKeyUp - occurs when the user releases a key from its depressed position.
OnInput - is raised when an element value changes.
OnChange - Already tried, doesn't fit criteria
input.addEventListener("{TYPE"}, YourTrackingMethod);
FIDDLE TO TEST WITH
My opinion is that the key up event is what you are looking for, but beware browser differences in handling and event information.
I've just been testing some code, and I can't get this to work:
<HTML>
<head>
<title> Page 1 </title>
<script>
function myFunction()
{
var x=document.getElementById("myEmail")
document.write(x)
}
</script>
</head>
<body>
<form>
<p> Input your email </p>
<input name="myEmail" type="text">
</form>
<button type="button" onclick="myFunction()">Submit Email</button>
</body>
</HTML>
All I'm trying to is have the user type something into a text, being read by the parser, putting it into a variable, then printing the variable on screen. It would help me a lot with other projects I've got on if I knew this. Can anyone help?
NOTE: I don't want to use HTML5 because it removes some of the tags that I like, so could we use HTML 4.01 or something?
Step 1 is to use HTML 5, indent your code, and use semicolons.
<!DOCTYPE html>
<html>
<head>
<title> Page 1 </title>
<script>
function myFunction() {
var x = document.getElementById("myEmail");
document.write(x);
}
</script>
</head>
<body>
<form>
<p> Input your email </p>
<input name="myEmail" type="text">
</form>
<button type="button" onclick="myFunction()">Submit Email</button>
</body>
</html>
Step 2 is to look at what’s being written, see that it’s null, intuit when document.getElementById would return null, and realize that there is no element with an id of myEmail in your document. It just has a name. Drop the form while you’re at it.
<body>
<p>Input your email </p>
<input id="myEmail" type="text">
<button type="button" onclick="myFunction()">Submit Email</button>
</body>
The next step is to try that again and realize that x is an element, not a string, and you want to get its value.
function myFunction() {
var x = document.getElementById("myEmail");
document.write(x.value);
}
The “good future practice” steps are, in no particular order:
Put your script at the bottom and stop using inline event listeners
Put your script in an external file
Use a <label>
If you’re not going to do something more useful than write the e-mail back, consider also using document.body.appendChild(document.createTextNode(…)), which will not obliterate the rest of the document. The DOM is really great.
Add an id to the input
<input name="myEmail" type="text" id="myEmail">
then write the value
document.write(x.value)
document.getElementById returns the DOM element. Printing the DOM element is not meaningful and its output may vary by browser.
What you want is to print the input value of the input field, so check the value property:
function myFunction()
{
var x=document.getElementById("myEmail").value
document.write(x)
}
Secondly, your HTML code does not have an ID attribute on the element, so the getElementById lookup will fail. Add an ID:
<input name="myEmail" type="text" id="myEmail">
Regarding your note about HTML 4 vs. HTML 5.
NOTE: I don't want to use HTML5 because it removes some of the tags that I like, so could we use HTML 4.01 or something?
That comment is interesting. Without knowing specifically which tags you are referring to, I cannot say why they are removed, but I imagine there is likely an equivalent. HTML 5 does not remove any capabilities of HTML that I am aware of.
That is like saying you won't drive a car with an automatic transmission because it doesn't have a clutch.
All you have to do is add an id attribute having the same value as the value of your name attribute of input type="text" and modify your script to store value instead of the element itself.
<html>
<head>
<title> Page 1 </title>
<script>
function myFunction()
{
var x=document.getElementById("myEmail").value;
document.write(x);
}
</script>
</head>
<body>
<form>
<p> Input your email </p>
<input name="myEmail" id="myEmail" type="text">
</form>
<button type="button" onclick="myFunction()">Submit Email</button>
</body>
</html>