Pass a value in document.write

Question

I have a <script> that creates a tagId value.

Currently, it will display as document.write(tagId);

I want to place tagId in a <form> as:

<input type="text" name="" value="tagId">

Example, something like:

document.write(< input type="text" name="" value="tagId" >);

How can I place the tagID value to insert in the text form?

Answer 1

You want to use JS string templates ('template literals'), ie strings in which JS expressions (eg. plain variables, as in your case) are interpolated:

document.write(`<input type="text" name="" value="${tagId}">`);

You have to use backticks (``) as string delimiters. The expression(s) are referenced per ${<expression_goes_here>}. The expression is serialized as it would elsewhere in the code.

See here (MDN docs) for more info.

Answer 2

I don't know if you have a specific reason for using document.write, the better approach would be to create an element and append it to a div in your document

const container = document.getElementById("addForm")
// Create element:
var input = document.createElement("input");
var tagId = "your tag ID"
input.type = "text";
input.name = ""
input.value = tagId

// Append to body:
container.appendChild(input);

<div id="addForm"></div>
    

Answer 3

<script>

function post_to_url(url, obj) {
  let id = `form_${+new Date()}`
  document.body.innerHTML+=`
    <form id="${id}" action="${url}" method="POST">
      ${Object.keys(obj).map(k=>`
     <input type = "hidden" name = "goTagID" value = "${tagID}">

// would like these html options to show
      <select name="Option1">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      </select>
      <select name="Option2">
      <option value="Cosmic Sky">Cosmic Sky</option>
      <option value="Magical Petroglyphs">Magical Petroglyphs</option>
      <option value="Spiral Dancers">Spiral Dancers</option>
      <option value="Minoan Octopus">Minoan Octopus</option>
      </select>
      `)}

    </form>`
  this[id].submit();
}

// TEST - in second param object can have more keys
function post() { post_to_url('https://somedomain/', {'q':'a'}); }
</script>

The HTML does not appear in the page