Tips for building a form that allows for list submissions

Question

Tips for building a form that allows for list submissions

I am working on creating a form where users can input a list of 1-10 items. Subsequently, they will be prompted to provide an explanation (in a text box) for each item on the list. However, I am facing challenges in implementing this dynamically.

For a single question, I currently have:

<form id="myform">
    <input id="choice1" type="text" name="item1" placeholder="" />
    <input type="submit" name="submit" value="Next" />
</form>

If there were two items in the list:

<form id="myform">
    <input id="choice1" type="text" name="item1" placeholder="" />
    <input id="choice2" type="text" name="item2" placeholder="" />
    <input type="submit" name="submit" value="Next" />
</form>

The follow-up question would be:

<h3 class="fs-subtitle">Explain why {listChoice1} is included in your list</h3>
    <textarea id="explanation1" type="text" name="explanation1"></textarea>
    <input type="submit" name="submit" class="submit action-button next" value="Next" />

I am looking for a way to allow users to easily expand the list size as needed and dynamically generate follow-up questions for each item on the list. Any suggestions on how to achieve this seamlessly?

javascript jquery html css forms

Answer 1

Answer №1

Utilize a template and then apply cloneNode while keeping track of the index.

var indexForm = 1;
var submit = document.querySelector("input[name='submit']");

submit.addEventListener("click", function(e){
  // Start by adding explanation
  var div = document.querySelector("div.template");
  var title = div.children[1].cloneNode(true); // Remember to include textnode when copying!
  var textarea = div.children[2].cloneNode();
  
  // Update the values
  title.innerHTML = title.innerHTML.replace("{listChoice}", document.querySelector("#choice"+indexForm).value);
  textarea.id = "explanation" + indexForm;
  textarea.name = "explanation" + indexForm;
  
  // Add the explanation to the DOM
  // Select the input submit
  submit.parentNode.insertBefore(title, submit);
  submit.parentNode.insertBefore(textarea, submit);
  
  // Increment indexForm by 1
  indexForm++;
  // Add new input
  var newinput = div.children[0].cloneNode();
  newinput.id = "choice" + indexForm;
  newinput.name = "choice" + indexForm;
  submit.parentNode.insertBefore(newinput, submit);
  
  
  // Prevent form from getting executed
  e.preventDefault();
})

div.hidden {
 display: none;
}

<form id="myform">
    <input id="choice1" type="text" name="item1" placeholder="" />
    <input type="submit" name="submit" value="Next" />
</form>

<div class="template hidden">
<input id="choice_template" type="text" name="item" placeholder="" />
<h3 class="fs-subtitle">Explain why {listChoice} is on your list</h3>
    <textarea id="explanation_template" type="text" name="explanation"></textarea>
</div>

Answer 2

Utilize a template and then apply cloneNode while keeping track of the index.

var indexForm = 1;
var submit = document.querySelector("input[name='submit']");

submit.addEventListener("click", function(e){
  // Start by adding explanation
  var div = document.querySelector("div.template");
  var title = div.children[1].cloneNode(true); // Remember to include textnode when copying!
  var textarea = div.children[2].cloneNode();
  
  // Update the values
  title.innerHTML = title.innerHTML.replace("{listChoice}", document.querySelector("#choice"+indexForm).value);
  textarea.id = "explanation" + indexForm;
  textarea.name = "explanation" + indexForm;
  
  // Add the explanation to the DOM
  // Select the input submit
  submit.parentNode.insertBefore(title, submit);
  submit.parentNode.insertBefore(textarea, submit);
  
  // Increment indexForm by 1
  indexForm++;
  // Add new input
  var newinput = div.children[0].cloneNode();
  newinput.id = "choice" + indexForm;
  newinput.name = "choice" + indexForm;
  submit.parentNode.insertBefore(newinput, submit);
  
  
  // Prevent form from getting executed
  e.preventDefault();
})

div.hidden {
 display: none;
}

<form id="myform">
    <input id="choice1" type="text" name="item1" placeholder="" />
    <input type="submit" name="submit" value="Next" />
</form>

<div class="template hidden">
<input id="choice_template" type="text" name="item" placeholder="" />
<h3 class="fs-subtitle">Explain why {listChoice} is on your list</h3>
    <textarea id="explanation_template" type="text" name="explanation"></textarea>
</div>

Answer 3

Answer №2

Upon triggering the blur event on an input, you have the opportunity to verify if it contains a value. If it does, you can leverage jQuery's insertAfter function to dynamically append a textarea after the input, prompting for further details.

<form id="myform">
  <input type="text" name="item1" />
  <input type="submit" name="submit" value="Next" />
</form>

Achieve this behavior with just these 4 lines of jQuery:

