I have a form with one input field and when I press enter I would like to see this input written under the form. I would like to have as many inputs as possible, each new one to be displayed under the previous one.
I tried it like this but I failed.
<form>
<input type="text" name="" value="" id="form-input">
</form>
<ul>
<li id="form-list"></li>
</ul>
And then inside my <script> tag:
var formInput = document.getElementById("form-input")
var formOutput = document.getElementById("form-list")
formOutput.innerHTML = formInput.value;
formInput.onsubmit = function() {
formOutput.innerHTML = this.value;
}
When I press enter it refreshes the page, if I change onsubmit to oninput it displays what I'm writing but it is not saved.
Is it possible to display multiple inputs like this? Thanks
I'm not sure if I understood your question correctly but here is one way to listen for the 'enter' key press on an input element and create a dynamic list of input elements with the entered value.
var inputEl = document.getElementById("in");
var targetList = document.getElementById("list");
function createItem(text){
var listItem = document.createElement('li');
var input = document.createElement('input');
input.type = 'text';
input.value = text;
listItem.appendChild(input);
targetList.appendChild(listItem);
}
inputEl.addEventListener('keydown', function(e) {
if (e.keyCode == 13) {
createItem(inputEl.value);
inputEl.value = '';
e.preventDefault();
return false;
}
})
<form>
<input id="in" type="text" name="" value="">
</form>
<ul id="list">
</ul>
When I press enter it refreshes the page, if I change onsubmit to
oninput it displays what I'm writing but it is not saved.
You can use cookies to store and persist data on every refresh
https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie
or WebStorage/Application Storage
https://www.w3schools.com/html/html5_webstorage.asp
But I really advise that learn to use server-side scripting with a database so your data will have permanent persistence across browser sessions
https://www.w3schools.com/php/default.asp
You can make your code run with these changes in HTML and your Javascript:
var formInput = document.getElementById("form-input")
var formOutput = document.getElementById("form-list")
function AddElement() {
var NewValue = formInput.value;
var li = document.createElement('li');
var text = document.createTextNode(NewValue);
li.appendChild(text);
formOutput.appendChild(li);
return false;
}
<form onsubmit="return AddElement();">
<input type="text" name="" value="" id="form-input">
</form>
<ul id="form-list"></ul>
Related
I looking for some help to solve my problem.
I need to write JS function witch automatically save value of input field into div (with no button).
When value ends with "enter" key it save it to div, clear input field and set cursor in it again to put another value.
If anybody understood my english I would be appreciate for some tips:)
Here is a very simple example to get you started.
const formElement = document.getElementById("form");
const inputElement = document.getElementById("input");
const outputElement = document.getElementById("output");
formElement.addEventListener("submit", function (e) {
outputElement.append(inputElement.value);
inputElement.value = "";
e.preventDefault();
}, false);
<form id="form">
<input id="input"></input>
</form>
<div id="output">
</div>
The mandatory div id gets different numbers of inputs field displayed in it dynamically. Each input field starting from the first gets an id attr1, then attr2,..attr[n]. I need a way to get this into an array that gets the value of each input field with keyup and puts them into a separate input field with id detail.
This code works but returns undefined in some case when the hard coded input field ids exceed the generated input field ids. Thanks.
<div id="attributes"> <!--Start of Div Refreshed on Ajax Page Refresh-->
<div id="mandatory">
</div>
</div>
var total = '#attr1, #attr2';
$("#attributes").on('keyup', total, function(){
update();
})
function update() {
$("#detail").val($('#attr1').val() + "," $('#attr2').val());
}
If I understood right your question I think you're looking for something like that:
var fields = $("#mandatory").find("input"),
ids = [];
fields.each(function(){
$(this).on("keyup", function(){
var val = "";
ids = [];
fields.each(function(){
val += $(this).val() + (fields.length === ($(this).index() + 1) ? "": ", ");
ids.push($(this).get(0).id);
});
$("#detail").val(val);
console.log(ids)
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="attributes">
<div id="mandatory">
<input id="one" class="one" value="54"/>
<input id="two" class="two" value="55"/>
<input id="three" class="three" value="587"/>
</div>
</div>
<input id="detail" type="text" />
I'm not sure if this is what you're looking for, but I think it'll take you down the right path. In this example, any time a text input field is generated, an input event handler is attached to it that changes the value of a main textarea. If this isn't quite what you're looking for, please let me know and I'll be happy to try to work it out more.
document.getElementById('adder').onclick = function() {
var dynamicTextbox = document.createElement('input');
dynamicTextbox.setAttribute('type', 'text');
dynamicTextbox.setAttribute('class', 'dynamicText');
dynamicTextbox.addEventListener("input", function() {
var allTextboxes = document.getElementsByClassName('dynamicText');
var allValues = '';
for (var i=0; i < allTextboxes.length; i++) {
allValues += allTextboxes[i].value;
}
document.getElementById('detail').value = allValues;
});
document.getElementById('textboxes').appendChild(dynamicTextbox);
}
<textarea id="detail"></textarea>
<input id="adder" type="button" value="Add Text Field" />
<div id="textboxes"></div>
I'm trying to get a input box that a patron could type in a word and it would take that input and append a URL in the middle.
link example would be https://proxyaddress/login=?url=http://libraryaddress/database/SearchResults.jsp?result_start=0&result_items=48&result_layout=GRID&query1_modifier=AND&query1=USERSEARCHTERM&query1_field=CONTENT
where the part changed by input would be USERSEARCHTERM
I've found solutions online but they all just load the proxy address and stop there.
Any help would be greatly appreciated, thanks!
The proxy address will need to be corrected to a valid DNS (.com,IP) But this captures the user input, concats the input with the URL format and changes the window location.
You'll also want to prevent XSS on any user input on the backend.
<form id="my-form">
<input type="text" id="search">
<button type="submit">Search</button>
</form>
var form = document.getElementById('my-form');
var input = document.getElementById('search');
function processForm(e) {
if (e.preventDefault) e.preventDefault();
var inputVal = input.value;
var combinedUrl = "https://proxyaddress/login=?url=http://libraryaddress/database/SearchResults.jsp?result_start=0&result_items=48&result_layout=GRID&query1_modifier=AND&query1=" + inputVal + "&query1_field=CONTENT";
window.location.href = combinedUrl;
alert(combinedUrl);
return false;
}
if (form.attachEvent) {
form.attachEvent("submit", processForm);
} else {
form.addEventListener("submit", processForm);
}
<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?
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>