Add form field to template dynamically via javascript django

Question

I'd like to add a form field to the template when the user clicks on a button via javascript. I don't want to hide it and just make it appear, I need to insert it because it can be loaded into multiple parts. This is what I've tried but no luck.

document.getElementById("div_id").value = '{{ my_form.field|as_crispy_field }}';

p14z · Answer 1 · 2020-01-29T21:50:18.840

1

Here is an example:

// update element innerHTML with input field
function addField2(e) {
  e.preventDefault();
  var container = document.getElementById("field_2_container");
  var input = `
    <div class="some_class">
      <input type="text" name="field_2" id="id_field_2">
    </div>
  `;
  // append input field to the element
  container.innerHTML += input;
}

<form id="form">
  <div id="field_1_container">
    <input type="text" name="field_1" id="id_field_1">
  </div>
  <div id="field_2_container"></div>
  
  <div id="field_3_container"></div>
  
  <button onclick="addField2(event)">Add field 2</button>
</form>

edited Jan 29 '20 at 21:50

answered Jan 29 '20 at 20:39

p14z

1,760
1
11
17

Thanks for the response but in your example you are inserting the html yourself. I am trying to insert it from the form object: {{ my_form.field|as_crispy_field }} – Alberto Carmona Jan 29 '20 at 21:09
@AlbertoCarmona I haven't used crispy forms, does that render a multi-line html code? – p14z Jan 29 '20 at 21:17
You could try a JS multiline string: https://stackoverflow.com/a/805113 – p14z Jan 29 '20 at 21:42
@AlbertoCarmona I updated my answer to show it working. – p14z Jan 29 '20 at 21:52

Add form field to template dynamically via javascript django

1 Answers1