We Keep Coding

How to make html <input> tag with pre-written data

I'm working on a project, and for testing it I need to fill in a large amount of 'input' elements every time when reloading the page. I'm filling in the same numbers every time, so I need 'input' elements to somehow 'remember' the value they were given.
I've seen an example with 'autocomplete' attribute, but then I have to choose the value from a drop box for each input element, so that won't help me.
Is there any way I can code the input tag with pre-written data? Or maybe using javascript?

With jQuery, you can write a plugin to set the input of fields based on data.
You can do the same without jQuery, but you need to find all inputs, textareas, selects, etc. and filter the other junk out of the form before setting values.
Check out this question for more tips: Using jQuery and JSON to populate forms?
(function($) {
$.fn.populateData = function(data) {
var $form = this;
$.each(data, function(key, value) {
$('[name=' + key + ']', $form).val(value);
});
}
})(jQuery);
var pocForm = document.forms['poc-form'];
var pocFormData = {
fname : 'John',
lname : 'Doe',
dob : '1970-12-25'
};
$(pocForm).populateData(pocFormData);
.form-field {
margin-bottom: 0.25em;
}
.form-field label {
display: inline-block;
width: 6em;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="poc-form">
<div class="form-field">
<label for="poc-fname">First Name:</label>
<input type="text" id="poc-fname" name="fname" />
</div>
<div class="form-field">
<label for="poc-lname">Last Name:</label>
<input type="text" id="poc-lname" name="lname" />
</div>
<div class="form-field">
<label for="poc-dob">Date of Birth:</label>
<input type="date" id="poc-dob" name="dob" />
</div>
</form>

here the unput value
<form >
First name: <input type="text" name="fname" value="John"><br>
Last name: <input type="text" name="lname" value="Doe"><br>
</form>

In your input you can use the value tag and set the default value.
<input type="text" name="example" value="Value Goes Here">

You can more or less tell autocomplete how to work: https://html.spec.whatwg.org/multipage/forms.html#autofill
But it still leaves it up to the browser.
A better option is datelist, giving you a text-input with predefined options for autocomplete and an dropdown-menu.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" />
</label>
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
<option value="Microsoft Edge">
</datalist>
EDIT:
After reading your question again, I realized that this isn't very good for your use-case. Sorry.
In that case I'd just go with a single line of jQuery:
$('input[type="text"]').val('Hello world') ;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="t1" />
<input type="text" name="t2" />
<input type="text" name="t3" />
<input type="text" name="t4" />
<input type="text" name="t5" />
<input type="text" name="t6" />
<input type="text" name="t7" />

with Javascript, you can use static text in strings:
var mystring = "This is my string of text";
var anotherString = "A second string of text";
var myInputs = document.getElementsByTagName("input");
myInputs[0].value = mystring;
myInputs[1].value = anotherString;
If you need the text to be from user entered data, you need to first save the text:
tx = myInputs[0].value
localStorage.setItem("item_name", tx);
//note: you would need to use a keyup event or button to save the data as the user types or clicks the button. Also look in to JSON "stringify" and "parse" to save more complex items.
After you have saved the data you wished, call it and point it to the input you wish.
var savedTx = localStorage.getItem("item_name");
if (savedTx) {//it's important to look for the data first to avoid errors
myInputs[0].value = "My data: " + savedTx + "!";
}

How to fill a input field from a drop down list

So this has been driving me nuts, im looking for a solution that will fill a input field from what ever selection is made from a drop down.
My current working solution (that does not include a drop down) is as follows :
<form method="link" action="dualstream/index.html">
<input value = 'apolloz' name="stream1" placeholder="" required="required"
autofocus="autofocus" />
<input type="submit" class="button" value="Click to watch the stream" />
</form>
So that auto fills the text field with "apolloz" then when you press submit it takes you to the relevant page which uses the word apolloz.
Im looking for a solution that you can select the streamer from a drop down list, select it and that option fills the text field, and you can then submit.
Im sure this is javascript based as i have seen similar things which use numerical values.
Sorry if this is a bit vague, but any and all help is much appreciated.

try this
<form method="link" action="dualstream/index.html">
<input value = 'apolloz' id="txt" name="stream1" placeholder="" required="required"
autofocus="autofocus" />
<select id="mySelect" onchange="selectionchange();">
<option value="abc" >abc</option>
<option value="xyz" >xyz</option>
</select>
<input type="submit" class="button" value="Click to watch the stream" />
</form>
and add following javascript function
function selectionchange()
{
var e = document.getElementById("mySelect");
var str = e.options[e.selectedIndex].value;
document.getElementById('txt').value = str;
}

This is simple, if you use jquery you can do this
$(function(){
$("#your_select").change(function(){
$("#your_input").val($('#your_select option:selected').val())
});
});

u can also do this using just javascript
on the onchange function of your select u can call a function that will put the selected value in your input
like
<select id="element1" onchange="pickvalue()"/>
<option>asad </option>
<option>asad2 </option>
</select>
and your pickvalue function can look something like this
function pickvalue()
{
document.getElementById('yourinputid').value = document.getElementById('element1').value
}

Suppose you have a selectbox #selectid then,
$("#selectid").live("change", function() { <br>
$("#stream1").val($(this).find("option:selected").attr("value")); <br>
});

Create dynamic div with jquery

Im trying to create a button that generates already formated divs everytime it is pushed.
The divs are composed by forms and their fields should already be filled with data that is stored in variables in javascript.
eg.
<div id="myDiv_#">
<form id="myForm">
<input type="text" id="start_date" name="start_date" value="someJavascriptVariable" />
<input type="text" id="end_date" name="end_date" value="someJavascriptVariable" />
<select name="type" id="type">
<option value="1">"someJavascriptVariable"</option>
<option value="2">"someJavascriptVariable"</option>
</select>
<input type="button" id="new_button" value="Show">
</form>
</div>
<script>
$('#button_push').click(function()
{
//creating myDiv_#
}
</script>
I was searching arround web, but never found good results :s
Im asking you help with this, maybe a guide line or a start point.
The point is, everytime user push the button, a new div is created with parameters above.
Cheers

With markup as complex as that it's probably easier if have a hidden version of it which you can clone, amend attributes of then append to the page as required.
Something like this:
<div id="container"></div>
<div style="display: none;">
<div id="myDiv_#">
<form id="myForm">
<input type="text" id="start_date" name="start_date" value="someJavascriptVariable" />
<input type="text" id="end_date" name="end_date" value="someJavascriptVariable" />
<select name="type" id="type">
<option value="1">"someJavascriptVariable"</option>
<option value="2">"someJavascriptVariable"</option>
</select>
<input type="button" id="new_button" value="Show">
</form>
</div>
</div>
$('#button_push').click(function() {
var $div = $("#myDiv_\\#").clone(true); // keep events'
$div.attr('id', '').addClass('clone'); // example of amending attributes
$("#container").append($div); // append
});
Example fiddle
You can easily replace the someJavascriptVariable strings with the specific variable relevant to that clone instance too.

javascript or jQuery function for interaction between input fields value

I have a html form where people can enter number of purchase item. Default value of that text field is 1.
<input type="text" size="5" value="1" id="position" class="amntstyle" name="position">
I want another text input field for price where the value would be 15 times of position automatically.
For example if someone enter 3 in position field, the price input field will get value 45 automatically. Like this
<input type="text" size="5" value="45" id="price" class="amntstyle" name="price">
Is it possible?
Thanks a lot for your help.

simple .. use javascript functions and onkeyup
<script type="text/javascript">
function updatePrice(amount, element){
var amount = parseInt(amount);
if(!amount) amount = 0;
var toUpdate = amount*15;
document.getElementById(element).value = toUpdate;
}
</script>
<input type="text" size="5" value="1" id="position" class="amntstyle" name="position" onkeyup="updatePrice(this.value,'price');">
<input type="text" size="5" value="45" id="price" class="amntstyle" name="price">

Here is the YUI3 version:
<script src="http://yui.yahooapis.com/3.6.0/build/yui/yui-min.js"></script>
<script>
YUI().use("node", function(Y) {
var priceNode = Y.one("#price");
var positionNode = Y.one("#position");
positionNode.on("change", function(e) {
priceNode.set("value", positionNode.get("value")*15);
});
});
</script>

Working demo: http://jsfiddle.net/YgheP/
Made it for specific scenario but you can tweak it to your needs.
Hope it feeds your cause. :)
also look for isNaN check and float value as well! parseFloat(string)
code
$('#position').keyup(function() {
var price = parseInt(this.value) * 15;
$('#price').prop('value', price);
});​

if you are using jquery then by using plugin formInteract, you just need to do this.
<input type="text" size="5" value="1" id="position" class="amntstyle" name="position">
<input type="text" size="5" value="45" id="price" class="amntstyle" name="price" data-bind-change-value="#position*15">
at bottom of the page just include this plugin file, everything else will be done itself.
here is the link to project
https://bitbucket.org/ranjeet1985/forminteract
You can use this plugin for many purpose like getting value of form, putting value to form, validation of form and many more. you can see some example of code in index.html file of project

You can use this code to attach a eventhandler that will solve your problem:
$("#position").bind("change", function(){
$("#price").val(parseInt($("#position").val()) * 15);
});
Hope that helps

how to set form value with external select value

so i am using the play framework and I'm try to create multiple submit buttons that call the one form:
So what I have is a list of strings, and i would like to create two buttons that will go back to the server and complete an event, the first is send the second is cancel. What i would like to also do is set the source value equal to what is selected in the foo select object. How would I go about doing this? Do i need to create a javascript even that is fired from the form and then get the var inside that function and then fire off the submit? Im not 100% familiar with play framework and scala, so im not sure if i can get it somehow inside this code without using a new method.
#(myList: List[String], theForm: Form[Obj])
#import helper._
#main("myVar Controller") {
<select id="foo">
</select>
<table border="1">
<tr>
#for(myVar <- myList) {
<td>#myVar
#form(routes.Application.method()) {
<div id="hiddenForm" style="visibility:hidden">
<input type="text" name="commandID" id="commandID" value="10" /> //Send Code
<input type="text" name="source" id="source" value=**"Put selected value of foo here" />**
<input type="text" name="destination" id="destination" value="#myVar" />
</div>
<input type="submit" value="Send" />
}
#form(routes.Application.method()) {
<div id="hiddenForm" style="visibility:hidden">
<input type="text" name="commandID" id="commandID" value="18" /> //Undo code
<input type="text" name="source" id="source" value=**"Put selected value of foo here" />**
<input type="text" name="destination" id="destination" value="#myVar" />
</div>
<input type="submit" value="Undo" />
}
</td>
}
</tr>
</table>
}

First of all, the html isn't valid.
You should first make sure that there aren't elements that have the same id.
You have to use javascript to change a value in your form.
I'm not familiar with scalar or playframework, but if they allow you to use jQuery, I recommend the following solution.
$("#foo").bind("change", function(){$("#source").val($("#foo").val()));});​
example:
http://jsfiddle.net/RubenJonker/a8a8p/5
If they don't allow you to use jQuery, then you should put some javascript in the onchange event of the select.
<select onchange="document.getElementById('source').value = this.value">
</select>
example:
http://jsfiddle.net/RubenJonker/a8a8p/4

Incase anyone else has this problem I used the following to solve my problem: Thanks Ruup as your code was the reason why I solved the problem
html:
<select id="foo" >
<option></option>
<option value="test">test</option>
</select>
<input type="text" value="" name="field" id="field" />​
and javascript:
$(document).ready(function() {
obj = document.getElementById("foo");
obj.onchange = function()
{
var elements = document.getElementsByName('field');
for (i=0;i<elements.length;i++)
{
elements[i].value = $('#foo').val();
}
}; });