How to make html tag with pre-written data

Question

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?

You can save the prefilled data in localstorage or cache and fill the same before loading the page — Geeky, Nov 18 '16 at 19:23

score 1 · Answer 1 · edited May 23 '17 at 10:30

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>

score 0 · Accepted Answer · answered Nov 18 '16 at 19:24

0

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>

answered Nov 18 '16 at 19:24

sohrab

38
2

score 0 · Answer 3 · answered Nov 18 '16 at 19:27

0

In your input you can use the value tag and set the default value.

<input type="text" name="example" value="Value Goes Here">

answered Nov 18 '16 at 19:27

Ben

345
2
10

bid · Answer 4 · 2016-11-18T19:43:06.773

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" />

score 0 · Answer 5 · answered Nov 18 '16 at 19:44

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 make html tag with pre-written data

5 Answers5