I have text box called "userInput" and one submit button.I want to print the value of the text box which is entered by user like a stack(previous values also,not just the current value).
any idea..??
<input type="text" name="userInput"/>
<input type="button" name="sub" value="submit">
Thank in advance!
var stack = [];
$("input [name=userInput]").change(function () { stack.push(this.value); });
You can change that event to blur, focus, etc. depending on when you want the values recorded.
A submit button usually is for submitting a form. Submitting a form is sending a request to the server and refreshing the page. So in your server side script you could read the posted values and show them in the resulting page (you don't need javascript for this).
If you don't want to redirect you could handle the submit event and cancel the default submission:
var values = [];
$(function() {
$('#id_of_form').submit(function() {
// get the entered value:
var userInput = $(':input[name=userInput]').val();
// add the current value to the list
values.push(userInput);
// show the values
alert(values.join(", "));
// cancel the default submission
return false;
});
});
Tested solution:
<html>
<head>
<script type="text/javascript">
function AddToStack() {
var userInput = document.getElementById('userInput');
var stack = document.getElementById('stack');
stack.innerHTML += '<p>' + userInput.value + '</p>';
//clear input an refocus:
userInput.value = '';
userInput.focus();
}
</script>
</head>
<body>
<div id="stack"></div>
<input type="text" name="userInput" id="userInput"/>
<button type="button" name="sub" onclick="AddToStack();">Submit</button>
</body>
</html>
Related
I have a HTML page with an input field
Someone enters some text into it
They click a button
I want to grab the value of the input field AFTER they click the button with some JS code(client-side) and then print it to the console/save it to a file.
How would I go about doing this?
I've tried looking but I can't find anything like this at all :/
Thanks! :)
This example should help you to achieve your goals.
const inputNode = document.getElementById('input');
const buttonNode = document.getElementById('button');
buttonNode.addEventListener('click', () => {
const inputValue = inputNode.value;
// do what ever you wan't
});
<input id="input" type="text" />
<button id="button">Click</button>
Try this:
// This function is called by the HTML code onclick on the button
var get_content_of_input = function(){
var user_input = document.getElementById("text_field").value;
// Now you can use the variable user_input containing the text
}
<input id="text_field">Please enter Text</input>
<button id="button" onclick="get_content_of_input()">Click here to sumbit</button>
The content of the text field will now be saved in the variable "user_input".
I have this JavaScript code that processes and displays the value onto the same page; the value is entered using a textbox. I want to pass this value onto another page. this my code:
index.html:
<form action="display.html" method="post" id="name-form">
<p>
<label>Your full Name</label>:<br />
<input type="text" name="fullName">
</p>
<p>
<input type="submit" value="Submit">
</p>
</form>
<!-- <p id="result"></p>-->
<script>
var form = document.getElementById('name-form');
form.onsubmit = function (e) {
e.preventDefault();
var result = document.getElementById('result');
result.innerHTML = 'Hi ' + form.fullName.value;
console.log(form.fullName.value);
this.reset();
};
</script>
display.html
<p id="result"></p>
<script>
var form = document.getElementById('name-form');
form.onsubmit = function (e) {
e.preventDefault();
var result = document.getElementById('result');
result.innerHTML = 'Hi ' + form.fullName.value;
console.log(form.fullName.value);
this.reset();
};
</script>
my question is how do I get the value that is entered into the textbox to display onto another page?
If you have a static website, you should consider storing that value in localStorage. So that value will be available all across your web pages.
And if you have a dynamic website you can store that value in db and then request db for that value when you're on some other page.
Choose anyone of the approaches that fits in your case and application.
Read here about localStorage
Use cookies.
Save the name: document.cookie = "name=" + name
Load the name: name = document.cookie.replace(/(?:(?:^|.*;\s*)name\s*\=\s*([^;]*).*$)|^.*$/, "$1");
See here for a simpler way to load cookies
I have the following form:
<form action="http://example.co.uk/order" method="post" id="voucher" class="AVAST_PAM_nonloginform">
<fieldset>
<h4>Vouchers</h4>
<input type="text" class="discount_name form-control" id="discount_name" name="discount_name" value="">
<input type="hidden" name="submitDiscount">
<button type="submit" name="submitAddDiscount" class="button btn btn-default button-small"><span>OK</span></button>
</fieldset>
</form>
and am using the following script:
<script>
window.onload = function(){
document.getElementById(\"discount_name\").value = \"50681\";
}
</script>
to populate the input. I then use:
<script>
window.onload = function(){
document.forms['voucher'].submit();
}
</script>
to activate the submit.
However, use the second script, it stops the "50681" from being inputted into the text box (instead submits a blank input).
Originally I had the code as :
<script>
window.onload = function(){
document.getElementById(\"discount_name\").value = \"50681\";
document.forms['voucher'].submit();
}
</script>
(I split it up thinking it may be a timing issue).
Any ideas?
p.s. the reason for the backslash's is due to it currently being run under php until I can get it working
The issue seems to be with (\"discount_name\").value = \"50681\"; & document.forms['voucher'].submit();
In either of the case you can avoid \ & for form you need to target by the index number. Assuming there is only one form present , so passing 0 in index
window.onload = function(){
document.getElementById("discount_name").value = "50681";
document.forms[0].submit();
}
Note: In the demo I have changed the action url to https else it will prohibit to make call from jsfiddle. In your case you can still keep http in code
DEMO USING ID
So to give a little bit of detail, I'm trying to make an interactive fiction game or text adventure. I have a form where all the "commands" for the game will be typed. I'm working on the first command which is the string "start" to call a prompt. Just to test the code, I have the prompt say "success!" when done correctly. What's happening though, is as soon as I open the web browser to test, the prompt triggers before I even type a command. Here's the code.
<html>
<head>
<script type="text/javascript" src="scripts/engine.js"></script>
</head>
<body>
<form id="testForm"> <input type="text" name="">
</form>
</body>
</html>
And then here's the javascript.
var input = document.getElementById("testForm");
if (input = "start") {
prompt("Success!");
}
Try this:
<html>
<head>
<script type="text/javascript" src="scripts/engine.js"></script>
</head>
<body>
<form id="testForm">
<input type="text" id="myInput">
</form>
<script>
var myForm = document.getElementById("testForm");// get the form element.
var myInput = document.getElementById("myInput");// get the input element
myForm.onsubmit = function() { // when the form is submitted, execute this function.
if (myInput.value == "start") { // if the value of the input equals 'start', show prompt.
prompt("Success!");
}
return false; //return false, so the form doesn't get submitted.
};
</script>
</body>
</html>
Edit:
Added submit event handler, that returns false, so the form does not get submitted.
You need to check the value of the input like so
var input = document.getElementById("inputID");
var value = input.value;
The code will always be ran straight away because it has no event handler. You could add a button which triggers it
document.getElementById('button').addEventListener('click', function () {
var input = document.getElementById("inputID");
if (input.value === 'start') {
// Do something
}
});
Or if you prefer on the forms submit event:
document.getElementById('testForm').addEventListener('submit', function () {
var input = document.getElementById("inputID");
if (input.value === 'start') {
// Do something
}
});
<script type="text/javascript">
window.onload = init;
function init() { //wait for load and watch for click
var button = document.getElementById("searchbutton");
button.onclick = handleButtonClick;
}
function handleButtonClick(e) { //get user input and go to a new url
var textinput = document.getElementById("searchinput");
var searchterm = textinput.value;
window.location.assign("http://google.com/example/" + searchterm)
}
</script>
<form>
<input type="text" name="search" id="searchinput">
</form>
<input type="submit" value="Ara" id="searchbutton">
In this code block, it gets user input and go to a new url with user input.
if I move last line into form element it doesn't working.
But I'm using id to find elements.
you can specify the OnSubmit as explained in the below code fragment, and it will work.
<form method="GET" onsubmit="handleButtonClick(event)">
<input type="text" name="search" id="searchinput">
</form>
function handleButtonClick(e) {
var textinput = document.getElementById("searchinput");
var searchterm = textinput.value;
window.location.assign("http://google.com/example/" + searchterm)
return false;
}
I suspect that it is because your submit button is submitting the form.
Add e.preventDefault(); and return false; to your code.
function handleButtonClick(e) { //get user input and go to a new url
e.preventDefault();
var textinput = document.getElementById("searchinput");
var searchterm = textinput.value;
window.location.assign("http://google.com/example/" + searchterm)
return false;
}
This should stop the form from submitting cross browser.
Instead of
<input type="submit" value="Ara" id="searchbutton">
use this (MDN docu)
<button type="button" id="searchbutton">Ara</button>
Your button works as a form submit button, so instead of just executing your JavaScript, it also tries to submit the form, which points back to the script itself. By using <button type="button"> you define a mere button without any submitting functionality.
Besides: If you don't need the surrounding <form> element, why not drop it out of the code?