$(function() {
  /* Listen for blur event on text input fields */
  $('body').on('blur', 'input[type="text"]', function(e){
    /* Check if next element is not a textarea and current input is not empty */
    if(!$(this).next().is('textarea') && $(this).val() != '') {
      /* Generate a textarea with a similar name attribute */
      var textarea = "<textarea name='textarea_"+$(this).attr('name')+"' placeholder='Explain why this is on your list'></textarea>";
      /* Insert the textarea after the current input */
      $( textarea ).insertAfter( this );
    }
  });
});

In addition to that, consider adding another text input for their subsequent list item using the following 6 lines of jQuery:

$(function() {
  /* Listen for blur event on text input fields */
  $('body').on('blur', 'input[type="text"]', function(e){
    /* Check if next element is not a textarea and current input is not empty */
    if(!$(this).next().is('textarea') && $(this).val() != '') {
      /* Generate a textarea with a somewhat analogous name */
      var textarea = "<textarea name='textarea_"+$(this).attr('name')+"' placeholder='Explain why this is on your list'></textarea>";
      /* Insert the textarea after the current input */
      $( textarea ).insertAfter( this );
      /* Create a new text input field */
      var newinput = "<input name='item"+(parseInt($(this).attr('name').substring(4))+1)+"' type='text' />";
      /* Insert the new input before the submit button */
      $( newinput ).insertBefore( $("input[type='submit']") );
    }
  });
});

For a working example and code snippet, refer to: https://codepen.io/anon/pen/OjmaxY/?editors=1010

This approach simplifies the form structure by utilizing only 1 form, minimizes the jQuery code to just 6 lines, and eliminates the need for CSS styling.

Answer 4

Upon triggering the blur event on an input, you have the opportunity to verify if it contains a value. If it does, you can leverage jQuery's insertAfter function to dynamically append a textarea after the input, prompting for further details.

<form id="myform">
  <input type="text" name="item1" />
  <input type="submit" name="submit" value="Next" />
</form>

Achieve this behavior with just these 4 lines of jQuery:

$(function() {
  /* Listen for blur event on text input fields */
  $('body').on('blur', 'input[type="text"]', function(e){
    /* Check if next element is not a textarea and current input is not empty */
    if(!$(this).next().is('textarea') && $(this).val() != '') {
      /* Generate a textarea with a similar name attribute */
      var textarea = "<textarea name='textarea_"+$(this).attr('name')+"' placeholder='Explain why this is on your list'></textarea>";
      /* Insert the textarea after the current input */
      $( textarea ).insertAfter( this );
    }
  });
});

In addition to that, consider adding another text input for their subsequent list item using the following 6 lines of jQuery:

$(function() {
  /* Listen for blur event on text input fields */
  $('body').on('blur', 'input[type="text"]', function(e){
    /* Check if next element is not a textarea and current input is not empty */
    if(!$(this).next().is('textarea') && $(this).val() != '') {
      /* Generate a textarea with a somewhat analogous name */
      var textarea = "<textarea name='textarea_"+$(this).attr('name')+"' placeholder='Explain why this is on your list'></textarea>";
      /* Insert the textarea after the current input */
      $( textarea ).insertAfter( this );
      /* Create a new text input field */
      var newinput = "<input name='item"+(parseInt($(this).attr('name').substring(4))+1)+"' type='text' />";
      /* Insert the new input before the submit button */
      $( newinput ).insertBefore( $("input[type='submit']") );
    }
  });
});

For a working example and code snippet, refer to: https://codepen.io/anon/pen/OjmaxY/?editors=1010

This approach simplifies the form structure by utilizing only 1 form, minimizes the jQuery code to just 6 lines, and eliminates the need for CSS styling.

Tips for building a form that allows for list submissions

Answer №1

Answer №2

Similar questions

Inconsistency in css asset URLs across various pages discovered while working with Rails

Updating class after refresh of ng-repeat in AngularJS/Javascript

The JQuery scroll function is not triggered right after a page refresh

The synchronization of template stamping with the connectedCallback function

Accessing the text content of the clicked element using vanilla JavaScript

Asynchronous binding within a dynamic form

Is it possible to retrieve an element styled inline, such as an input?

The terminal does not recognize the nodemon command

Images added with JavaScript are not displaying on the webpage

The local data storage function in chrome does not effectively store data as intended

Display or conceal various objects using a single button in HTML

Include an icon in the header of a jumbotron

In the world of React in Meteor, the command event.preventDefault() doesn't seem

Unable to load the header file as required

Stop users from swiping down on Lockscreen/Notification Center in a react-native app

Harnessing the power of jQuery ajax in conjunction with the versatile knockout.js mapping

Optimizing row performance for Angular grids in the Chrome browser

Utilizing Javascript within a PHP while loop to showcase map markers

Tips for extracting particular information from a website and displaying it within my application

"Exploring the New Features of Bootstrap 5: Button Collapse and